From 1dd561f718d45913ea959a5a3d75a026b6514410 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 11 Sep 2024 07:20:22 -0500
Subject: [PATCH] icon tweaks

---
 .../components/filter/SearchFilterGroup.tsx   |  6 +++--
 web/src/components/icons/SearchSourceIcon.tsx | 26 +++++++++++++++++++
 web/src/components/icons/SubFilterIcon.tsx    |  7 ++---
 web/src/views/search/SearchView.tsx           |  4 +--
 4 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 web/src/components/icons/SearchSourceIcon.tsx

diff --git a/web/src/components/filter/SearchFilterGroup.tsx b/web/src/components/filter/SearchFilterGroup.tsx
index c684907df..727b4e028 100644
--- a/web/src/components/filter/SearchFilterGroup.tsx
+++ b/web/src/components/filter/SearchFilterGroup.tsx
@@ -19,6 +19,8 @@ import { DateRange } from "react-day-picker";
 import { cn } from "@/lib/utils";
 import SubFilterIcon from "../icons/SubFilterIcon";
 import { FaLocationDot } from "react-icons/fa6";
+import { MdLabel } from "react-icons/md";
+import SearchSourceIcon from "../icons/SearchSourceIcon";
 
 const SEARCH_FILTERS = [
   "cameras",
@@ -241,7 +243,7 @@ function GeneralFilterButton({
       variant={selectedLabels?.length ? "select" : "default"}
       className="flex items-center gap-2 capitalize"
     >
-      <FaFilter
+      <MdLabel
         className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
       />
       <div
@@ -763,7 +765,7 @@ function SearchTypeButton({
       variant={selectedSearchSources?.length != 2 ? "select" : "default"}
       className="flex items-center gap-2 capitalize"
     >
-      <FaFilter
+      <SearchSourceIcon
         className={`${selectedSearchSources?.length != 2 ? "text-selected-foreground" : "text-secondary-foreground"}`}
       />
       <div
diff --git a/web/src/components/icons/SearchSourceIcon.tsx b/web/src/components/icons/SearchSourceIcon.tsx
new file mode 100644
index 000000000..e96ac51b4
--- /dev/null
+++ b/web/src/components/icons/SearchSourceIcon.tsx
@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+import { FaImage } from "react-icons/fa";
+import { LuText } from "react-icons/lu";
+
+type SearchSourceIconProps = {
+  className?: string;
+  onClick?: () => void;
+};
+
+const SearchSourceIcon = forwardRef<HTMLDivElement, SearchSourceIconProps>(
+  ({ className, onClick }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("relative flex items-center", className)}
+        onClick={onClick}
+      >
+        <LuText className="absolute size-3 translate-x-3 translate-y-3/4" />
+        <FaImage className="size-5" />
+      </div>
+    );
+  },
+);
+
+export default SearchSourceIcon;
diff --git a/web/src/components/icons/SubFilterIcon.tsx b/web/src/components/icons/SubFilterIcon.tsx
index 1bcb4b64e..4bcbafcac 100644
--- a/web/src/components/icons/SubFilterIcon.tsx
+++ b/web/src/components/icons/SubFilterIcon.tsx
@@ -1,6 +1,7 @@
 import { forwardRef } from "react";
 import { cn } from "@/lib/utils";
-import { FaCog, FaFilter } from "react-icons/fa";
+import { FaCog } from "react-icons/fa";
+import { MdLabelOutline } from "react-icons/md";
 
 type SubFilterIconProps = {
   className?: string;
@@ -15,8 +16,8 @@ const SubFilterIcon = forwardRef<HTMLDivElement, SubFilterIconProps>(
         className={cn("relative flex items-center", className)}
         onClick={onClick}
       >
-        <FaFilter className="size-full" />
-        <FaCog className="absolute size-3 translate-x-3 translate-y-3/4" />
+        <FaCog className="absolute size-3 translate-x-4 translate-y-[62%]" />
+        <MdLabelOutline className="size-full" />
       </div>
     );
   },
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 471498d78..9aea9ab70 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -126,9 +126,7 @@ export default function SearchView({
           >
             <Input
               className="text-md w-full bg-muted pr-10"
-              placeholder={
-                isMobileOnly ? "Search" : "Search for a detected object..."
-              }
+              placeholder={"Search for a detected object..."}
               value={similaritySearch ? "" : search}
               onChange={(e) => setSearch(e.target.value)}
             />