From 2eb560b00061ed1417604178b487aa7ac69f6cef Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Tue, 23 Feb 2021 16:52:59 +0200
Subject: [PATCH 01/13] select and deselect filter  button

---
 .../templates/Search/filterPrice.tsx          | 68 ++++++-------------
 1 file changed, 19 insertions(+), 49 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index 620138eba..d8ceb6636 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -11,28 +11,20 @@ import Button from '../../atoms/Button'
 
 const cx = classNames.bind(styles)
 
-const filterItemsPrice = [
+const filterItems = [
   { display: 'all', value: undefined },
   { display: 'fixed price', value: FilterByPriceOptions.Fixed },
-  { display: 'dynamic price', value: FilterByPriceOptions.Dynamic }
-]
-
-const filterItemsType = [
-  { display: 'all', value: undefined },
-  { display: 'algorithms', value: FilterByTypeOptions.Algorithm },
-  { display: 'data sets', value: FilterByTypeOptions.Data }
+  { display: 'dynamic price', value: FilterByPriceOptions.Dynamic },
+  { display: 'data sets', value: FilterByTypeOptions.Data },
+  { display: 'algorithms', value: FilterByTypeOptions.Algorithm }
 ]
 
 export default function FilterPrice({
   priceType,
-  setPriceType,
-  serviceType,
-  setServiceType
+  setPriceType
 }: {
   priceType: string
   setPriceType: React.Dispatch<React.SetStateAction<string>>
-  serviceType: string
-  setServiceType: React.Dispatch<React.SetStateAction<string>>
 }): ReactElement {
   const navigate = useNavigate()
 
@@ -41,57 +33,35 @@ export default function FilterPrice({
     if (filterBy) {
       urlLocation = `${urlLocation}&priceType=${filterBy}`
     }
+    console.log('FILTER BY: ', filterBy)
     setPriceType(filterBy)
     navigate(urlLocation)
   }
 
-  async function applyTypeFilter(filterBy: string) {
-    let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
-    if (filterBy) {
-      urlLocation = `${urlLocation}&serviceType=${filterBy}`
-    }
-    setServiceType(filterBy)
-    navigate(urlLocation)
-  }
-
   return (
     <div>
       <div className={styles.filterList}>
-        {filterItemsType.map((e, index) => {
-          const filter = cx({
-            [styles.selected]: e.value === serviceType,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={filter}
-              onClick={async () => {
-                await applyTypeFilter(e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-      </div>
-      <div className={styles.filterList}>
-        {filterItemsPrice.map((e, index) => {
-          const filter = cx({
+        {filterItems.map((e, index) => {
+          const selectFilter = cx({
             [styles.selected]: e.value === priceType,
             [styles.filter]: true
           })
+          const isSelected = e.value === priceType
           return (
             <Button
               size="small"
               style="text"
               key={index}
-              className={filter}
-              onClick={async () => {
-                await applyFilter(e.value)
-              }}
+              className={selectFilter}
+              onClick={
+                isSelected
+                  ? async () => {
+                      await applyFilter(undefined)
+                    }
+                  : async () => {
+                      await applyFilter(e.value)
+                    }
+              }
             >
               {e.display}
             </Button>

From ed5796aa42798fc6d9ca6457d1fd622cbf743ed0 Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Tue, 23 Feb 2021 21:24:44 +0200
Subject: [PATCH 02/13] price and service filters combined

---
 .../templates/Search/filterPrice.tsx          | 57 ++++++++++++++++---
 src/components/templates/Search/index.tsx     |  7 ++-
 src/components/templates/Search/sort.tsx      |  4 +-
 3 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index d8ceb6636..65d66845c 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -11,37 +11,52 @@ import Button from '../../atoms/Button'
 
 const cx = classNames.bind(styles)
 
-const filterItems = [
+const priceFilterItems = [
   { display: 'all', value: undefined },
   { display: 'fixed price', value: FilterByPriceOptions.Fixed },
-  { display: 'dynamic price', value: FilterByPriceOptions.Dynamic },
+  { display: 'dynamic price', value: FilterByPriceOptions.Dynamic }
+]
+
+const serviceFilterItems = [
   { display: 'data sets', value: FilterByTypeOptions.Data },
   { display: 'algorithms', value: FilterByTypeOptions.Algorithm }
 ]
 
 export default function FilterPrice({
   priceType,
-  setPriceType
+  serviceType,
+  setPriceType,
+  setServiceType
 }: {
   priceType: string
   setPriceType: React.Dispatch<React.SetStateAction<string>>
+  serviceType: string
+  setServiceType: React.Dispatch<React.SetStateAction<string>>
 }): ReactElement {
   const navigate = useNavigate()
 
-  async function applyFilter(filterBy: string) {
+  async function applyPriceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'priceType')
     if (filterBy) {
       urlLocation = `${urlLocation}&priceType=${filterBy}`
     }
-    console.log('FILTER BY: ', filterBy)
     setPriceType(filterBy)
     navigate(urlLocation)
   }
 
+  async function applyServiceFilter(filterBy: string) {
+    let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
+    if (filterBy) {
+      urlLocation = `${urlLocation}&serviceType=${filterBy}`
+    }
+    setServiceType(filterBy)
+    navigate(urlLocation)
+  }
+
   return (
     <div>
       <div className={styles.filterList}>
-        {filterItems.map((e, index) => {
+        {priceFilterItems.map((e, index) => {
           const selectFilter = cx({
             [styles.selected]: e.value === priceType,
             [styles.filter]: true
@@ -56,10 +71,36 @@ export default function FilterPrice({
               onClick={
                 isSelected
                   ? async () => {
-                      await applyFilter(undefined)
+                      await applyPriceFilter(undefined)
                     }
                   : async () => {
-                      await applyFilter(e.value)
+                      await applyPriceFilter(e.value)
+                    }
+              }
+            >
+              {e.display}
+            </Button>
+          )
+        })}
+        {serviceFilterItems.map((e, index) => {
+          const selectFilter = cx({
+            [styles.selected]: e.value === serviceType,
+            [styles.filter]: true
+          })
+          const isSelected = e.value === serviceType
+          return (
+            <Button
+              size="small"
+              style="text"
+              key={index}
+              className={selectFilter}
+              onClick={
+                isSelected
+                  ? async () => {
+                      await applyServiceFilter(undefined)
+                    }
+                  : async () => {
+                      await applyServiceFilter(e.value)
                     }
               }
             >
diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx
index dc11ee940..f89af6d24 100644
--- a/src/components/templates/Search/index.tsx
+++ b/src/components/templates/Search/index.tsx
@@ -34,7 +34,7 @@ export default function SearchPage({
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [loading, setLoading] = useState<boolean>()
   const [price, setPriceType] = useState<string>(priceType as string)
-  const [type, setType] = useState<string>(serviceType as string)
+  const [service, setServiceType] = useState<string>(serviceType as string)
   const [sortType, setSortType] = useState<string>(sort as string)
   const [sortDirection, setSortDirection] = useState<string>(
     sortOrder as string
@@ -82,9 +82,9 @@ export default function SearchPage({
         <div className={styles.row}>
           <PriceFilter
             priceType={price}
+            serviceType={service}
             setPriceType={setPriceType}
-            serviceType={type}
-            setServiceType={setType}
+            setServiceType={setServiceType}
           />
           <Sort
             sortType={sortType}
@@ -92,6 +92,7 @@ export default function SearchPage({
             setSortType={setSortType}
             setSortDirection={setSortDirection}
             setPriceType={setPriceType}
+            setServiceType={setServiceType}
           />
         </div>
       </div>
diff --git a/src/components/templates/Search/sort.tsx b/src/components/templates/Search/sort.tsx
index 331d1876c..ca2699dc1 100644
--- a/src/components/templates/Search/sort.tsx
+++ b/src/components/templates/Search/sort.tsx
@@ -24,13 +24,15 @@ export default function Sort({
   setSortType,
   sortDirection,
   setSortDirection,
-  setPriceType
+  setPriceType,
+  setServiceType
 }: {
   sortType: string
   setSortType: React.Dispatch<React.SetStateAction<string>>
   sortDirection: string
   setSortDirection: React.Dispatch<React.SetStateAction<string>>
   setPriceType: React.Dispatch<React.SetStateAction<string>>
+  setServiceType: React.Dispatch<React.SetStateAction<string>>
 }): ReactElement {
   const navigate = useNavigate()
   const directionArrow = String.fromCharCode(

From 2938a0945429a1801f6184aa30a850152d6a87f7 Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Tue, 23 Feb 2021 23:51:02 +0200
Subject: [PATCH 03/13] select and deselect filter  button

price and service filters combined


unselect filter on button
---
 .../templates/Search/filterPrice.module.css   | 11 +++
 .../templates/Search/filterPrice.tsx          | 91 ++++++++++++-------
 src/components/templates/Search/index.tsx     |  7 +-
 src/components/templates/Search/sort.tsx      |  4 +-
 4 files changed, 74 insertions(+), 39 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.module.css b/src/components/templates/Search/filterPrice.module.css
index 79d825f7a..f6150b0cc 100644
--- a/src/components/templates/Search/filterPrice.module.css
+++ b/src/components/templates/Search/filterPrice.module.css
@@ -34,4 +34,15 @@ button.filter,
 
 .filterList:first-of-type{
   margin-bottom: calc(var(--spacer) / 6);
+}
+
+.escape {
+  /* position: absolute; */
+  /* border-radius: 50%; */
+  /* background-color: var(--color-secondary); */
+  /* text-align: center; */
+  /* padding: 0rem .1rem; */
+  margin-left: calc(var(--spacer) / 6);
+  color: var(--background-body);
+
 }
\ No newline at end of file
diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index 620138eba..7eb114eae 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -11,22 +11,21 @@ import Button from '../../atoms/Button'
 
 const cx = classNames.bind(styles)
 
-const filterItemsPrice = [
+const priceFilterItems = [
   { display: 'all', value: undefined },
   { display: 'fixed price', value: FilterByPriceOptions.Fixed },
   { display: 'dynamic price', value: FilterByPriceOptions.Dynamic }
 ]
 
-const filterItemsType = [
-  { display: 'all', value: undefined },
-  { display: 'algorithms', value: FilterByTypeOptions.Algorithm },
-  { display: 'data sets', value: FilterByTypeOptions.Data }
+const serviceFilterItems = [
+  { display: 'data sets', value: FilterByTypeOptions.Data },
+  { display: 'algorithms', value: FilterByTypeOptions.Algorithm }
 ]
 
 export default function FilterPrice({
   priceType,
-  setPriceType,
   serviceType,
+  setPriceType,
   setServiceType
 }: {
   priceType: string
@@ -36,7 +35,7 @@ export default function FilterPrice({
 }): ReactElement {
   const navigate = useNavigate()
 
-  async function applyFilter(filterBy: string) {
+  async function applyPriceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'priceType')
     if (filterBy) {
       urlLocation = `${urlLocation}&priceType=${filterBy}`
@@ -45,7 +44,7 @@ export default function FilterPrice({
     navigate(urlLocation)
   }
 
-  async function applyTypeFilter(filterBy: string) {
+  async function applyServiceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
     if (filterBy) {
       urlLocation = `${urlLocation}&serviceType=${filterBy}`
@@ -57,43 +56,65 @@ export default function FilterPrice({
   return (
     <div>
       <div className={styles.filterList}>
-        {filterItemsType.map((e, index) => {
-          const filter = cx({
-            [styles.selected]: e.value === serviceType,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={filter}
-              onClick={async () => {
-                await applyTypeFilter(e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-      </div>
-      <div className={styles.filterList}>
-        {filterItemsPrice.map((e, index) => {
-          const filter = cx({
+        {priceFilterItems.map((e, index) => {
+          const selectFilter = cx({
             [styles.selected]: e.value === priceType,
             [styles.filter]: true
           })
+          const isSelected = e.value === priceType
           return (
             <Button
               size="small"
               style="text"
               key={index}
-              className={filter}
-              onClick={async () => {
-                await applyFilter(e.value)
-              }}
+              className={selectFilter}
+              onClick={
+                isSelected
+                  ? async () => {
+                      await applyPriceFilter(undefined)
+                    }
+                  : async () => {
+                      await applyPriceFilter(e.value)
+                    }
+              }
             >
               {e.display}
+              {isSelected && e.display !== 'all' ? (
+                <span className={styles.escape}>✕</span>
+              ) : (
+                <></>
+              )}
+            </Button>
+          )
+        })}
+        {serviceFilterItems.map((e, index) => {
+          const selectFilter = cx({
+            [styles.selected]: e.value === serviceType,
+            [styles.filter]: true
+          })
+          const isSelected = e.value === serviceType
+          return (
+            <Button
+              size="small"
+              style="text"
+              key={index}
+              className={selectFilter}
+              onClick={
+                isSelected
+                  ? async () => {
+                      await applyServiceFilter(undefined)
+                    }
+                  : async () => {
+                      await applyServiceFilter(e.value)
+                    }
+              }
+            >
+              {e.display}
+              {isSelected && e.display !== 'all' ? (
+                <span className={styles.escape}>✕</span>
+              ) : (
+                <></>
+              )}
             </Button>
           )
         })}
diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx
index dc11ee940..f89af6d24 100644
--- a/src/components/templates/Search/index.tsx
+++ b/src/components/templates/Search/index.tsx
@@ -34,7 +34,7 @@ export default function SearchPage({
   const [queryResult, setQueryResult] = useState<QueryResult>()
   const [loading, setLoading] = useState<boolean>()
   const [price, setPriceType] = useState<string>(priceType as string)
-  const [type, setType] = useState<string>(serviceType as string)
+  const [service, setServiceType] = useState<string>(serviceType as string)
   const [sortType, setSortType] = useState<string>(sort as string)
   const [sortDirection, setSortDirection] = useState<string>(
     sortOrder as string
@@ -82,9 +82,9 @@ export default function SearchPage({
         <div className={styles.row}>
           <PriceFilter
             priceType={price}
+            serviceType={service}
             setPriceType={setPriceType}
-            serviceType={type}
-            setServiceType={setType}
+            setServiceType={setServiceType}
           />
           <Sort
             sortType={sortType}
@@ -92,6 +92,7 @@ export default function SearchPage({
             setSortType={setSortType}
             setSortDirection={setSortDirection}
             setPriceType={setPriceType}
+            setServiceType={setServiceType}
           />
         </div>
       </div>
diff --git a/src/components/templates/Search/sort.tsx b/src/components/templates/Search/sort.tsx
index 331d1876c..ca2699dc1 100644
--- a/src/components/templates/Search/sort.tsx
+++ b/src/components/templates/Search/sort.tsx
@@ -24,13 +24,15 @@ export default function Sort({
   setSortType,
   sortDirection,
   setSortDirection,
-  setPriceType
+  setPriceType,
+  setServiceType
 }: {
   sortType: string
   setSortType: React.Dispatch<React.SetStateAction<string>>
   sortDirection: string
   setSortDirection: React.Dispatch<React.SetStateAction<string>>
   setPriceType: React.Dispatch<React.SetStateAction<string>>
+  setServiceType: React.Dispatch<React.SetStateAction<string>>
 }): ReactElement {
   const navigate = useNavigate()
   const directionArrow = String.fromCharCode(

From 99e0cb78e2c41f725841627a39aa2c2575204df1 Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Wed, 24 Feb 2021 20:32:18 +0200
Subject: [PATCH 04/13] select multiple options

---
 .../templates/Search/filterPrice.module.css   | 17 ++--
 .../templates/Search/filterPrice.tsx          | 77 ++++++++++++++-----
 src/pages/search.tsx                          |  2 +-
 3 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.module.css b/src/components/templates/Search/filterPrice.module.css
index f6150b0cc..948283de4 100644
--- a/src/components/templates/Search/filterPrice.module.css
+++ b/src/components/templates/Search/filterPrice.module.css
@@ -32,17 +32,12 @@ button.filter,
   border-color: var(--background-body);
 }
 
+.filter.selected::after {
+  content: '✕';
+  margin-left: calc(var(--spacer) / 6);
+  color: var(--background-body);
+}
+
 .filterList:first-of-type{
   margin-bottom: calc(var(--spacer) / 6);
 }
-
-.escape {
-  /* position: absolute; */
-  /* border-radius: 50%; */
-  /* background-color: var(--color-secondary); */
-  /* text-align: center; */
-  /* padding: 0rem .1rem; */
-  margin-left: calc(var(--spacer) / 6);
-  color: var(--background-body);
-
-}
\ No newline at end of file
diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index 7eb114eae..c3563c5fc 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { useNavigate } from '@reach/router'
 import styles from './filterPrice.module.css'
 import classNames from 'classnames/bind'
@@ -12,7 +12,6 @@ import Button from '../../atoms/Button'
 const cx = classNames.bind(styles)
 
 const priceFilterItems = [
-  { display: 'all', value: undefined },
   { display: 'fixed price', value: FilterByPriceOptions.Fixed },
   { display: 'dynamic price', value: FilterByPriceOptions.Dynamic }
 ]
@@ -35,6 +34,9 @@ export default function FilterPrice({
 }): ReactElement {
   const navigate = useNavigate()
 
+  const [priceSelections, setPriceSelections] = useState<string[]>([])
+  const [serviceSelections, setServiceSelections] = useState<string[]>([])
+
   async function applyPriceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'priceType')
     if (filterBy) {
@@ -46,7 +48,7 @@ export default function FilterPrice({
 
   async function applyServiceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'serviceType')
-    if (filterBy) {
+    if (filterBy && location.search.indexOf('&serviceType') === -1) {
       urlLocation = `${urlLocation}&serviceType=${filterBy}`
     }
     setServiceType(filterBy)
@@ -57,11 +59,12 @@ export default function FilterPrice({
     <div>
       <div className={styles.filterList}>
         {priceFilterItems.map((e, index) => {
+          const isSelected =
+            e.value === priceType || priceSelections.includes(e.value)
           const selectFilter = cx({
-            [styles.selected]: e.value === priceType,
+            [styles.selected]: isSelected,
             [styles.filter]: true
           })
-          const isSelected = e.value === priceType
           return (
             <Button
               size="small"
@@ -69,30 +72,46 @@ export default function FilterPrice({
               key={index}
               className={selectFilter}
               onClick={
+                // only works for two price options
                 isSelected
                   ? async () => {
-                      await applyPriceFilter(undefined)
+                      if (priceSelections.length > 1) {
+                        // both selected -> select the other one
+                        const otherValue = priceFilterItems.find(
+                          (p) => p.value !== e.value
+                        ).value
+                        await applyPriceFilter(otherValue)
+                        setPriceSelections([otherValue])
+                      } else {
+                        // only the current one selected -> deselect it
+                        await applyPriceFilter(undefined)
+                        setPriceSelections([])
+                      }
                     }
                   : async () => {
-                      await applyPriceFilter(e.value)
+                      if (priceSelections.length) {
+                        // one already selected -> both selected
+                        await applyPriceFilter(undefined)
+                        setPriceSelections(priceFilterItems.map((p) => p.value))
+                      } else {
+                        // none selected -> select
+                        await applyPriceFilter(e.value)
+                        setPriceSelections([e.value])
+                      }
                     }
               }
             >
               {e.display}
-              {isSelected && e.display !== 'all' ? (
-                <span className={styles.escape}>✕</span>
-              ) : (
-                <></>
-              )}
             </Button>
           )
         })}
         {serviceFilterItems.map((e, index) => {
+          const isSelected =
+            e.value === serviceType || serviceSelections.includes(e.value)
           const selectFilter = cx({
-            [styles.selected]: e.value === serviceType,
+            [styles.selected]: isSelected,
             [styles.filter]: true
           })
-          const isSelected = e.value === serviceType
           return (
             <Button
               size="small"
@@ -102,19 +121,35 @@ export default function FilterPrice({
               onClick={
                 isSelected
                   ? async () => {
-                      await applyServiceFilter(undefined)
+                      if (serviceSelections.length > 1) {
+                        // both selected -> select the other one
+                        const otherValue = serviceFilterItems.find(
+                          (p) => p.value !== e.value
+                        ).value
+                        await applyServiceFilter(otherValue)
+                        setServiceSelections([otherValue])
+                      } else {
+                        // only the current one selected -> deselect it
+                        await applyServiceFilter(undefined)
+                        setServiceSelections([])
+                      }
                     }
                   : async () => {
-                      await applyServiceFilter(e.value)
+                      if (serviceSelections.length) {
+                        // one already selected -> both selected
+                        await applyServiceFilter(undefined)
+                        setServiceSelections(
+                          serviceFilterItems.map((p) => p.value)
+                        )
+                      } else {
+                        // none selected -> select
+                        await applyServiceFilter(e.value)
+                        setServiceSelections([e.value])
+                      }
                     }
               }
             >
               {e.display}
-              {isSelected && e.display !== 'all' ? (
-                <span className={styles.escape}>✕</span>
-              ) : (
-                <></>
-              )}
             </Button>
           )
         })}
diff --git a/src/pages/search.tsx b/src/pages/search.tsx
index 2e8a3454f..145b3c348 100644
--- a/src/pages/search.tsx
+++ b/src/pages/search.tsx
@@ -27,7 +27,7 @@ export default function PageGatsbySearch(props: PageProps): ReactElement {
                 (totalResults > 1 ? ' results' : ' result') +
                 ' for ' +
                 searchValue
-            : totalResults + ' datasets'
+            : totalResults + ' results'
           : 'Searching...'
       }`
 

From 2283148e6d02c6c7a1bb12754836fc58c7279777 Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Thu, 25 Feb 2021 14:14:21 +0200
Subject: [PATCH 05/13] code refactoring

---
 .../templates/Search/filterPrice.tsx          | 116 +++++++++---------
 1 file changed, 57 insertions(+), 59 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index c3563c5fc..11fe8162d 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -55,6 +55,57 @@ export default function FilterPrice({
     navigate(urlLocation)
   }
 
+  async function handleSelectedFilter(isSelected: boolean, value: string) {
+    if (
+      FilterByPriceOptions.Dynamic.includes(value) ||
+      FilterByPriceOptions.Fixed.includes(value)
+    ) {
+      if (isSelected) {
+        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) {
+          // one already selected -> both selected
+          await applyPriceFilter(undefined)
+          setPriceSelections(priceFilterItems.map((p) => p.value))
+        } else {
+          // none selected -> select
+          await applyPriceFilter(value)
+          setPriceSelections([value])
+        }
+      }
+    } else {
+      if (isSelected) {
+        if (serviceSelections.length > 1) {
+          const otherValue = serviceFilterItems.find((p) => p.value !== value)
+            .value
+          await applyServiceFilter(otherValue)
+          setServiceSelections([otherValue])
+        } else {
+          await applyServiceFilter(undefined)
+          setServiceSelections([])
+        }
+      } else {
+        if (serviceSelections.length) {
+          await applyServiceFilter(undefined)
+          setServiceSelections(serviceFilterItems.map((p) => p.value))
+        } else {
+          await applyServiceFilter(value)
+          setServiceSelections([value])
+        }
+      }
+    }
+  }
+
   return (
     <div>
       <div className={styles.filterList}>
@@ -71,35 +122,9 @@ export default function FilterPrice({
               style="text"
               key={index}
               className={selectFilter}
-              onClick={
-                // only works for two price options
-                isSelected
-                  ? async () => {
-                      if (priceSelections.length > 1) {
-                        // both selected -> select the other one
-                        const otherValue = priceFilterItems.find(
-                          (p) => p.value !== e.value
-                        ).value
-                        await applyPriceFilter(otherValue)
-                        setPriceSelections([otherValue])
-                      } else {
-                        // only the current one selected -> deselect it
-                        await applyPriceFilter(undefined)
-                        setPriceSelections([])
-                      }
-                    }
-                  : async () => {
-                      if (priceSelections.length) {
-                        // one already selected -> both selected
-                        await applyPriceFilter(undefined)
-                        setPriceSelections(priceFilterItems.map((p) => p.value))
-                      } else {
-                        // none selected -> select
-                        await applyPriceFilter(e.value)
-                        setPriceSelections([e.value])
-                      }
-                    }
-              }
+              onClick={async () => {
+                handleSelectedFilter(isSelected, e.value)
+              }}
             >
               {e.display}
             </Button>
@@ -118,36 +143,9 @@ export default function FilterPrice({
               style="text"
               key={index}
               className={selectFilter}
-              onClick={
-                isSelected
-                  ? async () => {
-                      if (serviceSelections.length > 1) {
-                        // both selected -> select the other one
-                        const otherValue = serviceFilterItems.find(
-                          (p) => p.value !== e.value
-                        ).value
-                        await applyServiceFilter(otherValue)
-                        setServiceSelections([otherValue])
-                      } else {
-                        // only the current one selected -> deselect it
-                        await applyServiceFilter(undefined)
-                        setServiceSelections([])
-                      }
-                    }
-                  : async () => {
-                      if (serviceSelections.length) {
-                        // one already selected -> both selected
-                        await applyServiceFilter(undefined)
-                        setServiceSelections(
-                          serviceFilterItems.map((p) => p.value)
-                        )
-                      } else {
-                        // none selected -> select
-                        await applyServiceFilter(e.value)
-                        setServiceSelections([e.value])
-                      }
-                    }
-              }
+              onClick={async () => {
+                handleSelectedFilter(isSelected, e.value)
+              }}
             >
               {e.display}
             </Button>

From 6eaf2efd95ae1251003ff8ab9caa184e8e1c55bb Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Thu, 25 Feb 2021 17:10:19 +0200
Subject: [PATCH 06/13] eliminate no price elements on both price filters set

---
 .../templates/Search/filterPrice.tsx          |  6 ++---
 src/components/templates/Search/utils.ts      | 22 ++++++++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index 11fe8162d..38274b412 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -57,8 +57,8 @@ export default function FilterPrice({
 
   async function handleSelectedFilter(isSelected: boolean, value: string) {
     if (
-      FilterByPriceOptions.Dynamic.includes(value) ||
-      FilterByPriceOptions.Fixed.includes(value)
+      value === FilterByPriceOptions.Fixed ||
+      value === FilterByPriceOptions.Dynamic
     ) {
       if (isSelected) {
         if (priceSelections.length > 1) {
@@ -75,7 +75,7 @@ export default function FilterPrice({
       } else {
         if (priceSelections.length) {
           // one already selected -> both selected
-          await applyPriceFilter(undefined)
+          await applyPriceFilter(FilterByPriceOptions.All)
           setPriceSelections(priceFilterItems.map((p) => p.value))
         } else {
           // none selected -> select
diff --git a/src/components/templates/Search/utils.ts b/src/components/templates/Search/utils.ts
index 4a6046413..3a52558e7 100644
--- a/src/components/templates/Search/utils.ts
+++ b/src/components/templates/Search/utils.ts
@@ -28,7 +28,8 @@ type SortValueOptions = typeof SortValueOptions[keyof typeof SortValueOptions]
 
 export const FilterByPriceOptions = {
   Fixed: 'exchange',
-  Dynamic: 'pool'
+  Dynamic: 'pool',
+  All: 'all'
 } as const
 type FilterByPriceOptions = typeof FilterByPriceOptions[keyof typeof FilterByPriceOptions]
 
@@ -39,11 +40,20 @@ export const FilterByTypeOptions = {
 type FilterByTypeOptions = typeof FilterByTypeOptions[keyof typeof FilterByTypeOptions]
 
 function addPriceFilterToQuerry(sortTerm: string, priceFilter: string): string {
-  sortTerm = priceFilter
-    ? sortTerm === ''
-      ? `price.type:${priceFilter}`
-      : `${sortTerm} AND price.type:${priceFilter}`
-    : sortTerm
+  if (priceFilter === FilterByPriceOptions.All) {
+    sortTerm = priceFilter
+      ? sortTerm === ''
+        ? `(price.type:${FilterByPriceOptions.Fixed} OR price.type:${FilterByPriceOptions.Dynamic})`
+        : `${sortTerm} AND (price.type:${FilterByPriceOptions.Dynamic} OR price.type:${FilterByPriceOptions.Fixed})`
+      : sortTerm
+  } else {
+    sortTerm = priceFilter
+      ? sortTerm === ''
+        ? `price.type:${priceFilter}`
+        : `${sortTerm} AND price.type:${priceFilter}`
+      : sortTerm
+  }
+  console.log('SORT TERM: ', sortTerm)
   return sortTerm
 }
 

From 07e8ac6f13b8525df7fba213b01128045c5f2a05 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 1 Mar 2021 15:04:41 +0100
Subject: [PATCH 07/13] styling & spacing

---
 .../templates/Search/filterPrice.module.css   | 21 ++---
 .../templates/Search/filterPrice.tsx          | 88 +++++++++----------
 .../templates/Search/sort.module.css          | 12 ++-
 3 files changed, 64 insertions(+), 57 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.module.css b/src/components/templates/Search/filterPrice.module.css
index 948283de4..e305feb59 100644
--- a/src/components/templates/Search/filterPrice.module.css
+++ b/src/components/templates/Search/filterPrice.module.css
@@ -1,7 +1,12 @@
-/* .filterList {
-  display: inline-flex;
-  float: left;
-} */
+.filterList,
+div.filterList {
+  white-space: normal;
+  margin-bottom: 0;
+}
+
+.filter {
+  display: inline-block;
+}
 
 .filter,
 button.filter,
@@ -9,14 +14,14 @@ button.filter,
 .filter:active,
 .filter:focus {
   border: 1px solid var(--border-color);
-  text-transform: uppercase;
   border-radius: var(--border-radius);
   margin-right: calc(var(--spacer) / 6);
+  margin-bottom: calc(var(--spacer) / 6);
   color: var(--color-secondary);
   background: var(--background-body);
 
   /* the only thing not possible to overwrite button style="text" with more specifity of selectors, so sledgehammer */
-  padding: calc(var(--spacer) / 5) !important;
+  padding: calc(var(--spacer) / 6) !important;
 }
 
 .filter:hover,
@@ -37,7 +42,3 @@ button.filter,
   margin-left: calc(var(--spacer) / 6);
   color: var(--background-body);
 }
-
-.filterList:first-of-type{
-  margin-bottom: calc(var(--spacer) / 6);
-}
diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index 38274b412..19f24045c 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -107,51 +107,49 @@ export default function FilterPrice({
   }
 
   return (
-    <div>
-      <div className={styles.filterList}>
-        {priceFilterItems.map((e, index) => {
-          const isSelected =
-            e.value === priceType || priceSelections.includes(e.value)
-          const selectFilter = cx({
-            [styles.selected]: isSelected,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={selectFilter}
-              onClick={async () => {
-                handleSelectedFilter(isSelected, e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-        {serviceFilterItems.map((e, index) => {
-          const isSelected =
-            e.value === serviceType || serviceSelections.includes(e.value)
-          const selectFilter = cx({
-            [styles.selected]: isSelected,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={selectFilter}
-              onClick={async () => {
-                handleSelectedFilter(isSelected, e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-      </div>
+    <div className={styles.filterList}>
+      {priceFilterItems.map((e, index) => {
+        const isSelected =
+          e.value === priceType || priceSelections.includes(e.value)
+        const selectFilter = cx({
+          [styles.selected]: isSelected,
+          [styles.filter]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={selectFilter}
+            onClick={async () => {
+              handleSelectedFilter(isSelected, e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
+      {serviceFilterItems.map((e, index) => {
+        const isSelected =
+          e.value === serviceType || serviceSelections.includes(e.value)
+        const selectFilter = cx({
+          [styles.selected]: isSelected,
+          [styles.filter]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={selectFilter}
+            onClick={async () => {
+              handleSelectedFilter(isSelected, e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
     </div>
   )
 }
diff --git a/src/components/templates/Search/sort.module.css b/src/components/templates/Search/sort.module.css
index dc72f57df..8b64fa684 100644
--- a/src/components/templates/Search/sort.module.css
+++ b/src/components/templates/Search/sort.module.css
@@ -1,11 +1,18 @@
 .sortList {
-  align-self: flex-end;
-  padding: calc(var(--spacer) / 10);
+  padding: 0 calc(var(--spacer) / 10);
   display: flex;
   align-items: center;
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
   background: var(--background-body);
+  overflow-y: auto;
+}
+
+@media (min-width: 40rem) {
+  .sortList {
+    align-self: flex-end;
+    overflow-y: unset;
+  }
 }
 
 .sortLabel {
@@ -15,6 +22,7 @@
   margin-right: calc(var(--spacer) / 1.5);
   text-transform: uppercase;
   color: var(--color-secondary);
+  font-size: var(--font-size-small);
 }
 
 .sorted {

From d71bf5dfaa49ebf6de77ed4023150996c5bcbabb Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 1 Mar 2021 15:10:52 +0100
Subject: [PATCH 08/13] style fix

---
 src/components/templates/Search/sort.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/templates/Search/sort.module.css b/src/components/templates/Search/sort.module.css
index 5df6305c2..dfcf1ce46 100644
--- a/src/components/templates/Search/sort.module.css
+++ b/src/components/templates/Search/sort.module.css
@@ -33,7 +33,7 @@
   text-transform: capitalize;
   border-radius: 0;
   font-weight: var(--font-weight-base);
-  background: var(--background-body);
+  background: var(--background-content);
   box-shadow: none;
 }
 

From 8d07414db110f39ef34d87bffefbf76a805bc5cd Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Mon, 1 Mar 2021 17:38:02 +0200
Subject: [PATCH 09/13] sort fix

---
 src/components/templates/Search/sort.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/templates/Search/sort.tsx b/src/components/templates/Search/sort.tsx
index ca2699dc1..908937dbf 100644
--- a/src/components/templates/Search/sort.tsx
+++ b/src/components/templates/Search/sort.tsx
@@ -46,8 +46,6 @@ export default function Sort({
       if (sortBy === SortTermOptions.Liquidity) {
         urlLocation = `${urlLocation}&priceType=${FilterByPriceOptions.Dynamic}`
         setPriceType(FilterByPriceOptions.Dynamic)
-      } else {
-        setPriceType(undefined)
       }
       setSortType(sortBy)
     } else if (direction) {

From 8cce1898fdd6e0a163c441825d3e8401cf3232c8 Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Mon, 1 Mar 2021 19:08:18 +0200
Subject: [PATCH 10/13] clear filters button added

---
 .../templates/Search/filterPrice.tsx          | 176 ++++++++++++------
 src/components/templates/Search/utils.ts      |   7 +-
 2 files changed, 119 insertions(+), 64 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index 19f24045c..e87c2c84c 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -11,6 +11,8 @@ import Button from '../../atoms/Button'
 
 const cx = classNames.bind(styles)
 
+const clearFilters = [{ display: 'clear', value: '' }]
+
 const priceFilterItems = [
   { display: 'fixed price', value: FilterByPriceOptions.Fixed },
   { display: 'dynamic price', value: FilterByPriceOptions.Dynamic }
@@ -36,6 +38,7 @@ export default function FilterPrice({
 
   const [priceSelections, setPriceSelections] = useState<string[]>([])
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
+  const [clearSelected, setClearSeleted] = useState<boolean>(false)
 
   async function applyPriceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'priceType')
@@ -61,95 +64,148 @@ export default function FilterPrice({
       value === FilterByPriceOptions.Dynamic
     ) {
       if (isSelected) {
-        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)
+        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) {
+        if (priceSelections.length > 0) {
           // one already selected -> both selected
           await applyPriceFilter(FilterByPriceOptions.All)
           setPriceSelections(priceFilterItems.map((p) => p.value))
+          setClearSeleted(false)
         } else {
           // none selected -> select
           await applyPriceFilter(value)
           setPriceSelections([value])
+          setClearSeleted(false)
         }
       }
     } else {
       if (isSelected) {
-        if (serviceSelections.length > 1) {
-          const otherValue = serviceFilterItems.find((p) => p.value !== value)
-            .value
-          await applyServiceFilter(otherValue)
-          setServiceSelections([otherValue])
-        } else {
-          await applyServiceFilter(undefined)
+        if (clearSelected) {
           setServiceSelections([])
+        } else {
+          if (serviceSelections.length > 1) {
+            const otherValue = serviceFilterItems.find((p) => p.value !== value)
+              .value
+            await applyServiceFilter(otherValue)
+            setServiceSelections([otherValue])
+          } else {
+            await applyServiceFilter(undefined)
+            setServiceSelections([])
+          }
         }
       } else {
         if (serviceSelections.length) {
           await applyServiceFilter(undefined)
           setServiceSelections(serviceFilterItems.map((p) => p.value))
+          setClearSeleted(false)
         } else {
           await applyServiceFilter(value)
           setServiceSelections([value])
+          setClearSeleted(false)
         }
       }
     }
   }
 
+  async function applyClearFilter() {
+    let urlLocation = await addExistingParamsToUrl(
+      location,
+      'priceType',
+      'serviceType'
+    )
+
+    urlLocation = `${urlLocation}`
+
+    setServiceSelections([])
+    setPriceSelections([])
+
+    setClearSeleted(true)
+    setPriceType(undefined)
+    setServiceType(undefined)
+    navigate(urlLocation)
+  }
+
   return (
-    <div className={styles.filterList}>
-      {priceFilterItems.map((e, index) => {
-        const isSelected =
-          e.value === priceType || priceSelections.includes(e.value)
-        const selectFilter = cx({
-          [styles.selected]: isSelected,
-          [styles.filter]: true
-        })
-        return (
-          <Button
-            size="small"
-            style="text"
-            key={index}
-            className={selectFilter}
-            onClick={async () => {
-              handleSelectedFilter(isSelected, e.value)
-            }}
-          >
-            {e.display}
-          </Button>
-        )
-      })}
-      {serviceFilterItems.map((e, index) => {
-        const isSelected =
-          e.value === serviceType || serviceSelections.includes(e.value)
-        const selectFilter = cx({
-          [styles.selected]: isSelected,
-          [styles.filter]: true
-        })
-        return (
-          <Button
-            size="small"
-            style="text"
-            key={index}
-            className={selectFilter}
-            onClick={async () => {
-              handleSelectedFilter(isSelected, e.value)
-            }}
-          >
-            {e.display}
-          </Button>
-        )
-      })}
+    <div>
+      <div className={styles.filterList}>
+        {clearFilters.map((e, index) => {
+          const selectFilter = cx({
+            [styles.selected]: 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)) &&
+            clearSelected === false
+          const selectFilter = cx({
+            [styles.selected]: isPriceSelected,
+            [styles.filter]: true
+          })
+          return (
+            <Button
+              size="small"
+              style="text"
+              key={index}
+              className={selectFilter}
+              onClick={async () => {
+                handleSelectedFilter(isPriceSelected, e.value)
+              }}
+            >
+              {e.display}
+            </Button>
+          )
+        })}
+        {serviceFilterItems.map((e, index) => {
+          const isServiceSelected =
+            (e.value === serviceType || serviceSelections.includes(e.value)) &&
+            clearSelected === false
+          const selectFilter = cx({
+            [styles.selected]: isServiceSelected,
+            [styles.filter]: true
+          })
+          return (
+            <Button
+              size="small"
+              style="text"
+              key={index}
+              className={selectFilter}
+              onClick={async () => {
+                handleSelectedFilter(isServiceSelected, e.value)
+              }}
+            >
+              {e.display}
+            </Button>
+          )
+        })}
+      </div>
     </div>
   )
 }
diff --git a/src/components/templates/Search/utils.ts b/src/components/templates/Search/utils.ts
index 3a52558e7..661dd1b6c 100644
--- a/src/components/templates/Search/utils.ts
+++ b/src/components/templates/Search/utils.ts
@@ -39,7 +39,7 @@ export const FilterByTypeOptions = {
 } as const
 type FilterByTypeOptions = typeof FilterByTypeOptions[keyof typeof FilterByTypeOptions]
 
-function addPriceFilterToQuerry(sortTerm: string, priceFilter: string): string {
+function addPriceFilterToQuery(sortTerm: string, priceFilter: string): string {
   if (priceFilter === FilterByPriceOptions.All) {
     sortTerm = priceFilter
       ? sortTerm === ''
@@ -53,7 +53,6 @@ function addPriceFilterToQuerry(sortTerm: string, priceFilter: string): string {
         : `${sortTerm} AND price.type:${priceFilter}`
       : sortTerm
   }
-  console.log('SORT TERM: ', sortTerm)
   return sortTerm
 }
 
@@ -99,9 +98,9 @@ export function getSearchQuery(
     ? // eslint-disable-next-line no-useless-escape
       `(service.attributes.additionalInformation.categories:\"${categories}\")`
     : text || ''
-  searchTerm = addPriceFilterToQuerry(searchTerm, priceType)
   searchTerm = addTypeFilterToQuery(searchTerm, serviceType)
-  console.log('search', searchTerm, serviceType)
+  searchTerm = addPriceFilterToQuery(searchTerm, priceType)
+
   return {
     page: Number(page) || 1,
     offset: Number(offset) || 21,

From f1d47bbec915c095bf8674e10a68b49243c4c2ec Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Mon, 1 Mar 2021 19:09:43 +0200
Subject: [PATCH 11/13] typo fixed

---
 src/components/templates/Search/filterPrice.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index e87c2c84c..f48064dd8 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -38,7 +38,7 @@ export default function FilterPrice({
 
   const [priceSelections, setPriceSelections] = useState<string[]>([])
   const [serviceSelections, setServiceSelections] = useState<string[]>([])
-  const [clearSelected, setClearSeleted] = useState<boolean>(false)
+  const [clearSelected, setClearSelected] = useState<boolean>(false)
 
   async function applyPriceFilter(filterBy: string) {
     let urlLocation = await addExistingParamsToUrl(location, 'priceType')
@@ -84,12 +84,12 @@ export default function FilterPrice({
           // one already selected -> both selected
           await applyPriceFilter(FilterByPriceOptions.All)
           setPriceSelections(priceFilterItems.map((p) => p.value))
-          setClearSeleted(false)
+          setClearSelected(false)
         } else {
           // none selected -> select
           await applyPriceFilter(value)
           setPriceSelections([value])
-          setClearSeleted(false)
+          setClearSelected(false)
         }
       }
     } else {
@@ -111,11 +111,11 @@ export default function FilterPrice({
         if (serviceSelections.length) {
           await applyServiceFilter(undefined)
           setServiceSelections(serviceFilterItems.map((p) => p.value))
-          setClearSeleted(false)
+          setClearSelected(false)
         } else {
           await applyServiceFilter(value)
           setServiceSelections([value])
-          setClearSeleted(false)
+          setClearSelected(false)
         }
       }
     }
@@ -133,7 +133,7 @@ export default function FilterPrice({
     setServiceSelections([])
     setPriceSelections([])
 
-    setClearSeleted(true)
+    setClearSelected(true)
     setPriceType(undefined)
     setServiceType(undefined)
     navigate(urlLocation)

From 3b604085abaeb021b9cbc34d6a472a3b00937e87 Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Tue, 2 Mar 2021 11:29:57 +0200
Subject: [PATCH 12/13] clear button styling

---
 .../templates/Search/filterPrice.module.css           | 11 +++++++++++
 src/components/templates/Search/filterPrice.tsx       |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/templates/Search/filterPrice.module.css b/src/components/templates/Search/filterPrice.module.css
index 3ad41e860..ef6fe3e40 100644
--- a/src/components/templates/Search/filterPrice.module.css
+++ b/src/components/templates/Search/filterPrice.module.css
@@ -42,3 +42,14 @@ button.filter,
   margin-left: calc(var(--spacer) / 6);
   color: var(--background-body);
 }
+
+.filter.clearSelected {
+  color: var(--background-body);
+  background: var(--font-color-text);
+  border-color: var(--background-body);
+}
+
+.filter.clearSelected::after {
+  margin-left: calc(var(--spacer) / 6);
+  color: var(--background-body);
+}
\ No newline at end of file
diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index f48064dd8..f1c9ae69a 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -144,7 +144,7 @@ export default function FilterPrice({
       <div className={styles.filterList}>
         {clearFilters.map((e, index) => {
           const selectFilter = cx({
-            [styles.selected]: clearSelected,
+            [styles.clearSelected]: clearSelected,
             [styles.filter]: true
           })
           return (

From c35fb820c3722c066caa68fba1bca456f43dec8f Mon Sep 17 00:00:00 2001
From: "claudia.holhos" <claudia.holhos@hpm.ro>
Date: Tue, 2 Mar 2021 15:41:43 +0200
Subject: [PATCH 13/13] clear button display changed

---
 .../templates/Search/filterPrice.module.css   |  17 +-
 .../templates/Search/filterPrice.tsx          | 173 ++++++++----------
 2 files changed, 84 insertions(+), 106 deletions(-)

diff --git a/src/components/templates/Search/filterPrice.module.css b/src/components/templates/Search/filterPrice.module.css
index ef6fe3e40..39453385e 100644
--- a/src/components/templates/Search/filterPrice.module.css
+++ b/src/components/templates/Search/filterPrice.module.css
@@ -43,13 +43,14 @@ button.filter,
   color: var(--background-body);
 }
 
-.filter.clearSelected {
-  color: var(--background-body);
-  background: var(--font-color-text);
-  border-color: var(--background-body);
+.showClear {
+  display: inline-flex;
+  text-transform: capitalize;
+  color: var(--color-secondary);
+  font-weight: var(--font-weight-base);
+  margin-left: calc(var(--spacer) / 6);
 }
 
-.filter.clearSelected::after {
-  margin-left: calc(var(--spacer) / 6);
-  color: var(--background-body);
-}
\ No newline at end of file
+.hideClear {
+  display: none !important;
+}
diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index f1c9ae69a..d722bdc01 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/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,58 +63,43 @@ export default function FilterPrice({
       value === FilterByPriceOptions.Dynamic
     ) {
       if (isSelected) {
-        if (clearSelected) {
-          setPriceSelections([])
+        if (priceSelections.length > 1) {
+          // both selected -> select the other one
+          const otherValue = priceFilterItems.find((p) => p.value !== value)
+            .value
+          await applyPriceFilter(otherValue)
         } 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([])
-          }
+          // only the current one selected -> deselect it
+          await applyPriceFilter(undefined)
         }
       } 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([])
+        if (serviceSelections.length > 1) {
+          const otherValue = serviceFilterItems.find((p) => p.value !== value)
+            .value
+          await applyServiceFilter(otherValue)
+          setServiceSelections([otherValue])
         } else {
-          if (serviceSelections.length > 1) {
-            const otherValue = serviceFilterItems.find((p) => p.value !== value)
-              .value
-            await applyServiceFilter(otherValue)
-            setServiceSelections([otherValue])
-          } else {
-            await applyServiceFilter(undefined)
-            setServiceSelections([])
-          }
+          await applyServiceFilter(undefined)
         }
       } else {
         if (serviceSelections.length) {
           await applyServiceFilter(undefined)
           setServiceSelections(serviceFilterItems.map((p) => p.value))
-          setClearSelected(false)
         } else {
           await applyServiceFilter(value)
           setServiceSelections([value])
-          setClearSelected(false)
         }
       }
     }
@@ -133,79 +117,72 @@ 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)) &&
-            clearSelected === false
-          const selectFilter = cx({
-            [styles.selected]: isPriceSelected,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={selectFilter}
-              onClick={async () => {
-                handleSelectedFilter(isPriceSelected, e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-        {serviceFilterItems.map((e, index) => {
-          const isServiceSelected =
-            (e.value === serviceType || serviceSelections.includes(e.value)) &&
-            clearSelected === false
-          const selectFilter = cx({
-            [styles.selected]: isServiceSelected,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={selectFilter}
-              onClick={async () => {
-                handleSelectedFilter(isServiceSelected, e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-      </div>
+    <div className={styles.filterList}>
+      {priceFilterItems.map((e, index) => {
+        const isPriceSelected =
+          e.value === priceType || priceSelections.includes(e.value)
+        const selectFilter = cx({
+          [styles.selected]: isPriceSelected,
+          [styles.filter]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={selectFilter}
+            onClick={async () => {
+              handleSelectedFilter(isPriceSelected, e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
+      {serviceFilterItems.map((e, index) => {
+        const isServiceSelected =
+          e.value === serviceType || serviceSelections.includes(e.value)
+        const selectFilter = cx({
+          [styles.selected]: isServiceSelected,
+          [styles.filter]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={selectFilter}
+            onClick={async () => {
+              handleSelectedFilter(isServiceSelected, e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
+      {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>
   )
 }