chore(ui): style updates part1 (#1168)

defenseunicorns · Oct 7, 2024 · bab2dcd · bab2dcd
1 parent 8129c34
commit bab2dcd
Show file tree

Hide file tree

Showing 18 changed files with 171 additions and 141 deletions.
diff --git a/src/leapfrogai_ui/src/app.css b/src/leapfrogai_ui/src/app.css
@@ -6,7 +6,7 @@
   --header-height: 3rem;
   --message-input-height: 2.5rem;
   --sidebar-width: 255px;
-  scrollbar-color: #4b5563 #1f2937;
+  scrollbar-color: #4b5563 transparent;
 }
 
 /* Override TailwindCSS default Preflight styles for lists in messages */

diff --git a/src/leapfrogai_ui/src/lib/components/ChatFileUpload.svelte b/src/leapfrogai_ui/src/lib/components/ChatFileUpload.svelte
@@ -145,8 +145,8 @@
   }}
   accept={ACCEPTED_DOC_AND_AUDIO_FILE_TYPES}
   disabled={uploadingFiles}
-  class="remove-btn-style flex  rounded-lg  p-1.5 text-gray-500 hover:bg-inherit dark:hover:bg-inherit"
+  class="remove-btn-style flex  rounded-lg  p-1.5 hover:bg-inherit dark:hover:bg-inherit dark:focus:ring-0"
 >
-  <PaperClipOutline class="text-gray-300" />
+  <PaperClipOutline class="dark:text-gray-400 dark:hover:text-gray-300" />
   <span class="sr-only">Attach file</span>
 </LFFileUploadBtn>
diff --git a/src/leapfrogai_ui/src/lib/components/FileChatActions.svelte b/src/leapfrogai_ui/src/lib/components/FileChatActions.svelte
@@ -122,7 +122,6 @@
         }
         return;
       }
-
       // save translation response
       let responseMessage;
       try {
@@ -139,7 +138,7 @@
         await handleGeneralError(toastError);
         responseMessage = await saveMessage({
           thread_id: threadId,
-          content: 'There was an error translating the file',
+          content: 'There was an error processing the file',
           role: 'assistant',
           metadata: {
             wasTranscriptionOrTranslation: 'true'

diff --git a/src/leapfrogai_ui/src/lib/components/IconButton.svelte b/src/leapfrogai_ui/src/lib/components/IconButton.svelte
@@ -1,10 +1,22 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
 
-  export let btnClass =
-    'dark:text-gray-400 dark:hover:text-white rounded-lg p-1 transition duration-100 ease-in-out';
+  export let btnClass = 'dark:text-gray-400 dark:hover:text-white rounded-lg p-1';
 </script>
 
-<button type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)} on:click>
+<button
+  type="button"
+  {...$$restProps}
+  class={twMerge(btnClass, $$props.class)}
+  on:click
+  on:change
+  on:keydown
+  on:keyup
+  on:touchstart|passive
+  on:touchend
+  on:touchcancel
+  on:mouseenter
+  on:mouseleave
+>
   <slot />
 </button>
diff --git a/src/leapfrogai_ui/src/lib/components/ImportExport.svelte b/src/leapfrogai_ui/src/lib/components/ImportExport.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Button, Spinner } from 'flowbite-svelte';
-  import { DownloadOutline } from 'flowbite-svelte-icons';
+  import { FileExportOutline, FileImportOutline } from 'flowbite-svelte-icons';
   import { threadsStore, toastStore } from '$stores';
   import { threadsSchema } from '$schemas/threadSchema';
   import type { LFThread } from '$lib/types/threads';
@@ -84,19 +84,21 @@
   {:else}
     <LFFileUploadBtn
       data-testid="import-chat-history-input"
+      color="alternative"
       outline
       size="sm"
       on:change={(e) => onUpload(e.detail)}
       accept={['application/json']}
       disabled={importing}
+      btnColor="alternative"
     >
-      Import chat history <DownloadOutline /></LFFileUploadBtn
+      Import chat history <FileImportOutline /></LFFileUploadBtn
     >
   {/if}
 
-  <Button id="export-btn" outline size="sm" on:click={onExport} class="w-full">
+  <Button id="export-btn" outline size="sm" color="alternative" on:click={onExport} class="w-full">
     <div class="flex w-full justify-between">
-      Export chat history <DownloadOutline />
+      Export chat history <FileExportOutline />
     </div>
   </Button>
 </div>
diff --git a/src/leapfrogai_ui/src/lib/components/LFFileUploadBtn.svelte b/src/leapfrogai_ui/src/lib/components/LFFileUploadBtn.svelte
@@ -12,6 +12,8 @@
   export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' = 'sm';
   export let outline: boolean = false;
   export let testId: string | null = null; // for the button element
+  export let btnColor = 'primary';
+  export let unstyled = false;
 
   const dispatch = createEventDispatcher();
 </script>
@@ -36,16 +38,30 @@
     {...$$restProps}
     class="sr-only"
   />
-  <Button
-    data-testid={testId}
-    {outline}
-    {size}
-    {disabled}
-    on:click={() => ref?.click()}
-    class={twMerge('w-full', $$props.class)}
-  >
-    <div class="flex w-full justify-between">
-      <slot />
-    </div>
-  </Button>
+  {#if unstyled}
+    <button
+      data-testid={testId}
+      {disabled}
+      on:click={() => ref?.click()}
+      class={twMerge('w-full', $$props.class)}
+    >
+      <div class="flex w-full justify-between">
+        <slot />
+      </div>
+    </button>
+  {:else}
+    <Button
+      data-testid={testId}
+      color={btnColor}
+      {outline}
+      {size}
+      {disabled}
+      on:click={() => ref?.click()}
+      class={twMerge('w-full', $$props.class)}
+    >
+      <div class="flex w-full justify-between">
+        <slot />
+      </div>
+    </Button>
+  {/if}
 </div>
diff --git a/src/leapfrogai_ui/src/lib/components/LFSidebar.svelte b/src/leapfrogai_ui/src/lib/components/LFSidebar.svelte
@@ -57,33 +57,39 @@
   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">
-        <Button on:click={() => threadsStore.changeThread('')}>
-          <PlusOutline />New Chat
+      <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}
-          <SidebarDropdownWrapper label={category.label} isOpen={true}>
+          <SidebarDropdownWrapper
+            label={category.label}
+            isOpen={true}
+            spanClass="flex-1 text-left whitespace-nowrap"
+            ulClass="pt-0.5 pb-1 space-y-2"
+          >
             {#each category.threads as thread (thread.id)}
               <LFSidebarDropdownItem
                 threadId={thread.id}
                 label={thread.metadata.label}
                 active={activeThreadId === thread.id}
+                labelClass="ps-4"
               />
             {/each}
           </SidebarDropdownWrapper>
         {/if}
       {/each}
     </SidebarGroup>
-    <Hr classHr="my-2" />
-    <SidebarGroup class="px-3">
+    <Hr classHr="my-0" />
+    <SidebarGroup class="px-3 py-4">
       <ImportExport />
     </SidebarGroup>
   </SidebarWrapper>

diff --git a/src/leapfrogai_ui/src/lib/components/LFSidebarDropdownItem.svelte b/src/leapfrogai_ui/src/lib/components/LFSidebarDropdownItem.svelte
@@ -1,27 +1,28 @@
 <!--
 This is a modified version of Flowbite Svelte's SidebarDropdownItem.svelte component
-It adds a "three-dot" menu button with Popover, and delete confirmation Modal
+It adds a "three-dot" menu button with Dropdown, and delete confirmation Modal
 -->
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
-  import { Button, Input, P, Popover } from 'flowbite-svelte';
+  import { Button, Dropdown, DropdownItem, Input, Modal, P } from 'flowbite-svelte';
   import { DotsVerticalOutline, ExclamationCircleOutline } from 'flowbite-svelte-icons';
   import { threadsStore } from '$stores';
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import { MAX_LABEL_SIZE } from '$constants';
-  import { Modal } from 'flowbite-svelte';
 
   export let sClass: string =
-    'flex items-center p-2 ps-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+    'flex items-center p-2 ps-4 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
   export let threadId: string;
   export let label: string = '';
   export let activeClass: string =
-    'flex items-center p-2 ps-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+    'flex items-center p-2 ps-4 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
   export let active: boolean = false;
+  export let labelClass: string = '';
   let deleteModalOpen = false;
   let editLabelText: string | undefined = label;
   let editLabelInputDisabled = false;
+  let hovered = false;
 
   $: popperOpen = false;
   $: editMode = false;
@@ -71,7 +72,13 @@ It adds a "three-dot" menu button with Popover, and delete confirmation Modal
   };
 </script>
 
-<li class="flex flex-grow justify-between">
+<li
+  class="flex flex-grow justify-between"
+  on:mouseover={() => (hovered = true)}
+  on:mouseout={() => (hovered = false)}
+  on:focus
+  on:blur
+>
   {#if editMode}
     <Input
       data-testid="edit-thread-input"
@@ -108,48 +115,48 @@ It adds a "three-dot" menu button with Popover, and delete confirmation Modal
       on:click={async () => {
         await threadsStore.changeThread(threadId);
       }}
+      aria-label={label}
       class={twMerge(
         active ? activeClass : sClass,
         'truncate',
         'flex-grow',
         'cursor-pointer',
+        'justify-between',
         $$props.class
       )}
     >
-      <P size="sm" class="truncate whitespace-nowrap">
+      <P size="sm" class={twMerge('truncate whitespace-nowrap', labelClass)}>
         {label}
       </P>
+      <button
+        data-testid={`thread-menu-btn-${label}`}
+        id={`btn-${threadId}`}
+        class={!hovered && 'opacity-0'}
+        on:click={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <DotsVerticalOutline class="dark:text-gray-400 dark:hover:text-white" />
+      </button>
     </button>
-    <button
-      data-testid={`thread-menu-btn-${label}`}
-      id={`btn-${threadId}`}
-      class={popperOpen && 'focus:rounded focus:bg-gray-400'}
-    >
-      <DotsVerticalOutline color="white" />
-    </button>
-    <Popover
+
+    <Dropdown
       data-testid={'sidebar-popover'}
-      class="w-32 border-none border-none text-sm font-light"
-      defaultClass="p-0"
       placement="right"
       trigger="click"
       triggeredBy={`#btn-${threadId}`}
-      arrow={false}
       on:show={() => {
         popperOpen = !popperOpen;
       }}
-      ><div class="flex flex-col items-center gap-1">
-        <Button size="xs" class="w-full" on:click={handleEditClick}>Edit</Button>
-        <Button
-          size="xs"
-          class="w-full"
-          on:click={(e) => {
-            e.stopPropagation();
-            deleteModalOpen = true;
-          }}>Delete</Button
-        >
-      </div></Popover
     >
+      <DropdownItem on:click={handleEditClick}>Edit</DropdownItem>
+      <DropdownItem
+        on:click={(e) => {
+          e.stopPropagation();
+          deleteModalOpen = true;
+        }}>Delete</DropdownItem
+      >
+    </Dropdown>
   {/if}
 </li>
 
@@ -162,7 +169,7 @@ It adds a "three-dot" menu button with Popover, and delete confirmation Modal
 >
   <div class="flex flex-col gap-4">
     <ExclamationCircleOutline class="mx-auto  h-12 w-12 text-gray-400 dark:text-white" />
-    <P size="xl" class="text-center dark:text-gray-400">
+    <P size="xl" class={twMerge('text-center dark:text-gray-400', labelClass)}>
       Are you sure you want to delete your <strong>{label.substring(0, MAX_LABEL_SIZE)}</strong> chat?
     </P>
     <div class="flex justify-end gap-2">

diff --git a/src/leapfrogai_ui/src/lib/components/Message.svelte b/src/leapfrogai_ui/src/lib/components/Message.svelte
@@ -214,6 +214,7 @@
             tabindex="0"
           >
             <EditOutline />
+            <span class="sr-only">Edit Message</span>
           </IconButton>
         {/if}
         {#if message.role !== 'user'}
@@ -245,6 +246,7 @@
             tabindex="0"
           >
             <RedoOutline />
+            <span class="sr-only">Regenerate Message</span>
           </IconButton>
         {/if}
       </div>

diff --git a/src/leapfrogai_ui/src/lib/components/PoweredByDU.svelte b/src/leapfrogai_ui/src/lib/components/PoweredByDU.svelte
@@ -3,7 +3,7 @@
   import DefenseUnicorns from '$assets/DefenseUnicorns.png';
 </script>
 
-<div class="flex items-center justify-center gap-1 py-4 text-white">
+<div class="flex items-center justify-center gap-1 py-3 text-white">
   <img alt="Doug" src={doug} class="h-6" />
   <span class="tracking-custom text-xs leading-4">Powered By</span>
   <img alt="Defense Unicorns" src={DefenseUnicorns} class="w-[6.75rem]" />