From d3da38b6c423fb6131b2c7393243f8e75529ea70 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 3 Feb 2022 00:15:42 -0800
Subject: [PATCH] Small refactoring

---
 components/CharacterGrid/index.scss |  2 +-
 components/CharacterGrid/index.tsx  |  2 +-
 components/ExtraSummons/index.scss  | 17 ++++++++++++++++
 components/SummonGrid/index.scss    | 30 +++++++++++------------------
 components/SummonGrid/index.tsx     |  2 +-
 5 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/components/CharacterGrid/index.scss b/components/CharacterGrid/index.scss
index e83c3cfa..79725c38 100644
--- a/components/CharacterGrid/index.scss
+++ b/components/CharacterGrid/index.scss
@@ -1,4 +1,4 @@
-.CharacterGrid {
+#CharacterGrid {
     display: flex;
     justify-content: center;
 }
diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx
index af78ed7e..df55fe71 100644
--- a/components/CharacterGrid/index.tsx
+++ b/components/CharacterGrid/index.tsx
@@ -194,7 +194,7 @@ const CharacterGrid = (props: Props) => {
 
     // Render: JSX components
     return (
-        <div className="CharacterGrid">
+        <div id="CharacterGrid">
             <ul id="grid_characters">
                 {Array.from(Array(numCharacters)).map((x, i) => {
                     return (
diff --git a/components/ExtraSummons/index.scss b/components/ExtraSummons/index.scss
index 9ff4fd60..ac570251 100644
--- a/components/ExtraSummons/index.scss
+++ b/components/ExtraSummons/index.scss
@@ -28,6 +28,23 @@
         width: 387px;
     }
 
+    #grid_summons {
+        display: grid;
+        grid-template-columns: auto auto;
+        grid-column-gap: $unit * 2;
+        grid-template-rows: 1fr;
+        grid-row-gap: $unit * 3;
+
+        & > li {
+            list-style: none;
+            min-height: 0;
+
+            .SummonUnit {
+                min-height: 0;
+            }
+        }
+    }
+
     .SummonUnit .SummonImage {
         background: #facea7;
     }
diff --git a/components/SummonGrid/index.scss b/components/SummonGrid/index.scss
index 91ae1f18..e1c478aa 100644
--- a/components/SummonGrid/index.scss
+++ b/components/SummonGrid/index.scss
@@ -1,4 +1,4 @@
-.SummonGrid {
+#SummonGrid {
     display: grid;
     grid-template-columns: auto auto auto;
     grid-column-gap: $unit * 2;
@@ -11,24 +11,16 @@
         margin-bottom: $unit;
         text-align: center;
     }
-}
 
-#grid_summons {
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-column-gap: $unit * 2;
-    grid-template-rows: 1fr;
-    grid-row-gap: $unit * 3;
-}
+    #grid_summons {
+        display: grid;
+        grid-template-columns: auto auto;
+        grid-column-gap: $unit * 2;
+        grid-template-rows: 1fr;
+        grid-row-gap: $unit * 3;
 
-#grid_summons > li {
-    list-style: none;
-}
-
-#ExtraSummons #grid_summons > li {
-    min-height: 0;
-
-    .SummonUnit {
-        min-height: 0;
+        & > li {
+            list-style: none;
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx
index 476a6292..baf16dd9 100644
--- a/components/SummonGrid/index.tsx
+++ b/components/SummonGrid/index.tsx
@@ -265,7 +265,7 @@ const SummonGrid = (props: Props) => {
     )
     return (
         <div>
-            <div className="SummonGrid">
+            <div id="SummonGrid">
                 { mainSummonElement }
                 { friendSummonElement }
                 { summonGridElement }