fix(ui): Update colors to match brand kit

plastic-labs · Dec 16, 2024 · 780bb3a · 780bb3a
1 parent ad5e5a2
commit 780bb3a
Show file tree

Hide file tree

Showing 18 changed files with 118 additions and 158 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -62,4 +62,4 @@ export default async function Home() {
       />
     </>
   );
-}
+}
diff --git 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
@@ -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
@@ -32,20 +32,17 @@ 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>
 
         <input
           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
@@ -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,23 +75,15 @@ 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)}
           />
         </div>
 
         <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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,4 +62,4 @@ export default async function Home() { @@
           />
         </>
       );
-    }
+    }