Update GridRep

components/GridRep/index.module.scss

@@ -1,5 +1,6 @@
 .gridRep {
   aspect-ratio: 3/2;
+  border: 1px solid transparent;
   border-radius: $card-corner;
   box-sizing: border-box;
   display: grid;
@@ -11,6 +12,7 @@
 
   &:hover {
     background: var(--grid-rep-hover);
+    border: 1px solid rgba(0, 0, 0, 0.1);
 
     a {
       text-decoration: none;
@@ -82,11 +84,12 @@
   .details {
     display: flex;
     flex-direction: column;
-    gap: calc($unit / 2);
+    gap: $unit;
 
     h2 {
       color: var(--text-primary);
       font-size: $font-regular;
+      font-weight: $bold;
       overflow: hidden;
       padding-bottom: 1px;
       text-overflow: ellipsis;
@@ -117,16 +120,21 @@
       }
     }
 
+    .attributed,
     .bottom {
       display: flex;
-      flex-direction: row;
+      gap: $unit-half;
+      justify-content: space-between;
 
       a.user:hover {
         color: var(--link-text-hover);
       }
     }
 
-    .properties,
+    .bottom {
+      flex-direction: column;
+    }
+
     .user {
       flex-grow: 1;
     }
@@ -134,23 +142,44 @@
     .user,
     .raid,
     time {
-      color: $grey-55;
+      color: var(--text-tertiary);
       font-size: $font-small;
     }
 
+    time {
+      white-space: nowrap;
+    }
+
     .properties {
+      display: flex;
+      font-size: $font-small;
+      gap: $unit-half;
+
+      .raid {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
       .auto {
+        flex: 1;
         display: inline-flex;
         gap: $unit-half;
         flex-direction: row;
-        margin-left: $unit-half;
+        flex-wrap: nowrap;
       }
 
       .fullAuto {
         color: var(--full-auto-label-text);
+        white-space: nowrap;
+      }
+
+      .extra {
+        color: var(--extra-purple-light-text);
+        white-space: nowrap;
       }
 
       .autoGuard {
+        display: inline-block;
         width: 12px;
         height: 12px;
 
@@ -162,7 +191,6 @@
 
     .raid {
       color: var(--text-primary);
-      margin-bottom: calc($unit / 2);
 
       &.empty {
         color: var(--text-tertiary);

components/GridRep/index.tsx

@@ -26,7 +26,6 @@ interface Props {
   autoGuard: boolean
   favorited: boolean
   createdAt: Date
-  displayUser?: boolean | false
   onClick: (shortcode: string) => void
   onSave?: (partyId: string, favorited: boolean) => void
 }
@@ -184,40 +183,24 @@ const GridRep = (props: Props) => {
 
   function fullAutoString() {
     const fullAutoElement = (
-      <span className="full_auto">
+      <span className={styles.fullAuto}>
         {` · ${t('party.details.labels.full_auto')}`}
       </span>
     )
 
     const autoGuardElement = (
-      <span className="auto_guard">
+      <span className={styles.autoGuard}>
         <ShieldIcon />
       </span>
     )
 
     return (
-      <div className="auto">
+      <div className={styles.auto}>
         {fullAutoElement}
         {props.autoGuard ? autoGuardElement : ''}
       </div>
     )
   }
-  const details = (
-    <div className="Details">
-      <h2 className={titleClass}>{props.name ? props.name : t('no_title')}</h2>
-      <div className="bottom">
-        <div className="Properties">
-          <span className={raidClass}>
-            {props.raid ? props.raid.name[locale] : t('no_raid')}
-          </span>
-          {props.fullAuto ? fullAutoString() : ''}
-        </div>
-        <time className="last-updated" dateTime={props.createdAt.toISOString()}>
-          {formatTimeAgo(props.createdAt, locale)}
-        </time>
-      </div>
-    </div>
-  )
 
   const detailsWithUsername = (
     <div className={styles.details}>
@@ -230,12 +213,13 @@ const GridRep = (props: Props) => {
             <span className={raidClass}>
               {props.raid ? props.raid.name[locale] : t('no_raid')}
             </span>
-            {props.fullAuto ? (
+            {props.fullAuto && (
               <span className={styles.fullAuto}>
                 {` · ${t('party.details.labels.full_auto')}`}
               </span>
-            ) : (
-              ''
+            )}
+            {props.raid && props.raid.group.extra && (
+              <span className={styles.extra}>{` · EX`}</span>
             )}
           </div>
         </div>
@@ -259,10 +243,13 @@ const GridRep = (props: Props) => {
           ''
         )}
       </div>
-      <div className={styles.bottom}>
+      <div className={styles.attributed}>
         {props.user ? linkedAttribution() : unlinkedAttribution()}
 
-        <time className="last-updated" dateTime={props.createdAt.toISOString()}>
+        <time
+          className={styles.lastUpdated}
+          dateTime={props.createdAt.toISOString()}
+        >
           {formatTimeAgo(props.createdAt, locale)}
         </time>
       </div>
@@ -272,7 +259,7 @@ const GridRep = (props: Props) => {
   return (
     <Link href={`/p/${props.shortcode}`}>
       <a className={styles.gridRep}>
-        {props.displayUser ? detailsWithUsername : details}
+        {detailsWithUsername}
         <div className={styles.weaponGrid}>
           <div className={mainhandClasses}>{generateMainhandImage()}</div>