Merge branch 'frontend-revamp-upgrade-bootloader'

Author: thisconnect

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

@@ -1,12 +1,18 @@
-.content {
-    font-size: 16px;
-    margin: 0;
+.upgradingTitle {
+    text-align: center;
 }
 
 .progressBar {
     margin: var(--space-quarter) 0;
 }
 
+.progressInfo {
+    display: flex;
+    font-size: 16px;
+    justify-content: space-between;
+    margin: 0 0 var(--space-default);
+}
+
 .additionalUpgrade {
     font-size: 16px;
     margin: 0;

frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.tsx

@@ -58,24 +58,33 @@ export const BitBox02Bootloader = ({ deviceID }: TProps) => {
     } else {
       const value = Math.round(status.progress * 100);
       contents = (
-        <div className="box large">
-          <SubTitle>
+        <>
+          <SubTitle className={style.upgradingTitle}>
             {t('bb02Bootloader.upgradeTitle', { context: (info.erased ? 'install' : '') })}
           </SubTitle>
           { info.additionalUpgradeFollows ? (
-            <>
-              <p className={style.additionalUpgrade}>{t('bb02Bootloader.additionalUpgradeFollows1')}</p>
-              <p className={style.additionalUpgrade}>{t('bb02Bootloader.additionalUpgradeFollows2')}</p>
-            </>
+            <p className={style.additionalUpgrade}>
+              {t('bb02Bootloader.additionalUpgradeFollows1')}
+            </p>
           ) : null }
           <progress className={style.progressBar} value={value} max="100">{value}%</progress>
-          <p className={style.content}>
-            {t('bootloader.progress', {
-              progress: value.toString(),
-              context: (info.erased ? 'install' : ''),
-            })}
-          </p>
-        </div>
+          <div className={style.progressInfo}>
+            <span>
+              {t('bootloader.progress', {
+                context: (info.erased ? 'install' : ''),
+              })}
+            </span>
+            <span>
+              {value}%
+            </span>
+          </div>
+
+          { info.additionalUpgradeFollows ? (
+            <p className={style.additionalUpgrade}>
+              {t('bb02Bootloader.additionalUpgradeFollows2')}
+            </p>
+          ) : null }
+        </>
       );
     }
   } else {
@@ -132,7 +141,7 @@ export const BitBox02Bootloader = ({ deviceID }: TProps) => {
       (isDarkMode ? <BitBox02Inverted /> : <BitBox02 />);
 
   return (
-    <View fitContent verticallyCentered width="600px">
+    <View fitContent verticallyCentered width="556px">
       <ViewContent>
         {logo}
         {status && status.errMsg && (