From 555b689428f95bd36e7585b812127c28ad0bb094 Mon Sep 17 00:00:00 2001
From: Ben Lopata <benlopata@gmail.com>
Date: Fri, 25 Oct 2024 12:45:47 -0500
Subject: [PATCH] Styling updates.

---
 www/app/settings/SettingsLayout.tsx      | 13 ++++---
 www/components/header.tsx                |  4 +-
 www/components/settings/SettingsForm.tsx | 47 ++++++++++++++----------
 www/components/sidebar.tsx               |  6 +--
 www/components/thoughts.tsx              |  2 +-
 5 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/www/app/settings/SettingsLayout.tsx b/www/app/settings/SettingsLayout.tsx
index 3b796cc..350e2c2 100644
--- a/www/app/settings/SettingsLayout.tsx
+++ b/www/app/settings/SettingsLayout.tsx
@@ -10,8 +10,8 @@ import { User } from '@supabase/supabase-js';
 
 interface SettingsProps {
   user: User | null;
-  subscription?: any | null; // Change this to the correct type when available
-  products?: any[] | null; // Change this to the correct type when available
+  subscription?: unknown | null; // Change this to the correct type when available
+  products?: unknown[] | null; // Change this to the correct type when available
 }
 
 export default function SettingsLayout({
@@ -33,16 +33,17 @@ 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-muted p-4">
+          <nav className="w-64 bg-gray-100 dark:bg-muted p-4 rounded-lg">
+            {' '}
             <ul>
               {navItems.map((item) => (
                 <li key={item.id} className="mb-2">
                   <button
                     onClick={() => setActiveTab(item.id)}
-                    className={`w-full text-left p-2 rounded ${
+                    className={`w-full text-left p-2 rounded transition-colors ${
                       activeTab === item.id
-                        ? 'bg-primary text-primary-foreground dark:bg-neon-green dark:text-black'
-                        : 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-neon-green/20'
+                        ? 'bg-gray-400 text-primary-foreground dark:bg-neon-green dark:text-black'
+                        : 'hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-neon-green/20 dark:hover:text-neon-green'
                     }`}
                   >
                     {item.label}
diff --git a/www/components/header.tsx b/www/components/header.tsx
index c238bf0..f904c6a 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 shadow">
+      <header className="sticky top-0 z-10 bg-white dark:bg-gray-800 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 shadow">
+    <header className="sticky top-0 z-10 bg-white dark:bg-gray-800 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/settings/SettingsForm.tsx b/www/components/settings/SettingsForm.tsx
index 52c425d..1380e99 100644
--- a/www/components/settings/SettingsForm.tsx
+++ b/www/components/settings/SettingsForm.tsx
@@ -218,28 +218,35 @@ export function SettingsForm({ user, type }: SettingsFormProps) {
         )}
       </CardContent>
       <CardFooter className="flex justify-start border-t pt-6">
-        {type === 'account' && (
-          <div className="space-y-2">
-            <Label htmlFor="email" className="text-foreground">
-              Email
-            </Label>
-            <Input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="bg-input text-foreground flex-grow"
-            />
+        {type === 'account' ? (
+          <div className="w-full space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="email" className="text-foreground">
+                Email
+              </Label>
+              <Input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="bg-input text-foreground w-full"
+              />
+            </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"
+            >
+              Save
+            </Button>
           </div>
+        ) : (
+          <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"
+          >
+            Save Password
+          </Button>
         )}
-        <Button
-          onClick={
-            type === 'account' ? handleEmailChange : 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 mt-2"
-        >
-          Save
-        </Button>
       </CardFooter>
     </Card>
   );
diff --git a/www/components/sidebar.tsx b/www/components/sidebar.tsx
index 1062fda..635230e 100644
--- a/www/components/sidebar.tsx
+++ b/www/components/sidebar.tsx
@@ -114,7 +114,7 @@ export default function Sidebar({
 
   return (
     <div
-      className={`fixed z-20 inset-0 flex-none h-full w-full lg:absolute lg:h-auto lg:overflow-visible lg:pt-0 lg:w-60 xl:w-72 lg:block lg:shadow-lg border-r border-gray-300 dark:border-gray-700 ${
+      className={`fixed z-20 inset-0 flex-none h-full w-full lg:absolute lg:h-auto lg:overflow-visible lg:pt-0 lg:w-60 xl:w-72 lg:block lg:shadow-lg border-r border-gray-200 dark:border-gray-700 ${
         isSidebarOpen ? '' : 'hidden'
       }`}
     >
@@ -124,7 +124,7 @@ export default function Sidebar({
         } top-0 left-0`}
       >
         {/* Section 1: Top buttons */}
-        <div className="flex justify-between items-center p-4 gap-2 border-b border-gray-300 dark:border-gray-700">
+        <div className="flex justify-between items-center p-4 gap-2 border-b border-gray-200 dark:border-gray-700">
           <button
             className="bg-neon-green text-black rounded-lg px-4 py-2 w-full lg:w-full h-10"
             onClick={addChat}
@@ -159,7 +159,7 @@ export default function Sidebar({
         </div>
 
         {/* Section 3: Authentication information */}
-        <div className="border-t border-gray-300 dark:border-gray-700 p-4 w-full flex items-center justify-between">
+        <div className="border-t border-gray-200 dark:border-gray-700 p-4 w-full flex items-center justify-between">
           <div className="flex items-center">
             {isUserLoading ? (
               <div className="w-8 h-8 rounded-full bg-gray-300 mr-2 animate-pulse"></div>
diff --git a/www/components/thoughts.tsx b/www/components/thoughts.tsx
index 3ab8e3c..b00bef0 100644
--- a/www/components/thoughts.tsx
+++ b/www/components/thoughts.tsx
@@ -13,7 +13,7 @@ export default function Thoughts({
   return (
     <section
       className={
-        'absolute h-[100dvh] flex flex-col lg:w-3/5 w-4/5 right-0 top-0 bg-neon-green transition-all duration-300 ease-in-out ' +
+        'absolute h-[100dvh] flex flex-col lg:w-3/5 w-4/5 right-0 top-0 bg-neon-green transition-all duration-300 ease-in-out text-black ' +
         (isThoughtsOpen ? 'translate-x-0 shadow-lg' : 'translate-x-full')
       }
     >