From d68c79a2eb959a04e69435371303c0f107d6c6fb Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 3 Mar 2023 16:58:19 +0800
Subject: [PATCH] Dark / light mode tweaks

---
 .../elements/images/OmnivoreNameLogo.tsx      |  3 +--
 .../components/templates/PrimaryLayout.tsx    |  3 ---
 .../templates/article/ArticleContainer.tsx    |  2 +-
 .../templates/homeFeed/LibraryHeader.tsx      | 23 +++++++++++++++----
 .../web/components/tokens/stitches.config.ts  |  3 +++
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/web/components/elements/images/OmnivoreNameLogo.tsx b/packages/web/components/elements/images/OmnivoreNameLogo.tsx
index 80378280d..06e371390 100644
--- a/packages/web/components/elements/images/OmnivoreNameLogo.tsx
+++ b/packages/web/components/elements/images/OmnivoreNameLogo.tsx
@@ -31,8 +31,7 @@ export function OmnivoreSmallLogo(props: OmnivoreLogoProps): JSX.Element {
     >
       <path
         d="M5.82329 12.9213V7.47867C5.82329 7.01332 6.36957 6.75029 6.73377 7.07402L8.4131 9.5222C8.75706 9.80546 9.24265 9.80546 9.58661 9.5222L11.2255 7.09425C11.5897 6.79075 12.136 7.03355 12.136 7.49891V10.372C12.136 11.768 13.0667 12.9011 14.4627 12.9011H14.5032C15.6969 12.9011 16.7288 12.0918 17.0121 10.9385C17.1537 10.3315 17.2751 9.70429 17.2751 9.2187C17.2549 4.46397 13.2285 0.862512 8.4131 1.18624C4.32605 1.4695 1.02808 4.76746 0.744823 8.85451C0.421097 13.6699 4.22489 17.6963 8.99985 17.6963"
-        stroke="#0A0806"
-        strokeOpacity="0.4"
+        stroke={props.strokeColor}
         strokeWidth="1.4"
         strokeMiterlimit="10"
       />
diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx
index 6ec9e7067..790dd7b2c 100644
--- a/packages/web/components/templates/PrimaryLayout.tsx
+++ b/packages/web/components/templates/PrimaryLayout.tsx
@@ -85,9 +85,6 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
           width: '100vw',
           height: '100vh',
           bg: 'transparent',
-          '@smDown': {
-            bg: '$thBackground2',
-          },
         }}
       >
         <Box
diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index 1d35b0098..7694df768 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -279,7 +279,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         id="article-container"
         css={{
           padding: '16px',
-          paddingTop: '70px',
+          paddingTop: '80px',
           maxWidth: `${styles.maxWidthPercentage ?? 100}%`,
           background: props.isAppleAppEmbed
             ? 'unset'
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 6c4466b56..2904dd123 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -25,7 +25,7 @@ type LibraryHeaderProps = {
 }
 
 const HEADER_HEIGHT = '105px'
-export const LIBRARY_HEADER_MOBILE_HEIGHT = '60px'
+export const LIBRARY_HEADER_MOBILE_HEIGHT = '70px'
 
 export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
   return (
@@ -102,6 +102,7 @@ function SmallHeaderLayout(props: LibraryHeaderProps): JSX.Element {
       css={{
         width: '100%',
         height: '100%',
+        bg: '$thBackground3',
         '@md': {
           display: 'none',
         },
@@ -146,7 +147,7 @@ export function MenuHeaderButton(props: MenuHeaderButtonProps): JSX.Element {
         ml: '10px',
         width: '67px',
         height: '40px',
-        bg: props.showFilterMenu ? '#898989' : '#F0F0F0',
+        bg: props.showFilterMenu ? '$thTextContrast2' : '$thBackground2',
         borderRadius: '5px',
         px: '5px',
         cursor: 'pointer',
@@ -157,8 +158,22 @@ export function MenuHeaderButton(props: MenuHeaderButtonProps): JSX.Element {
         props.setShowFilterMenu(!props.showFilterMenu)
       }}
     >
-      <OmnivoreSmallLogo size={20} strokeColor="black" />
-      <FunnelSimple size={20} color="#6A6968" />
+      <OmnivoreSmallLogo
+        size={20}
+        strokeColor={
+          props.showFilterMenu
+            ? theme.colors.thBackground.toString()
+            : theme.colors.thTextContrast2.toString()
+        }
+      />
+      <FunnelSimple
+        size={20}
+        color={
+          props.showFilterMenu
+            ? theme.colors.thBackground.toString()
+            : theme.colors.thTextContrast2.toString()
+        }
+      />
     </HStack>
   )
 }
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 01e4018f8..8de256f11 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -176,6 +176,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thBackground: '#FFFFFF',
         thBackground2: '#F3F3F3',
         thBackground3: '#FFFFFF',
+        thBackgroundContrast: '#FFFFFF',
 
         thTextContrast: '#1E1E1E',
         thTextContrast2: '#3D3D3D',
@@ -259,6 +260,8 @@ const darkThemeSpec = {
     thBackground: '#2A2A2A',
     thBackground2: '#3D3D3D',
     thBackground3: '#242424',
+    thBackgroundContrast: '#000000',
+
     thTextContrast: '#FFFFFF',
     thTextContrast2: '#EBEBEB',