frontend: responsive font size POC

.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

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,37 @@ 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;
+
+                // 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);
+
+                // Execute the CSS setup in the WebView.
+                view.evaluateJavascript(cssSetup, null);
+
             }
             @Override
             public WebResourceResponse shouldInterceptRequest(final WebView view, WebResourceRequest request) {

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;

frontends/web/src/components/guide/guide.module.css

@@ -53,7 +53,7 @@
 
 .header a {
     cursor: pointer;
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .content {

frontends/web/src/components/keystoreconnectprompt.module.css

@@ -33,7 +33,7 @@
 }
 
 .text {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 @media (max-width: 768px) {

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>

frontends/web/src/components/password.module.css

@@ -4,5 +4,5 @@
     line-height: 42px;
     position: absolute;
     right: 0;
-    width: 2rem;
+    width: 32px;
 }

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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[];

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;
 }
 

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;

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 {

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')}
       </>
     );

frontends/web/src/routes/account/summary/accountssummary.module.css

@@ -193,7 +193,7 @@
     }
 
     .coinName img {
-        left: -2rem;
+        left: -32px;
         position: absolute;
         top: -3px;
     }