From d654980acea9db0e82bc2a14041fcf5f2a198e89 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 9 May 2024 11:06:05 +0200
Subject: [PATCH 01/10] frontend: remove unused css files

Seems as these files are not imported anywhere.
---
 frontends/web/src/routes/bitsurance/account.module.css | 5 -----
 frontends/web/src/routes/buy/info.module.css           | 5 -----
 2 files changed, 10 deletions(-)
 delete mode 100644 frontends/web/src/routes/bitsurance/account.module.css
 delete mode 100644 frontends/web/src/routes/buy/info.module.css

diff --git a/frontends/web/src/routes/bitsurance/account.module.css b/frontends/web/src/routes/bitsurance/account.module.css
deleted file mode 100644
index 3af60ceb6b..0000000000
--- a/frontends/web/src/routes/bitsurance/account.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.title {
-  font-size: 2rem;
-  font-weight: 400;
-  text-align: center;
-}
diff --git a/frontends/web/src/routes/buy/info.module.css b/frontends/web/src/routes/buy/info.module.css
deleted file mode 100644
index 3af60ceb6b..0000000000
--- a/frontends/web/src/routes/buy/info.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.title {
-  font-size: 2rem;
-  font-weight: 400;
-  text-align: center;
-}

From c6aeea8967bb9586a97e17d289ecc28ca113a38e Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 9 May 2024 11:16:56 +0200
Subject: [PATCH 02/10] frontend: cleanup imports

Small cleanup:
- import from same utils module
- group imports from api
- import styles last
---
 frontends/web/src/routes/account/account.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontends/web/src/routes/account/account.tsx b/frontends/web/src/routes/account/account.tsx
index 9a0f411780..f5511de51a 100644
--- a/frontends/web/src/routes/account/account.tsx
+++ b/frontends/web/src/routes/account/account.tsx
@@ -23,6 +23,7 @@ import { statusChanged, syncAddressesCount, syncdone } from '../../api/accountsy
 import { bitsuranceLookup } from '../../api/bitsurance';
 import { TDevices } from '../../api/devices';
 import { getExchangeBuySupported, SupportedExchanges } from '../../api/exchanges';
+import { useLoad } from '../../hooks/api';
 import { useSDCard } from '../../hooks/sdcard';
 import { unsubscribe } from '../../utils/subscriptions';
 import { alertUser } from '../../components/alert/Alert';
@@ -33,20 +34,18 @@ import { Header } from '../../components/layout';
 import { Spinner } from '../../components/spinner/Spinner';
 import { Status } from '../../components/status/status';
 import { Transactions } from '../../components/transactions/transactions';
-import { useLoad } from '../../hooks/api';
 import { HideAmountsButton } from '../../components/hideamountsbutton/hideamountsbutton';
-import style from './account.module.css';
 import { ActionButtons } from './actionButtons';
 import { Insured } from './components/insuredtag';
 import { AccountGuide } from './guide';
 import { BuyReceiveCTA } from './info/buyReceiveCTA';
-import { isBitcoinBased } from './utils';
-import { getScriptName } from './utils';
+import { getScriptName, isBitcoinBased } from './utils';
 import { MultilineMarkup } from '../../utils/markup';
 import { Dialog } from '../../components/dialog/dialog';
 import { A } from '../../components/anchor/anchor';
 import { getConfig, setConfig } from '../../utils/config';
 import { i18n } from '../../i18n/i18n';
+import style from './account.module.css';
 
 type Props = {
   accounts: accountApi.IAccount[];

From f3420e7c5a56eaf78582c9cda615f8226d87b48a Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 9 May 2024 11:37:13 +0200
Subject: [PATCH 03/10] 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.
---
 frontends/web/src/components/password.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 +-
 .../components/dialogs/message-wait-dialog.tsx   |  4 ++--
 .../account/summary/accountssummary.module.css   |  2 +-
 .../src/routes/account/summary/chart.module.css  | 16 ++++++++--------
 .../account/summary/percentage-diff.module.css   |  8 ++++----
 frontends/web/src/routes/buy/exchange.module.css |  2 +-
 .../web/src/routes/device/bitbox01/check.jsx     |  2 +-
 .../routes/device/components/backups.module.css  |  2 +-
 frontends/web/src/style/variables.css            | 12 ++++++------
 12 files changed, 32 insertions(+), 38 deletions(-)

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/terms/terms.module.css b/frontends/web/src/components/terms/terms.module.css
index 262e260e65..e72bbe7998 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%;
@@ -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
index 36a29ff564..7f432eac6c 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 f6981d2b2e..6b7419f542 100644
--- 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
index 132d6b6340..cddb08db5a 100644
--- 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
index 167bf659e9..75ee00f466 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 5616af273f..456afd33b4 100644
--- a/frontends/web/src/routes/account/summary/chart.module.css
+++ b/frontends/web/src/routes/account/summary/chart.module.css
@@ -72,7 +72,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;
@@ -117,7 +117,7 @@
 
 
 .totalValue {
-  font-size: 2rem;
+  font-size: 32px;
   display: flex;
   align-items: flex-end;
 }
@@ -126,8 +126,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 {
@@ -149,7 +149,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;
@@ -159,14 +159,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/buy/exchange.module.css b/frontends/web/src/routes/buy/exchange.module.css
index 9939e128d5..e305ccfa95 100644
--- a/frontends/web/src/routes/buy/exchange.module.css
+++ b/frontends/web/src/routes/buy/exchange.module.css
@@ -79,7 +79,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
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/style/variables.css b/frontends/web/src/style/variables.css
index 816a411b0b..af46d05d4c 100644
--- 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;

From a886ad3364b2956bc9fc72d2160b8369e7a14890 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Fri, 3 May 2024 10:26:05 +0200
Subject: [PATCH 04/10] only build lint and android for testin

---
 .github/workflows/ci.yml | 52 ----------------------------------------
 1 file changed, 52 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 50ef2e80d1..79095834de 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -59,55 +59,3 @@ jobs:
         with:
           path: frontends/android/BitBoxApp/app/build/outputs/apk/debug/app-debug.apk
           name: BitBoxApp-android-${{github.sha}}.apk
-  qt-linux:
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Clone the repo
-        uses: actions/checkout@v2
-        with:
-          submodules: recursive
-      - name: Build Qt-Linux
-        run: ./scripts/github-ci.sh qt-linux
-        env:
-          OS_NAME: linux
-      - name: Upload AppImage
-        uses: actions/upload-artifact@v2
-        with:
-          path: frontends/qt/build/linux/BitBoxApp-*.AppImage
-          name: BitBoxApp-linux-${{github.sha}}.AppImage
-      - name: Upload deb
-        uses: actions/upload-artifact@v2
-        with:
-          path: frontends/qt/build/linux/bitbox_*.deb
-          name: BitBoxApp-linux-${{github.sha}}.deb
-      - name: Upload rpm
-        uses: actions/upload-artifact@v2
-        with:
-          path: frontends/qt/build/linux/bitbox-*.rpm
-          name: BitBoxApp-linux-${{github.sha}}.rpm
-  macos:
-    runs-on: macos-12
-    steps:
-      - name: Clone the repo
-        uses: actions/checkout@v2
-        with:
-          submodules: recursive
-      - name: Install Go
-        uses: actions/setup-go@v2
-        with:
-          go-version: 1.20.x
-      - name: Build macOS app
-        run: >
-          ./scripts/github-ci.sh qt-osx;
-        env:
-          OS_NAME: osx
-      - name: Archive app
-        run: >
-          pushd ~/go/src/github.com/digitalbitbox/bitbox-wallet-app/frontends/qt/build/osx;
-          ditto -c -k --keepParent BitBox.app ${{github.workspace}}/BitBoxApp-macos.zip;
-          popd;
-      - name: Upload app
-        uses: actions/upload-artifact@v2
-        with:
-          path: BitBoxApp-macos.zip
-          name: BitBoxApp-macos-${{github.sha}}.zip

From ee0c9987ec5f55df150e56159cd1cff13062e2b1 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Sun, 5 May 2024 11:31:36 +0200
Subject: [PATCH 05/10] frontend: andoird font size zoom can break the layout

Increasing the font size setting under 'Display size and text' on
Android can break the layout in the WebView. There are 2 relevant
settings: 'Font size' and 'Display size'.

It appears that only the text is increased leaving the elements as
if the font size was normal. Buttons look broken with text hanging
out and transaction history is unreadable with overlapping text.

This change seems to have no impact and was for testing purpose.
---
 frontends/web/src/style/base.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
index 861413a490..c1d08605af 100644
--- a/frontends/web/src/style/base.css
+++ b/frontends/web/src/style/base.css
@@ -1,3 +1,7 @@
+html {
+    text-size-adjust: none;
+}
+
 html,
 body {
     background-color: var(--background);

From 335955db38e37afa64297414b133138de7daced1 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Sun, 5 May 2024 12:24:06 +0200
Subject: [PATCH 06/10] frontend: trying text-size-adjust 100%

Last commit setting text-size-adjust to none seemed to have no
impact on the breaking layout when font size is increased on in
the os.

Testing text-size-adjust 100%
---
 frontends/web/src/style/base.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
index c1d08605af..8745972720 100644
--- a/frontends/web/src/style/base.css
+++ b/frontends/web/src/style/base.css
@@ -1,5 +1,5 @@
 html {
-    text-size-adjust: none;
+    text-size-adjust: 100%;
 }
 
 html,

From 5aeeb8b7b997f9ec9775a190c2a0474681a07a1c Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Fri, 3 May 2024 09:07:24 +0200
Subject: [PATCH 07/10] frontend: trying responsive font size

This is a test to see if we can use responsive font size. This also
sets the base font size so that 1rem is 10px (unless text zoom).

With this technique elements can have responive dimension so that
sizes using rem are also zoomed if the text font size is bigger.
---
 .../src/components/forms/button.module.css    |  2 +-
 .../web/src/components/guide/guide.module.css |  2 +-
 .../keystoreconnectprompt.module.css          |  2 +-
 .../src/components/spinner/ascii.module.css   |  2 +-
 .../incoming-signing-request.module.css       |  6 +-
 .../account/add/components/steps.module.css   |  2 +-
 .../components/header/header.module.css       |  4 +-
 .../session-card/session-card.module.css      |  2 +-
 .../walletconnect/dashboard.module.css        |  8 +--
 .../buy/components/countryselect.module.css   |  2 +-
 .../settings/manage-accounts.module.css       |  2 +-
 frontends/web/src/style/base.css              | 13 ++--
 frontends/web/src/style/variables.css         | 64 +++++++++----------
 13 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/frontends/web/src/components/forms/button.module.css b/frontends/web/src/components/forms/button.module.css
index d467cbdc51..4311824f87 100644
--- a/frontends/web/src/components/forms/button.module.css
+++ b/frontends/web/src/components/forms/button.module.css
@@ -13,7 +13,7 @@
     font-weight: 400;
     justify-content: center;
     min-width: 100px;
-    height: 50px;
+    height: 5rem;
     outline: none;
     padding: 0 var(--space-default);
     position: relative;
diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
index 4c15b8f38f..ffcb507b3f 100644
--- a/frontends/web/src/components/guide/guide.module.css
+++ b/frontends/web/src/components/guide/guide.module.css
@@ -53,7 +53,7 @@
 
 .header a {
     cursor: pointer;
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .content {
diff --git a/frontends/web/src/components/keystoreconnectprompt.module.css b/frontends/web/src/components/keystoreconnectprompt.module.css
index f2442ab714..e1ddeccb06 100644
--- a/frontends/web/src/components/keystoreconnectprompt.module.css
+++ b/frontends/web/src/components/keystoreconnectprompt.module.css
@@ -33,7 +33,7 @@
 }
 
 .text {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 @media (max-width: 768px) {
diff --git a/frontends/web/src/components/spinner/ascii.module.css b/frontends/web/src/components/spinner/ascii.module.css
index 3d5b24310d..f3fb26d7d1 100644
--- a/frontends/web/src/components/spinner/ascii.module.css
+++ b/frontends/web/src/components/spinner/ascii.module.css
@@ -13,7 +13,7 @@
   animation: changeContent .8s linear infinite;
   display: block;
   content: "⠋";
-  font-size: 14px;
+  font-size: 1.4rem;
   margin-left: 3px;
 }
 
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..dcf56f33e0 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
@@ -1,5 +1,5 @@
 .accountName {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0 var(--space-half) 0 0;
 }
 
@@ -9,7 +9,7 @@
 
 .address {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 
@@ -55,7 +55,7 @@
 }
 
 .itemText {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 
diff --git a/frontends/web/src/routes/account/add/components/steps.module.css b/frontends/web/src/routes/account/add/components/steps.module.css
index e77d2b93ea..35f5aa0542 100644
--- a/frontends/web/src/routes/account/add/components/steps.module.css
+++ b/frontends/web/src/routes/account/add/components/steps.module.css
@@ -48,7 +48,7 @@
     content: "";
     display: inline-block;
     flex-shrink: 0;
-    font-size: 14px;
+    font-size: 1.4rem;
     height: var(--icon-size);
     line-height: var(--icon-size);
     position: relative;
diff --git a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
index 9571b5834a..1c741f2144 100644
--- a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
+++ b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
@@ -26,11 +26,11 @@
 }
 
 .accountName {
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .receiveAddress {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 @media (max-width: 768px) {
diff --git a/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css b/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css
index 3bb896e223..0ebec549f8 100644
--- a/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css
+++ b/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css
@@ -8,7 +8,7 @@
 
 .container p {
     color: var(--color-default);
-    font-size: 16px;
+    font-size: 1.6rem;
     line-height: 1.9;
     margin-bottom: 0;
 }
diff --git a/frontends/web/src/routes/account/walletconnect/dashboard.module.css b/frontends/web/src/routes/account/walletconnect/dashboard.module.css
index 55ec3937e6..9ae9bbe09e 100644
--- a/frontends/web/src/routes/account/walletconnect/dashboard.module.css
+++ b/frontends/web/src/routes/account/walletconnect/dashboard.module.css
@@ -16,12 +16,12 @@
 .headerContainer p.receiveAddress { 
     color: var(--color-secondary);
     margin-top: var(--space-quarter);
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 .noConnectedSessions {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-large);
     text-align: center;
@@ -41,7 +41,7 @@
 
 .allSessionsHeading {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-half);
 }
@@ -54,7 +54,7 @@
     }
 
     .headerContainer p {
-        font-size: 16px;
+        font-size: 1.6rem;
     }
     
     .headerContainer p.receiveAddress,
diff --git a/frontends/web/src/routes/buy/components/countryselect.module.css b/frontends/web/src/routes/buy/components/countryselect.module.css
index 1e2ebc4009..b5b757c45c 100644
--- a/frontends/web/src/routes/buy/components/countryselect.module.css
+++ b/frontends/web/src/routes/buy/components/countryselect.module.css
@@ -8,7 +8,7 @@
 }
 
 .flag {
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .globe {
diff --git a/frontends/web/src/routes/settings/manage-accounts.module.css b/frontends/web/src/routes/settings/manage-accounts.module.css
index 7c0005a5df..4297213d8c 100644
--- a/frontends/web/src/routes/settings/manage-accounts.module.css
+++ b/frontends/web/src/routes/settings/manage-accounts.module.css
@@ -21,7 +21,7 @@
 }
 
 .walletTitle {
-    font-size: 20px;
+    font-size: 2rem;
     font-weight: 400;
     margin: 0 0 var(--space-quarter) 0;
 }
diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
index 8745972720..af5edb57b7 100644
--- a/frontends/web/src/style/base.css
+++ b/frontends/web/src/style/base.css
@@ -1,7 +1,3 @@
-html {
-    text-size-adjust: 100%;
-}
-
 html,
 body {
     background-color: var(--background);
@@ -19,6 +15,15 @@ body {
 	  -webkit-app-region: drag;
 }
 
+html {
+    font-size: 62.5%;
+    text-size-adjust: 100%;
+}
+
+body {
+    font-size: 1.6rem;
+}
+
 /*
 ::selection:not(textarea):not(input) {
     background-color: transparent;
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index af46d05d4c..978ff60928 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -37,53 +37,53 @@
     --color-danger: var(--color-error);
 
     /* font sizes */
-    --size-extra-large: 35px;
-    --size-large: 32px;
-    --size-large-mobile: 22px;
-    --size-subheader: 18px;
+    --size-extra-large: 3.5rem;
+    --size-large: 3.2rem;
+    --size-large-mobile: 2.2rem;
+    --size-subheader: 1.8rem;
     --size-medium: var(--size-default);
-    --size-default: 14px;
-    --size-small: 12px;
-    --size-xsmall: 11px;
+    --size-default: 1.4rem;
+    --size-small: 1.2rem;
+    --size-xsmall: 1.1rem;
     --size-label: var(--size-small);
     --size-button: var(--size-default);
-    --size-title: 32px;
+    --size-title: 3.2rem;
 
     /* wizard */
-    --size-wizard-text: 16px;
+    --size-wizard-text: 1.6rem;
 
     /* spacing */
     --spacing-large: 32px;
     --spacing-default: 16px;
     --spacing-half: 8px;
 
-    --space-large: 64px;
-    --space-default: 32px;
-    --space-half: 16px;
-    --space-quarter: 8px;
-    --space-eight: 4px;
+    --space-large: 6.4rem;
+    --space-default: 3.2rem;
+    --space-half: 1.6rem;
+    --space-quarter: .8rem;
+    --space-eight: .4rem;
 
-    --item-height-xsmall: 24px;
-    --item-height-small: 36px;
-    --item-height: 52px;
-    --item-height-large: 72px;
-    --item-height-xlarge: 84px;
+    --item-height-xsmall: 2.4rem;
+    --item-height-small: 3.6rem;
+    --item-height: 5.2rem;
+    --item-height-large: 7.2rem;
+    --item-height-xlarge: 8.4rem;
 
     /* typography */
     --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Roboto", "Oxygen", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 
     /* sidebar */
     --sidebar-width-large: 250px;
-    --sidebar-margin: 32px;
-    --sidebar-item-height: 52px;
-    --sidebar-icon-margin: 14px;
-    --sidebar-icon-size: 24px;
-    --sidebar-header-size: 12px;
-    --sidebar-header-line-height: 16px;
+    --sidebar-margin: 3.2rem;
+    --sidebar-item-height: 5.2rem;
+    --sidebar-icon-margin: 1.4rem;
+    --sidebar-icon-size: 2.4rem;
+    --sidebar-header-size: 1.2rem;
+    --sidebar-header-line-height: 1.6rem;
 
     /* header */
-    --header-height: 70px;
-    --header-default-font-size: 24px;
+    --header-height: 7rem;
+    --header-default-font-size: 2.4rem;
 
     /* content */
     --content-width: 1080px;
@@ -182,16 +182,16 @@
 
 @media (max-width: 1199px) {
     :root {
-        --size-title: 18px;
+        --size-title: 1.8rem;
     }
 }
 
 @media (max-width: 768px) {
     :root {
-        --header-default-font-size: 20px;
-        --size-subheader: 16px;
-        --size-title: 16px;
+        --header-default-font-size: 2rem;
+        --size-subheader: 1.6rem;
+        --size-title: 1.6rem;
 
-        --size-wizard-text: 14px;
+        --size-wizard-text: 1.4rem;
     }
 }

From df796db0939a6868777a355ce325be63ff4c27c9 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Sun, 5 May 2024 20:08:52 +0200
Subject: [PATCH 08/10] frontend/android: capture textzoom and set custom base
 font size

Android textZoom only increases font-size without incresing
surrounding elements which can break the layout and cause
overlapping text and elements.

This commit reads the current textzoom, sets a custom CSS base
font size (calculated from textzoom) and resets textzoom to 100%.

The custom CSS is using 'The 62.5% Font Size Trick' with which
1rem equals 10px.

With this it is possible to change elment dimensions from px to
rem. These elements will become responsive and also grow if
Android settings for font size is increased.

To simulate this in webdev and optimize the layout for increased
fontsize a base font size of 125% has to be set.
---
 .../shiftcrypto/bitboxapp/MainActivity.java   | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java b/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
index 5e222c4fad..796e428356 100644
--- a/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
+++ b/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
@@ -77,6 +77,8 @@ public class MainActivity extends AppCompatActivity {
 
     private String location = "";
 
+    private int currentZoom;
+
     // This is for the file picker dialog invoked by file upload forms in the WebView.
     // Used by e.g. MoonPay's KYC forms.
     private ValueCallback<Uri[]> filePathCallback;
@@ -221,12 +223,31 @@ public void run() {
         // For MoonPay WebRTC camera access.
         vw.getSettings().setMediaPlaybackRequiresUserGesture(false);
 
+        // Retrieve the current text zoom setting to adjust the base font size in the WebView.
+        currentZoom = vw.getSettings().getTextZoom();
+
         vw.setWebViewClient(new WebViewClient() {
             @Override
             public void onPageFinished(WebView view, String url) {
                 // The url is not correctly updated when navigating to a new page. This allows to
                 // know the current location and to block external requests on that base.
                 view.evaluateJavascript("window.location.pathname", path -> location = path);
+
+                // Calculate the base font size for html as a percentage.
+                // This percentage dynamically adjusts to ensure 1rem = 10px, scaled according to the current zoom level.
+                double baseFontSizePercentage = 62.5 * (currentZoom / 100.0);
+
+                // The default body font size in rem, which is independent of the zoom level.
+                // This size does not scale dynamically with zoom adjustments and is fixed at 1.6rem.
+                double defaultFontSizeREM = 1.6;
+
+                // Reset the WebView's text zoom to 100% to ensure that the scaling is controlled via CSS
+                // and not by the WebView's default scaling behavior.
+                view.getSettings().setTextZoom(100);
+
+                // Execute the CSS setup in the WebView.
+                view.evaluateJavascript(cssSetup, null);
+
             }
             @Override
             public WebResourceResponse shouldInterceptRequest(final WebView view, WebResourceRequest request) {

From b1b36ce6f66b8a7f9ee8b5418cfc0c7ca4163436 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Sun, 5 May 2024 20:22:31 +0200
Subject: [PATCH 09/10] frontend: debug and display calculated base font and
 screen width

For debugging purpose this will render the calculated increased
base font size and the screen width.

The screen width can vary depending on Android display size setting.
---
 .../main/java/ch/shiftcrypto/bitboxapp/MainActivity.java    | 6 ++++++
 frontends/web/src/components/layout/header.tsx              | 5 +++++
 2 files changed, 11 insertions(+)

diff --git a/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java b/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
index 796e428356..4669d6ce7f 100644
--- a/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
+++ b/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
@@ -241,6 +241,12 @@ public void onPageFinished(WebView view, String url) {
                 // This size does not scale dynamically with zoom adjustments and is fixed at 1.6rem.
                 double defaultFontSizeREM = 1.6;
 
+                // Set the base font-size on the html element dynamically and apply a fixed font size to the body.
+                // Also, set a custom data attribute 'data-test' to the calculated base font size percentage for potential debugging.
+                String cssSetup = "document.documentElement.style.fontSize = '" + baseFontSizePercentage + "%';" +
+                                    "document.body.style.fontSize = '" + defaultFontSizeREM + "rem';" +
+                                    "document.body.setAttribute('data-test', '" + baseFontSizePercentage + "%');";
+
                 // Reset the WebView's text zoom to 100% to ensure that the scaling is controlled via CSS
                 // and not by the WebView's default scaling behavior.
                 view.getSettings().setTextZoom(100);
diff --git a/frontends/web/src/components/layout/header.tsx b/frontends/web/src/components/layout/header.tsx
index e3ebb7a186..60013feb16 100644
--- a/frontends/web/src/components/layout/header.tsx
+++ b/frontends/web/src/components/layout/header.tsx
@@ -46,6 +46,8 @@ const Header = ({
     }
     return false;
   };
+  const test = document.body.getAttribute('data-test');
+  const width = window.screen.width;
 
   return (
     <div className={[style.container, sidebarStatus ? style[sidebarStatus] : ''].join(' ')}>
@@ -65,6 +67,9 @@ const Header = ({
             >
               <GuideActive />
               {t('guide.toggle.open')}
+              <sup>
+                ({test} {width}px)
+              </sup>
             </Button>
           )}
         </div>

From 6d90bf6c6a70db26fb6c61f0cd09365b5e2bc719 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 9 May 2024 12:24:39 +0200
Subject: [PATCH 10/10] frontend: style sidebar to be responsive

Sidebar does not need to grow, as it works well if the font size
is renderd at 200%. Changing back to px.
---
 frontends/web/src/components/sidebar/sidebar.module.css | 8 ++++----
 frontends/web/src/style/layout.css                      | 1 +
 frontends/web/src/style/variables.css                   | 8 ++++----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontends/web/src/components/sidebar/sidebar.module.css b/frontends/web/src/components/sidebar/sidebar.module.css
index 05a8dd4c96..030e7c3211 100644
--- a/frontends/web/src/components/sidebar/sidebar.module.css
+++ b/frontends/web/src/components/sidebar/sidebar.module.css
@@ -113,9 +113,8 @@
     cursor: default;
     display: flex;
     flex-direction: row;
-    height: var(--sidebar-item-height);
+    min-height: var(--sidebar-item-height);
     justify-content: center;
-    overflow: hidden;
     position: relative;
     text-decoration: none;
 }
@@ -166,6 +165,7 @@ a.sidebarActive :global(.stacked) img:last-child,
 .single img {
     opacity: .6;
     transition: opacity 0.2s ease;
+    vertical-align: top;
 }
 
 a.sidebarActive .single img,
@@ -179,10 +179,10 @@ a.sidebarActive .single img,
     line-height: 1;
     flex: 1;
     padding-top: 0;
-    padding-right: var(--space-default);
+    padding-right: 16px;
     font-size: var(--size-default);
     font-weight: 400;
-    transition: all 0.2s ease;
+    /* transition: all 0.2s ease; /* TODO: why all, what is this even supposed to be transitioning */
     word-break: break-word;
 }
 
diff --git a/frontends/web/src/style/layout.css b/frontends/web/src/style/layout.css
index b2558881b1..1fa1a1134f 100644
--- a/frontends/web/src/style/layout.css
+++ b/frontends/web/src/style/layout.css
@@ -358,6 +358,7 @@
 
 .stacked img {
     transition: opacity 0.2s ease;
+    vertical-align: top;
 }
 
 .stacked img:last-child {
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 978ff60928..875ae5d553 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -74,10 +74,10 @@
 
     /* sidebar */
     --sidebar-width-large: 250px;
-    --sidebar-margin: 3.2rem;
-    --sidebar-item-height: 5.2rem;
-    --sidebar-icon-margin: 1.4rem;
-    --sidebar-icon-size: 2.4rem;
+    --sidebar-margin: 32px;
+    --sidebar-item-height: 52px;
+    --sidebar-icon-margin: 14px;
+    --sidebar-icon-size: 24px;
     --sidebar-header-size: 1.2rem;
     --sidebar-header-line-height: 1.6rem;