Fix grid styles

components/character/CharacterGrid/index.module.scss

@@ -1,4 +1,4 @@
-#CharacterGrid {
+.grid {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -8,32 +8,32 @@
   @include breakpoint(tablet) {
     align-items: center;
   }
-}
 
-#Characters {
+  .characters {
-  display: grid;
+    display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+    grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: $unit-3x;
+    gap: $unit-3x;
-  margin: 0;
-  padding: 0;
-  max-width: $grid-width;
-  isolation: isolate;
-
-  @include breakpoint(tablet) {
-    gap: $unit-2x;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  // prettier-ignore
-  @media only screen 
-    and (max-width: 500px) 
-    and (max-height: 920px) 
-    and (-webkit-min-device-pixel-ratio: 2) {
-      gap: $unit;
-  }
-
-  & > li:last-child {
     margin: 0;
+    padding: 0;
+    max-width: $grid-width;
+    isolation: isolate;
+
+    @include breakpoint(tablet) {
+      gap: $unit-2x;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    // prettier-ignore
+    @media only screen 
+      and (max-width: 500px) 
+      and (max-height: 920px) 
+      and (-webkit-min-device-pixel-ratio: 2) {
+        gap: $unit;
+    }
+
+    & > li:last-child {
+      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,30 +23,26 @@
     @include breakpoint(phone) {
       gap: $unit;
     }
-  }
 
-  #Weapons {
+    .weapons {
-    display: grid; /* make the right-images container a grid */
+      display: grid; /* make the right-images container a grid */
-    grid-template-columns: repeat(
+      grid-template-columns: repeat(
-      3,
+        3,
-      minmax(0, 1fr)
+        minmax(0, 1fr)
-    ); /* create 3 columns, each taking up 1 fraction */
+      ); /* create 3 columns, each taking up 1 fraction */
-    grid-template-rows: repeat(
+      grid-template-rows: repeat(
-      3,
+        3,
-      1fr
+        1fr
-    ); /* create 3 rows, each taking up 1 fraction */
+      ); /* create 3 rows, each taking up 1 fraction */
-    gap: $unit-3x;
+      gap: $unit-3x;
 
-    @include breakpoint(tablet) {
+      @include breakpoint(tablet) {
-      gap: $unit-2x;
+        gap: $unit-2x;
+      }
+
+      @include breakpoint(phone) {
+        gap: $unit;
+      }
     }
-
-    @include breakpoint(phone) {
-      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() : ''}