From c0b8c4e6d669bb2552fcc28d0bb8a1dd64c8e6cb Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Fri, 20 Dec 2024 14:30:10 -0700
Subject: [PATCH] feat: updating styling on multiselect and tree (#3837)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Match the dropdown style to the filter panel dropdown
- Update dividers, background, and selected colors
- Update spacing to be consistent

![Screenshot 2024-12-20 at 2 10
19 PM](https://github.com/user-attachments/assets/4b63ca2e-b1e7-4e0d-a67a-747559bd6ccd)
![Screenshot 2024-12-20 at 2 10
21 PM](https://github.com/user-attachments/assets/7694205a-0c87-423e-8a32-c37ef9733834)
---
 frontend/console/src/components/Button.tsx    |  4 +-
 .../console/src/components/Multiselect.tsx    | 12 ++++--
 .../src/features/modules/ModulesTree.tsx      | 38 +++++++++----------
 .../timeline/filters/TimelineTimeControls.tsx | 16 ++------
 4 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/frontend/console/src/components/Button.tsx b/frontend/console/src/components/Button.tsx
index 8c301cee52..2c31175b2c 100644
--- a/frontend/console/src/components/Button.tsx
+++ b/frontend/console/src/components/Button.tsx
@@ -24,9 +24,9 @@ export const Button = ({ children, size = 'md', variant = 'primary', fullWidth =
   const baseClasses = 'font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
   const variantClasses = {
     primary:
-      'bg-indigo-600 dark:bg-indigo-500 text-white hover:bg-indigo-500 dark:hover:bg-indigo-400 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500 disabled:bg-indigo-200/50 dark:disabled:bg-indigo-500/20 disabled:cursor-not-allowed disabled:hover:bg-indigo-200',
+      'bg-indigo-600 dark:bg-indigo-500 text-white hover:bg-indigo-500 dark:hover:bg-indigo-400 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500 disabled:bg-indigo-200/50 dark:disabled:bg-indigo-500/20 disabled:cursor-not-allowed disabled:hover:bg-indigo-200 dark:ring-0',
     secondary:
-      'bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-gray-600 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:ring-0 disabled:bg-gray-100 disabled:text-gray-400 dark:disabled:bg-white/5 dark:disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-100',
+      'bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-gray-600 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:ring-1 dark:ring-white/10 disabled:bg-gray-100 disabled:text-gray-400 dark:disabled:bg-white/5 dark:disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-100',
   }
 
   return (
diff --git a/frontend/console/src/components/Multiselect.tsx b/frontend/console/src/components/Multiselect.tsx
index fe37c69f18..8c3385499f 100644
--- a/frontend/console/src/components/Multiselect.tsx
+++ b/frontend/console/src/components/Multiselect.tsx
@@ -1,5 +1,7 @@
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
 import { ArrowDown01Icon, CheckmarkSquare02Icon, MinusSignSquareIcon, SquareIcon } from 'hugeicons-react'
+import { bgColor, borderColor } from '../utils'
+import { textColor } from '../utils/style.utils'
 import { Button } from './Button'
 
 export interface MultiselectOpt {
@@ -77,10 +79,12 @@ export const Multiselect = ({
     <div className='w-full'>
       <Listbox multiple value={selectedOpts} onChange={onChange}>
         <div className='relative w-full'>
-          <ListboxButton className='w-full py-1 px-2 border border-gray-300 dark:border-gray-600 rounded shadow-sm text-sm bg-white dark:bg-gray-900 hover:text-gray-800 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700'>
-            <span className='block truncate w-[calc(100%-24px)] h-5 text-left'>{getSelectionText(selectedOpts, allOpts)}</span>
-            <span className='pointer-events-none absolute inset-y-0 right-2 flex items-center'>
-              <ArrowDown01Icon className='w-5 text-gray-400' />
+          <ListboxButton
+            className={`relative w-full cursor-pointer rounded-md ${bgColor} ${textColor} py-1 pl-2 pr-10 text-xs text-left shadow-sm ring-1 ring-inset ${borderColor} focus:outline-none focus:ring-2 focus:ring-indigo-600`}
+          >
+            <span className='block truncate'>{getSelectionText(selectedOpts, allOpts)}</span>
+            <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-1'>
+              <ArrowDown01Icon className='h-5 w-5 text-gray-400' aria-hidden='true' />
             </span>
           </ListboxButton>
         </div>
diff --git a/frontend/console/src/features/modules/ModulesTree.tsx b/frontend/console/src/features/modules/ModulesTree.tsx
index b663eff947..68fb714d6f 100644
--- a/frontend/console/src/features/modules/ModulesTree.tsx
+++ b/frontend/console/src/features/modules/ModulesTree.tsx
@@ -43,9 +43,9 @@ const DeclNode = ({ decl, href, isSelected }: { decl: DeclInfo; href: string; is
         <div
           ref={declRef}
           className={classNames(
-            isSelected ? 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-gray-600' : 'hover:bg-gray-200 hover:dark:bg-gray-700',
+            isSelected ? 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-gray-600' : 'hover:bg-gray-200 hover:dark:bg-gray-700',
             declSumTypeIsExported(decl.value) ? '' : 'text-gray-400 dark:text-gray-500',
-            'group flex items-center gap-x-2 pl-4 pr-2 text-sm font-light leading-6 w-full cursor-pointer scroll-mt-10',
+            'group flex items-center gap-x-2 pl-4 pr-2 text-sm font-light leading-6 w-full cursor-pointer scroll-mt-10 rounded-md',
           )}
         >
           <span title={declType}>
@@ -94,8 +94,8 @@ const ModuleSection = ({
         ref={moduleRef}
         id={`module-${module.name}-tree-group`}
         className={classNames(
-          isSelected ? 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-gray-600' : 'hover:bg-gray-200 hover:dark:bg-gray-700',
-          'group flex w-full modules-center gap-x-2 space-y-1 text-left text-sm font-medium cursor-pointer leading-6',
+          isSelected ? 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-gray-600' : 'hover:bg-gray-200 hover:dark:bg-gray-700',
+          'group flex w-full modules-center gap-x-2 space-y-1 text-left text-sm font-medium cursor-pointer leading-6 rounded-md',
         )}
         onClick={() => toggleExpansion(module.name)}
       >
@@ -175,23 +175,23 @@ export const ModulesTree = ({ modules }: { modules: ModuleTreeItem[] }) => {
   modules.sort((m1, m2) => Number(m1.isBuiltin) - Number(m2.isBuiltin))
 
   return (
-    <div className='flex flex-col h-full bg-gray-100 dark:bg-gray-900'>
-      <nav className='h-full overflow-y-auto'>
-        <div className='sticky top-0 border-b border-gray-300 bg-gray-100 dark:border-gray-800 dark:bg-gray-900 z-10'>
-          <div className='flex items-center gap-1 p-2'>
-            <div className='flex-1 min-w-0'>
-              <Multiselect allOpts={declTypeMultiselectOpts} selectedOpts={selectedDeclTypes} onChange={msOnChange} />
-            </div>
-            <div className='flex gap-1'>
-              <Button id='hide-exported' variant='secondary' size='sm' onClick={() => setHideUnexportedState(!hideUnexported)} title='Show/hide unexported'>
-                {hideUnexported ? <ViewOffSlashIcon className='size-5' /> : <ViewIcon className='size-5' />}
-              </Button>
-              <Button variant='secondary' size='sm' onClick={collapseAll} title='Collapse all modules'>
-                <ArrowShrink02Icon className='size-5' />
-              </Button>
-            </div>
+    <div className='flex flex-col h-full border-r border-gray-300 dark:border-gray-700'>
+      <div className='border-b border-gray-120 dark:border-gray-700'>
+        <div className='flex items-center gap-1 p-2 bg-white dark:bg-gray-800 shadow-sm'>
+          <div className='flex-1 min-w-0 h-6'>
+            <Multiselect allOpts={declTypeMultiselectOpts} selectedOpts={selectedDeclTypes} onChange={msOnChange} />
+          </div>
+          <div className='flex gap-1'>
+            <Button id='hide-exported' variant='secondary' size='xs' onClick={() => setHideUnexportedState(!hideUnexported)} title='Show/hide unexported'>
+              {hideUnexported ? <ViewOffSlashIcon className='size-4' /> : <ViewIcon className='size-4' />}
+            </Button>
+            <Button variant='secondary' size='xs' onClick={collapseAll} title='Collapse all modules'>
+              <ArrowShrink02Icon className='size-4' />
+            </Button>
           </div>
         </div>
+      </div>
+      <nav className='overflow-y-auto flex-1'>
         <ul className='p-2'>
           {modules.map((m) => (
             <ModuleSection
diff --git a/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx b/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx
index fd15bebb9c..5c01585906 100644
--- a/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx
+++ b/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx
@@ -159,20 +159,12 @@ export const TimelineTimeControls = ({
         )}
         {!isTailing && (
           <span className={`isolate inline-flex rounded-md shadow-sm h-6 ${textColor} ${bgColor}`}>
-            <button
-              type='button'
-              onClick={handleTimeBackward}
-              className={`relative inline-flex items-center rounded-l-md px-1.5 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700`}
-            >
+            <Button variant='secondary' size='xs' onClick={handleTimeBackward} className='rounded-r-none'>
               <Backward02Icon className='w-4 h-4' />
-            </button>
-            <button
-              type='button'
-              onClick={handleTimeForward}
-              className={`relative -ml-px inline-flex items-center rounded-r-md px-1.5 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700`}
-            >
+            </Button>
+            <Button variant='secondary' size='xs' onClick={handleTimeForward} className='rounded-l-none'>
               <Forward02Icon className='w-4 h-4' />
-            </button>
+            </Button>
           </span>
         )}
       </div>