Merge branch 'feature/compute' 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

@@ -18,7 +18,7 @@ button.filter,
   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) / 6) !important;

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

@@ -4,7 +4,7 @@
   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;
 }
 

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;