Fix ExtraSummons and rename to ExtraSummonsGrid

components/extra/ExtraSummonsGrid/index.module.scss

@@ -1,4 +1,4 @@
-.ExtraGrid.Summons {
+.container {
   background: var(--subaura-orange-bg);
   border-radius: $input-corner;
   box-sizing: border-box;
@@ -30,7 +30,7 @@
     }
   }
 
-  & > span {
+  h3 {
     color: var(--subaura-orange-text);
     display: flex;
     align-items: center;
@@ -40,7 +40,7 @@
     text-align: center;
   }
 
-  #ExtraSummons {
+  .grid {
     display: grid;
     gap: $unit-3x;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -63,14 +63,6 @@
     }
   }
 
-  .SummonUnit .SummonImage {
-    background: var(--subaura-orange-card-bg);
-  }
-
-  .SummonUnit .SummonImage .icon svg {
-    fill: var(--subaura-orange-secondary);
-  }
-
   .SummonUnit .QuickSummon {
     display: none;
   }

components/extra/ExtraSummonsGrid/index.tsx

@@ -17,15 +17,15 @@ interface Props {
   updateTranscendence: (id: string, position: number, stage: number) => void
 }
 
-const ExtraSummons = (props: Props) => {
+const ExtraSummonsGrid = (props: Props) => {
   const numSummons: number = 2
 
   const { t } = useTranslation('common')
 
   return (
-    <div className="ExtraGrid Summons">
-      <span>{t('summons.subaura')}</span>
-      <ul id="ExtraSummons">
+    <div className={styles.container}>
+      <h3>{t('summons.subaura')}</h3>
+      <ul className={styles.grid}>
         {Array.from(Array(numSummons)).map((x, i) => {
           return (
             <li key={`grid_unit_${i}`}>
@@ -47,4 +47,4 @@ const ExtraSummons = (props: Props) => {
   )
 }
 
-export default ExtraSummons
+export default ExtraSummonsGrid