cosmetics plus a slew of little frontend rendering bugs

ui/src/app/pages/server-routes/server-backup/server-backup.page.html

@@ -4,11 +4,6 @@
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
     <ion-title>Create Backup</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="doRefresh()">
-        <ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
-      </ion-button>
-    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
@@ -18,45 +13,33 @@
   <ng-template #loaded>
 
     <ion-item class="ion-margin-bottom">
-      <ion-label class="ion-text-wrap">
-        <p class="ion-padding-bottom">About</p>
+      <ion-label>
         <h2>
-          Create frequent backups of your Embassy to avoid loss of data.
+          Select the drive where you want to create a backup of your Embassy, including all your installed services.
         </h2>
       </ion-label>
     </ion-item>
 
-    <ion-item-divider>Select Backup Drive</ion-item-divider>
-
     <ion-item *ngIf="allPartitionsMounted">
-      <ion-text *ngIf="type === 'create'" class="ion-text-wrap" color="warning">No partitions available. To begin a backup, insert a storage device into your Embassy.</ion-text>
-      <ion-text *ngIf="type === 'restore'" class="ion-text-wrap" color="warning">No partitions available. Insert the storage device containing the backup you wish to restore.</ion-text>
+      <ion-text class="ion-text-wrap" color="warning">No partitions available. To begin a backup, insert a storage device into your Embassy.</ion-text>
     </ion-item>
 
-    <ion-card *ngFor="let disk of disks | keyvalue">
-      <ion-card-header>
-        <ion-card-title>
-          {{ disk.value.size }}
-        </ion-card-title>
-        <ion-card-subtitle>
-          {{ disk.key }}
-        </ion-card-subtitle>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-item-group>
-          <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
-            <ion-icon slot="start" name="save-outline"></ion-icon>
-            <ion-label>
-              <h2>{{ partition.value.label || partition.key }} ({{ partition.value.size || 'unknown size' }})</h2>
-              <p *ngIf="!partition.value['is-mounted']; else unavailable"><ion-text color="success">Available</ion-text></p>
-              <ng-template #unavailable>
-                <p><ion-text color="danger">Unavailable</ion-text></p>
-              </ng-template>
-            </ion-label>
-          </ion-item>
-        </ion-item-group>
-      </ion-card-content>
-    </ion-card>
+    <ion-item-group>
+      <div *ngFor="let disk of disks | keyvalue">
+        <ion-item-divider>{{ disk.key }} - {{ disk.value.size }}</ion-item-divider>
+        <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
+          <ion-icon slot="start" name="save-outline" size="large"></ion-icon>
+          <ion-label>
+            <h1>{{ partition.value.label || partition.key }}</h1>
+            <h2>{{ partition.value.size || 'unknown size' }}</h2>
+            <p *ngIf="!partition.value['is-mounted']; else unavailable"><ion-text color="success">Available</ion-text></p>
+            <ng-template #unavailable>
+              <p><ion-text color="danger">Unavailable</ion-text></p>
+            </ng-template>
+          </ion-label>
+        </ion-item>
+      </div>
+    </ion-item-group>
   </ng-template>
 
 </ion-content>

ui/src/app/pages/server-routes/server-backup/server-backup.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { LoadingController, ModalController } from '@ionic/angular'
+import { ModalController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { BackupConfirmationComponent } from 'src/app/modals/backup-confirmation/backup-confirmation.component'
 import { DiskInfo } from 'src/app/services/api/api.types'
@@ -19,7 +19,6 @@ export class ServerBackupPage {
     private readonly modalCtrl: ModalController,
     private readonly embassyApi: ApiService,
     private readonly errToast: ErrorToastService,
-    private readonly loadingCtrl: LoadingController,
   ) { }
 
   ngOnInit () {
@@ -45,36 +44,21 @@ export class ServerBackupPage {
   async presentModal (logicalname: string): Promise<void> {
     const m = await this.modalCtrl.create({
       componentProps: {
-        type: 'backup',
+        title: 'Create Backup',
+        message: `Enter your master password to create an encrypted backup of your Embassy and all its installed services.`,
+        label: 'Password',
+        useMask: true,
+        buttonText: 'Create Backup',
+        submitFn: async (value: string) => await this.create(logicalname, value),
       },
       cssClass: 'alertlike-modal',
       component: BackupConfirmationComponent,
-      backdropDismiss: false,
-    })
-
-    m.onWillDismiss().then(res => {
-      const data = res.data
-      if (data.cancel) return
-      this.create(logicalname, data.password)
     })
 
     return await m.present()
   }
 
   private async create (logicalname: string, password: string): Promise<void> {
-    const loader = await this.loadingCtrl.create({
-      spinner: 'lines',
-      message: 'Starting backup...',
-      cssClass: 'loader',
-    })
-    await loader.present()
-
-    try {
-      await this.embassyApi.createBackup({ logicalname, password })
-    } catch (e) {
-      this.errToast.present(e)
-    } finally {
-      loader.dismiss()
-    }
+    await this.embassyApi.createBackup({ logicalname, password })
   }
 }