clear button display changed

src/components/templates/Search/filterPrice.module.css

@@ -43,13 +43,14 @@ button.filter,
   color: var(--background-body);
 }
 
-.filter.clearSelected {
+.showClear {
-  color: var(--background-body);
+  display: inline-flex;
-  background: var(--font-color-text);
+  text-transform: capitalize;
-  border-color: var(--background-body);
+  color: var(--color-secondary);
+  font-weight: var(--font-weight-base);
+  margin-left: calc(var(--spacer) / 6);
 }
 
-.filter.clearSelected::after {
+.hideClear {
-  margin-left: calc(var(--spacer) / 6);
+  display: none !important;
-  color: var(--background-body);
 }

src/components/templates/Search/filterPrice.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { useNavigate } from '@reach/router'
 import styles from './filterPrice.module.css'
 import classNames from 'classnames/bind'
@@ -11,7 +11,7 @@ import Button from '../../atoms/Button'
 
 const cx = classNames.bind(styles)
 
-const clearFilters = [{ display: 'clear', value: '' }]
+const clearFilters = [{ display: 'Clear', value: '' }]
 
 const priceFilterItems = [
   { display: 'fixed price', value: FilterByPriceOptions.Fixed },
@@ -38,7 +38,6 @@ export default function FilterPrice({
 
   const [priceSelections, setPriceSelections] = useState<string[]>([])
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
-  const [clearSelected, setClearSelected] = useState<boolean>(false)
 
   async function applyPriceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'priceType')
@@ -64,39 +63,28 @@ export default function FilterPrice({
       value === FilterByPriceOptions.Dynamic
     ) {
       if (isSelected) {
-        if (clearSelected) {
-          setPriceSelections([])
-        } else {
         if (priceSelections.length > 1) {
           // both selected -> select the other one
           const otherValue = priceFilterItems.find((p) => p.value !== value)
             .value
           await applyPriceFilter(otherValue)
-            setPriceSelections([otherValue])
         } else {
           // only the current one selected -> deselect it
           await applyPriceFilter(undefined)
-            setPriceSelections([])
-          }
         }
       } else {
         if (priceSelections.length > 0) {
           // one already selected -> both selected
           await applyPriceFilter(FilterByPriceOptions.All)
           setPriceSelections(priceFilterItems.map((p) => p.value))
-          setClearSelected(false)
         } else {
           // none selected -> select
           await applyPriceFilter(value)
           setPriceSelections([value])
-          setClearSelected(false)
         }
       }
     } else {
       if (isSelected) {
-        if (clearSelected) {
-          setServiceSelections([])
-        } else {
         if (serviceSelections.length > 1) {
           const otherValue = serviceFilterItems.find((p) => p.value !== value)
             .value
@@ -104,18 +92,14 @@ export default function FilterPrice({
           setServiceSelections([otherValue])
         } else {
           await applyServiceFilter(undefined)
-            setServiceSelections([])
-          }
         }
       } else {
         if (serviceSelections.length) {
           await applyServiceFilter(undefined)
           setServiceSelections(serviceFilterItems.map((p) => p.value))
-          setClearSelected(false)
         } else {
           await applyServiceFilter(value)
           setServiceSelections([value])
-          setClearSelected(false)
         }
       }
     }
@@ -133,38 +117,16 @@ export default function FilterPrice({
     setServiceSelections([])
     setPriceSelections([])
 
-    setClearSelected(true)
     setPriceType(undefined)
     setServiceType(undefined)
     navigate(urlLocation)
   }
 
   return (
-    <div>
     <div className={styles.filterList}>
-        {clearFilters.map((e, index) => {
-          const selectFilter = cx({
-            [styles.clearSelected]: clearSelected,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={selectFilter}
-              onClick={async () => {
-                applyClearFilter()
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
       {priceFilterItems.map((e, index) => {
         const isPriceSelected =
-            (e.value === priceType || priceSelections.includes(e.value)) &&
+          e.value === priceType || priceSelections.includes(e.value)
-            clearSelected === false
         const selectFilter = cx({
           [styles.selected]: isPriceSelected,
           [styles.filter]: true
@@ -185,8 +147,7 @@ export default function FilterPrice({
       })}
       {serviceFilterItems.map((e, index) => {
         const isServiceSelected =
-            (e.value === serviceType || serviceSelections.includes(e.value)) &&
+          e.value === serviceType || serviceSelections.includes(e.value)
-            clearSelected === false
         const selectFilter = cx({
           [styles.selected]: isServiceSelected,
           [styles.filter]: true
@@ -205,7 +166,23 @@ export default function FilterPrice({
           </Button>
         )
       })}
-      </div>
+      {clearFilters.map((e, index) => {
+        const showClear =
+          priceSelections.length > 0 || serviceSelections.length > 0
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={showClear ? styles.showClear : styles.hideClear}
+            onClick={async () => {
+              applyClearFilter()
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
     </div>
   )
 }