Added Sub Aura slots

src/components/ExtraSummons/index.scss

@@ -0,0 +1,32 @@
+#ExtraSummons {
+    background: #FFEBD9;
+    border-radius: 8px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    margin: 20px auto;
+    max-width: 727px;
+    padding: 16px 16px 16px 0;
+    position: relative;
+    left: 9px;
+
+    & > span {
+        color: #825B39;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1.2;
+        font-weight: 500;
+        margin-right: 16px;
+        text-align: center;
+        width: 387px;
+    }
+
+    .SummonUnit .SummonImage {
+        background: #D5D3F6;
+    }
+
+    .WeaponUnit .WeaponImage .icon svg {
+        fill: #8F8AC6;
+    }
+}

src/components/ExtraSummons/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import SummonUnit from '~components/SummonUnit'
+import './index.scss'
+
+// GridType
+export enum GridType {
+    Class,
+    Character,
+    Weapon,
+    Summon
+}
+
+// Props
+interface Props {
+    grid: GridArray<Summon>
+    editable: boolean
+    exists: boolean
+    found?: boolean
+    onSelect: (type: GridType, summon: Summon, position: number) => void
+}
+
+const ExtraSummons = (props: Props) => {
+    const numSummons: number = 2
+
+    function receiveWeapon(summon: Summon, position: number) {
+        props.onSelect(GridType.Summon, summon, position)
+    }
+
+    return (
+        <div id="ExtraSummons">
+            <span>Sub Aura Summons</span>
+            <ul id="grid_summons">
+                {
+                    Array.from(Array(numSummons)).map((x, i) => {
+                        return (
+                            <li key={`grid_unit_${i}`} >
+                                <SummonUnit 
+                                    editable={props.editable}
+                                    onReceiveData={receiveWeapon} 
+                                    position={i} 
+                                    unitType={1}
+                                    summon={props.grid[i]}
+                                />
+                            </li>
+                        )
+                    })
+                }
+            </ul>
+        </div>
+    )
+}
+
+export default ExtraSummons

src/components/SummonGrid/index.scss

@@ -1,27 +1,27 @@
 .SummonGrid {
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-column-gap: $unit * 2;
     justify-content: center;
+
+    & .Label {
+        color: $grey-50;
+        font-size: 12px;
+        font-weight: $medium;
+        margin-bottom: $unit;
+        text-align: center;
+    }
 }
 
 #grid_summons {
-    display: flex;
+    display: grid;
-    flex-direction: row;
+    grid-template-columns: auto auto;
-    flex-wrap: wrap;
+    grid-column-gap: $unit * 2;
-    margin: 0 24px 0 0;
+    grid-template-rows: 1fr;
-    padding: 0;
+    grid-row-gap: $unit * 3;
-    width: 344px;
-}
-
-#grid_summons > * {
-    margin-bottom: 24px;
-    margin-right: 24px;
-
-}
-
-#grid_summons > *:nth-child(2n+2) {
-    margin-right: 0;
 }
 
 #grid_summons > li {
     list-style: none;
+    min-height: 180px;
 }

src/components/SummonGrid/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import ExtraSummons from '~components/ExtraSummons'
 import SummonUnit from '~components/SummonUnit'
 
 import './index.scss'
@@ -32,7 +33,10 @@ const SummonGrid = (props: Props) => {
     }
 
     return (
+        <div>
             <div className="SummonGrid">
+                <div className="LabeledUnit">
+                    <div className="Label">Main Summon</div>
                     <SummonUnit
                         editable={props.editable}
                         key="grid_main_summon"
@@ -41,7 +45,22 @@ const SummonGrid = (props: Props) => {
                         unitType={0}
                         summon={props.main}
                     />
+                </div>
 
+                <div className="LabeledUnit">
+                    <div className="Label">Friend Summon</div>
+                    <SummonUnit
+                        editable={props.editable}
+                        key="grid_friend_summon"
+                        onReceiveData={receiveSummon}
+                        position={4}
+                        unitType={2}
+                        summon={props.friend}
+                    />
+                </div>
+
+                <div id="LabeledGrid">
+                    <div className="Label">Summons</div>
                     <ul id="grid_summons">
                         {
                             Array.from(Array(numSummons)).map((x, i) => {
@@ -59,14 +78,18 @@ const SummonGrid = (props: Props) => {
                             })
                         }
                     </ul>
+                </div>
+            </div>
             
-            <SummonUnit
+            <ExtraSummons 
-                editable={props.editable}
+                grid={props.grid} 
-                key="grid_friend_summon"
+                editable={false} 
-                onReceiveData={receiveSummon}
+                exists={false} 
-                position={4}
+                onSelect={
-                unitType={2}
+                    function (type: GridType, summon: Summon, position: number): void {
-                summon={props.friend}
+                        throw new Error('Function not implemented.')
+                    } 
+                } 
             />
         </div>
     )

src/components/SummonUnit/index.scss

@@ -64,29 +64,24 @@
 }
 
 /* Mainhand */
-.SummonUnit.main,
-.SummonUnit.friend {
-    margin-right: 24px;
-    max-width: 200px;
-}
-
 .SummonUnit.friend {
     margin-right: 0;
 }
 
 .SummonUnit.main .SummonImage,
 .SummonUnit.friend .SummonImage {
-    height: 374px;
+    height: 315px;
-    width: 180px;
+    width: 182px;
 }
 
 /* Grid */
 .SummonUnit.grid {
-    max-width: 160px;
+    max-width: 148px;
+    min-height: 141px;
 }
 
 .SummonUnit.grid .SummonImage {
     list-style-type: none;
-    height: 92px;
+    height: 111px;
-    width: 160px;
+    width: 148px;
 }