From b74a4cd4c6de215b4021b3b084bc7cf054f291b6 Mon Sep 17 00:00:00 2001
From: Isra <byzkk@protonmail.com>
Date: Wed, 6 Mar 2024 10:56:06 -0600
Subject: [PATCH 1/4] Make x-button more visible

---
 src/components/buttons/IconPatch.tsx |  2 +-
 themes/default.ts                    | 59 +++++++++-------------------
 2 files changed, 19 insertions(+), 42 deletions(-)

diff --git a/src/components/buttons/IconPatch.tsx b/src/components/buttons/IconPatch.tsx
index b9a7e525..945c91bb 100644
--- a/src/components/buttons/IconPatch.tsx
+++ b/src/components/buttons/IconPatch.tsx
@@ -25,7 +25,7 @@ export function IconPatch(props: IconPatchProps) {
   return (
     <div className={props.className || undefined} onClick={props.onClick}>
       <div
-        className={`flex items-center justify-center rounded-full border-2 border-transparent backdrop-blur-lg bg-pill-background bg-opacity-50 transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses} ${sizeClasses}`}
+        className={`flex items-center justify-center rounded-full border-2 border-transparent bg-pill-background bg-opacity-100 transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses} ${sizeClasses}`}
       >
         <Icon icon={props.icon} />
       </div>
diff --git a/themes/default.ts b/themes/default.ts
index c7d32617..1854b6f1 100644
--- a/themes/default.ts
+++ b/themes/default.ts
@@ -31,7 +31,7 @@ const tokens = {
       c200: "#8A293B",
       c300: "#812435",
       c400: "#701B2B",
-    }
+    },
   },
   blue: {
     c50: "#ADADF5",
@@ -43,7 +43,7 @@ const tokens = {
     c600: "#1B1B41",
     c700: "#171736",
     c800: "#101020",
-    c900: "#0B0B13"
+    c900: "#0B0B13",
   },
   purple: {
     c50: "#D5AAFF",
@@ -55,7 +55,7 @@ const tokens = {
     c600: "#411F64",
     c700: "#31184A",
     c800: "#221134",
-    c900: "#160B22"
+    c900: "#160B22",
   },
   ash: {
     c50: "#7F8D9B",
@@ -67,7 +67,7 @@ const tokens = {
     c600: "#172532",
     c700: "#131E29",
     c800: "#101820",
-    c900: "#0C1216"
+    c900: "#0C1216",
   },
   shade: {
     c50: "#676790",
@@ -77,11 +77,11 @@ const tokens = {
     c400: "#272741",
     c500: "#1E1E32",
     c600: "#171728",
-    c700: "#131322",
+    c700: "#000000",
     c800: "#0F0F1B",
-    c900: "#0A0A12"
-  }
-}
+    c900: "#0A0A12",
+  },
+};
 
 export const defaultTheme = {
   extend: {
@@ -94,31 +94,29 @@ export const defaultTheme = {
 
       // Branding
       pill: {
-        background: tokens.shade.c300,
-        backgroundHover: tokens.shade.c200,
+        background: tokens.shade.c400,
+        backgroundHover: tokens.shade.c500,
         highlight: tokens.blue.c200,
-
-        activeBackground: tokens.shade.c300,
       },
-      
+
       // meta data for the theme itself
       global: {
         accentA: tokens.blue.c200,
         accentB: tokens.blue.c300,
       },
-      
+
       // light bar
       lightBar: {
         light: tokens.blue.c400,
       },
-      
+
       // Buttons
       buttons: {
         toggle: tokens.purple.c300,
         toggleDisabled: tokens.ash.c500,
         danger: tokens.semantic.rose.c300,
         dangerHover: tokens.semantic.rose.c200,
-        
+
         secondary: tokens.ash.c700,
         secondaryText: tokens.semantic.silver.c300,
         secondaryHover: tokens.ash.c700,
@@ -130,7 +128,7 @@ export const defaultTheme = {
         cancel: tokens.ash.c500,
         cancelHover: tokens.ash.c300,
       },
-      
+
       // only used for body colors/textures
       background: {
         main: tokens.shade.c900,
@@ -140,11 +138,6 @@ export const defaultTheme = {
         accentB: tokens.blue.c500,
       },
 
-      // Modals
-      modal: {
-        background: tokens.shade.c800,
-      },
-      
       // typography
       type: {
         logo: tokens.purple.c100,
@@ -154,7 +147,6 @@ export const defaultTheme = {
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         danger: tokens.semantic.red.c100,
-        success: tokens.semantic.green.c100,
         link: tokens.purple.c100,
         linkHover: tokens.purple.c50,
       },
@@ -162,7 +154,6 @@ export const defaultTheme = {
       // search bar
       search: {
         background: tokens.shade.c500,
-        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100,
@@ -233,28 +224,14 @@ export const defaultTheme = {
         },
 
         saveBar: {
-          background: tokens.shade.c800
-        }
+          background: tokens.shade.c800,
+        },
       },
 
-      // Utilities
       utils: {
         divider: tokens.ash.c300,
       },
 
-      // Onboarding
-      onboarding: {
-        bar: tokens.shade.c400,
-        barFilled: tokens.purple.c300,
-        divider: tokens.shade.c200,
-        card: tokens.shade.c800,
-        cardHover: tokens.shade.c700,
-        border: tokens.shade.c600,
-        good: tokens.purple.c100,
-        best: tokens.semantic.yellow.c100,
-        link: tokens.purple.c100,
-      },
-
       // Error page
       errors: {
         card: tokens.shade.c800,
@@ -290,7 +267,7 @@ export const defaultTheme = {
 
         autoPlay: {
           background: tokens.ash.c700,
-          hover: tokens.ash.c500
+          hover: tokens.ash.c500,
         },
 
         scraping: {

From 7159b76344948ef9b98e83013ae0c39beea0f95a Mon Sep 17 00:00:00 2001
From: Isra <byzkk@protonmail.com>
Date: Wed, 6 Mar 2024 10:58:38 -0600
Subject: [PATCH 2/4] Add onboarding styles to default theme

---
 themes/default.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/themes/default.ts b/themes/default.ts
index 1854b6f1..7d08a6f3 100644
--- a/themes/default.ts
+++ b/themes/default.ts
@@ -228,6 +228,24 @@ export const defaultTheme = {
         },
       },
 
+      // Utilities
+      utils: {
+        divider: tokens.ash.c300,
+      },
+
+      // Onboarding
+      onboarding: {
+        bar: tokens.shade.c400,
+        barFilled: tokens.purple.c300,
+        divider: tokens.shade.c200,
+        card: tokens.shade.c800,
+        cardHover: tokens.shade.c700,
+        border: tokens.shade.c600,
+        good: tokens.purple.c100,
+        best: tokens.semantic.yellow.c100,
+        link: tokens.purple.c100,
+      },
+
       utils: {
         divider: tokens.ash.c300,
       },

From a652be9a8674ab6348a414a137e0fdb9111a19b3 Mon Sep 17 00:00:00 2001
From: Isra <byzkk@protonmail.com>
Date: Wed, 6 Mar 2024 10:59:29 -0600
Subject: [PATCH 3/4] Fix

---
 themes/default.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/themes/default.ts b/themes/default.ts
index 7d08a6f3..46134815 100644
--- a/themes/default.ts
+++ b/themes/default.ts
@@ -105,6 +105,11 @@ export const defaultTheme = {
         accentB: tokens.blue.c300,
       },
 
+      // Modals
+      modal: {
+        background: tokens.shade.c800,
+      },
+
       // light bar
       lightBar: {
         light: tokens.blue.c400,
@@ -246,10 +251,6 @@ export const defaultTheme = {
         link: tokens.purple.c100,
       },
 
-      utils: {
-        divider: tokens.ash.c300,
-      },
-
       // Error page
       errors: {
         card: tokens.shade.c800,

From 4a5d537679da19d901a17d4896bc42c73d62e87f Mon Sep 17 00:00:00 2001
From: Isra <byzkk@protonmail.com>
Date: Wed, 6 Mar 2024 11:01:46 -0600
Subject: [PATCH 4/4] Revert all color changes

---
 themes/default.ts | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/themes/default.ts b/themes/default.ts
index 46134815..93a0673e 100644
--- a/themes/default.ts
+++ b/themes/default.ts
@@ -77,7 +77,7 @@ const tokens = {
     c400: "#272741",
     c500: "#1E1E32",
     c600: "#171728",
-    c700: "#000000",
+    c700: "#131322",
     c800: "#0F0F1B",
     c900: "#0A0A12",
   },
@@ -94,9 +94,11 @@ export const defaultTheme = {
 
       // Branding
       pill: {
-        background: tokens.shade.c400,
-        backgroundHover: tokens.shade.c500,
+        background: tokens.shade.c300,
+        backgroundHover: tokens.shade.c200,
         highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
       },
 
       // meta data for the theme itself
@@ -105,11 +107,6 @@ export const defaultTheme = {
         accentB: tokens.blue.c300,
       },
 
-      // Modals
-      modal: {
-        background: tokens.shade.c800,
-      },
-
       // light bar
       lightBar: {
         light: tokens.blue.c400,
@@ -143,6 +140,11 @@ export const defaultTheme = {
         accentB: tokens.blue.c500,
       },
 
+      // Modals
+      modal: {
+        background: tokens.shade.c800,
+      },
+
       // typography
       type: {
         logo: tokens.purple.c100,
@@ -152,6 +154,7 @@ export const defaultTheme = {
         divider: tokens.ash.c500,
         secondary: tokens.ash.c100,
         danger: tokens.semantic.red.c100,
+        success: tokens.semantic.green.c100,
         link: tokens.purple.c100,
         linkHover: tokens.purple.c50,
       },
@@ -159,6 +162,7 @@ export const defaultTheme = {
       // search bar
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100,