From a1da2f408bee5200d6941615cf919ca64d991ca8 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 30 Jan 2023 04:15:05 -0800
Subject: [PATCH] Change color for tokens when "Off"

---
 components/PartyDetails/index.tsx | 22 +++++++++++++++++++---
 components/Token/index.scss       |  4 ++++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx
index 646da2c3..f2aef8fc 100644
--- a/components/PartyDetails/index.tsx
+++ b/components/PartyDetails/index.tsx
@@ -691,20 +691,36 @@ const PartyDetails = (props: Props) => {
       <section className={readOnlyClasses}>
         <section className="Details">
           <Token
-            className={classNames({ ChargeAttack: true, On: chargeAttack })}
+            className={classNames({
+              ChargeAttack: true,
+              On: chargeAttack,
+              Off: !chargeAttack,
+            })}
           >
             {`${t('party.details.labels.charge_attack')} ${
               chargeAttack ? 'On' : 'Off'
             }`}
           </Token>
 
-          <Token className={classNames({ FullAuto: true, On: fullAuto })}>
+          <Token
+            className={classNames({
+              FullAuto: true,
+              On: fullAuto,
+              Off: !fullAuto,
+            })}
+          >
             {`${t('party.details.labels.full_auto')} ${
               fullAuto ? 'On' : 'Off'
             }`}
           </Token>
 
-          <Token className={classNames({ AutoGuard: true, On: autoGuard })}>
+          <Token
+            className={classNames({
+              AutoGuard: true,
+              On: autoGuard,
+              Off: !autoGuard,
+            })}
+          >
             {`${t('party.details.labels.auto_guard')} ${
               fullAuto ? 'On' : 'Off'
             }`}
diff --git a/components/Token/index.scss b/components/Token/index.scss
index 7b169a37..7d08baec 100644
--- a/components/Token/index.scss
+++ b/components/Token/index.scss
@@ -22,4 +22,8 @@
     background: var(--auto-guard-bg);
     color: var(--auto-guard-text);
   }
+
+  &.Off {
+    color: var(--text-secondary);
+  }
 }