Dark / light mode tweaks

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"
       />

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

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'

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>
   )
 }

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',