From 3cfc33351292d358674a2f6ea8a078dee576e639 Mon Sep 17 00:00:00 2001
From: Lucy C <12953208+elvece@users.noreply.github.com>
Date: Mon, 4 Jul 2022 15:06:23 -0600
Subject: [PATCH] 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
---
 .../app-recover-select.page.html              | 11 ++---
 .../app-recover-select.page.scss              |  7 +++
 .../app-recover-select.page.ts                |  6 ---
 .../backup-select/backup-select.page.html     | 45 +++++++++----------
 .../backup-select/backup-select.page.scss     |  5 ++-
 5 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.html b/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.html
index 149b14cd2..365c9b7aa 100644
--- a/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.html
+++ b/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>
diff --git a/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.scss b/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.scss
index e69de29bb..03fc0ced1 100644
--- a/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.scss
+++ b/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)
+}
\ No newline at end of file
diff --git a/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts b/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts
index 45141fb8f..710afa864 100644
--- a/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts
+++ b/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)
diff --git a/frontend/projects/ui/src/app/modals/backup-select/backup-select.page.html b/frontend/projects/ui/src/app/modals/backup-select/backup-select.page.html
index d6f7d98fc..37abf98c0 100644
--- a/frontend/projects/ui/src/app/modals/backup-select/backup-select.page.html
+++ b/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>
diff --git a/frontend/projects/ui/src/app/modals/backup-select/backup-select.page.scss b/frontend/projects/ui/src/app/modals/backup-select/backup-select.page.scss
index fd648cbe6..854c0ba4e 100644
--- a/frontend/projects/ui/src/app/modals/backup-select/backup-select.page.scss
+++ b/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;
 }
\ No newline at end of file