From 780bb3af7e8d36ff11dfa12a3c298770f17bb515 Mon Sep 17 00:00:00 2001
From: Vineeth Voruganti <13438633+VVoruganti@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:52:56 -0500
Subject: [PATCH] fix(ui): Update colors to match brand kit

---
 www/app/Chat.tsx                              | 73 +++++++++----------
 www/app/actions/conversations.ts              |  3 -
 www/app/auth/page.tsx                         | 17 ++---
 www/app/globals.css                           | 12 ++-
 www/app/page.tsx                              |  2 +-
 www/app/providers.tsx                         |  2 +-
 www/app/settings/SettingsLayout.tsx           |  4 +-
 www/components/auth/forgot.tsx                | 13 ++--
 www/components/auth/signIn.tsx                | 32 +++-----
 www/components/auth/signUp.tsx                | 61 ++++------------
 www/components/conversationtab.tsx            |  2 +-
 www/components/cookieConsentBanner.tsx        | 12 +--
 www/components/header.tsx                     |  4 +-
 www/components/messagebox.tsx                 | 12 ++-
 www/components/settings/SettingsForm.tsx      |  6 +-
 .../settings/SubscriptionSettings.tsx         |  7 +-
 www/components/sidebar.tsx                    |  7 +-
 www/utils/swrCache.ts                         |  7 +-
 18 files changed, 118 insertions(+), 158 deletions(-)

diff --git a/www/app/Chat.tsx b/www/app/Chat.tsx
index f4aa79a..9600fba 100644
--- a/www/app/Chat.tsx
+++ b/www/app/Chat.tsx
@@ -158,18 +158,18 @@ export default function Chat({
 
   const conversationsKey = useMemo(() => userId, [userId]);
 
-const { data: conversations, mutate: mutateConversations } = useSWR(
-  conversationsKey,
-  conversationsFetcher,
-  {
-    fallbackData: initialConversations,
-    provider: localStorageProvider,
-    revalidateOnFocus: false,
-    dedupingInterval: 60000,
-    revalidateIfStale: false,
-    revalidateOnMount: false,
-  }
-);
+  const { data: conversations, mutate: mutateConversations } = useSWR(
+    conversationsKey,
+    conversationsFetcher,
+    {
+      fallbackData: initialConversations,
+      provider: localStorageProvider,
+      revalidateOnFocus: false,
+      dedupingInterval: 60000,
+      revalidateIfStale: false,
+      revalidateOnMount: false,
+    }
+  );
 
   const messagesFetcher = async (conversationId: string) => {
     if (!userId) return Promise.resolve([]);
@@ -179,31 +179,27 @@ const { data: conversations, mutate: mutateConversations } = useSWR(
     return getMessages(conversationId);
   };
 
-  const messagesKey = useMemo(() => 
-    conversationId ? ['messages', conversationId] : null,
+  const messagesKey = useMemo(
+    () => (conversationId ? ['messages', conversationId] : null),
     [conversationId]
   );
-  
+
   const {
     data: messages,
     mutate: mutateMessages,
     isLoading: messagesLoading,
-  } = useSWR(
-    messagesKey,
-    () => messagesFetcher(conversationId!),
-    {
-      fallbackData: initialMessages,
-      provider: localStorageProvider, 
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-      dedupingInterval: 60000,
-      onSuccess: (data) => {
-        if (conversationId?.startsWith('temp-')) {
-          mutateMessages([], false);
-        }
+  } = useSWR(messagesKey, () => messagesFetcher(conversationId!), {
+    fallbackData: initialMessages,
+    provider: localStorageProvider,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    dedupingInterval: 60000,
+    onSuccess: (data) => {
+      if (conversationId?.startsWith('temp-')) {
+        mutateMessages([], false);
       }
-    }
-  );
+    },
+  });
 
   const handleReactionAdded = async (messageId: string, reaction: Reaction) => {
     if (!userId || !conversationId) return;
@@ -321,7 +317,7 @@ const { data: conversations, mutate: mutateConversations } = useSWR(
         honchoResponse
       ).json()) as HonchoResponse;
 
-      const pureThought = thoughtText
+      const pureThought = thoughtText;
 
       thoughtText +=
         '\n\nHoncho Dialectic Response:\n\n' + honchoContent.content;
@@ -454,7 +450,7 @@ const { data: conversations, mutate: mutateConversations } = useSWR(
             </p>
           </section>
         )}
-        <div className="flex flex-col flex-grow overflow-hidden dark:bg-gray-900">
+        <div className="flex flex-col flex-grow overflow-hidden bg-secondary">
           <section
             className="flex-grow overflow-y-auto px-4 lg:px-5 dark:text-white"
             ref={messageContainerRef}
@@ -511,10 +507,11 @@ const { data: conversations, mutate: mutateConversations } = useSWR(
                 placeholder={
                   canUseApp ? 'Type a message...' : 'Subscribe to send messages'
                 }
-                className={`flex-1 px-3 py-1 lg:px-5 lg:py-3 bg-gray-100 dark:bg-gray-800 text-gray-400 rounded-2xl border-2 resize-none outline-none focus:outline-none ${canSend && canUseApp
-                  ? 'border-green-200 focus:border-green-200'
-                  : 'border-red-200 focus:border-red-200 opacity-50'
-                  }`}
+                className={`flex-1 px-3 py-1 lg:px-5 lg:py-3 bg-accent text-gray-400 rounded-2xl border-2 resize-none outline-none focus:outline-none ${
+                  canSend && canUseApp
+                    ? 'border-green-200 focus:border-green-200'
+                    : 'border-red-200 focus:border-red-200 opacity-50'
+                }`}
                 rows={1}
                 disabled={!canUseApp}
                 onKeyDown={(e) => {
@@ -528,14 +525,14 @@ const { data: conversations, mutate: mutateConversations } = useSWR(
                 }}
               />
               <button
-                className="bg-dark-green text-neon-green rounded-full px-4 py-2 lg:px-7 lg:py-3 flex justify-center items-center gap-2"
+                className="bg-foreground dark:bg-accent text-neon-green rounded-full px-4 py-2 lg:px-7 lg:py-3 flex justify-center items-center gap-2"
                 type="submit"
                 disabled={!canSend || !canUseApp}
               >
                 <FaPaperPlane className="inline" />
               </button>
               <button
-                className="bg-dark-green text-neon-green rounded-full px-4 py-2 lg:px-7 lg:py-3 flex justify-center items-center gap-2"
+                className="bg-foreground dark:bg-accent text-neon-green rounded-full px-4 py-2 lg:px-7 lg:py-3 flex justify-center items-center gap-2"
                 onClick={() => setIsThoughtsOpen(true)}
                 type="button"
               >
diff --git a/www/app/actions/conversations.ts b/www/app/actions/conversations.ts
index dbb4c5a..5776226 100644
--- a/www/app/actions/conversations.ts
+++ b/www/app/actions/conversations.ts
@@ -51,18 +51,15 @@ export async function createConversation() {
     throw new Error('Unauthorized');
   }
 
-
   const honchoApp = await getHonchoApp();
   const honchoUser = await getHonchoUser(user.id);
 
-
   const session = await honcho.apps.users.sessions.create(
     honchoApp.id,
     honchoUser.id,
     {}
   );
 
-
   return { conversationId: session.id, name: 'Untitled' };
 }
 
diff --git a/www/app/auth/page.tsx b/www/app/auth/page.tsx
index 17eddf6..c267162 100644
--- a/www/app/auth/page.tsx
+++ b/www/app/auth/page.tsx
@@ -2,7 +2,7 @@
 import { createClient } from '@/utils/supabase/client';
 import { useEffect, useState } from 'react';
 import Image from 'next/image';
-import { useTheme } from 'next-themes';
+// import { useTheme } from 'next-themes';
 
 import { SignIn, SignUp, Forgot } from '@/components/auth';
 
@@ -12,7 +12,7 @@ import { useRouter } from 'next/navigation';
 export default function Auth() {
   const [formType, setFormType] = useState('LOGIN');
   const supabase = createClient();
-  const { theme } = useTheme();
+  // const { theme } = useTheme();
   const router = useRouter();
 
   useEffect(() => {
@@ -26,7 +26,7 @@ export default function Auth() {
 
   return (
     <section
-      className="h-[calc(100vh-72px)] w-full dark:bg-gray bg-white"
+      className="h-[calc(100vh-72px)] w-full bg-background"
       suppressHydrationWarning={true}
     >
       <div className="flex flex-col lg:flex-row h-full w-full">
@@ -41,9 +41,8 @@ export default function Auth() {
         </aside>
 
         <main
-          className={`flex-1 flex items-center justify-center px-4 py-8 sm:px-6 lg:px-8 ${
-            theme === 'dark' ? 'bg-gray-800' : 'bg-white'
-          }`}
+          className={`flex-1 flex items-center justify-center px-4 py-8 sm:px-6 lg:px-8 bg-background'
+            }`}
         >
           <div className="w-full max-w-xl">
             <a className="block text-blue-600" href="/">
@@ -57,14 +56,12 @@ export default function Auth() {
               />
             </a>
             <h1
-              className={`mt-6 text-2xl font-bold sm:text-3xl md:text-4xl ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}
+              className={`mt-6 text-2xl font-bold sm:text-3xl md:text-4xl text-foreground`}
             >
               Welcome to Bloom 🌱
             </h1>
 
-            <p
-              className={`mt-4 leading-relaxed ${theme === 'dark' ? 'text-gray-300' : 'text-gray-500'}`}
-            >
+            <p className={`mt-4 leading-relaxed text-foreground`}>
               Your Aristotelian learning companion — here to help you follow
               your curiosity in whatever direction you like.
             </p>
diff --git a/www/app/globals.css b/www/app/globals.css
index efce336..6061cea 100644
--- a/www/app/globals.css
+++ b/www/app/globals.css
@@ -35,13 +35,17 @@ html {
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --background: 40, 20%, 94%; /* #f3f1ed */
+    --foreground: 0, 0%, 10%; /* #191919 */
+    --secondary: 0, 0%, 98%; /* #FAFAFA */
+    --accent: 0, 0%, 89%; /* #E2E2E2 */
     font-size: 87.5%;
   }
   .dark {
-    --background: 220 17% 17%;
-    --foreground: 0 0% 98%;
+    --background: 0, 0%, 10%; /* #191919 */
+    --foreground: 40, 20%, 94%; /* #f3f1ed */
+    --secondary: 0, 0%, 0%; /* #000000 */
+    --accent: 0, 0%, 22%; /* #383838 */
   }
 }
 
diff --git a/www/app/page.tsx b/www/app/page.tsx
index f723e8f..3251258 100644
--- a/www/app/page.tsx
+++ b/www/app/page.tsx
@@ -62,4 +62,4 @@ export default async function Home() {
       />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/www/app/providers.tsx b/www/app/providers.tsx
index 0e62794..1093d59 100644
--- a/www/app/providers.tsx
+++ b/www/app/providers.tsx
@@ -46,7 +46,7 @@ export function SWRProvider({ children }: { children: React.ReactNode }) {
   return (
     <SWRConfig
       value={{
-        provider: localStorageProvider
+        provider: localStorageProvider,
       }}
     >
       {children}
diff --git a/www/app/settings/SettingsLayout.tsx b/www/app/settings/SettingsLayout.tsx
index 1c1443d..499e112 100644
--- a/www/app/settings/SettingsLayout.tsx
+++ b/www/app/settings/SettingsLayout.tsx
@@ -31,7 +31,7 @@ export default function SettingsLayout({
     <div className={`flex-1 flex flex-col bg-background text-foreground`}>
       <div className="flex-1 flex">
         <div className="py-4">
-          <nav className="w-64 bg-gray-100 dark:bg-muted p-4 rounded-lg">
+          <nav className="w-64 bg-background dark:bg-muted p-4 rounded-lg">
             {' '}
             <ul>
               {navItems.map((item) => (
@@ -40,7 +40,7 @@ export default function SettingsLayout({
                     onClick={() => setActiveTab(item.id)}
                     className={`w-full text-left p-2 rounded transition-colors ${
                       activeTab === item.id
-                        ? 'bg-gray-400 text-primary-foreground dark:bg-neon-green dark:text-black'
+                        ? 'bg-accent text-foreground'
                         : 'hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-neon-green/20 dark:hover:text-neon-green'
                     }`}
                   >
diff --git a/www/components/auth/forgot.tsx b/www/components/auth/forgot.tsx
index d47b48b..a210a4e 100644
--- a/www/components/auth/forgot.tsx
+++ b/www/components/auth/forgot.tsx
@@ -32,12 +32,9 @@ export default function Forgot(props: any) {
   };
 
   return (
-    <form action="#" className="mt-8 space-y-6">
+    <form action="#" className="mt-8 space-y-6 text-foreground">
       <div>
-        <label
-          htmlFor="Email"
-          className="block text-sm font-medium text-gray-700"
-        >
+        <label htmlFor="Email" className="block text-sm font-medium">
           Email
         </label>
 
@@ -45,7 +42,7 @@ export default function Forgot(props: any) {
           type="email"
           id="Email"
           name="email"
-          className="p-2 mt-1 w-full rounded-md border-gray-200 bg-white text-sm text-gray-700 shadow-sm"
+          className="p-2 mt-1 w-full rounded-md border-gray-200 bg-accent text-sm text-foreground shadow-sm"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
         />
@@ -59,12 +56,12 @@ export default function Forgot(props: any) {
           Send Recovery Email
         </button>
 
-        <p className="mt-4 text-sm text-gray-500 sm:mt-0">
+        <p className="mt-4 text-sm text-foreground sm:mt-0">
           Don&apos;t have an account?{' '}
           <a
             href="#"
             onClick={() => stateSync('SIGNUP')}
-            className="text-gray-700 underline"
+            className="text-foreground underline"
           >
             Sign up
           </a>
diff --git a/www/components/auth/signIn.tsx b/www/components/auth/signIn.tsx
index 8384296..c5ecc5e 100644
--- a/www/components/auth/signIn.tsx
+++ b/www/components/auth/signIn.tsx
@@ -43,12 +43,12 @@ export default function SignIn(props: any) {
         action="#"
         ref={formRef}
         onSubmit={handleSignIn}
-        className={`mt-8 space-y-6 ${theme === 'dark' ? 'text-white' : 'text-gray-700'}`}
+        className={`mt-8 space-y-6 text-foreground`}
       >
         <div>
           <label
             htmlFor="email"
-            className={`block text-sm font-medium ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}
+            className={`block text-sm font-medium text-foreground`}
           >
             Email
           </label>
@@ -57,11 +57,7 @@ export default function SignIn(props: any) {
             type="email"
             id="email"
             name="email"
-            className={`p-2 mt-1 w-full rounded-md text-sm shadow-sm ${
-              theme === 'dark'
-                ? 'bg-gray-700 text-white border-gray-600'
-                : 'bg-white text-gray-700 border-gray-200'
-            } ${error ? 'border-2 border-red-500' : ''}`}
+            className={`p-2 mt-1 w-full rounded-md text-sm shadow-sm bg-accent text-foreground ${error ? 'border-2 border-red-500' : ''}`}
             value={email}
             onChange={(e) => setEmail(e.target.value)}
           />
@@ -70,7 +66,7 @@ export default function SignIn(props: any) {
         <div>
           <label
             htmlFor="password"
-            className={`block text-sm font-medium ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}
+            className={`block text-sm font-medium text-foreground`}
           >
             Password
           </label>
@@ -79,11 +75,7 @@ export default function SignIn(props: any) {
             type="password"
             id="password"
             name="password"
-            className={`p-2 mt-1 w-full rounded-md text-sm shadow-sm ${
-              theme === 'dark'
-                ? 'bg-gray-700 text-white border-gray-600'
-                : 'bg-white text-gray-700 border-gray-200'
-            } ${error ? 'border-2 border-red-500' : ''}`}
+            className={`p-2 mt-1 w-full rounded-md text-sm shadow-sm bg-accent text-foreground ${error ? 'border-2 border-red-500' : ''}`}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
           />
@@ -91,11 +83,7 @@ export default function SignIn(props: any) {
 
         <div className="sm:flex sm:items-center sm:gap-4">
           <button
-            className={`inline-block w-full sm:w-auto shrink-0 rounded-md border px-12 py-3 text-sm font-medium transition focus:outline-none focus:ring text-gray-800 ${
-              theme === 'dark'
-                ? 'border-neon-green bg-neon-green hover:bg-transparent hover:text-neon-green'
-                : 'border-neon-green bg-neon-green hover:bg-transparent hover:text-blue-600'
-            }`}
+            className={`inline-block w-full sm:w-auto shrink-0 rounded-md border px-12 py-3 text-sm font-medium transition focus:outline-none focus:ring text-foreground border-neon-green bg-neon-green hover:bg-transparent hover:text-neon-green dark:border-neon-green dark:bg-neon-green dark:hover:bg-transparent dark:hover:text-blue-600`}
           >
             {isLoading ? (
               <svg className="animate-spin h-5 w-5 mx-auto" viewBox="0 0 24 24">
@@ -119,22 +107,22 @@ export default function SignIn(props: any) {
           </button>
 
           <div className="mt-4 space-y-2 sm:mt-0 text-sm">
-            <p className={theme === 'dark' ? 'text-gray-300' : 'text-gray-500'}>
+            <p className="text-foreground">
               Don&apos;t have an account?{' '}
               <a
                 href="#"
                 onClick={() => stateSync('SIGNUP')}
-                className={`underline ${theme === 'dark' ? 'text-gray-100' : 'text-gray-700'}`}
+                className={`underline text-foreground`}
               >
                 Sign Up Now
               </a>
             </p>
-            <p className={theme === 'dark' ? 'text-gray-300' : 'text-gray-500'}>
+            <p className="text-foreground">
               Forgot Your Password?{' '}
               <a
                 href="#"
                 onClick={() => stateSync('FORGOT')}
-                className={`underline ${theme === 'dark' ? 'text-gray-100' : 'text-gray-700'}`}
+                className={`underline text-foreground`}
               >
                 Recover
               </a>
diff --git a/www/components/auth/signUp.tsx b/www/components/auth/signUp.tsx
index e630f6f..c979bcb 100644
--- a/www/components/auth/signUp.tsx
+++ b/www/components/auth/signUp.tsx
@@ -86,13 +86,10 @@ export default function SignUp(props: {
         action="#"
         ref={formRef}
         onSubmit={handleSignUp}
-        className={`mt-8 space-y-6 ${theme === 'dark' ? 'text-white' : 'text-gray-700'}`}
+        className={`mt-8 space-y-6 text-foreground`}
       >
         <div>
-          <label
-            htmlFor="Email"
-            className={`block text-sm font-medium ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}
-          >
+          <label htmlFor="Email" className={`block text-sm font-medium`}>
             Email
           </label>
 
@@ -100,11 +97,7 @@ export default function SignUp(props: {
             type="email"
             id="Email"
             name="email"
-            className={`p-2 mt-1 w-full rounded-md text-sm shadow-sm ${
-              theme === 'dark'
-                ? 'bg-gray-700 text-white border-gray-600'
-                : 'bg-white text-gray-700 border-gray-200'
-            }`}
+            className={`p-2 mt-1 w-full rounded-md text-sm shadow-sm text-foreground bg-accent`}
             value={email}
             onChange={(e) => setEmail(e.target.value)}
           />
@@ -114,7 +107,7 @@ export default function SignUp(props: {
           <div className="flex-1">
             <label
               htmlFor="Password"
-              className={`block text-sm font-medium ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}
+              className={`block text-sm font-medium text-foreground`}
             >
               Password
             </label>
@@ -123,11 +116,7 @@ export default function SignUp(props: {
               type="password"
               id="Password"
               name="password"
-              className={`p-2 mt-1 w-full rounded-md text-sm shadow-sm ${
-                theme === 'dark'
-                  ? 'bg-gray-700 text-white border-gray-600'
-                  : 'bg-white text-gray-700 border-gray-200'
-              }`}
+              className={`p-2 mt-1 w-full rounded-md text-sm shadow-sm text-foreground bg-accent`}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
             />
@@ -136,7 +125,7 @@ export default function SignUp(props: {
           <div className="flex-1">
             <label
               htmlFor="PasswordConfirmation"
-              className={`block text-sm font-medium ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}
+              className={`block text-sm font-medium text-foreground`}
             >
               Password Confirmation
             </label>
@@ -145,11 +134,7 @@ export default function SignUp(props: {
               type="password"
               id="PasswordConfirmation"
               name="password_confirmation"
-              className={`p-2 mt-1 w-full rounded-md text-sm shadow-sm ${
-                theme === 'dark'
-                  ? 'bg-gray-700 text-white border-gray-600'
-                  : 'bg-white text-gray-700 border-gray-200'
-              }`}
+              className={`p-2 mt-1 w-full rounded-md text-sm shadow-sm text-foreground bg-accent`}
               value={passwordConfirmation}
               onChange={(e) => setPasswordConfirmation(e.target.value)}
             />
@@ -162,18 +147,12 @@ export default function SignUp(props: {
               type="checkbox"
               id="MarketingAccept"
               name="marketing_accept"
-              className={`h-5 w-5 rounded-md shadow-sm ${
-                theme === 'dark'
-                  ? 'bg-gray-700 border-gray-600'
-                  : 'bg-white border-gray-200'
-              }`}
+              className={`h-5 w-5 rounded-md shadow-sm bg-accent`}
               checked={opt}
               onChange={(e) => setOpt(!opt)}
             />
 
-            <span
-              className={`text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}
-            >
+            <span className={`text-sm text-foreground`}>
               I want to receive emails about events, product updates and company
               announcements.
             </span>
@@ -186,33 +165,25 @@ export default function SignUp(props: {
               type="checkbox"
               id="AgeAccept"
               name="age_accept"
-              className={`h-5 w-5 rounded-md shadow-sm ${
-                theme === 'dark'
-                  ? 'bg-gray-700 border-gray-600'
-                  : 'bg-white border-gray-200'
-              }`}
+              className={`h-5 w-5 rounded-md shadow-sm bg-accent`}
               checked={age}
               onChange={(e) => setAge(!age)}
               required
             />
 
-            <span
-              className={`text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}
-            >
+            <span className={`text-sm text-foreground`}>
               I am confirming that I am at least 13 years old.
             </span>
           </label>
         </div>
 
         <div>
-          <p
-            className={`text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-500'}`}
-          >
+          <p className={`text-sm text-foreground`}>
             By creating an account, you agree to our{' '}
             <a
               href="https://app.termly.io/document/terms-of-service/ba5ac452-fdd6-4746-8b31-973351d05008"
               target="_blank"
-              className={`underline ${theme === 'dark' ? 'text-gray-100' : 'text-gray-700'}`}
+              className={`underline text-foreground`}
               rel="noreferrer"
             >
               Terms and Conditions
@@ -221,7 +192,7 @@ export default function SignUp(props: {
             <a
               href="https://app.termly.io/document/privacy-policy/29672110-b634-40ae-854d-ebaf55e8fa75"
               target="_blank"
-              className={`underline ${theme === 'dark' ? 'text-gray-100' : 'text-gray-700'}`}
+              className={`underline text-foreground`}
               rel="noreferrer"
             >
               Privacy Policy
@@ -260,13 +231,13 @@ export default function SignUp(props: {
           </button>
 
           <p
-            className={`mt-4 text-sm text-center sm:text-left ${theme === 'dark' ? 'text-gray-300' : 'text-gray-500'} sm:mt-0`}
+            className={`mt-4 text-sm text-center sm:text-left text-foreground sm:mt-0`}
           >
             Already have an account?{' '}
             <a
               href="#"
               onClick={() => stateSync('LOGIN')}
-              className={`underline ${theme === 'dark' ? 'text-gray-100' : 'text-gray-700'}`}
+              className={`underline text-foreground`}
             >
               Log in
             </a>
diff --git a/www/components/conversationtab.tsx b/www/components/conversationtab.tsx
index 8323a29..ef5a3ee 100644
--- a/www/components/conversationtab.tsx
+++ b/www/components/conversationtab.tsx
@@ -35,7 +35,7 @@ export function ConversationTab({
   return (
     <div
       className={`flex justify-between items-center p-4 cursor-pointer hover:bg-gray-200 hover:dark:bg-gray-800  ${
-        selected ? 'bg-gray-200 dark:bg-gray-800' : ''
+        selected ? 'bg-accent' : ''
       }`}
       onClick={select}
     >
diff --git a/www/components/cookieConsentBanner.tsx b/www/components/cookieConsentBanner.tsx
index ad9d993..4b461fd 100644
--- a/www/components/cookieConsentBanner.tsx
+++ b/www/components/cookieConsentBanner.tsx
@@ -1,13 +1,13 @@
-"use client"
-import React, { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+'use client';
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 export function CookieConsentBanner() {
   const [isVisible, setIsVisible] = useState<boolean>(true);
   const router = useRouter();
 
   useEffect(() => {
-    const storedConsent = localStorage.getItem("cookieConsent");
+    const storedConsent = localStorage.getItem('cookieConsent');
     if (storedConsent !== null) {
       setIsVisible(false);
     }
@@ -15,13 +15,13 @@ export function CookieConsentBanner() {
 
   const acceptCookies = () => {
     setIsVisible(false);
-    localStorage.setItem("cookieConsent", JSON.stringify(true));
+    localStorage.setItem('cookieConsent', JSON.stringify(true));
     // TODO: Log file or sentry record
     // onAccept();
   };
 
   const declineCookies = () => {
-    router.push("https://bloombot.ai");
+    router.push('https://bloombot.ai');
     // setIsVisible(false);
     // localStorage.setItem("cookieConsent", JSON.stringify(false));
     // Log file or sentry record
diff --git a/www/components/header.tsx b/www/components/header.tsx
index f904c6a..960cf38 100644
--- a/www/components/header.tsx
+++ b/www/components/header.tsx
@@ -21,7 +21,7 @@ export function Header() {
 
   if (!mounted) {
     return (
-      <header className="sticky top-0 z-10 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+      <header className="sticky top-0 z-10 bg-background border-b border-gray-200 dark:border-gray-700">
         <nav className="flex justify-between items-center p-4">
           <div className="h-10 w-40 bg-gray-200 animate-pulse"></div>
           <div className="h-6 w-6 bg-gray-200 animate-pulse rounded-full"></div>
@@ -31,7 +31,7 @@ export function Header() {
   }
 
   return (
-    <header className="sticky top-0 z-10 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+    <header className="sticky top-0 z-10 bg-background border-b border-gray-200 dark:border-gray-700">
       <nav className="flex justify-between items-center p-4">
         <Link href="/" passHref>
           <Image
diff --git a/www/components/messagebox.tsx b/www/components/messagebox.tsx
index 935a393..e73257d 100644
--- a/www/components/messagebox.tsx
+++ b/www/components/messagebox.tsx
@@ -4,7 +4,13 @@ import icon from '@/public/bloomicon.jpg';
 import usericon from '@/public/usericon.svg';
 import Skeleton from 'react-loading-skeleton';
 import MarkdownWrapper from './markdownWrapper';
-import { FaLightbulb, FaThumbsDown, FaThumbsUp, FaChevronDown, FaChevronRight } from 'react-icons/fa';
+import {
+  FaLightbulb,
+  FaThumbsDown,
+  FaThumbsUp,
+  FaChevronDown,
+  FaChevronRight,
+} from 'react-icons/fa';
 import { type Message } from '@/utils/types';
 import Spinner from './spinner';
 import { getThought } from '@/app/actions/messages';
@@ -104,7 +110,7 @@ export default function MessageBox({
     <article
       className={
         'flex p-5 lg:p-8 gap-2 lg:gap-5 lg:rounded-2xl ' +
-        (isUser ? 'bg-gray-100 dark:bg-gray-800' : '')
+        (isUser ? 'bg-accent' : '')
       }
     >
       {loading ? memoizedSkeleton : memoizedImage}
@@ -150,7 +156,7 @@ export default function MessageBox({
               className={`p-2 rounded-full ${
                 isThoughtOpen
                   ? 'bg-neon-green text-gray-800'
-                  : 'bg-gray-200 dark:bg-gray-700'
+                  : 'bg-accent text-foreground'
               }`}
               onClick={handleFetchThought}
               disabled={isThoughtLoading}
diff --git a/www/components/settings/SettingsForm.tsx b/www/components/settings/SettingsForm.tsx
index c007902..7732b1b 100644
--- a/www/components/settings/SettingsForm.tsx
+++ b/www/components/settings/SettingsForm.tsx
@@ -153,7 +153,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
               />
               <Button
                 onClick={handleProfileUpdate}
-                className="bg-primary dark:bg-neon-green text-primary-foreground dark:text-dark-green hover:bg-primary/90 dark:hover:bg-neon-green/90 mt-2"
+                className="bg-neon-green text-foreground dark:text-dark-green hover:bg-primary/90 dark:hover:bg-neon-green/90 mt-2"
               >
                 Save
               </Button>
@@ -218,7 +218,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
             </div>
             <Button
               onClick={handleEmailChange}
-              className="bg-primary dark:bg-neon-green text-primary-foreground dark:text-dark-green hover:bg-primary/90 dark:hover:bg-neon-green/90"
+              className="bg-neon-green text-foreground dark:text-dark-green hover:bg-primary/90 dark:hover:bg-neon-green/90"
             >
               Save
             </Button>
@@ -226,7 +226,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
         ) : (
           <Button
             onClick={handlePasswordChange}
-            className="bg-primary dark:bg-neon-green text-primary-foreground dark:text-dark-green hover:bg-primary/90 dark:hover:bg-neon-green/90"
+            className="bg-neon-green text-foreground dark:text-dark-green hover:bg-primary/90 dark:hover:bg-neon-green/90"
           >
             Save Password
           </Button>
diff --git a/www/components/settings/SubscriptionSettings.tsx b/www/components/settings/SubscriptionSettings.tsx
index 80fbcdc..a59e48b 100644
--- a/www/components/settings/SubscriptionSettings.tsx
+++ b/www/components/settings/SubscriptionSettings.tsx
@@ -7,6 +7,7 @@ import { createStripePortal } from '@/utils/stripe/actions';
 import { Tables } from '@/utils/database.types';
 
 import PriceCard from '@/components/PriceCard';
+import { Button } from '@/components/ui/button';
 type Price = Tables<'prices'>;
 // type Subscription = Tables<'subscriptions'>;
 
@@ -51,13 +52,13 @@ export default function SubscriptionManager({ subscription, products }: Props) {
             : 'No Active Subscription'}
         </p>
         {subscription != null && subscription.status == 'active' ? (
-          <button
+          <Button
             onClick={handleManage}
             disabled={loading}
-            className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:opacity-50"
+            className="bg-neon-green text-foreground dark:text-dark-green hover:bg-primary/90 dark:hover:bg-neon-green/90 px-4 py-2 rounded"
           >
             Manage Subscription
-          </button>
+          </Button>
         ) : (
           <div className="flex flex-row gap-3">
             {prices.map((price: Price, idx: number) => (
diff --git a/www/components/sidebar.tsx b/www/components/sidebar.tsx
index 26b959b..0702e64 100644
--- a/www/components/sidebar.tsx
+++ b/www/components/sidebar.tsx
@@ -21,7 +21,6 @@ const departureMono = localFont({
   src: '../fonts/DepartureMono-Regular.woff2',
 });
 
-
 export default function Sidebar({
   conversations,
   mutateConversations,
@@ -173,7 +172,7 @@ export default function Sidebar({
         isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
       }`}
     >
-      <div className="h-full overflow-hidden bg-white dark:bg-gray-950 dark:text-white flex flex-col border-gray-200 dark:border-gray-700 border-r">
+      <div className="h-full overflow-hidden bg-background dark:text-white flex flex-col border-gray-200 dark:border-gray-700 border-r">
         {/* Section 1: Top buttons */}
         <div className="flex justify-between items-center p-4 gap-2 border-b border-gray-200 dark:border-gray-700">
           <button
@@ -252,7 +251,7 @@ export default function Sidebar({
               </svg>
             </button>
             {isMenuOpen && (
-              <div className="absolute right-0 bottom-full mb-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-10">
+              <div className="absolute right-0 bottom-full mb-2 w-48 bg-accent rounded-md shadow-lg py-1 z-10">
                 <button
                   className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 w-full text-left"
                   onClick={() => {
@@ -263,7 +262,7 @@ export default function Sidebar({
                 </button>
                 <button
                   className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 w-full text-left"
-                  onClick={async () => {                    
+                  onClick={async () => {
                     clearSWRCache();
                     mutate(() => true, undefined, { revalidate: false });
                     await supabase.auth.signOut();
diff --git a/www/utils/swrCache.ts b/www/utils/swrCache.ts
index 6635fb7..c77b5d4 100644
--- a/www/utils/swrCache.ts
+++ b/www/utils/swrCache.ts
@@ -14,7 +14,10 @@ export function localStorageProvider(): Cache {
     }
 
     unloadListener = () => {
-      localStorage.setItem('app-cache', JSON.stringify(Array.from(map.entries())));
+      localStorage.setItem(
+        'app-cache',
+        JSON.stringify(Array.from(map.entries()))
+      );
     };
     window.addEventListener('beforeunload', unloadListener);
 
@@ -32,4 +35,4 @@ export const clearSWRCache = () => {
     }
     localStorage.removeItem('app-cache');
   }
-};
\ No newline at end of file
+};