Fix grid rep styles

components/GridRep/index.module.scss

@@ -1,4 +1,4 @@
-.GridRep {
+.gridRep {
   aspect-ratio: 3/2;
   border-radius: $card-corner;
   box-sizing: border-box;
@@ -34,25 +34,25 @@
     }
   }
 
-  & > .Grid {
+  & > .weaponGrid {
     aspect-ratio: 2/0.95;
     display: grid;
     grid-template-columns: 1fr 3.36fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
     grid-gap: $unit; /* add a gap of 8px between grid items */
 
-    .Weapon {
+    .weapon {
       background: var(--card-bg);
       border-radius: 4px;
     }
 
-    .Mainhand.Weapon {
+    .mainhand.weapon {
       aspect-ratio: 73/153;
       display: grid;
       grid-column: 1 / 2; /* spans one column */
       max-height: 140px;
     }
 
-    .GridWeapons {
+    .weapons {
       display: grid; /* make the right-images container a grid */
       grid-template-columns: repeat(
         3,
@@ -67,19 +67,19 @@
       // row-gap: $unit-2x;
     }
 
-    .Grid.Weapon {
+    .grid.weapon {
       aspect-ratio: 280 / 160;
       display: grid;
     }
 
-    .Mainhand.Weapon img[src*='jpg'],
+    .mainhand.weapon img[src*='jpg'],
-    .Grid.Weapon img[src*='jpg'] {
+    .grid.weapon img[src*='jpg'] {
       border-radius: 4px;
       width: 100%;
     }
   }
 
-  .Details {
+  .details {
     display: flex;
     flex-direction: column;
     gap: calc($unit / 2);
@@ -126,7 +126,7 @@
       }
     }
 
-    .Properties,
+    .properties,
     .user {
       flex-grow: 1;
     }
@@ -138,7 +138,7 @@
       font-size: $font-small;
     }
 
-    .Properties {
+    .properties {
       .auto {
         display: inline-flex;
         gap: $unit-half;
@@ -146,11 +146,11 @@
         margin-left: $unit-half;
       }
 
-      .full_auto {
+      .fullAuto {
         color: var(--full-auto-label-text);
       }
 
-      .auto_guard {
+      .autoGuard {
         width: 12px;
         height: 12px;
 

components/GridRep/index.tsx

@@ -50,13 +50,23 @@ const GridRep = (props: Props) => {
   })
 
   const raidClass = classNames({
-    raid: true,
+    [styles.raid]: true,
-    empty: !props.raid,
+    [styles.empty]: !props.raid,
   })
 
   const userClass = classNames({
-    user: true,
+    [styles.user]: true,
-    empty: !props.user,
+    [styles.empty]: !props.user,
+  })
+
+  const mainhandClasses = classNames({
+    [styles.weapon]: true,
+    [styles.mainhand]: true,
+  })
+
+  const weaponClasses = classNames({
+    [styles.weapon]: true,
+    [styles.grid]: true,
   })
 
   useEffect(() => {
@@ -210,18 +220,18 @@ const GridRep = (props: Props) => {
   )
 
   const detailsWithUsername = (
-    <div className="Details">
+    <div className={styles.details}>
-      <div className="top">
+      <div className={styles.top}>
-        <div className="info">
+        <div className={styles.info}>
           <h2 className={titleClass}>
             {props.name ? props.name : t('no_title')}
           </h2>
-          <div className="Properties">
+          <div className={styles.properties}>
             <span className={raidClass}>
               {props.raid ? props.raid.name[locale] : t('no_raid')}
             </span>
             {props.fullAuto ? (
-              <span className="full_auto">
+              <span className={styles.fullAuto}>
                 {` · ${t('party.details.labels.full_auto')}`}
               </span>
             ) : (
@@ -246,7 +256,7 @@ const GridRep = (props: Props) => {
           ''
         )}
       </div>
-      <div className="bottom">
+      <div className={styles.bottom}>
         {props.user ? linkedAttribution() : unlinkedAttribution()}
 
         <time className="last-updated" dateTime={props.createdAt.toISOString()}>
@@ -258,15 +268,15 @@ const GridRep = (props: Props) => {
 
   return (
     <Link href={`/p/${props.shortcode}`}>
-      <a className="GridRep">
+      <a className={styles.gridRep}>
         {props.displayUser ? detailsWithUsername : details}
-        <div className="Grid">
+        <div className={styles.weaponGrid}>
-          <div className="Mainhand Weapon">{generateMainhandImage()}</div>
+          <div className={mainhandClasses}>{generateMainhandImage()}</div>
 
-          <ul className="GridWeapons">
+          <ul className={styles.weapons}>
             {Array.from(Array(numWeapons)).map((x, i) => {
               return (
-                <li key={`${props.shortcode}-${i}`} className="Grid Weapon">
+                <li key={`${props.shortcode}-${i}`} className={weaponClasses}>
                   {generateGridImage(i)}
                 </li>
               )

components/GridRepCollection/index.module.scss

@@ -1,4 +1,4 @@
-.GridRepCollection {
+.collection {
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

components/GridRepCollection/index.tsx

@@ -1,6 +1,4 @@
-import classNames from 'classnames'
 import React from 'react'
-
 import styles from './index.module.scss'
 
 interface Props {
@@ -8,11 +6,7 @@ interface Props {
 }
 
 const GridRepCollection = (props: Props) => {
-  const classes = classNames({
+  return <div className={styles.collection}>{props.children}</div>
-    GridRepCollection: true,
-  })
-
-  return <div className={classes}>{props.children}</div>
 }
 
 export default GridRepCollection