From cc6e049966a569692734e3301f0cefb4fcb8cae7 Mon Sep 17 00:00:00 2001
From: Daniel <47092714+Daniel-dev22@users.noreply.github.com>
Date: Sun, 8 Oct 2023 15:30:53 -0400
Subject: [PATCH] Change multiselect camera icon (#8016)

* CenterFocusString icon

* Add CenterFocusString to multiselect

* Rename CenterFocusString.jsx

* Rename icon and make it smaller

* Rename icon

* Fix lint and use icon
for speech

* remove unused vars

* Remove unused import
---
 web/src/components/MultiSelect.jsx |  7 ++-----
 web/src/icons/SelectOnly.jsx       | 21 +++++++++++++++++++++
 2 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 web/src/icons/SelectOnly.jsx

diff --git a/web/src/components/MultiSelect.jsx b/web/src/components/MultiSelect.jsx
index b2b3ab053..5c706fd24 100644
--- a/web/src/components/MultiSelect.jsx
+++ b/web/src/components/MultiSelect.jsx
@@ -4,9 +4,7 @@ import Menu from './Menu';
 import { ArrowDropdown } from '../icons/ArrowDropdown';
 import Heading from './Heading';
 import Button from './Button';
-import CameraIcon from '../icons/Camera';
-import SpeakerIcon from '../icons/Speaker';
-import useSWR from 'swr';
+import SelectOnlyIcon from '../icons/SelectOnly';
 
 export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
   const popupRef = useRef(null);
@@ -20,7 +18,6 @@ export default function MultiSelect({ className, title, options, selection, onTo
   };
 
   const menuHeight = Math.round(window.innerHeight * 0.55);
-  const { data: config } = useSWR('config');
   return (
     <div className={`${className} p-2`} ref={popupRef}>
       <div className="flex justify-between min-w-[120px]" onClick={() => setState({ showMenu: true })}>
@@ -61,7 +58,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
                   className="max-h-[35px] mx-2"
                   onClick={() => onSelectSingle(item)}
                 >
-                  {title === 'Labels' && config.audio.listen.includes(item) ? <SpeakerIcon /> : <CameraIcon />}
+                  { ( <SelectOnlyIcon /> ) }
                 </Button>
               </div>
             </div>
diff --git a/web/src/icons/SelectOnly.jsx b/web/src/icons/SelectOnly.jsx
new file mode 100644
index 000000000..f0aca6bd8
--- /dev/null
+++ b/web/src/icons/SelectOnly.jsx
@@ -0,0 +1,21 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function SelectOnly({ className = 'h-5 w-5', stroke = 'currentColor', fill = 'none', onClick = () => {} }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      fill={fill}
+      viewBox="0 0 24 24"
+      stroke={stroke}
+      onClick={onClick}
+    >
+      <path
+        d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-7 7H3v4c0 1.1.9 2 2 2h4v-2H5v-4zM5 5h4V3H5c-1.1 0-2 .9-2 2v4h2V5zm14-2h-4v2h4v4h2V5c0-1.1-.9-2-2-2zm0 16h-4v2h4c1.1 0 2-.9 2-2v-4h-2v4z"
+      />
+    </svg>
+  );
+}
+
+export default memo(SelectOnly);