Ben/dev 541 (#197)

* fix(ui): Zoom out 10% * fix(ui): Update colors to match brand kit * chore(honcho): upgrade honcho * chore(pnpm): update lock * Adds unstable cache fetching for user subscription prior to chat inference. * Fix prompt. * Fix build. * Changes requested from pull request. * Refactor chatAccess object assignment. * Refactor chat route. * Adds util for creation unstable cache. * Uses new cache util and adds getOrCreateSubscription check to new method. * Refactor Chat component: enable router import, streamline error handling, and improve default message logic. Simplified response handling for honcho content retrieval. * Refactor subscription management from PR feedback. * Enhance chat access management and error handling. Updated Chat component to handle 402 status responses, refactored subscription checks. * Cleanup fetchStream invocations. * Cleanup Chat UI code. * Rename sidebar prop for app access. * Fix banner height. * Fix reaction button backgrounds. * Tweak banner height for mobile display. * Fix sweetalert buttons not rendering. * Revert overflow. * Fix header icon, make departure font accessible globally. * Fix classnames. * Fix dark/light mode icon state. --------- Co-authored-by: Vineeth Voruganti <[email protected]>
plastic-labs · Dec 30, 2024 · 09780e7 · 09780e7
1 parent 793f60d
commit 09780e7
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 17 deletions.
diff --git a/www/app/Chat.tsx b/www/app/Chat.tsx
@@ -457,14 +457,14 @@ What\'s on your mind? Let\'s dive in. 🌱`,
       <div className="flex-1 flex flex-col flex-grow overflow-hidden">
         {!isSidebarOpen && (
           <button
-            className={`absolute top-4 left-4 z-30 lg:hidden bg-neon-green text-black rounded-lg p-2 border border-black`}
+            className={`absolute top-3 left-4 z-30 lg:hidden bg-neon-green text-black rounded-lg p-2 border border-black`}
             onClick={() => setIsSidebarOpen(true)}
           >
             <FiMenu size={24} />
           </button>
         )}
         {!isSubscribed && (
-          <section className="h-16 lg:h-[72px] w-full bg-neon-green text-black text-center flex items-center justify-center flex-shrink-0">
+          <section className="h-[63px] w-full bg-neon-green text-black text-center flex items-center justify-center flex-shrink-0">
             <p className="lg:ml-0 ml-12">
               {freeMessages === 0
                 ? "You've used all your free messages"

diff --git a/www/app/layout.tsx b/www/app/layout.tsx
@@ -7,6 +7,7 @@ import { Suspense } from 'react';
 import { Header } from '@/components/header';
 import { ThemeProvider } from 'next-themes';
 import { SpeedInsights } from '@vercel/speed-insights/next';
+import { departureMono } from '@/utils/fonts';
 
 const roboto = Roboto_Mono({ weight: '400', subsets: ['latin'] });
 

diff --git a/www/components/auth/forgot.tsx b/www/components/auth/forgot.tsx
@@ -19,6 +19,7 @@ export default function Forgot(props: any) {
         title: 'Error!',
         text: 'Something went wrong',
         icon: 'error',
+        confirmButtonColor: '#3085d6',
         confirmButtonText: 'Close',
       });
       return;
@@ -27,6 +28,7 @@ export default function Forgot(props: any) {
       title: 'Success!',
       text: 'Please check your email for a password reset link',
       icon: 'success',
+      confirmButtonColor: '#3085d6',
       confirmButtonText: 'Close',
     });
   };
@@ -50,7 +52,7 @@ export default function Forgot(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 border-neon-green bg-neon-green px-12 py-3 text-sm font-medium transition hover:bg-transparent hover:text-blue-600 focus:outline-none focus:ring active:text-blue-500"
+          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-black bg-accent hover:border-neon-green hover:bg-neon-green dark:hover:text-neon-green dark:border-neon-green dark:bg-neon-green dark:hover:bg-transparent"
           onClick={handleForgotPassword}
         >
           Send Recovery Email

diff --git a/www/components/auth/reset.tsx b/www/components/auth/reset.tsx
@@ -28,6 +28,7 @@ export default function Forgot(props: any) {
         title: 'Error!',
         text: 'Something went wrong',
         icon: 'error',
+        confirmButtonColor: '#3085d6',
         confirmButtonText: 'Close',
       });
       console.error(error);
@@ -39,6 +40,7 @@ export default function Forgot(props: any) {
         title: 'Success!',
         text: 'Password updated successfully',
         icon: 'success',
+        confirmButtonColor: '#3085d6',
         confirmButtonText: 'Close',
       });
       router.push(`/`);

diff --git a/www/components/auth/signIn.tsx b/www/components/auth/signIn.tsx
@@ -83,7 +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-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`}
+            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-black bg-accent hover:border-neon-green hover:bg-neon-green hover:bg-neon-green dark:hover:text-neon-green dark:border-neon-green dark:bg-neon-green dark:hover:bg-transparent`}
           >
             {isLoading ? (
               <svg className="animate-spin h-5 w-5 mx-auto" viewBox="0 0 24 24">

diff --git a/www/components/header.tsx b/www/components/header.tsx
@@ -1,22 +1,27 @@
 'use client';
-import { useTheme } from 'next-themes';
+// import { useTheme } from 'next-themes';
 import Image from 'next/image';
 import Link from 'next/link';
 import { DarkModeSwitch } from 'react-toggle-dark-mode';
 import { useEffect, useState } from 'react';
-import lightBanner from '@/public/bloom2x1.svg';
-import darkBanner from '@/public/bloom2x1dark.svg';
+import bloomIcon from '@/public/bloom_icon_large.jpg';
+import { departureMono } from '@/utils/fonts';
+// import lightBanner from '@/public/bloom2x1.svg';
+// import darkBanner from '@/public/bloom2x1dark.svg';
 
 export function Header() {
-  const { theme, setTheme } = useTheme();
+  // const { theme, setTheme } = useTheme();
+  const [isDark, setIsDark] = useState(false);
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
     setMounted(true);
+    setIsDark(document.documentElement.classList.contains('dark'));
   }, []);
 
   const toggleDarkMode = (checked: boolean) => {
-    setTheme(checked ? 'dark' : 'light');
+    document.documentElement.classList.toggle('dark');
+    setIsDark(checked);
   };
 
   if (!mounted) {
@@ -33,16 +38,19 @@ export function Header() {
   return (
     <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>
+        <Link href="/" className="flex items-center gap-2 cursor-pointer">
           <Image
-            src={theme === 'dark' ? darkBanner : lightBanner}
+            src={bloomIcon}
             alt="Bloom Logo"
-            className="h-10 w-auto cursor-pointer"
+            width={32}
+            height={32}
+            className="rounded-full"
           />
+          <span className={`text-foreground text-xl font-departure ${departureMono.className}`}>BLOOM</span>
         </Link>
         <div className="flex justify-between items-center gap-4">
           <DarkModeSwitch
-            checked={theme === 'dark'}
+            checked={isDark}
             onChange={toggleDarkMode}
             size={24}
           />

diff --git a/www/components/settings/SettingsForm.tsx b/www/components/settings/SettingsForm.tsx
@@ -53,6 +53,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
         title: 'Success!',
         text: 'Please check your new email for a confirmation link',
         icon: 'success',
+        confirmButtonColor: '#3085d6',
         confirmButtonText: 'Close',
       });
     } catch (error) {
@@ -61,6 +62,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
         title: 'Error!',
         text: 'Something went wrong while updating your email',
         icon: 'error',
+        confirmButtonColor: '#3085d6',
         confirmButtonText: 'Close',
       });
     }
@@ -77,6 +79,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
         title: 'Success!',
         text: 'Your profile has been updated',
         icon: 'success',
+        confirmButtonColor: '#3085d6',
         confirmButtonText: 'Close',
       });
     } catch (error) {
@@ -85,6 +88,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
         title: 'Error!',
         text: 'Something went wrong while updating your profile',
         icon: 'error',
+        confirmButtonColor: '#3085d6',
         confirmButtonText: 'Close',
       });
     }
@@ -97,6 +101,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
         title: 'Error!',
         text: 'Passwords do not match',
         icon: 'error',
+        confirmButtonColor: '#3085d6',
         confirmButtonText: 'Close',
       });
       return;
@@ -110,6 +115,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
         title: 'Success!',
         text: 'Your password has been updated',
         icon: 'success',
+        confirmButtonColor: '#3085d6',
         confirmButtonText: 'Close',
       });
       setNewPassword('');
@@ -120,6 +126,7 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
         title: 'Error!',
         text: 'Something went wrong while updating your password',
         icon: 'error',
+        confirmButtonColor: '#3085d6',
         confirmButtonText: 'Close',
       });
     }

diff --git a/www/components/sidebar.tsx b/www/components/sidebar.tsx
@@ -1,7 +1,7 @@
+import React from 'react';
 import { GrClose } from 'react-icons/gr';
 import { createClient } from '@/utils/supabase/client';
 import { useRouter } from 'next/navigation';
-import localFont from 'next/font/local';
 
 import { usePostHog } from 'posthog-js/react';
 import Swal from 'sweetalert2';
@@ -16,10 +16,9 @@ import {
 } from '@/app/actions/conversations';
 import { type Conversation, type Message } from '@/utils/types';
 import { clearSWRCache } from '@/utils/swrCache';
+import { departureMono } from '@/utils/fonts';
+
 
-const departureMono = localFont({
-  src: '../fonts/DepartureMono-Regular.woff2',
-});
 
 export default function Sidebar({
   conversations,

diff --git a/www/public/bloom_icon_large.jpg b/www/public/bloom_icon_large.jpg
diff --git a/www/utils/fonts.ts b/www/utils/fonts.ts
@@ -0,0 +1,5 @@
+import localFont from 'next/font/local';
+
+export const departureMono = localFont({
+  src: '../fonts/DepartureMono-Regular.woff2',
+});