From 0449bfe5851cfd4265b927b0cfe598a81692d58b Mon Sep 17 00:00:00 2001 From: thisconnect Date: Fri, 24 Oct 2025 13:51:10 +0200 Subject: [PATCH 1/5] frontend: cleanup and remove unused css variables --- frontends/web/src/style/variables.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css index 46e07d42dc..22144cd166 100644 --- a/frontends/web/src/style/variables.css +++ b/frontends/web/src/style/variables.css @@ -48,7 +48,6 @@ --color-error-border: rgba(227, 6, 19, .33); /* font sizes */ - --size-extra-large: 2.2rem; --size-large: 2rem; --size-large-mobile: 1.4rem; --size-subheader: 18px; @@ -56,7 +55,6 @@ --size-default: 14px; --size-small: 12px; --size-xsmall: 11px; - --size-label: var(--size-small); --size-button: var(--size-default); --size-title: 32px; From 23095d13b1d11d0a922ee5b560bd2906764fc430 Mon Sep 17 00:00:00 2001 From: thisconnect Date: Fri, 24 Oct 2025 13:58:43 +0200 Subject: [PATCH 2/5] frontend: remove rarely used css variables --- frontends/web/src/routes/account/receive/receive.module.css | 2 +- frontends/web/src/routes/device/bitbox02/setup/name.module.css | 2 +- frontends/web/src/style/variables.css | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) 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/device/bitbox02/setup/name.module.css b/frontends/web/src/routes/device/bitbox02/setup/name.module.css index 903a5c90b7..6a8060fed6 100644 --- a/frontends/web/src/routes/device/bitbox02/setup/name.module.css +++ b/frontends/web/src/routes/device/bitbox02/setup/name.module.css @@ -11,7 +11,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 22144cd166..55218cea10 100644 --- a/frontends/web/src/style/variables.css +++ b/frontends/web/src/style/variables.css @@ -51,11 +51,9 @@ --size-large: 2rem; --size-large-mobile: 1.4rem; --size-subheader: 18px; - --size-medium: var(--size-default); --size-default: 14px; --size-small: 12px; --size-xsmall: 11px; - --size-button: var(--size-default); --size-title: 32px; /* wizard */ From cd93cc4d705b69eba572de2e04fcf4bbef8d251c Mon Sep 17 00:00:00 2001 From: thisconnect Date: Fri, 24 Oct 2025 14:08:57 +0200 Subject: [PATCH 3/5] frontend: rename css variable Renamed --size-header to be more consistent with other names. --- frontends/web/src/components/dialog/dialog.module.css | 2 +- frontends/web/src/components/guide/guide.module.css | 2 +- frontends/web/src/components/layout/header.module.css | 2 +- .../wallet-connect/incoming-signing-request.module.css | 4 ++-- frontends/web/src/routes/account/info/info.module.css | 2 +- .../routes/account/send/components/confirm/confirm.module.css | 2 +- frontends/web/src/style/variables.css | 4 ++-- 7 files changed, 9 insertions(+), 9 deletions(-) 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/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/style/variables.css b/frontends/web/src/style/variables.css index 55218cea10..64a6187858 100644 --- a/frontends/web/src/style/variables.css +++ b/frontends/web/src/style/variables.css @@ -50,6 +50,7 @@ /* font sizes */ --size-large: 2rem; --size-large-mobile: 1.4rem; + --size-header: 24px; --size-subheader: 18px; --size-default: 14px; --size-small: 12px; @@ -90,7 +91,6 @@ /* header */ --header-height: 70px; - --header-default-font-size: 24px; /* content */ --content-width: 1080px; @@ -204,7 +204,7 @@ @media (max-width: 768px) { :root { - --header-default-font-size: 20px; + --size-header: 20px; --size-subheader: 16px; --size-title: 16px; From d23c6a5e5369b10d10eab4d0af117b70b975efd3 Mon Sep 17 00:00:00 2001 From: thisconnect Date: Fri, 24 Oct 2025 14:18:19 +0200 Subject: [PATCH 4/5] frontend: remove css variable that was only used once --size-large-mobile was only used on mobile for the balance amount. Chagned to closest available value which is --size-header. This is not exactly the same as 1.4rem (22.4px) however 22.4px is not a font-size that is used anywhere else. With this change the account view now has same font-size for header as well as balance. --- frontends/web/src/components/balance/balance.module.css | 2 +- frontends/web/src/style/variables.css | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) 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/style/variables.css b/frontends/web/src/style/variables.css index 64a6187858..7e06feda85 100644 --- a/frontends/web/src/style/variables.css +++ b/frontends/web/src/style/variables.css @@ -49,7 +49,6 @@ /* font sizes */ --size-large: 2rem; - --size-large-mobile: 1.4rem; --size-header: 24px; --size-subheader: 18px; --size-default: 14px; From e9bc75cd730a0eae6cabd75aa1016a62e60a3efa Mon Sep 17 00:00:00 2001 From: thisconnect Date: Fri, 24 Oct 2025 14:51:34 +0200 Subject: [PATCH 5/5] frontend: deprecate --size-wizard-text variable Was only used during setup for the label of the name input field and the backup checklist for the checkboxes. In both views there is no reason to use another font-size, without it the text looks more consistent and label, input field and error message have the same font-size as in other palces. --- .../src/routes/device/bitbox02/setup/checklist.module.css | 6 ------ .../web/src/routes/device/bitbox02/setup/name.module.css | 5 ----- frontends/web/src/style/variables.css | 5 ----- 3 files changed, 16 deletions(-) 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 6a8060fed6..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); diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css index 7e06feda85..175842019e 100644 --- a/frontends/web/src/style/variables.css +++ b/frontends/web/src/style/variables.css @@ -56,9 +56,6 @@ --size-xsmall: 11px; --size-title: 32px; - /* wizard */ - --size-wizard-text: 16px; - /* spacing */ --spacing-large: 2rem; --spacing-default: 1rem; @@ -206,8 +203,6 @@ --size-header: 20px; --size-subheader: 16px; --size-title: 16px; - - --size-wizard-text: 14px; --size-default: 16px; } }