From 66f113ae4597d893568d1bc4c91e6e7f4fe49479 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Sun, 11 Dec 2022 23:37:41 +0100
Subject: [PATCH] add proper filter icon

---
 .../maps-playlists-panel.component.tsx                   | 2 +-
 .../modal/modal-types/download-maps-modal.component.tsx  | 2 +-
 src/renderer/components/svgs/bsm-icon.component.tsx      | 4 +++-
 .../components/svgs/icons/filter-icon.component.tsx      | 9 +++++++++
 4 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 src/renderer/components/svgs/icons/filter-icon.component.tsx

diff --git a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
index ecdc8a80..06e67659 100644
--- a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
+++ b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
@@ -122,7 +122,7 @@ export function MapsPlaylistsPanel({version}: Props) {
                 <div className="h-full rounded-full bg-main-color-2 grow p-[6px]">
                     <input type="text" className="h-full w-full bg-main-color-1 rounded-full px-2" placeholder={t("pages.version-viewer.maps.search-bar.search-placeholder")} value={tabIndex === 0 ? mapSearch : playlistSearch} onChange={e => handleSearch(e.target.value)}/>
                 </div>
-                <BsmDropdownButton className="h-full relative z-[1] flex justify-center" buttonClassName="flex items-center justify-center h-full rounded-full px-2 py-1" icon="search" text="pages.version-viewer.maps.search-bar.filters-btn" withBar={false}>
+                <BsmDropdownButton className="h-full relative z-[1] flex justify-center" buttonClassName="flex items-center justify-center h-full rounded-full px-2 py-1" icon="filter" text="pages.version-viewer.maps.search-bar.filters-btn" withBar={false}>
                     <FilterPanel className="absolute top-[calc(100%+3px)] bg-main-color-3 origin-top w-[500px] h-fit p-2 rounded-md shadow-md shadow-black" filter={mapFilter} onChange={setMapFilter}/>
                 </BsmDropdownButton>
                 <BsmDropdownButton className="h-full flex aspect-square relative rounded-full z-[1] bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} items={dropDownItems} menuTranslationY="6px" align="center"/>
diff --git a/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx b/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx
index 99c1cf24..e4809011 100644
--- a/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/download-maps-modal.component.tsx
@@ -155,7 +155,7 @@ export const DownloadMapsModal: ModalComponent<void, BSVersion> = ({data}) => {
     return (
         <form className="text-gray-800 dark:text-gray-200 flex flex-col max-w-[95vw] w-[970px] h-[85vh] gap-3" onSubmit={e => {e.preventDefault(); handleSearch()}}>
             <div className="flex h-9 gap-2 shrink-0">
-                <BsmDropdownButton className="shrink-0 h-full relative z-[1] flex justify-start" buttonClassName="flex items-center justify-center h-full rounded-full px-2 py-1 !bg-main-color-1" icon="search" text="pages.version-viewer.maps.search-bar.filters-btn" withBar={false}>
+                <BsmDropdownButton className="shrink-0 h-full relative z-[1] flex justify-start" buttonClassName="flex items-center justify-center h-full rounded-full px-2 py-1 !bg-main-color-1" icon="filter" text="pages.version-viewer.maps.search-bar.filters-btn" withBar={false}>
                     <FilterPanel className="absolute top-[calc(100%+3px)] bg-main-color-3 origin-top w-[450px] h-fit p-2 rounded-md shadow-md shadow-black" filter={filter} onChange={setFilter}/>
                 </BsmDropdownButton>
                 <input className="h-full bg-main-color-1 rounded-full px-2 grow pb-0.5" type="text" name="" id="" placeholder={t("pages.version-viewer.maps.search-bar.search-placeholder")} value={query} onChange={e => setQuery(e.target.value)}/>
diff --git a/src/renderer/components/svgs/bsm-icon.component.tsx b/src/renderer/components/svgs/bsm-icon.component.tsx
index f3a879ab..4b92f7cb 100644
--- a/src/renderer/components/svgs/bsm-icon.component.tsx
+++ b/src/renderer/components/svgs/bsm-icon.component.tsx
@@ -42,11 +42,12 @@ import { ThreeSixtyDegreeIcon } from "./icons/three-sixty-degree-icon.component"
 import { LinkIcon } from "./icons/link-icon.component";
 import { UnlinkIcon } from "./icons/unlink-icon.component";
 import { DownloadIcon } from "./icons/download-icon.component";
+import { FilterIcon } from "./icons/filter-icon.component";
 
 export type BsmIconType = BsvMapCharacteristic | (
    "settings"|"trash"|"favorite"|"folder"|"bsNote"|"check"|"three-dots"|"twitch"|"eye"|"play"|"checkCircleIcon"|
    "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"|"thumbUpFill"|"timerFill"|"pause"|
-   "copy"|"steam"|"edit"|"export"|"patreon"|"search"|"bsMapDifficulty"|"link"|"unlink"|"download"|
+   "copy"|"steam"|"edit"|"export"|"patreon"|"search"|"bsMapDifficulty"|"link"|"unlink"|"download"|"filter"|
    "fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"
 );
 
@@ -95,6 +96,7 @@ export const BsmIcon = memo(({className, icon, style}: {className?: string, icon
         if(icon === "link"){ return <LinkIcon className={className} style={style}/> }
         if(icon === "unlink"){ return <UnlinkIcon className={className} style={style}/> }
         if(icon === "download"){ return <DownloadIcon className={className} style={style}/> }
+        if(icon === "filter"){ return <FilterIcon className={className} style={style}/> }
         return <TrashIcon className={className} style={style}/>
     }
 
diff --git a/src/renderer/components/svgs/icons/filter-icon.component.tsx b/src/renderer/components/svgs/icons/filter-icon.component.tsx
new file mode 100644
index 00000000..6bfcc997
--- /dev/null
+++ b/src/renderer/components/svgs/icons/filter-icon.component.tsx
@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+
+export function FilterIcon(props: {className?: string, style?: CSSProperties}) {
+    return (
+        <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+            <path fill="currentColor" d="M18.333 33.333q-.708 0-1.187-.479-.479-.479-.479-1.187v-10L6.792 9.083q-.584-.75-.167-1.583.417-.833 1.375-.833h24q.958 0 1.375.833.417.833-.167 1.583l-9.875 12.584v10q0 .708-.479 1.187-.479.479-1.187.479ZM20 21.375l9.417-11.917H10.583Zm0 0Z"/>
+        </svg>
+    )
+}