icon tweaks

This commit is contained in:
Josh Hawkins 2024-09-11 07:20:22 -05:00
parent 4f7a14b917
commit 1dd561f718
4 changed files with 35 additions and 8 deletions

View File

@ -19,6 +19,8 @@ import { DateRange } from "react-day-picker";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import SubFilterIcon from "../icons/SubFilterIcon"; import SubFilterIcon from "../icons/SubFilterIcon";
import { FaLocationDot } from "react-icons/fa6"; import { FaLocationDot } from "react-icons/fa6";
import { MdLabel } from "react-icons/md";
import SearchSourceIcon from "../icons/SearchSourceIcon";
const SEARCH_FILTERS = [ const SEARCH_FILTERS = [
"cameras", "cameras",
@ -241,7 +243,7 @@ function GeneralFilterButton({
variant={selectedLabels?.length ? "select" : "default"} variant={selectedLabels?.length ? "select" : "default"}
className="flex items-center gap-2 capitalize" className="flex items-center gap-2 capitalize"
> >
<FaFilter <MdLabel
className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`} className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
/> />
<div <div
@ -763,7 +765,7 @@ function SearchTypeButton({
variant={selectedSearchSources?.length != 2 ? "select" : "default"} variant={selectedSearchSources?.length != 2 ? "select" : "default"}
className="flex items-center gap-2 capitalize" className="flex items-center gap-2 capitalize"
> >
<FaFilter <SearchSourceIcon
className={`${selectedSearchSources?.length != 2 ? "text-selected-foreground" : "text-secondary-foreground"}`} className={`${selectedSearchSources?.length != 2 ? "text-selected-foreground" : "text-secondary-foreground"}`}
/> />
<div <div

View File

@ -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;

View File

@ -1,6 +1,7 @@
import { forwardRef } from "react"; import { forwardRef } from "react";
import { cn } from "@/lib/utils"; 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 = { type SubFilterIconProps = {
className?: string; className?: string;
@ -15,8 +16,8 @@ const SubFilterIcon = forwardRef<HTMLDivElement, SubFilterIconProps>(
className={cn("relative flex items-center", className)} className={cn("relative flex items-center", className)}
onClick={onClick} onClick={onClick}
> >
<FaFilter className="size-full" /> <FaCog className="absolute size-3 translate-x-4 translate-y-[62%]" />
<FaCog className="absolute size-3 translate-x-3 translate-y-3/4" /> <MdLabelOutline className="size-full" />
</div> </div>
); );
}, },

View File

@ -126,9 +126,7 @@ export default function SearchView({
> >
<Input <Input
className="text-md w-full bg-muted pr-10" className="text-md w-full bg-muted pr-10"
placeholder={ placeholder={"Search for a detected object..."}
isMobileOnly ? "Search" : "Search for a detected object..."
}
value={similaritySearch ? "" : search} value={similaritySearch ? "" : search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
/> />