frontend: revamp sdcardcheck (bb02) UI

Use view component and new design in the sdcardcheck component (manage backups) for the bb02, instead of the Dialog. This is done to improve UX
BitBoxSwiss · Dec 9, 2024 · 6ef2731 · 6ef2731
1 parent e1d6d34
commit 6ef2731
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 22 deletions.
diff --git a/frontends/web/src/locales/en/app.json b/frontends/web/src/locales/en/app.json
@@ -288,6 +288,7 @@
     },
     "stepInsertSD": {
       "insertSDCard": "Please insert a microSD card into your BitBox02 to continue.",
+      "insertSDCardToSeeBackups": "Please insert the microSD card into your BitBox02 to see your backups.",
       "insertSDcardTitle": "Insert microSD card"
     },
     "stepPassword": {

diff --git a/frontends/web/src/routes/device/bitbox02/sdcardcheck.tsx b/frontends/web/src/routes/device/bitbox02/sdcardcheck.tsx
@@ -17,8 +17,9 @@
 import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { checkSDCard } from '@/api/bitbox02';
-import { Dialog, DialogButtons } from '@/components/dialog/dialog';
 import { Button } from '@/components/forms';
+import { PointToBitBox02 } from '@/components/icon';
+import { View, ViewButtons, ViewContent, ViewHeader } from '@/components/view/view';
 import { BackButton } from '@/components/backbutton/backbutton';
 import { HorizontallyCenteredSpinner } from '@/components/spinner/SpinnerAnimation';
 
@@ -44,25 +45,24 @@ const SDCardCheck = ({ deviceID, children }: TProps) => {
   return (
     <div>
       {!sdCardInserted ? (
-        <Dialog open={!sdCardInserted} title="Check your device" small>
-          <div className="columnsContainer half">
-            <div className="columns">
-              <div className="column">
-                <p>{t('backup.insert')}</p>
-              </div>
-            </div>
-          </div>
-          <DialogButtons>
+        <View textCenter>
+          <ViewHeader title={t('bitbox02Wizard.stepInsertSD.insertSDcardTitle')}>
+            {t('bitbox02Wizard.stepInsertSD.insertSDCardToSeeBackups')}
+          </ViewHeader>
+          <ViewContent minHeight="280px">
+            <PointToBitBox02 />
+          </ViewContent>
+          <ViewButtons>
             <Button
               primary
               onClick={check}>
               {t('button.ok')}
             </Button>
-            <BackButton>
+            <BackButton enableEsc>
               {t('button.back')}
             </BackButton>
-          </DialogButtons>
-        </Dialog>
+          </ViewButtons>
+        </View>
       ) : children}
     </div>
   );

diff --git a/frontends/web/src/routes/device/manage-backups/manage-backups.tsx b/frontends/web/src/routes/device/manage-backups/manage-backups.tsx
@@ -48,7 +48,6 @@ export const ManageBackups = ({
             title={<h2>{t('backup.title')}</h2>}
           />
           <div className="content padded">
-            <h3 className="subTitle">{t('backup.list')}</h3>
             <BackupsList
               deviceID={deviceID}
               devices={devices}
@@ -74,15 +73,19 @@ const BackupsList = ({
   }
   switch (devices[deviceID]) {
   case 'bitbox':
+
     return (
-      <Backups
-        deviceID={deviceID}
-        showCreate={true}
-        showRestore={false}>
-        <BackButton>
-          {t('button.back')}
-        </BackButton>
-      </Backups>
+      <>
+        <h3 className="subTitle">{t('backup.list')}</h3>
+        <Backups
+          deviceID={deviceID}
+          showCreate={true}
+          showRestore={false}>
+          <BackButton>
+            {t('button.back')}
+          </BackButton>
+        </Backups>
+      </>
     );
   case 'bitbox02':
     return (