From e5b71046dbe9a9af61a92f9ecb8a95de410125ca Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 25 Feb 2021 13:16:32 +0100 Subject: [PATCH 1/3] small global color tweaks --- src/components/atoms/Input/InputElement.module.css | 2 +- src/components/molecules/Wallet/Account.module.css | 2 +- .../templates/Search/filterPrice.module.css | 11 +++-------- src/components/templates/Search/sort.module.css | 2 +- src/global/_variables.css | 2 +- 5 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/components/atoms/Input/InputElement.module.css b/src/components/atoms/Input/InputElement.module.css index 3fd57b9b0..ffee35421 100644 --- a/src/components/atoms/Input/InputElement.module.css +++ b/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); diff --git a/src/components/molecules/Wallet/Account.module.css b/src/components/molecules/Wallet/Account.module.css index c740699a7..dd268ef2f 100644 --- a/src/components/molecules/Wallet/Account.module.css +++ b/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; diff --git a/src/components/templates/Search/filterPrice.module.css b/src/components/templates/Search/filterPrice.module.css index 79d825f7a..7379c6ae7 100644 --- a/src/components/templates/Search/filterPrice.module.css +++ b/src/components/templates/Search/filterPrice.module.css @@ -1,8 +1,3 @@ -/* .filterList { - display: inline-flex; - float: left; -} */ - .filter, button.filter, .filter:hover, @@ -13,7 +8,7 @@ button.filter, border-radius: var(--border-radius); margin-right: 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; @@ -32,6 +27,6 @@ button.filter, border-color: var(--background-body); } -.filterList:first-of-type{ +.filterList:first-of-type { margin-bottom: calc(var(--spacer) / 6); -} \ No newline at end of file +} diff --git a/src/components/templates/Search/sort.module.css b/src/components/templates/Search/sort.module.css index dc72f57df..16ff4f628 100644 --- a/src/components/templates/Search/sort.module.css +++ b/src/components/templates/Search/sort.module.css @@ -5,7 +5,7 @@ align-items: center; border-radius: var(--border-radius); border: 1px solid var(--border-color); - background: var(--background-body); + background: var(--background-content); } .sortLabel { diff --git a/src/global/_variables.css b/src/global/_variables.css index a27190ad1..3d67114cf 100644 --- a/src/global/_variables.css +++ b/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; From 07e8ac6f13b8525df7fba213b01128045c5f2a05 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 1 Mar 2021 15:04:41 +0100 Subject: [PATCH 2/3] 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 ( -
-
- {priceFilterItems.map((e, index) => { - const isSelected = - e.value === priceType || priceSelections.includes(e.value) - const selectFilter = cx({ - [styles.selected]: isSelected, - [styles.filter]: true - }) - return ( - - ) - })} - {serviceFilterItems.map((e, index) => { - const isSelected = - e.value === serviceType || serviceSelections.includes(e.value) - const selectFilter = cx({ - [styles.selected]: isSelected, - [styles.filter]: true - }) - return ( - - ) - })} -
+
+ {priceFilterItems.map((e, index) => { + const isSelected = + e.value === priceType || priceSelections.includes(e.value) + const selectFilter = cx({ + [styles.selected]: isSelected, + [styles.filter]: true + }) + return ( + + ) + })} + {serviceFilterItems.map((e, index) => { + const isSelected = + e.value === serviceType || serviceSelections.includes(e.value) + const selectFilter = cx({ + [styles.selected]: isSelected, + [styles.filter]: true + }) + return ( + + ) + })}
) } 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 Date: Mon, 1 Mar 2021 15:10:52 +0100 Subject: [PATCH 3/3] 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; }