UI changes

src/components/EmptyChat.tsx

@@ -36,7 +36,7 @@ const EmptyChat = ({
       </div>
       <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
         <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
-          Research begins here.
+          User Research starts here.
         </h2>
         <EmptyChatMessageInput
           sendMessage={sendMessage}

src/components/EmptyChatMessageInput.tsx

@@ -84,7 +84,7 @@ const EmptyChatMessageInput = ({
         />
         <div className="flex flex-row items-center justify-between mt-4">
           <div className="flex flex-row items-center space-x-2 lg:space-x-4">
-            <Focus focusMode={focusMode} setFocusMode={setFocusMode} />
+            {/* <Focus focusMode={focusMode} setFocusMode={setFocusMode} /> */}
             <Attach
               fileIds={fileIds}
               setFileIds={setFileIds}
@@ -94,10 +94,10 @@ const EmptyChatMessageInput = ({
             />
           </div>
           <div className="flex flex-row items-center space-x-1 sm:space-x-4">
-            <Optimization
+            {/* <Optimization
               optimizationMode={optimizationMode}
               setOptimizationMode={setOptimizationMode}
-            />
+            /> */}
             <button
               disabled={message.trim().length === 0}
               className="bg-[#24A0ED] text-white disabled:text-black/50 dark:disabled:text-white/50 disabled:bg-[#e0e0dc] dark:disabled:bg-[#ececec21] hover:bg-opacity-85 transition duration-100 rounded-full p-2"

src/components/MessageInput.tsx

@@ -99,10 +99,10 @@ const MessageInput = ({
       />
       {mode === 'single' && (
         <div className="flex flex-row items-center space-x-4">
-          <CopilotToggle
+          {/* <CopilotToggle
             copilotEnabled={copilotEnabled}
             setCopilotEnabled={setCopilotEnabled}
-          />
+          /> */}
           <button
             disabled={message.trim().length === 0 || loading}
             className="bg-[#24A0ED] text-white disabled:text-black/50 dark:disabled:text-white/50 hover:bg-opacity-85 transition duration-100 disabled:bg-[#e0e0dc79] dark:disabled:bg-[#ececec21] rounded-full p-2"

src/components/Sidebar.tsx

@@ -7,53 +7,37 @@ import { useSelectedLayoutSegments } from 'next/navigation';
 import React, { useState, type ReactNode } from 'react';
 import Layout from './Layout';
 
-const VerticalIconContainer = ({ children }: { children: ReactNode }) => {
-  return (
-    <div className="flex flex-col items-center gap-y-3 w-full">{children}</div>
-  );
-};
-
 const Sidebar = ({ children }: { children: React.ReactNode }) => {
   const segments = useSelectedLayoutSegments();
 
   const navLinks = [
-    {
-      icon: Home,
-      href: '/',
-      active: segments.length === 0 || segments.includes('c'),
-      label: 'Home',
-    },
-    {
-      icon: Search,
-      href: '/discover',
-      active: segments.includes('discover'),
-      label: 'Discover',
-    },
-    {
-      icon: BookOpenText,
-      href: '/library',
-      active: segments.includes('library'),
-      label: 'Library',
-    },
+    { icon: Home, href: '/', active: segments.length === 0 || segments.includes('c'), label: 'Home' },
+    // { icon: Search, href: '/discover', active: segments.includes('discover'), label: 'Discover' },
+    // { icon: BookOpenText, href: '/library', active: segments.includes('library'), label: 'Library' },
   ];
 
   return (
     <div>
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-20 lg:flex-col">
-        <div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-light-secondary dark:bg-dark-secondary px-2 py-8">
-          <a href="/">
-            <SquarePen className="cursor-pointer" />
+        <div className="flex flex-col items-center justify-between h-full overflow-y-auto bg-light-secondary dark:bg-dark-secondary px-2 py-4">
+          
+          {/* Logo at the Top Corner */}
+          <a href="/" className="mt-2">
+            <img src="/logo.png" alt="Logo" className="w-14 h-14" />
           </a>
-          <VerticalIconContainer>
+
+          {/* Grouped Middle Icons */}
+          <div className="flex flex-col items-center space-y-2 mt-6">
+            <a href="/">
+              <SquarePen className="cursor-pointer" />
+            </a>
             {navLinks.map((link, i) => (
               <Link
                 key={i}
                 href={link.href}
                 className={cn(
-                  'relative flex flex-row items-center justify-center cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 duration-150 transition w-full py-2 rounded-lg',
-                  link.active
-                    ? 'text-black dark:text-white'
-                    : 'text-black/70 dark:text-white/70',
+                  'relative flex flex-row items-center justify-center cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 duration-150 transition w-full py-1.5 rounded-lg',
+                  link.active ? 'text-black dark:text-white' : 'text-black/70 dark:text-white/70'
                 )}
               >
                 <link.icon />
@@ -62,9 +46,10 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
                 )}
               </Link>
             ))}
-          </VerticalIconContainer>
+          </div>
 
-          <Link href="/settings">
+          {/* Settings Icon at the Bottom */}
+          <Link href="/settings" className="mb-4">
             <Settings className="cursor-pointer" />
           </Link>
         </div>
@@ -77,9 +62,7 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
             key={i}
             className={cn(
               'relative flex flex-col items-center space-y-1 text-center w-full',
-              link.active
-                ? 'text-black dark:text-white'
-                : 'text-black dark:text-white/70',
+              link.active ? 'text-black dark:text-white' : 'text-black dark:text-white/70'
             )}
           >
             {link.active && (

tailwind.config.ts

@@ -1,18 +1,32 @@
 import type { Config } from 'tailwindcss';
 import type { DefaultColors } from 'tailwindcss/types/generated/colors';
 
+// const themeDark = (colors: DefaultColors) => ({
+//   50: '#0a0a0a',
+//   100: '#111111',
+//   200: '#1c1c1c',
+// });
+
 const themeDark = (colors: DefaultColors) => ({
-  50: '#0a0a0a',
-  100: '#111111',
-  200: '#1c1c1c',
+  50: '#0a1f44',  // Dark Navy Blue
+  100: '#081a37', // Slightly Darker Blue
+  200: '#06132a', // Deepest Dark Blue
 });
 
+
+// const themeLight = (colors: DefaultColors) => ({
+//   50: '#fcfcf9',
+//   100: '#f3f3ee',
+//   200: '#e8e8e3',
+// });
+
 const themeLight = (colors: DefaultColors) => ({
-  50: '#fcfcf9',
-  100: '#f3f3ee',
-  200: '#e8e8e3',
+  50: '#e0f7fa',  // Lightest Blue
+  100: '#b2ebf2', // Lighter Blue
+  200: '#80deea', // Slightly Darker Blue
 });
 
+
 const config: Config = {
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',