Add auto guard icon to GridRep

components/GridRep/index.scss

@@ -139,9 +139,25 @@
     }
 
     .Properties {
+      .auto {
+        display: inline-flex;
+        gap: $unit-half;
+        flex-direction: row;
+        margin-left: $unit-half;
+      }
+
       .full_auto {
         color: var(--full-auto-label-text);
       }
+
+      .auto_guard {
+        width: 12px;
+        height: 12px;
+
+        svg {
+          fill: var(--full-auto-label-text);
+        }
+      }
     }
 
     .raid {

components/GridRep/index.tsx

@@ -12,7 +12,7 @@ import { formatTimeAgo } from '~utils/timeAgo'
 import Button from '~components/Button'
 
 import SaveIcon from '~public/icons/Save.svg'
-
+import ShieldIcon from '~public/icons/Shield.svg'
 import './index.scss'
 
 interface Props {
@@ -23,6 +23,7 @@ interface Props {
   grid: GridWeapon[]
   user?: User
   fullAuto: boolean
+  autoGuard: boolean
   favorited: boolean
   createdAt: Date
   displayUser?: boolean | false
@@ -171,6 +172,26 @@ const GridRep = (props: Props) => {
     </div>
   )
 
+  function fullAutoString() {
+    const fullAutoElement = (
+      <span className="full_auto">
+        {` · ${t('party.details.labels.full_auto')}`}
+      </span>
+    )
+
+    const autoGuardElement = (
+      <span className="auto_guard">
+        <ShieldIcon />
+      </span>
+    )
+
+    return (
+      <div className="auto">
+        {fullAutoElement}
+        {props.autoGuard ? autoGuardElement : ''}
+      </div>
+    )
+  }
   const details = (
     <div className="Details">
       <h2 className={titleClass}>{props.name ? props.name : t('no_title')}</h2>
@@ -179,13 +200,7 @@ const GridRep = (props: Props) => {
           <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>
-          ) : (
-            ''
-          )}
+          {props.fullAuto ? fullAutoString() : ''}
         </div>
         <time className="last-updated" dateTime={props.createdAt.toISOString()}>
           {formatTimeAgo(props.createdAt, locale)}

pages/[username].tsx

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

pages/saved.tsx

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

pages/teams.tsx

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

public/icons/Shield.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M23.2485 18.9009L23.2738 18.8461L23.2969 18.7903C25.0719 14.5024 25.7609 9.66488 25.9448 6.46207C26.0895 3.94417 24.3044 1.84216 21.9579 1.40085C15.9228 0.265829 11.8484 0.285157 6.02633 1.39844C3.68545 1.84606 1.90969 3.9468 2.05687 6.45935C2.23934 9.57444 2.91185 14.4595 4.70282 18.7895C5.52785 20.7841 6.67748 22.8599 8.06609 24.4951C9.34592 26.0023 11.3727 27.7692 14 27.7692C16.7045 27.7692 18.7211 25.8684 19.9427 24.385C21.2895 22.7497 22.4117 20.7123 23.2485 18.9009Z" />
 </svg>