tweaks

Author: andrewrisse

src/leapfrogai_ui/src/lib/components/LFSidebar.svelte

@@ -57,16 +57,16 @@
   data-testid="sidebar"
   class="sidebar-height flex w-[var(--sidebar-width)] border-r border-gray-700  dark:bg-gray-800 "
 >
-  <SidebarWrapper class="flex w-full flex-col px-0">
+  <SidebarWrapper class="flex w-full flex-col p-0">
     <SidebarGroup>
-      <div class="flex flex-col gap-2 px-3">
+      <div class="flex flex-col gap-2 px-3 py-4">
         <Button on:click={() => threadsStore.changeThread('')} class="justify-between">
           New chat <PlusOutline />
         </Button>
         <Input type="txt" placeholder="Search..." bind:value={searchText} maxlength={25}></Input>
       </div>
     </SidebarGroup>
-    <Hr classHr="my-2" />
+    <Hr classHr="my-0" />
     <SidebarGroup class="no-scrollbar flex-grow overflow-y-scroll px-3" data-testid="threads">
       {#each organizedThreads as category}
         {#if category.threads.length > 0}
@@ -88,8 +88,8 @@
         {/if}
       {/each}
     </SidebarGroup>
-    <Hr classHr="my-2" />
-    <SidebarGroup class="px-3 py-2">
+    <Hr classHr="my-0" />
+    <SidebarGroup class="px-3 py-4">
       <ImportExport />
     </SidebarGroup>
   </SidebarWrapper>

src/leapfrogai_ui/src/lib/components/LFSidebarDropdownItem.svelte

@@ -131,12 +131,12 @@ It adds a "three-dot" menu button with Dropdown, and delete confirmation Modal
       <button
         data-testid={`thread-menu-btn-${label}`}
         id={`btn-${threadId}`}
-        class={twMerge(popperOpen && 'focus:rounded focus:bg-gray-400', !hovered && 'hidden')}
+        class={!hovered && 'opacity-0'}
         on:click={(e) => {
           e.stopPropagation();
         }}
       >
-        <DotsVerticalOutline color="white" />
+        <DotsVerticalOutline class="dark:text-gray-400 dark:hover:text-white" />
       </button>
     </button>
 

src/leapfrogai_ui/src/lib/components/SelectAssistantDropdown.svelte

@@ -29,7 +29,7 @@
 
 <Button
   color="dark"
-  class="max-h-[42px] w-48 flex-shrink-0 justify-between dark:bg-gray-700  dark:focus-within:ring-1 dark:focus-within:ring-blue-500"
+  class="max-h-[42px] w-48 flex-shrink-0 justify-between border border-gray-600 dark:bg-gray-700  dark:focus-within:ring-1 dark:focus-within:ring-blue-500"
   ><span class="truncate">{selectedAssistantName}</span><ChevronDownOutline
     class="ms-2 h-6 w-6 text-white dark:text-white"
     data-testid="assistants-select-btn"

src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte

@@ -365,7 +365,7 @@
 
     <div
       class={twMerge(
-        'flex flex-grow flex-col gap-1 rounded-lg bg-gray-50 px-4 py-0 dark:bg-gray-700',
+        'flex flex-grow flex-col gap-1 rounded-lg border border-gray-600 bg-gray-50 px-4 py-0 dark:bg-gray-700',
         attachedFileMetadata.length > 0 && 'py-4',
         'min-w-0'
       )}