fixing the filter dropdown to look like a dropdown

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' />

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;

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

src/pages/admin/Flags.tsx

@@ -192,15 +192,18 @@ const FlagList = () => {
             />
             {availableFilters && <Dropdown>
                 <Dropdown.Header>
-                    {selectedFilters.map(f => <Dropdown.Item
+                    {selectedFilters.length === 0
-                        key={f}
+                        ? <p className="placeholder">Click to filter</p>
-                        onClick={() => {
+                        : selectedFilters.map(f => <Dropdown.Item
-                            setSelectedFilters(selectedFilters.filter(ff => f !== ff));
+                            key={f}
-                            setAvailableFilters([...availableFilters, f]);
+                            onClick={() => {
-                        }}
+                                setSelectedFilters(selectedFilters.filter(ff => f !== ff));
-                    >
+                                setAvailableFilters([...availableFilters, f]);
-                        {f}
+                            }}
-                    </Dropdown.Item>)}
+                        >
+                            {f}
+                        </Dropdown.Item>)
+                    }
                 </Dropdown.Header>
 
                 <Dropdown.ItemList>