Frontend responsive fontsize android

frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java

@@ -136,7 +136,6 @@ public void onReceive(Context context, Intent intent) {
         }
     };
 
-
     @Override
     public void onConfigurationChanged(Configuration newConfig) {
         int currentNightMode = newConfig.uiMode & Configuration.UI_MODE_NIGHT_MASK;
@@ -171,6 +170,8 @@ public void setDarkTheme(boolean isDark) {
         }
     }
 
+    private int currentZoom;
+
     @SuppressLint("SetJavaScriptEnabled")
     @Override
     protected void onCreate(Bundle savedInstanceState) {
@@ -226,7 +227,33 @@ protected void onCreate(Bundle savedInstanceState) {
 
         // vw.setWebContentsDebuggingEnabled(true); // enable remote debugging in chrome://inspect/#devices
 
-        vw.setWebViewClient(new BitBoxWebViewClient(BASE_URL, getAssets(), getApplication()));
+        // Retrieve the current text zoom setting to adjust the base font size in the WebView.
+        currentZoom = vw.getSettings().getTextZoom();
+
+        vw.setWebViewClient(new BitBoxWebViewClient(BASE_URL, getAssets(), getApplication()) {
+            @Override
+            public void onPageFinished(WebView view, String url) {
+                super.onPageFinished(view, url);
+
+                // 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 * ((double) 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);
+
+                String cssSetup = "document.documentElement.style.fontSize='" + baseFontSizePercentage + "%';" +
+                                "document.body.style.fontSize='" + defaultFontSizeREM + "rem';";
+
+                // Execute the CSS setup in the WebView.
+                view.evaluateJavascript(cssSetup, null);
+            }
+        });
 
         ActivityResultLauncher<String> fileChooser = registerForActivityResult(new ActivityResultContracts.GetContent(), uri -> webChrome.onFilePickerResult(uri));
         BitBoxWebChromeClient.CameraPermissionDelegate cameraPermissionDelegate = () -> ActivityCompat.requestPermissions(
@@ -321,7 +348,6 @@ public void noAuthConfigured() {
                 getWindow().clearFlags(WindowManager.LayoutParams.FLAG_SECURE);
             }
         }));
-
     }
 
     @Override

frontends/web/src/components/actionable-item/actionable-item.module.css

@@ -1,5 +1,4 @@
 .container {
-  --size-default: 14px;
   align-items: center;
   background-color: var(--background-secondary);
   border: none;

frontends/web/src/components/amount/conversion-amount.module.css

@@ -14,19 +14,19 @@
 .txPrefix,
 .txUnit {
   color: var(--color-secondary);
-  font-size: 14px;
-  line-height: 1.285714;
+  font-size: var(--size-small);
+  /* line-height: 1.285714; */
   white-space: nowrap;
 }
 
 .txConversionAmount .txUnit {
-  font-size: 12px;
+  font-size: var(--size-smaller);
   flex-shrink: 0;
 }
 
 .txSmallInlineIcon img {
-  max-height: 15px;
-  max-width: 15px;
+  max-height: 1.5rem;
+  max-width: 1.5rem;
   vertical-align: text-bottom;
 }
 .txConversionAmount .txSmallInlineIcon {

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

@@ -42,6 +42,6 @@
 }
 @media (min-width: 1200px) {
     .message {
-        --size-default: 18px;
+        --size-default: 1.8rem;
     }
 }

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

@@ -2,7 +2,7 @@
   border-radius: var(--space-half);
   border: 1px solid;
   display: inline-block;
-  font-size: var(--size-small);
+  font-size: var(--size-smaller);
   flex-shrink: 0;
   line-height: 1;
   padding: var(--space-eight) 10px;
@@ -19,7 +19,7 @@
 }
 
 .badgeIcon {
-  max-width: 10px;
+  max-width: 1rem;
 }
 
 .withChildren .badgeIcon {
@@ -28,7 +28,7 @@
 
 @media (max-width: 382px) {
   .badge {
-      font-size: 10px;
+      font-size: 1rem;
   }
 }
 

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

@@ -27,7 +27,7 @@
 
 .pendingBalance {
   color: var(--color-secondary);
-  font-size: var(--size-small);
+  font-size: var(--size-smaller);
   line-height: 1;
   margin: 0;
   padding-top: var(--space-half);

frontends/web/src/components/bottom-navigation/bottom-navigation.module.css

@@ -18,7 +18,7 @@
     align-items: center;
     color: var(--color-text);
     display: flex;
-    font-size: 12px;
+    font-size: min(1.2rem, 20px);
     flex-direction: column;
     gap: 4px;
     justify-content: center;

frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css

@@ -8,22 +8,21 @@
 
 .progressInfo {
     display: flex;
-    font-size: 16px;
+    font-size: 1.6rem;
     justify-content: space-between;
     margin: 0 0 var(--space-default);
 }
 
 .additionalUpgrade {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-eight);
 }
 
 @media (max-width: 768px) {
     .content,
-    .additionalUpgrade
-    {
-        font-size: 14px;
+    .additionalUpgrade {
+        font-size: var(--size-small);
     }
 }
 

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

@@ -33,15 +33,9 @@
 }
 /* guard dialog and wait-dialog from view styles */
 @media (min-width: 1200px) {
-    .header .title {
-        --size-subheader: 16px;
-    }
     .modal {
         margin-left: var(--sidebar-width-large);
     }
-    .modal .contentContainer p {
-        --size-default: 14px;
-    }
 }
 
 .modal.small {
@@ -96,13 +90,11 @@
 
 .header .closeButton,
 .header .closeButton img {
-    width: 18px;
-    height: 18px;
+    width: var(--size-subheader);
+    height: var(--size-subheader);
 }
 
 .contentContainer {
-    font-size: var(--size-default);
-    font-weight: 400;
     padding: var(--space-half);
 }
 

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

@@ -56,7 +56,9 @@
 
 .select :global(.react-select__control) {
     background-color: var(--background-secondary);
-    border-radius: 2px;
+    border-radius: 0.2rem;
+    border-width: var(--border-width);
+    min-height: var(--input-height);
     padding: var(--space-quarter) var(--space-eight);
 }
 

frontends/web/src/components/forms/button.module.css

@@ -4,16 +4,16 @@
     border-color: transparent;
     border-radius: 2px;
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--border-width);
     cursor: default;
     display: inline-flex;
     flex-direction: row;
     font-family: var(--font-family);
     font-size: var(--size-default);
     font-weight: 400;
     justify-content: center;
+    min-height: var(--button-height);
     min-width: 100px;
-    height: 50px;
     outline: none;
     padding: 0 var(--space-default);
     position: relative;
@@ -87,7 +87,6 @@
     border-color: transparent;
     color: var(--color-blue);
     display: inline-block;
-    height: 50px;
     min-width: 0;
 }
 

frontends/web/src/components/forms/checkbox.module.css

@@ -7,7 +7,7 @@
 .checkbox input + label {
     display: inline-block;
     max-width: 100%;
-    padding-left: 2em;
+    padding-left: 2rem;
     position: relative;
 }
 
@@ -27,7 +27,7 @@
 }
 
 .checkbox input + label::before {
-    border: 1px solid var(--background-tertiary);
+    border: var(--border-width) solid var(--background-tertiary);
     border-radius: 2px;
     top: 2px;
 }
@@ -37,22 +37,22 @@
 }
 .warning input + label::before {
     border-color: var(--background-secondary);
-    outline: 1px solid var(--color-warning);
+    outline: var(--border-width) solid var(--color-warning);
 }
 .info input + label::before {
     border-color: var(--background-secondary);
-    outline: 1px solid var(--color-info);
+    outline: var(--border-width) solid var(--color-info);
 }
 
 .checkbox input + label::after {
     background: transparent;
     border: solid var(--background-secondary);
-    border-width: 0px 2px 2px 0;
+    border-width: 0 2px 2px 0;
     width: 0.35em;
     height: 0.55em;
     position: absolute;
-    top: 6px;
-    left: 6px;
+    top: min(0.6rem, 9px);
+    left: 0.6rem;
     margin-left: -1px;
     margin-top: -2px;
     opacity: 0;

frontends/web/src/components/forms/input.module.css

@@ -28,11 +28,11 @@
     border-color: var(--background-quaternary);
     border-radius: 2px;
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--border-width);
     font-family: var(--font-family);
     font-size: var(--size-default);
     font-weight: 400;
-    height: 52px;
+    height: var(--input-height);
     padding: 0 var(--space-half);
     width: 100%;
     transition: border-color .2s ease-out;

frontends/web/src/components/forms/radio.module.css

@@ -1,5 +1,4 @@
 .radio {
-    --size-default: 14px;
     line-height: 1.5;
 }
 
@@ -13,7 +12,7 @@
     flex-direction: column;
     font-size: var(--size-default);
     margin-right: var(--space-half);
-    padding-left: calc(var(--space-half) + var(--space-quarter));
+    padding-left: calc(1.6rem + var(--space-quarter));
     position: relative;
 }
 
@@ -22,27 +21,27 @@
     background: var(--background-secondary);
     content: '';
     display: inline-block;
-    width: 12px;
-    height: 12px;
+    width: 1.2rem;
+    height: 1.2rem;
     position: absolute;
-    top: 4px;
+    top: .4rem;
     left: 0;
     transition: all 100ms ease;
 }
 
 .radio input + label::before {
-    border: 1px solid var(--background-tertiary);
+    border: var(--border-width) solid var(--background-tertiary);
     border-radius: 1em;
 }
 
 .radio input + label::after {
     background: var(--color-blue);
     border-radius: 1em;
-    width: 10px;
-    height: 10px;
+    width: 1rem;
+    height: 1rem;
     position: absolute;
-    top: 6px;
-    left: 2px;
+    top: .6rem;
+    left: .2rem;
     opacity: 0;
     transform: scale(0);
 }

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

@@ -6,6 +6,7 @@
 }
 
 .balanceSingleValue {
+    margin-left: var(--space-quarter);
     margin-right: var(--space-quarter);
 }
 
@@ -26,12 +27,13 @@
 }
 
 .select {
+    font-size: min(var(--size-default), 24px);
     margin-bottom: var(--space-half);
 }
 
 .select :global(.react-select__group-heading) {
     color: var(--color-default);
-    font-size: var(--size-default);
+    font-size: min(var(--size-default), 24px);
     margin: 0;
     padding-right: var(--space-quarter);
     text-transform: unset;
@@ -72,6 +74,7 @@
 
 .select :global(.react-select__control) {
     background-color: var(--background-secondary);
+    min-height: var(--input-height);
     padding: var(--space-quarter) var(--space-eight);
 }
 

frontends/web/src/components/guide/entry.tsx

@@ -47,10 +47,12 @@ export const Entry = (props: TProps) => {
   return (
     <div className={style.entry}>
       <div className={style.entryTitle} onClick={toggle}>
-        <div className={style.entryToggle}>{shown ? '–' : '+'}</div>
-        <div className={style.entryTitleText}>
-          <h2>{entry.title}</h2>
+        <div className={style.entryToggle}>
+          {shown ? '–' : '+'}
         </div>
+        <h3 className={style.entryTitleText}>
+          {entry.title}
+        </h3>
       </div>
       <div className={[style.entryContent, shown ? style.expanded : ''].join(' ')}>
         {shown ? (