From f37f9b3dd7ed5c943bfc46e7f90c5b460059365a Mon Sep 17 00:00:00 2001
From: D3vision <d3visionyt@gmail.com>
Date: Mon, 15 May 2023 19:31:37 +0200
Subject: [PATCH] fixing the filter dropdown to look like a dropdown

---
 src/components/InputElements.tsx     |  2 +-
 src/css/chota.min.css                |  4 ++++
 src/css/components/InputElements.css | 26 +++++++++++++++++++++++++-
 src/pages/admin/Flags.tsx            | 21 ++++++++++++---------
 4 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/components/InputElements.tsx b/src/components/InputElements.tsx
index 410fd11..a679a87 100644
--- a/src/components/InputElements.tsx
+++ b/src/components/InputElements.tsx
@@ -56,7 +56,7 @@ export const ToggleSwitch = ({ value, onChange, inputRef, children }: InputEleme
 };
 
 export const VerticalToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) => {
-    return <label>
+    return <label className="label-fix">
         {children && <b>{children}</b>}
         <span className="check-box">
             <input ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
diff --git a/src/css/chota.min.css b/src/css/chota.min.css
index f44d2fa..267a73c 100644
--- a/src/css/chota.min.css
+++ b/src/css/chota.min.css
@@ -775,6 +775,10 @@ input:disabled:hover {
     color: #bdbfc4
 }
 
+.placeholder{
+    color: #bdbfc4
+}
+
 .nav {
     -webkit-box-align: stretch;
     -ms-flex-align: stretch;
diff --git a/src/css/components/InputElements.css b/src/css/components/InputElements.css
index 6f45c24..e050233 100644
--- a/src/css/components/InputElements.css
+++ b/src/css/components/InputElements.css
@@ -1,6 +1,13 @@
 .dropdown .header {
     min-height: 40px;
-    background-color: white;
+    background-color: field;
+    border: 1px solid var(--color-lightGrey);
+    border-radius: 4px;
+    font-family: inherit;
+    font-size: 1em;
+    padding: 0.8rem 1rem;
+    transition: all .2s ease;
+    padding-right: 2.5rem !important;
 }
 
 .dropdown .item-list {
@@ -16,4 +23,21 @@
     margin: 2px;
     padding: 0.5rem 1rem !important;
     user-select: none;
+}
+.dropdown summary .placeholder{
+    margin-left: 0.5rem;
+    user-select: none;
+}
+.dropdown summary{
+    flex-wrap: wrap;
+}
+.dropdown summary::after{
+    content: " ";
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>");
+    background-size: 1ex;
+    position: absolute;
+    height: 1ex;
+    background-repeat: no-repeat;
+    width: 1ex;
+    right: 1rem;
 }
\ No newline at end of file
diff --git a/src/pages/admin/Flags.tsx b/src/pages/admin/Flags.tsx
index 55d5853..69dced8 100644
--- a/src/pages/admin/Flags.tsx
+++ b/src/pages/admin/Flags.tsx
@@ -192,15 +192,18 @@ const FlagList = () => {
             />
             {availableFilters && <Dropdown>
                 <Dropdown.Header>
-                    {selectedFilters.map(f => <Dropdown.Item
-                        key={f}
-                        onClick={() => {
-                            setSelectedFilters(selectedFilters.filter(ff => f !== ff));
-                            setAvailableFilters([...availableFilters, f]);
-                        }}
-                    >
-                        {f}
-                    </Dropdown.Item>)}
+                    {selectedFilters.length === 0
+                        ? <p className="placeholder">Click to filter</p>
+                        : selectedFilters.map(f => <Dropdown.Item
+                            key={f}
+                            onClick={() => {
+                                setSelectedFilters(selectedFilters.filter(ff => f !== ff));
+                                setAvailableFilters([...availableFilters, f]);
+                            }}
+                        >
+                            {f}
+                        </Dropdown.Item>)
+                    }
                 </Dropdown.Header>
 
                 <Dropdown.ItemList>