From 58d86957267eb2102754acb14149c7f91219961d Mon Sep 17 00:00:00 2001
From: spacebares <57186372+spacebares@users.noreply.github.com>
Date: Sat, 17 Dec 2022 10:05:51 -0800
Subject: [PATCH] cosmetic changes on MultiSelect

* Different look for SelectSingle buttons

* Show All button is aligned with the items below it, no matter the popup size
---
 web/src/components/MultiSelect.jsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index d700f5dae..8068329f2 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -4,6 +4,7 @@ import Menu from './Menu';
 import { ArrowDropdown } from '../icons/ArrowDropdown';
 import Heading from './Heading';
 import Button from './Button';
+import CameraIcon from '../icons/Camera';
 
 export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
 
@@ -12,6 +13,9 @@ export default function MultiSelect({ className, title, options, selection, onTo
   const [state, setState] = useState({
     showMenu: false,
   });
+  
+  const isOptionSelected = (item) => { return selection == "all" || selection.split(',').indexOf(item) > -1; }
+  
   return (
     <div className={`${className} p-2`} ref={popupRef}>
       <div
@@ -23,26 +27,26 @@ export default function MultiSelect({ className, title, options, selection, onTo
       </div>
       {state.showMenu ? (
         <Menu relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}>
-          <div className="flex flex-wrap gap-2 items-center">
+          <div className="flex flex-wrap justify-between items-center">
             <Heading className="p-4 justify-center" size="md">{title}</Heading>
-            <Button className="mx-2" onClick={() => onShowAll() }>
+            <Button className="mx-4" onClick={() => onShowAll() }>
               Show All
             </Button>
           </div>
           {options.map((item) => (
-            <div className="flex grow" key={item}>
+            <div className="flex flex-grow" key={item}>
               <label
                 className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`}>
                 <input
                   className="mx-4 m-0 align-middle"
                   type="checkbox"
-                  checked={selection == "all" || selection.split(',').indexOf(item) > -1}
+                  checked={isOptionSelected(item)}
                   onChange={() => onToggle(item)} />
                 {item.replaceAll("_", " ")}
               </label>
-              <div className=' justify-right'>
-                <Button className="mx-2" onClick={() => onSelectSingle(item)}>
-                  👀
+              <div className="justify-right">
+                <Button color={isOptionSelected(item) ? "blue" : "black"} type="text" className="max-h-[35px] mx-2" onClick={() => onSelectSingle(item)}>
+                  <CameraIcon />
                 </Button>
               </div>
             </div>