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 {
+.filterList,
-  display: inline-flex;
+div.filterList {
-  float: left;
+  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,7 +107,6 @@ export default function FilterPrice({
   }
 
   return (
-    <div>
     <div className={styles.filterList}>
       {priceFilterItems.map((e, index) => {
         const isSelected =
@@ -152,6 +151,5 @@ export default function FilterPrice({
         )
       })}
     </div>
-    </div>
   )
 }

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

@@ -1,11 +1,18 @@
 .sortList {
-  align-self: flex-end;
+  padding: 0 calc(var(--spacer) / 10);
-  padding: 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;