enhance ui and fix layout problems (#63)

components/Sidebar/Conversations.tsx

@@ -38,17 +38,17 @@ export const Conversations: FC<Props> = ({ loading, conversations, selectedConve
   }, [isRenaming, isDeleting]);
 
   return (
-    <div className="flex flex-col-reverse gap-2 w-full px-2">
+    <div className="flex flex-col-reverse gap-1 w-full pt-2">
       {conversations.map((conversation, index) => (
         <button
           key={index}
-          className={`flex items-center justify-start min-h-[40px] px-2 text-sm rounded-lg hover:bg-neutral-700 cursor-pointer ${loading ? "disabled:cursor-not-allowed" : ""} ${selectedConversation.id === conversation.id ? "bg-slate-600" : ""}`}
+          className={`flex gap-3 items-center p-3 text-sm rounded-lg hover:bg-[#343541]/90 transition-colors duration-200 cursor-pointer ${loading ? "disabled:cursor-not-allowed" : ""} ${selectedConversation.id === conversation.id ? "bg-[#343541]/90" : ""}`}
           onClick={() => onSelectConversation(conversation)}
           disabled={loading}
         >
           <IconMessage
-            className="mr-2 min-w-[20px]"
-            size={18}
+            className=""
+            size={16}
           />
 
           {isRenaming && selectedConversation.id === conversation.id ? (
@@ -65,10 +65,10 @@ export const Conversations: FC<Props> = ({ loading, conversations, selectedConve
           )}
 
           {(isDeleting || isRenaming) && selectedConversation.id === conversation.id && (
-            <div className="flex w-[40px]">
+            <div className="flex gap-1 -ml-2">
               <IconCheck
-                className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
-                size={18}
+                className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
+                size={16}
                 onClick={(e) => {
                   e.stopPropagation();
 
@@ -84,8 +84,8 @@ export const Conversations: FC<Props> = ({ loading, conversations, selectedConve
               />
 
               <IconX
-                className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
-                size={18}
+                className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
+                size={16}
                 onClick={(e) => {
                   e.stopPropagation();
                   setIsDeleting(false);
@@ -96,7 +96,7 @@ export const Conversations: FC<Props> = ({ loading, conversations, selectedConve
           )}
 
           {selectedConversation.id === conversation.id && !isDeleting && !isRenaming && (
-            <div className="flex w-[40px]">
+            <div className="flex gap-1 -ml-2">
               <IconPencil
                 className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
                 size={18}

components/Sidebar/Key.tsx

@@ -24,11 +24,11 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
   };
 
   return isChanging ? (
-    <div className="flex hover:bg-[#343541] py-2 px-2 rounded-md cursor-pointer w-full items-center">
+    <div className="flex transition-colors duration:200 hover:bg-gray-500/10 py-3 px-3 rounded-md cursor-pointer w-full items-center">
       <IconKey size={16} />
 
       <input
-        className="ml-2 flex-1 bg-transparent border-b border-neutral-400 focus:border-neutral-100 text-left overflow-hidden overflow-ellipsis pr-1 outline-none text-white"
+        className="ml-2 flex-1 h-[20px] bg-transparent border-b border-neutral-400 focus:border-neutral-100 text-left overflow-hidden overflow-ellipsis pr-1 outline-none text-white"
         type="password"
         value={newKey}
         onChange={(e) => setNewKey(e.target.value)}

components/Sidebar/Search.tsx

@@ -16,9 +16,9 @@ export const Search: FC<Props> = ({ searchTerm, onSearch }) => {
   };
 
   return (
-    <div className="relative flex items-center sm:pl-2 px-2 mb-2">
+    <div className="relative flex items-center">
       <input
-        className="flex-1 w-full pr-10 bg-[#202123] border border-neutral-600 text-sm rounded-lg px-4 py-2 text-white"
+        className="flex-1 w-full pr-10 bg-[#202123] border border-neutral-600 text-sm rounded-md px-4 py-3 text-white"
         type="text"
         placeholder="Search conversations..."
         value={searchTerm}

components/Sidebar/Sidebar.tsx

@@ -34,17 +34,17 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
   }, [searchTerm, conversations]);
 
   return (
-    <div className={`flex flex-col bg-[#202123] min-w-full sm:min-w-[260px] sm:max-w-[260px] z-10 sm:relative sm:top-0 absolute top-12 bottom-0`}>
-      <div className="flex items-center h-[60px] sm:pl-2 px-2">
+    <div className={`h-full flex flex-col flex-none space-y-2 p-2 flex-col bg-[#202123] w-[260px] z-10 sm:relative sm:top-0 absolute top-12 bottom-0`}>
+      <div className="flex items-center">
         <button
-          className="flex items-center w-full sm:w-[200px] h-[40px] rounded-lg bg-[#202123] border border-neutral-600 text-sm hover:bg-neutral-700"
+          className="flex gap-3 p-3 items-center w-full sm:w-[200px] rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm flex-shrink-0 border border-white/20"
           onClick={() => {
             onNewConversation();
             setSearchTerm("");
           }}
         >
           <IconPlus
-            className="ml-4 mr-3"
+            className=""
             size={16}
           />
           New chat
@@ -52,7 +52,7 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
 
         <IconArrowBarLeft
           className="ml-1 p-1 text-neutral-300 cursor-pointer hover:text-neutral-400 hidden sm:flex"
-          size={38}
+          size={32}
           onClick={onToggleSidebar}
         />
       </div>
@@ -64,7 +64,7 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
         />
       )}
 
-      <div className="flex-1 overflow-auto">
+      <div className="flex-grow overflow-auto">
         <Conversations
           loading={loading}
           conversations={filteredConversations}

components/Sidebar/SidebarButton.tsx

@@ -9,10 +9,10 @@ interface Props {
 export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
   return (
     <div
-      className="flex hover:bg-[#343541] py-2 px-2 rounded-md cursor-pointer w-full items-center"
+      className="flex py-3 px-3 gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer w-full items-center"
       onClick={onClick}
     >
-      <div className="mr-2">{icon}</div>
+      <div className="">{icon}</div>
       <div>{text}</div>
     </div>
   );

components/Sidebar/SidebarSettings.tsx

@@ -14,7 +14,7 @@ interface Props {
 
 export const SidebarSettings: FC<Props> = ({ lightMode, apiKey, onToggleLightMode, onApiKeyChange, onClearConversations }) => {
   return (
-    <div className="flex flex-col items-center border-t border-neutral-500 px-2 py-4 text-sm space-y-2">
+    <div className="flex flex-col pt-1 items-center border-t border-white/20 text-sm space-y-1">
       <ClearConversations onClearConversations={onClearConversations} />
 
       <SidebarButton