From 86de3d630a55b87810eef0b4a4d36739479685b5 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Sat, 9 Mar 2024 15:32:44 -0800
Subject: [PATCH] Ditch tertiary button color, lighten secondary button

---
 src/components/Button.tsx                     | 77 +------------------
 src/components/moderation/ContentHider.tsx    |  2 +-
 src/components/moderation/LabelsOnMe.tsx      |  2 +-
 .../moderation/LabelsOnMeDialog.tsx           |  4 +-
 src/components/moderation/PostAlerts.tsx      |  4 +-
 .../moderation/ProfileHeaderAlerts.tsx        |  4 +-
 src/screens/Moderation/index.tsx              |  2 +-
 src/view/screens/Storybook/Buttons.tsx        |  2 +-
 8 files changed, 13 insertions(+), 84 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 7e635a4541..3dff417793 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -20,7 +20,6 @@ export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
 export type ButtonColor =
   | 'primary'
   | 'secondary'
-  | 'tertiary'
   | 'negative'
   | 'gradient_sky'
   | 'gradient_midnight'
@@ -192,14 +191,14 @@ export function Button({
       if (variant === 'solid') {
         if (!disabled) {
           baseStyles.push({
-            backgroundColor: t.palette.contrast_50,
+            backgroundColor: t.palette.contrast_25,
           })
           hoverStyles.push({
-            backgroundColor: t.palette.contrast_100,
+            backgroundColor: t.palette.contrast_50,
           })
         } else {
           baseStyles.push({
-            backgroundColor: t.palette.contrast_200,
+            backgroundColor: t.palette.contrast_100,
           })
         }
       } else if (variant === 'outline') {
@@ -225,43 +224,6 @@ export function Button({
           })
         }
       }
-    } else if (color === 'tertiary') {
-      if (variant === 'solid') {
-        if (!disabled) {
-          baseStyles.push({
-            backgroundColor: t.palette.contrast_25,
-          })
-          hoverStyles.push({
-            backgroundColor: t.palette.contrast_50,
-          })
-        } else {
-          baseStyles.push({
-            backgroundColor: t.palette.contrast_50,
-          })
-        }
-      } else if (variant === 'outline') {
-        baseStyles.push(a.border, t.atoms.bg, {
-          borderWidth: 1,
-        })
-
-        if (!disabled) {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.contrast_200,
-          })
-          hoverStyles.push(t.atoms.bg_contrast_25)
-        } else {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.contrast_100,
-          })
-        }
-      } else if (variant === 'ghost') {
-        if (!disabled) {
-          baseStyles.push(t.atoms.bg)
-          hoverStyles.push({
-            backgroundColor: t.palette.contrast_50,
-          })
-        }
-      }
     } else if (color === 'negative') {
       if (variant === 'solid') {
         if (!disabled) {
@@ -355,7 +317,6 @@ export function Button({
       const gradient = {
         primary: tokens.gradients.sky,
         secondary: tokens.gradients.sky,
-        tertiary: tokens.gradients.sky,
         negative: tokens.gradients.sky,
         gradient_sky: tokens.gradients.sky,
         gradient_midnight: tokens.gradients.midnight,
@@ -512,38 +473,6 @@ export function useSharedButtonTextStyles() {
           })
         }
       }
-    } else if (color === 'tertiary') {
-      if (variant === 'solid' || variant === 'gradient') {
-        if (!disabled) {
-          baseStyles.push({
-            color: t.palette.contrast_700,
-          })
-        } else {
-          baseStyles.push({
-            color: t.palette.contrast_400,
-          })
-        }
-      } else if (variant === 'outline') {
-        if (!disabled) {
-          baseStyles.push({
-            color: t.palette.contrast_500,
-          })
-        } else {
-          baseStyles.push({
-            color: t.palette.contrast_300,
-          })
-        }
-      } else if (variant === 'ghost') {
-        if (!disabled) {
-          baseStyles.push({
-            color: t.palette.contrast_400,
-          })
-        } else {
-          baseStyles.push({
-            color: t.palette.contrast_200,
-          })
-        }
-      }
     } else if (color === 'negative') {
       if (variant === 'solid' || variant === 'gradient') {
         if (!disabled) {
diff --git a/src/components/moderation/ContentHider.tsx b/src/components/moderation/ContentHider.tsx
index 19c9f26a79..94494ac86b 100644
--- a/src/components/moderation/ContentHider.tsx
+++ b/src/components/moderation/ContentHider.tsx
@@ -53,7 +53,7 @@ export function ContentHider({
 
       <Button
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size="large"
         shape="default"
         onPress={() => {
diff --git a/src/components/moderation/LabelsOnMe.tsx b/src/components/moderation/LabelsOnMe.tsx
index 10270b75b6..6554c888af 100644
--- a/src/components/moderation/LabelsOnMe.tsx
+++ b/src/components/moderation/LabelsOnMe.tsx
@@ -45,7 +45,7 @@ export function LabelsOnMe({
 
       <Button
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size={size || 'small'}
         label={_(msg`View information about these labels`)}
         onPress={() => {
diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx
index efca2145a4..1a5d988225 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -149,7 +149,7 @@ function Label({
       <View>
         <Button
           variant="solid"
-          color="tertiary"
+          color="secondary"
           size="small"
           label={_(msg`Appeal`)}
           onPress={() => onPressAppeal(label)}>
@@ -245,7 +245,7 @@ function AppealForm({
         <Button
           testID="backBtn"
           variant="solid"
-          color="tertiary"
+          color="secondary"
           size="small"
           onPress={onPressBack}
           label={_(msg`Back`)}>
diff --git a/src/components/moderation/PostAlerts.tsx b/src/components/moderation/PostAlerts.tsx
index 4e8514c70c..e02a42c80f 100644
--- a/src/components/moderation/PostAlerts.tsx
+++ b/src/components/moderation/PostAlerts.tsx
@@ -51,7 +51,7 @@ function PostInform({cause}: {cause: ModerationCause}) {
       <Button
         label={desc.name}
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size="tiny"
         shape="default"
         onPress={() => {
@@ -76,7 +76,7 @@ function PostAlert({cause}: {cause: ModerationCause}) {
       <Button
         label={desc.name}
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size="small"
         shape="default"
         onPress={() => {
diff --git a/src/components/moderation/ProfileHeaderAlerts.tsx b/src/components/moderation/ProfileHeaderAlerts.tsx
index a74c4b5222..f983807c8d 100644
--- a/src/components/moderation/ProfileHeaderAlerts.tsx
+++ b/src/components/moderation/ProfileHeaderAlerts.tsx
@@ -51,7 +51,7 @@ function ProfileInform({cause}: {cause: ModerationCause}) {
       <Button
         label={desc.name}
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size="tiny"
         shape="default"
         onPress={() => {
@@ -76,7 +76,7 @@ function ProfileAlert({cause}: {cause: ModerationCause}) {
       <Button
         label={desc.name}
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size="small"
         shape="default"
         onPress={() => {
diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx
index f604a3aa49..fd75efddf7 100644
--- a/src/screens/Moderation/index.tsx
+++ b/src/screens/Moderation/index.tsx
@@ -300,7 +300,7 @@ export function ModerationScreenInner({
               label={_(msg`Confirm your birthdate`)}
               size="small"
               variant="solid"
-              color="tertiary"
+              color="secondary"
               onPress={() => {
                 openModal({name: 'birth-date-settings'})
               }}
diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx
index 1a8f2f3707..ad2fff3f4a 100644
--- a/src/view/screens/Storybook/Buttons.tsx
+++ b/src/view/screens/Storybook/Buttons.tsx
@@ -20,7 +20,7 @@ export function Buttons() {
       <H1>Buttons</H1>
 
       <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}>
-        {['primary', 'secondary', 'tertiary', 'negative'].map(color => (
+        {['primary', 'secondary', 'negative'].map(color => (
           <View key={color} style={[a.gap_md, a.align_start]}>
             {['solid', 'outline', 'ghost'].map(variant => (
               <React.Fragment key={variant}>