Merge remote-tracking branch 'origin/feature/issue392' into feature/issue392

src/components/atoms/Input/InputElement.module.css

@@ -6,7 +6,7 @@
   border: 1px solid var(--border-color);
   box-shadow: none;
   width: 100%;
-  background: var(--background-body);
+  background: var(--background-content);
   padding: calc(var(--spacer) / 3);
   margin: 0;
   border-radius: var(--border-radius);

src/components/molecules/Wallet/Account.module.css

@@ -7,7 +7,7 @@
   border-radius: var(--border-radius);
   padding: calc(var(--spacer) / 4);
   white-space: nowrap;
-  background: none;
+  background: var(--background-content);
   margin: 0;
   transition: border 0.2s ease-out;
   cursor: pointer;

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);
+  background: var(--background-content);
 
   /* 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);
-}

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

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);
+  background: var(--background-content);
+  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 {
@@ -25,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;
 }
 

src/global/_variables.css

@@ -25,7 +25,7 @@
   /* Only use these vars for most color referencing for easy light/dark mode */
   --font-color-text: #41474e;
   --font-color-heading: #141414;
-  --background-body: #fafafa;
+  --background-body: #fcfcfc;
   --background-body-transparent: rgba(255, 255, 255, 0.8);
   --background-content: #fff;
   --background-highlight: #f7f7f7;