From b48f3cc89d64b84edda8fb5faadf888d5d0d14eb Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 31 Oct 2020 00:56:03 +0100 Subject: [PATCH] mobile fixes --- src/components/atoms/Box.module.css | 8 +++++++- src/components/atoms/Container.module.css | 11 +++++++++-- src/components/molecules/PageHeader.module.css | 8 +++++++- src/components/molecules/UserPreferences/Currency.tsx | 4 ++-- src/components/molecules/UserPreferences/Debug.tsx | 4 +++- src/components/molecules/UserPreferences/Theme.tsx | 4 ++-- .../molecules/UserPreferences/index.module.css | 3 ++- src/components/organisms/AssetActions/Compute.tsx | 2 +- .../organisms/AssetActions/Pool/TokenList.module.css | 11 +++++++++-- .../organisms/AssetContent/Bookmark.module.css | 2 +- .../AssetContent/Pricing/FormPricing/Fees.tsx | 4 ++-- 11 files changed, 45 insertions(+), 16 deletions(-) diff --git a/src/components/atoms/Box.module.css b/src/components/atoms/Box.module.css index f457c91ff..6d5929b52 100644 --- a/src/components/atoms/Box.module.css +++ b/src/components/atoms/Box.module.css @@ -5,7 +5,13 @@ border: 1px solid var(--border-color); box-shadow: 0 6px 17px 0 var(--box-shadow-color); overflow: hidden; - padding: var(--spacer); + padding: calc(var(--spacer) / 1.5); +} + +@media (min-width: 40rem) { + .box { + padding: var(--spacer); + } } a.box:hover, diff --git a/src/components/atoms/Container.module.css b/src/components/atoms/Container.module.css index d644cdf34..304e0cfe8 100644 --- a/src/components/atoms/Container.module.css +++ b/src/components/atoms/Container.module.css @@ -2,11 +2,18 @@ max-width: var(--break-point--large); margin-left: auto; margin-right: auto; - padding-left: calc(var(--spacer) / 1.2); - padding-right: calc(var(--spacer) / 1.2); + padding-left: calc(var(--spacer) / 3); + padding-right: calc(var(--spacer) / 3); width: 100%; } +@media (min-width: 40rem) { + .container { + padding-left: calc(var(--spacer) / 1.2); + padding-right: calc(var(--spacer) / 1.2); + } +} + .container.narrow { max-width: 42rem; } diff --git a/src/components/molecules/PageHeader.module.css b/src/components/molecules/PageHeader.module.css index fd6bea38f..97216e2dd 100644 --- a/src/components/molecules/PageHeader.module.css +++ b/src/components/molecules/PageHeader.module.css @@ -4,11 +4,17 @@ } .title { - font-size: var(--font-size-h2); + font-size: var(--font-size-h3); margin-top: 0; margin-bottom: 0; } +@media (min-width: 40rem) { + .title { + font-size: var(--font-size-h2); + } +} + .description { font-size: var(--font-size-large); margin-top: calc(var(--spacer) / 4); diff --git a/src/components/molecules/UserPreferences/Currency.tsx b/src/components/molecules/UserPreferences/Currency.tsx index 3878345c6..c45ce99bd 100644 --- a/src/components/molecules/UserPreferences/Currency.tsx +++ b/src/components/molecules/UserPreferences/Currency.tsx @@ -12,14 +12,14 @@ export default function Currency(): ReactElement { ) => setCurrency(e.target.value) } - small + size="small" /> ) diff --git a/src/components/molecules/UserPreferences/Debug.tsx b/src/components/molecules/UserPreferences/Debug.tsx index 1615b7fb4..5aef8a52e 100644 --- a/src/components/molecules/UserPreferences/Debug.tsx +++ b/src/components/molecules/UserPreferences/Debug.tsx @@ -15,7 +15,9 @@ export default function Debug(): ReactElement { defaultChecked={debug === true} onChange={() => setDebug(!debug)} /> - Show geeky information in some places. + + Show geeky information in some places, and in your console. + ) } diff --git a/src/components/molecules/UserPreferences/Theme.tsx b/src/components/molecules/UserPreferences/Theme.tsx index b2f368a14..663ce49fb 100644 --- a/src/components/molecules/UserPreferences/Theme.tsx +++ b/src/components/molecules/UserPreferences/Theme.tsx @@ -16,12 +16,12 @@ export default function Theme({ darkMode.toggle()} - small + size="small" /> ) diff --git a/src/components/molecules/UserPreferences/index.module.css b/src/components/molecules/UserPreferences/index.module.css index dba596f4c..ba420e823 100644 --- a/src/components/molecules/UserPreferences/index.module.css +++ b/src/components/molecules/UserPreferences/index.module.css @@ -36,7 +36,8 @@ } .preferencesDetails { - padding: calc(var(--spacer) / 2); + padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2); + max-width: 20rem; } .preferencesDetails li > div, diff --git a/src/components/organisms/AssetActions/Compute.tsx b/src/components/organisms/AssetActions/Compute.tsx index 42f237f4f..06c941a82 100644 --- a/src/components/organisms/AssetActions/Compute.tsx +++ b/src/components/organisms/AssetActions/Compute.tsx @@ -135,7 +135,7 @@ export default function Compute({ name="algorithm" label="Select image to run the algorithm" placeholder="" - small + size="small" value={computeType} options={computeOptions.map((x) => x.name)} onChange={handleSelectChange} diff --git a/src/components/organisms/AssetActions/Pool/TokenList.module.css b/src/components/organisms/AssetActions/Pool/TokenList.module.css index c6cd80508..2b87baa0f 100644 --- a/src/components/organisms/AssetActions/Pool/TokenList.module.css +++ b/src/components/organisms/AssetActions/Pool/TokenList.module.css @@ -1,11 +1,18 @@ .tokenlist { margin-left: -2rem; margin-right: -2rem; - padding: calc(var(--spacer) / 1.5) var(--spacer) calc(var(--spacer) / 2) - var(--spacer); + padding: calc(var(--spacer) / 1.5) calc(var(--spacer) / 1.5) + calc(var(--spacer) / 2) calc(var(--spacer) / 1.5); border-top: 1px solid var(--border-color); } +@media (min-width: 40rem) { + .tokenlist { + padding-left: var(--spacer); + padding-right: var(--spacer); + } +} + .tokenlist.highlight { background: var(--background-highlight); } diff --git a/src/components/organisms/AssetContent/Bookmark.module.css b/src/components/organisms/AssetContent/Bookmark.module.css index 19b19db0a..bddc59424 100644 --- a/src/components/organisms/AssetContent/Bookmark.module.css +++ b/src/components/organisms/AssetContent/Bookmark.module.css @@ -15,7 +15,7 @@ fill: var(--brand-grey-light); height: 40px; width: 40px; - filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)); + filter: drop-shadow(0 4px 6px var(--box-shadow-color)); } .bookmark:hover, diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx index bab7da623..743e75393 100644 --- a/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx +++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx @@ -25,7 +25,7 @@ const Default = ({ name={name} postfix="%" readOnly - small + size="small" /> ) @@ -51,7 +51,7 @@ export default function Fees({ min="0.1" max="10" step="0.1" - small + size="small" {...field} additionalComponent={} />