Fix grid styles

components/character/CharacterGrid/index.module.scss

@@ -1,4 +1,4 @@
-#CharacterGrid {
+.grid {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -8,9 +8,8 @@
   @include breakpoint(tablet) {
     align-items: center;
   }
-}
 
-#Characters {
+  .characters {
     display: grid;
     grid-template-columns: repeat(5, minmax(0, 1fr));
     gap: $unit-3x;
@@ -37,3 +36,4 @@
       margin: 0;
     }
   }
+}

components/character/CharacterGrid/index.tsx

@@ -515,7 +515,7 @@ const CharacterGrid = (props: Props) => {
         cancelAction={cancelAlert}
         cancelActionText={'Got it'}
       />
-      <div id="CharacterGrid">
+      <div className={styles.grid}>
         <JobSection
           job={job}
           jobSkills={jobSkills}
@@ -534,7 +534,7 @@ const CharacterGrid = (props: Props) => {
           resolveConflict={resolveConflict}
           resetConflict={resetConflict}
         />
-        <ul id="Characters">
+        <ul className={styles.characters}>
           {Array.from(Array(numCharacters)).map((x, i) => {
             return (
               <li key={`grid_unit_${i}`}>

components/summon/SummonGrid/index.module.scss

@@ -1,4 +1,4 @@
-#SummonGrid {
+.grid {
   display: grid;
   grid-template-columns: 1.17fr 2fr 1.17fr;
   gap: $unit-3x;
@@ -14,7 +14,7 @@
     gap: $unit;
   }
 
-  & .Label {
+  & .label {
     color: $grey-55;
     font-size: $font-tiny;
     font-weight: $medium;
@@ -25,13 +25,13 @@
     overflow: hidden;
 
     @include breakpoint(phone) {
-      &.Friend {
+      &.friend {
         max-width: 78px;
       }
     }
   }
 
-  #Summons {
+  .summons {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     grid-template-rows: repeat(2, minmax(0, 1fr));

components/summon/SummonGrid/index.tsx

@@ -16,6 +16,7 @@ import { appState } from '~utils/appState'
 import type { DetailsObject, SearchableObject } from '~types'
 
 import styles from './index.module.scss'
+import classNames from 'classnames'
 
 // Props
 interface Props {
@@ -379,7 +380,7 @@ const SummonGrid = (props: Props) => {
 
   const mainSummonElement = (
     <div className="LabeledUnit">
-      <div className="Label">{t('summons.main')}</div>
+      <div className={styles.label}>{t('summons.main')}</div>
       <SummonUnit
         gridSummon={grid.summons.mainSummon}
         editable={props.editable}
@@ -396,7 +397,14 @@ const SummonGrid = (props: Props) => {
 
   const friendSummonElement = (
     <div className="LabeledUnit">
-      <div className="Label Friend">{t('summons.friend')}</div>
+      <div
+        className={classNames({
+          [styles.label]: true,
+          [styles.friend]: true,
+        })}
+      >
+        {t('summons.friend')}
+      </div>
       <SummonUnit
         gridSummon={grid.summons.friendSummon}
         editable={props.editable}
@@ -412,9 +420,9 @@ const SummonGrid = (props: Props) => {
   )
 
   const summonGridElement = (
-    <div id="LabeledGrid">
+    <section>
-      <div className="Label">{t('summons.summons')}</div>
+      <div className={styles.label}>{t('summons.summons')}</div>
-      <ul id="Summons">
+      <ul className={styles.summons}>
         {Array.from(Array(numSummons)).map((x, i) => {
           return (
             <li key={`grid_unit_${i}`}>
@@ -432,7 +440,7 @@ const SummonGrid = (props: Props) => {
           )
         })}
       </ul>
-    </div>
+    </section>
   )
 
   const subAuraSummonElement = (
@@ -449,8 +457,8 @@ const SummonGrid = (props: Props) => {
   )
 
   return (
-    <div>
+    <div className={styles.wrapper}>
-      <div id="SummonGrid">
+      <div className={styles.grid}>
         {mainSummonElement}
         {summonGridElement}
         {friendSummonElement}

components/weapon/WeaponGrid/index.module.scss

@@ -1,4 +1,4 @@
-#WeaponGrid {
+.wrapper {
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -8,7 +8,7 @@
     margin: 0 2px;
   }
 
-  #MainGrid {
+  .grid {
     display: grid;
     gap: $unit-3x;
     grid-template-columns: 1.278fr 3fr;
@@ -23,9 +23,8 @@
     @include breakpoint(phone) {
       gap: $unit;
     }
-  }
 
-  #Weapons {
+    .weapons {
       display: grid; /* make the right-images container a grid */
       grid-template-columns: repeat(
         3,
@@ -45,8 +44,5 @@
         gap: $unit;
       }
     }
-
-  li:not(.Empty) {
-    // aspect-ratio: 1 / 1.035;
   }
 }

components/weapon/WeaponGrid/index.tsx

@@ -443,13 +443,13 @@ const WeaponGrid = (props: Props) => {
   }
 
   return (
-    <div id="WeaponGrid">
+    <div className={styles.wrapper}>
       {conflicts ? conflictModal() : ''}
       {incompatibleAlert()}
       {errorAlert()}
-      <div id="MainGrid">
+      <div className={styles.grid}>
         {mainhandElement}
-        <ul id="Weapons">{weaponGridElement}</ul>
+        <ul className={styles.weapons}>{weaponGridElement}</ul>
       </div>
 
       {displayExtraContainer ? extraElement() : ''}