frontend: prepare for responsive font-size

thisconnect · thisconnect · commit 2e905ed2a6cd · 2024-06-10T14:23:56.000+02:00
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.
diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
@@ -69,8 +69,7 @@
 
 .content h2 {
     margin: 0px;
-    font-size: 1.1em;
-    line-height: 1.2em;
+    font-size: var(--size-subheader);
     font-weight: 400;
 }
 
@@ -99,6 +98,7 @@
     width: 16px;
     line-height: 1.2em;
     display: flex;
+    font-size: var(--size-subheader);
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
diff --git 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
@@ -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
@@ -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%;
@@ -34,19 +28,19 @@
   background-color: #fff;
 }
 
-.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 {
@@ -55,7 +49,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
@@ -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
@@ -36,7 +36,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/send/components/dialogs/message-wait-dialog.tsx b/frontends/web/src/routes/account/send/components/dialogs/message-wait-dialog.tsx
@@ -31,14 +31,14 @@ const IconAndMessage = ({ messageType }: TIconProps) => {
   case 'sent':
     return (
       <>
-        <Checked style={{ height: 18, marginRight: '1rem' }} />
+        <Checked style={{ height: 18, marginRight: '16px' }} />
         {t('send.success')}
       </>
     );
   case 'abort':
     return (
       <>
-        <Cancel alt="Abort" style={{ height: 18, marginRight: '1rem' }} />
+        <Cancel alt="Abort" style={{ height: 18, marginRight: '16px' }} />
         {t('send.abort')}
       </>
     );
diff --git 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
@@ -64,7 +64,7 @@
 }
 
 .totalValue {
-  font-size: 2rem;
+  font-size: 32px;
   display: flex;
   align-items: flex-end;
 }
@@ -73,8 +73,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 {
@@ -95,7 +95,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;
@@ -105,14 +105,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
@@ -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/buy/exchange.module.css b/frontends/web/src/routes/buy/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/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
@@ -36,7 +36,7 @@
 }
 
 .agreements {
-    margin-bottom: 1rem;
+    margin-bottom: 16px;
 }
 
 .emptyText {
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
@@ -37,9 +37,9 @@
     --color-danger: var(--color-error);
 
     /* 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;
@@ -53,9 +53,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;

Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,5 @@`
`4`	`4`	`line-height: 42px;`
`5`	`5`	`position: absolute;`
`6`	`6`	`right: 0;`
`7`		`- width: 2rem;`
	`7`	`+ width: 32px;`
`8`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`
`14`	`14`	`.successCheck {`
`15`	`15`	`background-color: var(--color-success);`
`16`		`- border: .5rem solid var(--color-success);`
	`16`	`+ border: 8px solid var(--color-success);`
`17`	`17`	`border-radius: 100px;`
`18`	`18`	`}`
`19`	`19`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@`
`36`	`36`	`clear: both;`
`37`	`37`	`display: flex;`
`38`	`38`	`justify-content: space-between;`
`39`		`- min-height: 3.5rem;`
	`39`	`+ min-height: 56px;`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.verifyButton {`
Original file line number	Diff line number	Diff line change
`@@ -193,7 +193,7 @@`
`193`	`193`	`}`
`194`	`194`
`195`	`195`	`.coinName img {`
`196`		`- left: -2rem;`
	`196`	`+ left: -32px;`
`197`	`197`	`position: absolute;`
`198`	`198`	`top: -3px;`
`199`	`199`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`
`2`	`2`	`.arrow img {`
`3`		`- margin-right: .25rem;`
	`3`	`+ margin-right: 4px;`
`4`	`4`	`vertical-align: text-bottom;`
`5`	`5`	`}`
`6`	`6`
`@@ -13,10 +13,10 @@`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.diffValue {`
`16`		`- font-size: 1.2rem;`
	`16`	`+ font-size: 19px;`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.diffUnit {`
`20`		`- font-size: 1rem;`
`21`		`- padding: 0 .25rem;`
	`20`	`+ font-size: 16px;`
	`21`	`+ padding: 0 4px;`
`22`	`22`	`}`