From 4dffbadd300c63d042d0d8e8a75a34df394e3924 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 7 May 2024 12:10:33 +0800
Subject: [PATCH] Use yellow for the Add button

---
 packages/web/components/elements/Button.tsx      | 16 ++++++++++++++++
 packages/web/components/elements/SplitButton.tsx |  7 +++----
 .../templates/homeFeed/AddLinkModal.tsx          |  7 +++++--
 .../web/components/templates/navMenu/Footer.tsx  |  1 -
 .../components/templates/navMenu/LibraryMenu.tsx |  9 +++------
 .../web/components/tokens/stitches.config.ts     |  2 +-
 6 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index c287f82d8..d682ea3fd 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -18,6 +18,22 @@ export const Button = styled('button', {
           border: '1px solid $grayBorderHover',
         },
       },
+      ctaOmnivoreYellow: {
+        borderRadius: '5px',
+        px: '20px',
+        py: '8px',
+        fontSize: '14px',
+        fontWeight: '500',
+        cursor: 'pointer',
+        border: '0px solid $yellow3',
+        bg: '$omnivoreYellow',
+        color: '#2A2A2A',
+        '&:hover': {
+          opacity: 1.0,
+          border: '0px solid #FFD800',
+          background: `#FFD800`,
+        },
+      },
       ctaBlue: {
         borderRadius: '5px',
         px: '20px',
diff --git a/packages/web/components/elements/SplitButton.tsx b/packages/web/components/elements/SplitButton.tsx
index fca43c9d5..74253c606 100644
--- a/packages/web/components/elements/SplitButton.tsx
+++ b/packages/web/components/elements/SplitButton.tsx
@@ -45,9 +45,8 @@ export const SplitButton = (props: SplitButtonProps): JSX.Element => {
       <Button
         css={{
           display: 'flex',
-          // minWidth: '70px',
-          bg: '$ctaBlue',
-          color: '#EDEDED',
+          bg: '$omnivoreYellow',
+          color: '#2A2A2A',
           fontSize: '14px',
           fontFamily: '$inter',
           border: '0px solid transparent',
@@ -56,7 +55,7 @@ export const SplitButton = (props: SplitButtonProps): JSX.Element => {
           borderTopRightRadius: '5px',
           borderBottomRightRadius: '5px',
           '&:hover': {
-            opacity: 0.6,
+            background: '#FFD800',
             border: '0px solid transparent',
           },
           '&:focus': {
diff --git a/packages/web/components/templates/homeFeed/AddLinkModal.tsx b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
index 8abf6fec4..a4a6b0dce 100644
--- a/packages/web/components/templates/homeFeed/AddLinkModal.tsx
+++ b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
@@ -240,9 +240,12 @@ const AddFromURL = (props: AddFromURLProps): JSX.Element => {
           </HStack>
         )}
         <Button
-          style="ctaBlue"
+          style="ctaOmnivoreYellow"
           type="submit"
-          css={{ marginLeft: 'auto', marginTop: 'auto' }}
+          css={{
+            marginLeft: 'auto',
+            marginTop: 'auto',
+          }}
         >
           Add
         </Button>
diff --git a/packages/web/components/templates/navMenu/Footer.tsx b/packages/web/components/templates/navMenu/Footer.tsx
index f8b0a9804..d44bae039 100644
--- a/packages/web/components/templates/navMenu/Footer.tsx
+++ b/packages/web/components/templates/navMenu/Footer.tsx
@@ -16,7 +16,6 @@ export const NavMenuFooter = (props: NavMenuFooterProps): JSX.Element => {
         position: 'fixed',
         bottom: '0%',
         alignItems: 'center',
-
         backgroundColor: '$thBackground2',
         width: LIBRARY_LEFT_MENU_WIDTH,
         overflowY: 'auto',
diff --git a/packages/web/components/templates/navMenu/LibraryMenu.tsx b/packages/web/components/templates/navMenu/LibraryMenu.tsx
index a2c5cbb05..e39923bca 100644
--- a/packages/web/components/templates/navMenu/LibraryMenu.tsx
+++ b/packages/web/components/templates/navMenu/LibraryMenu.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useMemo, useRef, useState } from "react"
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { StyledText } from '../../elements/StyledText'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
@@ -30,8 +30,8 @@ import { OutlinedLabelChip } from '../../elements/OutlinedLabelChip'
 import { NewsletterIcon } from '../../elements/icons/NewsletterIcon'
 import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
 import { useRouter } from 'next/router'
-import { DiscoverIcon } from "../../elements/icons/DiscoverIcon"
-import { escapeQuotes } from "../../../utils/helper"
+import { DiscoverIcon } from '../../elements/icons/DiscoverIcon'
+import { escapeQuotes } from '../../../utils/helper'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '275px'
 
@@ -158,9 +158,6 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
         </Box>
         <LibraryNav {...props} />
         <Shortcuts {...props} />
-        {/* <SavedSearches {...props} savedSearches={savedSearches} />
-        <Subscriptions {...props} subscriptions={subscriptions} />
-        <Labels {...props} labels={labels} /> */}
         <NavMenuFooter {...props} />
         <Box css={{ height: '250px ' }} />
       </Box>
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 27c95d158..db11183dc 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -145,7 +145,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         // Brand Colors
         omnivoreRed: '#FA5E4A;',
         omnivoreGray: '#3D3D3D',
-        omnivoreYellow: 'rgb(255, 234, 159)',
+        omnivoreYellow: '#FFEAA0',
         omnivoreLightGray: 'rgb(125, 125, 125)',
         omnivoreCtaYellow: 'rgb(255, 210, 52)',
         searchActiveOutline: 'rgb(255, 210, 52)',