diff --git a/frontends/web/src/components/balance/balance.module.css b/frontends/web/src/components/balance/balance.module.css index f86c98f19f..2094f70785 100644 --- a/frontends/web/src/components/balance/balance.module.css +++ b/frontends/web/src/components/balance/balance.module.css @@ -41,7 +41,7 @@ } .balanceTable td { - font-size: var(--size-large-mobile); + font-size: var(--size-header); line-height: 1.5; } diff --git a/frontends/web/src/components/dialog/dialog.module.css b/frontends/web/src/components/dialog/dialog.module.css index 89a7efc18b..db39c49d4b 100644 --- a/frontends/web/src/components/dialog/dialog.module.css +++ b/frontends/web/src/components/dialog/dialog.module.css @@ -203,7 +203,7 @@ @media (max-width: 768px) { .header .title{ - font-size: var(--header-default-font-size); + font-size: var(--size-header); } .modal { diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css index 5010aa97b1..67cdacd66f 100644 --- a/frontends/web/src/components/guide/guide.module.css +++ b/frontends/web/src/components/guide/guide.module.css @@ -56,7 +56,7 @@ } .header h2 { - font-size: var(--header-default-font-size); + font-size: var(--size-header); font-weight: 400; margin: 0; } diff --git a/frontends/web/src/components/layout/header.module.css b/frontends/web/src/components/layout/header.module.css index f0f5609386..02468bb69e 100644 --- a/frontends/web/src/components/layout/header.module.css +++ b/frontends/web/src/components/layout/header.module.css @@ -78,7 +78,7 @@ .title > * { margin: 0; - font-size: var(--header-default-font-size); + font-size: var(--size-header); font-weight: 400; line-height: 1; display: inline-flex; diff --git a/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css b/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css index 6b07b1a32d..2e81e69c03 100644 --- a/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css +++ b/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css @@ -21,7 +21,7 @@ } .animationAndTextContainer p { - font-size: var(--header-default-font-size); + font-size: var(--size-header); margin-top: var(--space-quarter); } @@ -101,7 +101,7 @@ } .titleContainer h3 { - font-size: var(--header-default-font-size); + font-size: var(--size-header); font-weight: 400; margin: 0 0 0 var(--space-eight); padding: 0 var(--space-quarter); diff --git a/frontends/web/src/routes/account/info/info.module.css b/frontends/web/src/routes/account/info/info.module.css index d02654e618..26b0e0b507 100644 --- a/frontends/web/src/routes/account/info/info.module.css +++ b/frontends/web/src/routes/account/info/info.module.css @@ -1,5 +1,5 @@ .title { - font-size: var(--header-default-font-size); + font-size: var(--size-header); font-weight: 400; } diff --git a/frontends/web/src/routes/account/receive/receive.module.css b/frontends/web/src/routes/account/receive/receive.module.css index 02ca6d1c72..e2578d1cdd 100644 --- a/frontends/web/src/routes/account/receive/receive.module.css +++ b/frontends/web/src/routes/account/receive/receive.module.css @@ -40,7 +40,7 @@ background: none; border: 0; color: var(--color-blue); - font-size: var(--size-button); + font-size: var(--size-default); line-height: 1; padding: 0; text-decoration: none; diff --git a/frontends/web/src/routes/account/send/components/confirm/confirm.module.css b/frontends/web/src/routes/account/send/components/confirm/confirm.module.css index 14ea981c77..3a47d76f98 100644 --- a/frontends/web/src/routes/account/send/components/confirm/confirm.module.css +++ b/frontends/web/src/routes/account/send/components/confirm/confirm.module.css @@ -64,6 +64,6 @@ } .valueOriginalLarge { - font-size: var(--header-default-font-size); + font-size: var(--size-header); font-weight: 500; } \ No newline at end of file diff --git a/frontends/web/src/routes/device/bitbox02/setup/checklist.module.css b/frontends/web/src/routes/device/bitbox02/setup/checklist.module.css index 14eafcb699..220d88ef5a 100644 --- a/frontends/web/src/routes/device/bitbox02/setup/checklist.module.css +++ b/frontends/web/src/routes/device/bitbox02/setup/checklist.module.css @@ -1,9 +1,3 @@ -/* TODO: ideally fontsize of those labels would just use the default from View component */ -.wizardCheckbox label { - font-size: var(--size-wizard-text) !important; - line-height: 1.4; -} - .wizardCheckbox label::before { top: 2px !important; } diff --git a/frontends/web/src/routes/device/bitbox02/setup/name.module.css b/frontends/web/src/routes/device/bitbox02/setup/name.module.css index 903a5c90b7..4b98850bc3 100644 --- a/frontends/web/src/routes/device/bitbox02/setup/name.module.css +++ b/frontends/web/src/routes/device/bitbox02/setup/name.module.css @@ -1,8 +1,3 @@ -/* TODO: ideally fontsize of those labels would just use the default from View component */ -.wizardLabel label { - font-size: var(--size-wizard-text) !important; -} - .inputError input, .inputError input:focus { border-color: var(--color-danger); @@ -11,7 +6,7 @@ .errorMessage { color: var(--color-danger); display: block; - font-size: var(--size-medium); + font-size: var(--size-default); padding-top: var(--space-quarter); } diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css index 46e07d42dc..175842019e 100644 --- a/frontends/web/src/style/variables.css +++ b/frontends/web/src/style/variables.css @@ -48,21 +48,14 @@ --color-error-border: rgba(227, 6, 19, .33); /* font sizes */ - --size-extra-large: 2.2rem; --size-large: 2rem; - --size-large-mobile: 1.4rem; + --size-header: 24px; --size-subheader: 18px; - --size-medium: var(--size-default); --size-default: 14px; --size-small: 12px; --size-xsmall: 11px; - --size-label: var(--size-small); - --size-button: var(--size-default); --size-title: 32px; - /* wizard */ - --size-wizard-text: 16px; - /* spacing */ --spacing-large: 2rem; --spacing-default: 1rem; @@ -94,7 +87,6 @@ /* header */ --header-height: 70px; - --header-default-font-size: 24px; /* content */ --content-width: 1080px; @@ -208,11 +200,9 @@ @media (max-width: 768px) { :root { - --header-default-font-size: 20px; + --size-header: 20px; --size-subheader: 16px; --size-title: 16px; - - --size-wizard-text: 14px; --size-default: 16px; } }