From 215d9cfc36f8b32459b28ec81fe47c81e4feeab3 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 9 Jul 2022 17:08:49 -0700
Subject: [PATCH] Fix the utility text color in menus, make theme switcher
 smaller

---
 packages/web/components/elements/Button.tsx           | 4 ++--
 packages/web/components/elements/DropdownElements.tsx | 4 ++--
 packages/web/components/patterns/DropdownMenu.tsx     | 2 +-
 packages/web/components/tokens/stitches.config.ts     | 6 ++++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index f8e4bc180..8e6d2f57b 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -183,8 +183,8 @@ export const Button = styled('button', {
         p: '0px',
         m: '0px',
         ml: '0px',
-        width: '68px',
-        height: '52px',
+        width: '60px',
+        height: '48px',
         fontSize: '14px',
         border: 'unset',
         borderRadius: '6px',
diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx
index 8dcbfff98..d27a3423c 100644
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/packages/web/components/elements/DropdownElements.tsx
@@ -19,7 +19,7 @@ const itemStyles = {
   px: '24px',
   borderRadius: 3,
   cursor: 'default',
-  color: '$grayText',
+  color: '$utilityTextDefault',
 
   '&:focus': {
     outline: 'none',
@@ -106,7 +106,7 @@ const StyledArrow = styled(Arrow, {
 })
 
 const StyledLabel = styled(Label, {
-  color: '$grayText',
+  color: '$utilityTextDefault',
   fontSize: 13,
   padding: '5px 10px',
   cursor: 'default',
diff --git a/packages/web/components/patterns/DropdownMenu.tsx b/packages/web/components/patterns/DropdownMenu.tsx
index 5055924b9..7f77de8f6 100644
--- a/packages/web/components/patterns/DropdownMenu.tsx
+++ b/packages/web/components/patterns/DropdownMenu.tsx
@@ -42,7 +42,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     <Dropdown triggerElement={props.triggerElement}>
       <VStack css={{ py: '12px', px: '24px' }}>
         <StyledText style="menuTitle">Theme</StyledText>
-        <HStack css={{ py: '8px', width: '100%', gap: '8px' }}>
+        <HStack css={{ py: '8px', width: '100%', gap: '25px' }}>
           <Button
             style="themeSwitch"
             css={{ background: '#FFFFFF' }}
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index e31f3b3f3..0e74af7e6 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -114,12 +114,13 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         grayBorder: '#F0F0F0',
         grayTextContrast: '#3A3939',
         graySolid: '#9C9B9A',
+        utilityTextDefault: '#3B3938',
 
         grayBgSubtle: 'hsl(0 0% 97.3%)',
         grayBgHover: 'hsl(0 0% 93.0%)',
         grayLine: 'hsl(0 0% 88.7%)',
         grayBorderHover: 'hsl(0 0% 78.0%)',
-        grayText: 'hsl(0 0% 43.5%)',
+        grayText: '#3B3938',
 
         // Semantic Colors
         highlightBackground: 'rgba(255, 210, 52, 0.65)',
@@ -178,12 +179,13 @@ const darkThemeSpec = {
     grayTextContrast: '#D8D7D7',
     grayBorder: '#323232',
     graySolid: '#9C9B9A',
+    utilityTextDefault: '#CDCDCD',
 
     grayBgSubtle: 'hsl(0 0% 9.8%)',
     grayBgHover: 'hsl(0 0% 13.8%)',
     grayLine: 'hsl(0 0% 19.9%)',
     grayBorderHover: 'hsl(0 0% 31.2%)',
-    grayText: 'hsl(0 0% 62.8%)',
+    grayText: '#CDCDCD',
 
     // Semantic Colors
     highlightBackground: '#867740',