Fix styling for GridReps and add new information

components/GridRep/index.scss

@@ -1,54 +1,82 @@
 .GridRep {
-    border: 2px solid transparent;
     border-radius: 6px;
     display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-    margin: 0 8px 8px 0;
-    padding: 4px;
-    height: 148px;
-    width: 311px;
-}
+    flex-direction: column;
+    gap: $unit;
+    padding: $unit * 2;
 
-.GridRep:hover {
-    border: 2px solid #2360C5;
-    cursor: pointer;
-}
+    &:hover {
+        background: white;
+        cursor: pointer;
 
-.GridRep .weapon {
-    background: white;
-    border-radius: 4px;
-}
+        .Grid .grid_weapons .grid_weapon {
+            box-shadow: inset 0 0 1px $grey-70;
+        }
+    }
 
-.GridRep .grid_mainhand {
-    flex-shrink: 0;
-    height: 136px;
-    width: 65px;
-    margin-right: 8px;
-}
+    .Grid {
+        display: flex;
+        flex-direction: row;
+        flex-shrink: 0;
 
-.GridRep .grid_weapons {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
+        .grid_mainhand {
+            margin-right: $unit;
+            height: 139px;
+            width: auto;
+        }
 
-.GridRep .grid_weapon {
-    background: white;
-    border-radius: 4px;
-    float: left;
-    margin: 0 8px 8px 0;
-    height: 40px;
-    width: 70px;
-}
+        .grid_weapons {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-template-rows: 1fr 1fr 1fr;
+            gap: $unit;
+            margin: 0;
+            padding: 0;
+            width: fit-content;
+        }
 
-.GridRep .grid_weapon:nth-child(3n+3) {
-    margin-right: 0;
-}
+        .grid_weapon {
+            background: white;
+            border-radius: 4px;
+            float: left;
+            height: 40px;
+            width: 70px;
+        }
+        
+        .grid_mainhand img[src*="jpg"],
+        .grid_weapon img[src*="jpg"] {
+            border-radius: 4px;
+            width: 100%;
+            height: 100%;
+        }
+    }
 
-.GridRep .grid_mainhand img[src*="jpg"],
-.GridRep .grid_weapon img[src*="jpg"] {
-    border-radius: 4px;
-    width: 100%;
-    height: 100%;
-}
+    .Details {
+        display: flex;
+        flex-direction: column;
+        gap: $unit / 2;
+
+        h2 {
+            color: $grey-00;
+            font-size: $font-regular;
+
+            &.empty {
+                color: $grey-50;
+            }
+        }
+
+        .bottom {
+            display: flex;
+            flex-direction: row;
+        }
+
+        .raid, time {
+            color: $grey-50;
+            font-size: $font-small;
+        }
+
+        .raid {
+            flex-grow: 1;
+        }
+    }
+}

components/GridRep/index.tsx

@@ -1,19 +1,37 @@
+
 import React, { useEffect, useState } from 'react'
+import classNames from 'classnames'
+
+import { formatTimeAgo } from '~utils/timeAgo'
 
 import './index.scss'
 
 interface Props {
     shortcode: string
+    name: string
+    raid: Raid
     grid: GridWeapon[]
+    updatedAt: Date
     onClick: (shortcode: string) => void
 }
 
 const GridRep = (props: Props) => {
+
+    console.log(props)
     const numWeapons: number = 9
 
     const [mainhand, setMainhand] = useState<Weapon>()
     const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
 
+    const titleClass = classNames({
+        'empty': !props.name
+    })
+
+    const raidClass = classNames({
+        'raid': true,
+        'empty': !props.raid
+    })
+
     useEffect(() => {
         const newWeapons = Array(numWeapons)
 
@@ -43,21 +61,31 @@ const GridRep = (props: Props) => {
 
     return (
         <div className="GridRep" onClick={navigate}>
-            <div className="weapon grid_mainhand">
-                {generateMainhandImage()}
+            <div className="Details">
+                <h2 className={titleClass}>{ (props.name) ? props.name : 'Untitled' }</h2>
+                <div className="bottom">
+                    <div className={raidClass}>{ (props.raid) ? props.raid.name.en : 'No raid set' }</div>
+                    <time className="last-updated" dateTime={props.updatedAt.toISOString()}>{formatTimeAgo(props.updatedAt, 'en-us')}</time>
+                </div>
             </div>
 
-            <ul className="grid_weapons">
-                {
-                    Array.from(Array(numWeapons)).map((x, i) => {
-                        return (
-                            <li key={`${props.shortcode}-${i}`} className="grid_weapon">
-                                {generateGridImage(i)}
-                            </li>
-                        )
-                    })
-                }
-            </ul>
+            <div className="Grid">
+                <div className="weapon grid_mainhand">
+                    {generateMainhandImage()}
+                </div>
+
+                <ul className="grid_weapons">
+                    {
+                        Array.from(Array(numWeapons)).map((x, i) => {
+                            return (
+                                <li key={`${props.shortcode}-${i}`} className="grid_weapon">
+                                    {generateGridImage(i)}
+                                </li>
+                            )
+                        })
+                    }
+                </ul>
+            </div>
         </div>
     )
 }

components/GridRepCollection/index.scss

@@ -1,6 +1,7 @@
 .GridRepCollection {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    display: grid;
+    grid-template-columns: auto auto auto;
+    margin: 0 auto;
     padding: 0;
+    width: fit-content;
 }