From 00cea70ee3f82d857d70286daa7d4909a44a1da9 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 21 Mar 2023 21:31:44 -0700
Subject: [PATCH] Add auto guard icon to GridRep

---
 components/GridRep/index.scss | 16 ++++++++++++++++
 components/GridRep/index.tsx  | 31 +++++++++++++++++++++++--------
 pages/[username].tsx          |  1 +
 pages/saved.tsx               |  1 +
 pages/teams.tsx               |  1 +
 public/icons/Shield.svg       |  2 +-
 6 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss
index e4108c84..4d5bd3df 100644
--- a/components/GridRep/index.scss
+++ b/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 {
diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx
index 607c41f5..f2b17fac 100644
--- a/components/GridRep/index.tsx
+++ b/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)}
diff --git a/pages/[username].tsx b/pages/[username].tsx
index 5888d44d..32e32199 100644
--- a/pages/[username].tsx
+++ b/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}
         />
diff --git a/pages/saved.tsx b/pages/saved.tsx
index 41b27d39..386bef97 100644
--- a/pages/saved.tsx
+++ b/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}
diff --git a/pages/teams.tsx b/pages/teams.tsx
index fa25bb13..0ae4a767 100644
--- a/pages/teams.tsx
+++ b/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}
diff --git a/public/icons/Shield.svg b/public/icons/Shield.svg
index a8e069c3..ae3b51b7 100644
--- a/public/icons/Shield.svg
+++ b/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>