Add full auto tag to GridRep

components/GridRep/index.scss

@@ -117,24 +117,25 @@
     .bottom {
       display: flex;
       flex-direction: row;
+      color: $grey-55;
+      font-size: $font-small;
 
       a.user:hover {
         color: var(--link-text-hover);
       }
     }
 
-    .raid,
-    .user,
-    time {
-      color: $grey-55;
-      font-size: $font-small;
-    }
-
-    .raid,
+    .Properties,
     .user {
       flex-grow: 1;
     }
 
+    .Properties {
+      .full_auto {
+        color: var(--full-auto-text);
+      }
+    }
+
     .raid {
       margin-bottom: calc($unit / 2);
     }

components/GridRep/index.tsx

@@ -22,6 +22,7 @@ interface Props {
   raid: Raid
   grid: GridWeapon[]
   user?: User
+  fullAuto: boolean
   favorited: boolean
   createdAt: Date
   displayUser?: boolean | false
@@ -161,8 +162,17 @@ const GridRep = (props: Props) => {
     <div className="Details">
       <h2 className={titleClass}>{props.name ? props.name : t('no_title')}</h2>
       <div className="bottom">
-        <div className={raidClass}>
-          {props.raid ? props.raid.name[locale] : t('no_raid')}
+        <div className="Properties">
+          <span className={raidClass}>
+            {props.raid ? props.raid.name[locale] : t('no_raid')}
+          </span>
+          {props.fullAuto ? (
+            <span className="full_auto">
+              {` · ${t('party.details.labels.full_auto')}`}
+            </span>
+          ) : (
+            ''
+          )}
         </div>
         <time className="last-updated" dateTime={props.createdAt.toISOString()}>
           {formatTimeAgo(props.createdAt, locale)}

pages/[username].tsx

@@ -236,6 +236,7 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
           raid={party.raid}
           grid={party.weapons}
           favorited={party.favorited}
+          fullAuto={party.full_auto}
           key={`party-${i}`}
           onClick={goTo}
         />

pages/saved.tsx

@@ -276,6 +276,7 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
           grid={party.weapons}
           user={party.user}
           favorited={party.favorited}
+          fullAuto={party.full_auto}
           key={`party-${i}`}
           displayUser={true}
           onClick={goTo}

pages/teams.tsx

@@ -275,6 +275,7 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
           grid={party.weapons}
           user={party.user}
           favorited={party.favorited}
+          fullAuto={party.full_auto}
           key={`party-${i}`}
           displayUser={true}
           onClick={goTo}

styles/themes.scss

@@ -9,6 +9,8 @@
 
   --link-text-hover: #{$text--link--hover--light};
 
+  --full-auto-text: #{$text--full--auto--light};
+
   // Light - Menus
   --dialog-bg: #{$dialog--bg--light};
 
@@ -129,6 +131,8 @@
 
   --link-text-hover: #{$text--link--hover--dark};
 
+  --full-auto-text: #{$text--full--auto--dark};
+
   // Dark - Dialogs
   --dialog-bg: #{$dialog--bg--dark};
 

styles/variables.scss

@@ -118,6 +118,9 @@ $dark-bg-00: #d565fb55;
 $dark-bg-10: #d565fb;
 $dark-bg-20: #f2cdff;
 
+$yellow-text-10: #a39200;
+$yellow-text-20: #ffed4c;
+
 $page--bg--light: $grey-90;
 $page--bg--dark: $grey-15;
 
@@ -258,6 +261,9 @@ $text--tertiary--hover--dark: $grey-70;
 $text--link--hover--light: $grey-40;
 $text--link--hover--dark: $grey-100;
 
+$text--full--auto--light: $yellow-text-10;
+$text--full--auto--dark: $yellow-text-20;
+
 // Color Definitions: Icon
 $icon--secondary--color--light: $grey-70;
 $icon--secondary--color--dark: $grey-50;