From b05e80c09c1d7b1e43b44caeed13c6839b95abdb Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 9 May 2024 11:37:13 +0200
Subject: [PATCH 1/2] frontend: prepare for responsive font-size

In order to change the CSS to change the codebase to use rem, using
'The 62.5% Font Size Trick' we need to first convert all existing
rem units back to px. This is so that we don't accidentally already
have rem values.

If the default base font size is 16px, 1rem equals 16px. Changing
back to pixel first makes it much easier to use the 62.5% trick
where 1rem = 10px.

This refactoring should not introduce any visual change and just
converted rem to px. I.e. 1.5rem is now 24px as 1rem currently
equals 16px.

Also simplified terms.module.css a bit as the title was defined
multiple times.
---
 .../web/src/components/guide/guide.module.css    |  6 +++---
 frontends/web/src/components/password.module.css |  2 +-
 .../pillbuttongroup/pillbuttongroup.module.css   |  2 +-
 .../web/src/components/terms/terms.module.css    | 16 +++++-----------
 .../web/src/routes/account/add/add.module.css    |  2 +-
 .../web/src/routes/account/info/info.module.css  |  2 +-
 .../account/summary/accountssummary.module.css   |  2 +-
 .../src/routes/account/summary/chart.module.css  | 14 +++++++-------
 .../account/summary/percentage-diff.module.css   |  8 ++++----
 .../web/src/routes/device/bitbox01/check.jsx     |  2 +-
 .../routes/device/components/backups.module.css  |  2 +-
 .../web/src/routes/exchange/exchange.module.css  |  2 +-
 frontends/web/src/style/variables.css            | 12 ++++++------
 13 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
index 5010aa97b1..2594a2a9bf 100644
--- a/frontends/web/src/components/guide/guide.module.css
+++ b/frontends/web/src/components/guide/guide.module.css
@@ -80,10 +80,9 @@
 }
 
 .content h2 {
-    font-size: 1.1em;
+    font-size: var(--size-subheader);
     font-weight: 400;
-    line-height: 1.2em;
-    margin: 0px;
+    margin: 0;
 }
 
 .guide p {
@@ -115,6 +114,7 @@
 .entryTitle .entryToggle {
     align-items: center;
     display: flex;
+    font-size: var(--size-subheader);
     flex-direction: row;
     font-weight: bold;
     justify-content: flex-start;
diff --git a/frontends/web/src/components/password.module.css b/frontends/web/src/components/password.module.css
index 313232864d..09fda96a40 100644
--- a/frontends/web/src/components/password.module.css
+++ b/frontends/web/src/components/password.module.css
@@ -4,5 +4,5 @@
     line-height: 42px;
     position: absolute;
     right: 0;
-    width: 2rem;
+    width: 32px;
 }
diff --git a/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
index f0c72a8581..8c92b25549 100644
--- a/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
+++ b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
@@ -9,7 +9,7 @@
 	appearance: none;
 	background: var(--background-secondary);
 	border: 2px solid var(--background-secondary);
-	border-radius: 2rem;
+	border-radius: 32px;
 	color: var(--color-default);
 	font-size: var(--size-default);
 	line-height: 1.75;
diff --git a/frontends/web/src/components/terms/terms.module.css b/frontends/web/src/components/terms/terms.module.css
index 8ca16394e5..c31ecf7580 100644
--- a/frontends/web/src/components/terms/terms.module.css
+++ b/frontends/web/src/components/terms/terms.module.css
@@ -12,12 +12,6 @@
   width: 100%;
 }
 
-.title {
-  font-size: 2rem;
-  font-weight: 400;
-  text-align: center;
-}
-
 .disclaimer {
   background-color: var(--background-secondary);
   flex-basis: 100%;
@@ -30,19 +24,19 @@
   padding: var(--space-quarter) 1em 1em 1em;
 }
 
-.disclaimer .title {
-  font-size: .875rem;
+.title {
+  font-size: 14px;
   font-weight: bold;
   text-align: left;
 }
 
 .disclaimer p {
-  font-size: .875rem;
+  font-size: 14px;
   line-height: 1.5;
 }
 
 .disclaimer p + .title {
-  margin: 2.5rem 0 0 0;
+  margin: 40px 0 0 0;
 }
 
 .table {
@@ -51,7 +45,7 @@
 
 .table table {
   border-collapse: collapse;
-  font-size: .875rem;
+  font-size: 14px;
   text-align: left;
 }
 
diff --git a/frontends/web/src/routes/account/add/add.module.css b/frontends/web/src/routes/account/add/add.module.css
index 070334489c..d43d2f0569 100644
--- a/frontends/web/src/routes/account/add/add.module.css
+++ b/frontends/web/src/routes/account/add/add.module.css
@@ -13,7 +13,7 @@
 
 .successCheck {
     background-color: var(--color-success);
-    border: .5rem solid var(--color-success);
+    border: 8px solid var(--color-success);
     border-radius: 100px;
 }
 
diff --git a/frontends/web/src/routes/account/info/info.module.css b/frontends/web/src/routes/account/info/info.module.css
index e6b5570f2c..b0286b0b95 100644
--- a/frontends/web/src/routes/account/info/info.module.css
+++ b/frontends/web/src/routes/account/info/info.module.css
@@ -33,7 +33,7 @@
     clear: both;
     display: flex;
     justify-content: space-between;
-    min-height: 3.5rem;
+    min-height: 56px;
 }
 
 .verifyButton {
diff --git a/frontends/web/src/routes/account/summary/accountssummary.module.css b/frontends/web/src/routes/account/summary/accountssummary.module.css
index d65da56922..4a01d318d0 100644
--- a/frontends/web/src/routes/account/summary/accountssummary.module.css
+++ b/frontends/web/src/routes/account/summary/accountssummary.module.css
@@ -193,7 +193,7 @@
     }
 
     .coinName img {
-        left: -2rem;
+        left: -32px;
         position: absolute;
         top: -3px;
     }
diff --git a/frontends/web/src/routes/account/summary/chart.module.css b/frontends/web/src/routes/account/summary/chart.module.css
index 5ee251b2be..cee0637e48 100644
--- a/frontends/web/src/routes/account/summary/chart.module.css
+++ b/frontends/web/src/routes/account/summary/chart.module.css
@@ -82,7 +82,7 @@
 }
 
 .totalValue {
-  font-size: 2rem;
+  font-size: 32px;
   display: flex;
   align-items: flex-end;
 }
@@ -91,8 +91,8 @@
   color: var(--color-secondary);
   display: inline-block;
   margin-bottom: 3px;
-  font-size: 1.4rem;
-  padding: 0 .25rem;
+  font-size: 22px;
+  padding: 0 4px;
 }
 
 .chartCanvas {
@@ -113,7 +113,7 @@
   font-size: var(--size-small);
   margin-top: -25px;
   min-width: 140px;
-  padding: .75rem .6rem;
+  padding: 12px 10px;
   pointer-events: none;
   position: absolute;
   text-align: center;
@@ -123,14 +123,14 @@
 
 .toolTipValue {
   font-weight: normal;
-  font-size: 1rem;
-  margin: 0 0 .25rem 0;
+  font-size: 16px;
+  margin: 0 0 4px 0;
 }
 
 .toolTipUnit {
   color: var(--color-secondary);
   font-size: var(--size-small);
-  padding: 0 .125rem;
+  padding: 0 2px;
 }
 
 .toolTipTime {
diff --git a/frontends/web/src/routes/account/summary/percentage-diff.module.css b/frontends/web/src/routes/account/summary/percentage-diff.module.css
index fb032d8493..d4380296b2 100644
--- a/frontends/web/src/routes/account/summary/percentage-diff.module.css
+++ b/frontends/web/src/routes/account/summary/percentage-diff.module.css
@@ -1,6 +1,6 @@
 
 .arrow img {
-  margin-right: .25rem;
+  margin-right: 4px;
   vertical-align: text-bottom;
 }
 
@@ -13,10 +13,10 @@
 }
 
 .diffValue {
-  font-size: 1.2rem;
+  font-size: 19px;
 }
 
 .diffUnit {
-  font-size: 1rem;
-  padding: 0 .25rem;
+  font-size: 16px;
+  padding: 0 4px;
 }
diff --git a/frontends/web/src/routes/device/bitbox01/check.jsx b/frontends/web/src/routes/device/bitbox01/check.jsx
index f34a14270d..c829018178 100644
--- a/frontends/web/src/routes/device/bitbox01/check.jsx
+++ b/frontends/web/src/routes/device/bitbox01/check.jsx
@@ -99,7 +99,7 @@ class Check extends Component {
               onClose={this.abort}>
               { message ? (
                 <div>
-                  <p style={{ minHeight: '3rem' }}>{message}</p>
+                  <p style={{ minHeight: '48px' }}>{message}</p>
                   <div className={style.actions}>
                     <Button secondary onClick={this.abort}>
                       {t('button.back')}
diff --git a/frontends/web/src/routes/device/components/backups.module.css b/frontends/web/src/routes/device/components/backups.module.css
index 32544c62d8..26f4df2cf1 100644
--- a/frontends/web/src/routes/device/components/backups.module.css
+++ b/frontends/web/src/routes/device/components/backups.module.css
@@ -36,7 +36,7 @@
 }
 
 .agreements {
-    margin-bottom: 1rem;
+    margin-bottom: 16px;
 }
 
 .emptyText {
diff --git a/frontends/web/src/routes/exchange/exchange.module.css b/frontends/web/src/routes/exchange/exchange.module.css
index 22d50f65f5..223f47060e 100644
--- a/frontends/web/src/routes/exchange/exchange.module.css
+++ b/frontends/web/src/routes/exchange/exchange.module.css
@@ -80,7 +80,7 @@
 }
 
 .title {
-    font-size: 2rem;
+    font-size: 32px;
     font-weight: 400;
     margin-top: 0;
     margin-bottom: var(--space-default);
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 46e07d42dc..ed9af6a6e1 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -48,9 +48,9 @@
     --color-error-border: rgba(227, 6, 19, .33);
 
     /* font sizes */
-    --size-extra-large: 2.2rem;
-    --size-large: 2rem;
-    --size-large-mobile: 1.4rem;
+    --size-extra-large: 35px;
+    --size-large: 32px;
+    --size-large-mobile: 22px;
     --size-subheader: 18px;
     --size-medium: var(--size-default);
     --size-default: 14px;
@@ -64,9 +64,9 @@
     --size-wizard-text: 16px;
 
     /* spacing */
-    --spacing-large: 2rem;
-    --spacing-default: 1rem;
-    --spacing-half: .5rem;
+    --spacing-large: 32px;
+    --spacing-default: 16px;
+    --spacing-half: 8px;
 
     --space-large: 64px;
     --space-default: 32px;

From 1167353bc09e495466df480fc1a4dd889a936134 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Tue, 26 Aug 2025 18:08:03 +0200
Subject: [PATCH 2/2] wip

---
 frontends/web/src/components/guide/guide.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
index 2594a2a9bf..dfcc6248d2 100644
--- a/frontends/web/src/components/guide/guide.module.css
+++ b/frontends/web/src/components/guide/guide.module.css
@@ -198,6 +198,6 @@
 
 @media screen and (max-width: 640px) {
     .guide h2 {
-        font-size: 1.05em;
+        font-size: var(--size-default);
     }
 }