Update sidebar effects and styles based on figma

frontend/src/Navigation.tsx

@@ -11,7 +11,7 @@ import Github from './assets/github.svg';
 import Hamburger from './assets/hamburger.svg';
 import Info from './assets/info.svg';
 import Key from './assets/key.svg';
-import Message from './assets/message.svg';
+import Add from './assets/add.svg';
 import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
 import APIKeyModal from './preferences/APIKeyModal';
@@ -191,10 +191,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         ref={navRef}
         className={`${
           !navOpen && '-ml-96 md:-ml-[18rem]'
-        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 bg-gray-50 transition-all`}
+        } duration-20 bg-light-gray-3000 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 transition-all`}
       >
         <div className={'visible flex h-16 w-full justify-between md:h-12'}>
-          <div className="my-auto mx-4 flex cursor-pointer gap-4">
+          <div className="my-auto mx-4 flex cursor-pointer gap-1.5">
             <img src={DocsGPT3} alt="" />
             <p className="my-auto text-2xl font-semibold">DocsGPT</p>
           </div>
@@ -225,16 +225,22 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           }}
           className={({ isActive }) =>
             `${
-              isActive && conversationId === null ? 'bg-gray-3000' : ''
-            } my-auto mx-4 mt-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100`
+              isActive ? 'bg-gray-3000' : ''
+            } group my-auto mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000`
           }
         >
-          <img src={Message} className="ml-4 w-5" />
-          <p className="my-auto text-sm text-eerie-black">New Chat</p>
+          <img
+            src={Add}
+            alt="new"
+            className="opacity-80 group-hover:opacity-100"
+          />
+          <p className="my-auto text-sm text-dove-gray group-hover:text-neutral-600">
+            New Chat
+          </p>
         </NavLink>
         {conversations && (
           <div className="conversations-container max-h-[25rem] overflow-y-auto">
-            <p className="ml-6 mt-3 font-bold text-jet">Chats</p>
+            <p className="text-sm-eerie-black ml-6 mt-3 font-semibold">Chats</p>
             {conversations?.map((conversation) => (
               <ConversationTile
                 key={conversation.id}
@@ -312,7 +318,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               </div>
             )}
           </div>
-          <p className="ml-6 mt-3 font-bold text-jet">Source Docs</p>
+          <p className="ml-6 mt-3 text-sm font-semibold text-eerie-black">
+            Source Docs
+          </p>
         </div>
         <div className="flex flex-col gap-2 border-b-2 py-2">
           <div
@@ -322,7 +330,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             }}
           >
             <img src={Key} alt="key" className="ml-2 w-6" />
-            <p className="my-auto text-eerie-black">Reset Key</p>
+            <p className="my-auto text-sm text-eerie-black">Reset Key</p>
           </div>
         </div>
 
@@ -336,7 +344,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             }
           >
             <img src={Info} alt="info" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">About</p>
+            <p className="my-auto text-sm text-eerie-black">About</p>
           </NavLink>
 
           <a
@@ -346,7 +354,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
             <img src={Documentation} alt="documentation" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">Documentation</p>
+            <p className="my-auto text-sm text-eerie-black">Documentation</p>
           </a>
           <a
             href="https://discord.gg/WHJdfbQDR4"
@@ -355,7 +363,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
             <img src={Discord} alt="link" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">Visit our Discord</p>
+            <p className="my-auto text-sm text-eerie-black">
+              Visit our Discord
+            </p>
           </a>
 
           <a
@@ -365,7 +375,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
           >
             <img src={Github} alt="link" className="ml-2 w-5" />
-            <p className="my-auto text-eerie-black">Visit our Github</p>
+            <p className="my-auto text-sm text-eerie-black">Visit our Github</p>
           </a>
         </div>
       </div>

frontend/src/assets/add.svg

@@ -0,0 +1,10 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2494_3464)">
+<path d="M7.43717 14.1667C7.43717 14.4485 7.54912 14.7187 7.74837 14.918C7.94763 15.1172 8.21788 15.2292 8.49967 15.2292C8.78147 15.2292 9.05172 15.1172 9.25098 14.918C9.45023 14.7187 9.56217 14.4485 9.56217 14.1667V9.56249H14.1663C14.4481 9.56249 14.7184 9.45055 14.9176 9.2513C15.1169 9.05204 15.2288 8.78179 15.2288 8.49999C15.2288 8.2182 15.1169 7.94795 14.9176 7.74869C14.7184 7.54944 14.4481 7.43749 14.1663 7.43749H9.56217V2.83333C9.56217 2.55154 9.45023 2.28128 9.25098 2.08203C9.05172 1.88277 8.78147 1.77083 8.49967 1.77083C8.21788 1.77083 7.94763 1.88277 7.74837 2.08203C7.54912 2.28128 7.43717 2.55154 7.43717 2.83333V7.43749H2.83301C2.55122 7.43749 2.28096 7.54944 2.08171 7.74869C1.88245 7.94795 1.77051 8.2182 1.77051 8.49999C1.77051 8.78179 1.88245 9.05204 2.08171 9.2513C2.28096 9.45055 2.55122 9.56249 2.83301 9.56249H7.43717V14.1667Z" fill="#5D5D5D" />
+</g>
+<defs>
+<clipPath id="clip0_2494_3464">
+<rect width="17" height="17" fill="white"/>
+</clipPath>
+</defs>
+</svg>

frontend/tailwind.config.cjs

@@ -31,6 +31,9 @@ module.exports = {
         'green-2000': '#0FFF50',
         'light-gray': '#edeef0',
         'white-3000': '#ffffff',
+        'dove-gray': '#6c6c6c',
+        silver: '#c4c4c4',
+        'rainy-gray': '#a4a4a4',
       },
     },
   },