From d3e6fae295290a0c8d0a5f73195d17670ebce676 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 9 Feb 2024 12:06:22 +0800
Subject: [PATCH] Colours for tabs and CTA buttons

---
 packages/web/components/elements/Button.tsx         | 13 +++++++------
 .../components/templates/homeFeed/AddLinkModal.tsx  |  2 +-
 .../templates/homeFeed/HomeFeedContainer.tsx        |  1 +
 packages/web/components/tokens/stitches.config.ts   |  4 ++++
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 6fa11b71d..54e399801 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -27,6 +27,7 @@ export const Button = styled('button', {
         cursor: 'pointer',
         border: '1px solid $yellow3',
         bg: '$ctaBlue',
+        color: 'white',
         '&:hover': {
           opacity: '0.6',
           border: '0px solid $ctaBlue',
@@ -238,7 +239,7 @@ export const Button = styled('button', {
         fontSize: '12px',
         fontWeight: '500',
         fontFamily: '$inter',
-        color: '$thBorderSubtle',
+        color: '$tabTextUnselected',
         cursor: 'pointer',
         borderRadius: '5px',
         '&:hover': {
@@ -249,16 +250,16 @@ export const Button = styled('button', {
         px: '15px',
         py: '6px',
         border: 'none',
-        bg: '$thBorderSubtle',
+        bg: '#6A6968',
         fontSize: '12px',
         fontWeight: '500',
         fontFamily: '$inter',
-        color: '$textContrast',
+        color: 'white',
         cursor: 'pointer',
         borderRadius: '5px',
-        '&:hover': {
-          color: '$thTextContrast',
-        },
+        // '&:hover': {
+        //   color: '$thTextContrast',
+        // },
       },
       squareIcon: {
         mx: '$1',
diff --git a/packages/web/components/templates/homeFeed/AddLinkModal.tsx b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
index 09919b82a..f3bb39bb7 100644
--- a/packages/web/components/templates/homeFeed/AddLinkModal.tsx
+++ b/packages/web/components/templates/homeFeed/AddLinkModal.tsx
@@ -219,7 +219,7 @@ const AddFromURL = (props: AddFromURLProps): JSX.Element => {
             mb: '13px',
             fontSize: '14px',
             color: '$thTextContrast',
-            bg: '$thLibrarySearchbox',
+            bg: '$thFormInput',
           }}
         />
         <Button
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 90a41736e..ae0b0f522 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -1073,6 +1073,7 @@ function LibraryItemsLayout(props: LibraryItemsLayoutProps): JSX.Element {
             '@lgDown': {
               display: 'none',
             },
+            mb: '10px',
           }}
         >
           <PinnedButtons
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 78d2dce28..9cbeec80c 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -184,6 +184,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thLibrarySelectionColor: '#FFEA9F',
         thLibraryNavigationMenuFooter: '#EFEADE',
         thLibraryMenuFooterHover: '#FFFFFF',
+        thFormInput: '#EBEBEB',
 
         thHeaderIconRing: '#D9D9D9',
         thHeaderIconInner: '#898989',
@@ -202,6 +203,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
 
         thBorderColor: '#E1E1E1',
         thBorderSubtle: '#EEEEEE',
+        tabTextUnselected: '#898989',
 
         thProgressFg: '#FFD234',
 
@@ -307,6 +309,7 @@ const darkThemeSpec = {
     thLibraryNavigationMenuFooter: '#3D3D3D',
     thLibraryMenuFooterHover: '#6A6968',
     searchActiveOutline: '#866D15',
+    thFormInput: '#3D3D3D',
 
     thHeaderIconRing: '#3D3D3D',
     thHeaderIconInner: '#D9D9D9',
@@ -326,6 +329,7 @@ const darkThemeSpec = {
 
     thBorderColor: '#4F4F4F',
     thBorderSubtle: '#6A6968',
+    tabTextUnselected: '#6A6968',
 
     thProgressFg: '#FFD234',