fix conditional display state (#1612)

* fix conditional display state

* fix footer

* fix empty case

* remove select all from backup restore

* fix styling and add warning message to service restore

* update copy

frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.html

@@ -10,14 +10,11 @@
 </ion-header>
 
 <ion-content>
+  <h3 class="padding warning">
+    Warning! Restoring a service will <i>permanently overwrite</i> its current
+    data with data from its backup. Please make selections carefully.
+  </h3>
   <ion-item-group>
-    <ion-item-divider>
-      <ion-buttons slot="end" style="padding-bottom: 6px">
-        <ion-button fill="clear" (click)="toggleSelectAll()">
-          <b>{{ selectAll ? 'Select All' : 'Deselect All' }}</b>
-        </ion-button>
-      </ion-buttons>
-    </ion-item-divider>
     <ion-item *ngFor="let option of options">
       <ion-label>
         <h2>{{ option.title }}</h2>

frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.scss

@@ -0,0 +1,7 @@
+.padding {
+    padding: 10px;
+}
+
+.warning {
+    color: var(--ion-color-warning)
+}

frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts

@@ -27,7 +27,6 @@ export class AppRecoverSelectPage {
     'newer-eos': boolean
   })[]
   hasSelection = false
-  selectAll = true
   error: string | IonicSafeString
 
   constructor(
@@ -63,11 +62,6 @@ export class AppRecoverSelectPage {
     this.hasSelection = this.options.some(o => o.checked)
   }
 
-  toggleSelectAll() {
-    this.options.forEach(pkg => (pkg.checked = this.selectAll))
-    this.selectAll = !this.selectAll
-  }
-
   async restore(): Promise<void> {
     const ids = this.options
       .filter(option => !!option.checked)

frontend/projects/ui/src/app/modals/backup-select/backup-select.page.html

@@ -9,8 +9,8 @@
   </ion-toolbar>
 </ion-header>
 
-<div *ngIf="pkgs.length; else noServices">
-  <ion-content>
+<ion-content>
+  <ng-container *ngIf="pkgs.length; else empty">
     <ion-item-group>
       <ion-item-divider>
         <ion-buttons slot="end" style="padding-bottom: 6px">
@@ -34,25 +34,24 @@
         ></ion-checkbox>
       </ion-item>
     </ion-item-group>
-  </ion-content>
+  </ng-container>
+  <ng-template #empty>
+    <h2 class="center">No services installed!</h2>
+  </ng-template>
+</ion-content>
 
-  <ion-footer>
-    <ion-toolbar>
-      <ion-buttons slot="end" class="ion-padding-end">
-        <ion-button
-          [disabled]="!hasSelection"
-          fill="solid"
-          color="primary"
-          (click)="dismiss(true)"
-          class="enter-click btn-128"
-        >
-          Back Up Selected
-        </ion-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </ion-footer>
-</div>
-
-<ng-template #noServices>
-  <ion-content><h2 class="center">No services installed!</h2></ion-content>
-</ng-template>
+<ion-footer>
+  <ion-toolbar>
+    <ion-buttons slot="end" class="ion-padding-end">
+      <ion-button
+        [disabled]="!hasSelection"
+        fill="solid"
+        color="primary"
+        (click)="dismiss(true)"
+        class="enter-click btn-128"
+      >
+        Back Up Selected
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>

frontend/projects/ui/src/app/modals/backup-select/backup-select.page.scss

@@ -1,4 +1,5 @@
 .center {
-    text-align: center;
-    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }