Merge branch 'frontend-revamp-manage-backups-view'

Author: shonsirsha

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": {

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

frontends/web/src/routes/device/manage-backups/manage-backups.tsx

@@ -17,6 +17,7 @@
 
 import { useTranslation } from 'react-i18next';
 import { TDevices } from '@/api/devices';
+import { SubTitle } from '@/components/title';
 import { BackButton } from '@/components/backbutton/backbutton';
 import { Guide } from '@/components/guide/guide';
 import { Entry } from '@/components/guide/entry';
@@ -48,7 +49,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 +74,19 @@ const BackupsList = ({
   }
   switch (devices[deviceID]) {
   case 'bitbox':
+
     return (
-      <Backups
-        deviceID={deviceID}
-        showCreate={true}
-        showRestore={false}>
-        <BackButton>
-          {t('button.back')}
-        </BackButton>
-      </Backups>
+      <>
+        <SubTitle>{t('backup.list')}</SubTitle>
+        <Backups
+          deviceID={deviceID}
+          showCreate={true}
+          showRestore={false}>
+          <BackButton>
+            {t('button.back')}
+          </BackButton>
+        </Backups>
+      </>
     );
   case 'bitbox02':
     return (