Merge branch 'frontend-font-size-firmware-update'

BitBoxSwiss · Nov 11, 2024 · 9fe8aff · 9fe8aff
2 parents 133d705 + 13a8e91
commit 9fe8aff
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css
@@ -0,0 +1,23 @@
+.content {
+    font-size: 16px;
+    margin: 0;
+}
+
+.progressBar {
+    margin: var(--space-quarter) 0;
+}
+
+.additionalUpgrade {
+    font-size: 16px;
+    margin: 0;
+    margin-top: var(--space-eight);
+}
+
+@media (max-width: 768px) {
+    .content,
+    .additionalUpgrade
+    {
+        font-size: 14px;
+    }
+}
+
diff --git a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.tsx b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.tsx
@@ -17,13 +17,15 @@
 
 import { useTranslation } from 'react-i18next';
 import * as bitbox02BootloaderAPI from '@/api/bitbox02bootloader';
-import { useLoad, useSync } from '@/hooks/api';
 import { useDarkmode } from '@/hooks/darkmode';
+import { useSync, useLoad } from '@/hooks/api';
 import { Button } from '@/components/forms';
 import { View, ViewContent } from '@/components/view/view';
 import { BitBox02, BitBox02Inverted } from '@/components/icon/logo';
 import { Status } from '@/components/status/status';
+import { SubTitle } from '@/components/title';
 import { ToggleShowFirmwareHash } from './toggleshowfirmwarehash';
+import style from './bitbox02bootloader.module.css';
 
 type TProps = {
   deviceID: string;
@@ -58,17 +60,17 @@ export const BitBox02Bootloader = ({ deviceID }: TProps) => {
       const value = Math.round(status.progress * 100);
       contents = (
         <div className="box large">
-          <h2 className="subTitle">
+          <SubTitle>
             {t('bb02Bootloader.upgradeTitle', { context: (versionInfo.erased ? 'install' : '') })}
-          </h2>
+          </SubTitle>
           { versionInfo.additionalUpgradeFollows ? (
             <>
-              <p>{t('bb02Bootloader.additionalUpgradeFollows1')}</p>
-              <p>{t('bb02Bootloader.additionalUpgradeFollows2')}</p>
+              <p className={style.additionalUpgrade}>{t('bb02Bootloader.additionalUpgradeFollows1')}</p>
+              <p className={style.additionalUpgrade}>{t('bb02Bootloader.additionalUpgradeFollows2')}</p>
             </>
           ) : null }
-          <progress value={value} max="100">{value}%</progress>
-          <p style={{ marginBottom: 0 }}>
+          <progress className={style.progressBar} value={value} max="100">{value}%</progress>
+          <p className={style.content}>
             {t('bootloader.progress', {
               progress: value.toString(),
               context: (versionInfo.erased ? 'install' : ''),
@@ -124,6 +126,7 @@ export const BitBox02Bootloader = ({ deviceID }: TProps) => {
       </div>
     );
   }
+
   return (
     <View fitContent verticallyCentered width="600px">
       <ViewContent>