better styling for checkboxes

frontend/projects/ui/src/app/pages/backups-routes/pages/backup-history/backup-history.page.html

@@ -12,9 +12,9 @@
     Past Events
     <ion-button
       class="ion-padding-start"
+      color="danger"
       strong
-      color="primary"
-      [fill]="empty ? 'outline' : 'solid'"
+      size="small"
       (click)="deleteSelected()"
       [disabled]="empty"
     >
@@ -24,7 +24,7 @@
   <div class="grid-fixed">
     <ion-grid class="ion-padding">
       <ion-row class="grid-headings">
-        <ion-col size="3" class="inline">
+        <ion-col size="3.5" class="inline">
           <div class="checkbox" (click)="toggleAll(runs)">
             <ion-icon
               [name]="empty ? 'square-outline' : count === runs.length ? 'checkbox-outline' : 'remove-circle-outline'"
@@ -35,7 +35,7 @@
         <ion-col size="2">Duration</ion-col>
         <ion-col size="1.5">Result</ion-col>
         <ion-col size="2.5">Job</ion-col>
-        <ion-col size="3">Target</ion-col>
+        <ion-col size="2.5">Target</ion-col>
       </ion-row>
 
       <!-- loading -->
@@ -54,8 +54,9 @@
         <ion-row
           *ngFor="let run of runs"
           class="ion-align-items-center grid-row-border"
+          [class.highlighted]="selected[run.id]"
         >
-          <ion-col size="3" class="inline">
+          <ion-col size="3.5" class="inline">
             <div class="checkbox" (click)="toggleChecked(run.id)">
               <ion-icon
                 [name]="selected[run.id] ? 'checkbox-outline' : 'square-outline'"
@@ -78,7 +79,7 @@
             <a (click)="presentModalReport(run)">Report</a>
           </ion-col>
           <ion-col size="2.5">{{ run.job.name || 'No job' }}</ion-col>
-          <ion-col size="3" class="inline">
+          <ion-col size="2.5" class="inline">
             <ion-icon
               [name]="(run.job.target | getDisplayInfo).icon"
               size="small"

frontend/projects/ui/src/app/pages/backups-routes/pages/backup-history/backup-history.page.scss

@@ -0,0 +1,3 @@
+.highlighted {
+  background-color: var(--ion-color-medium-shade);
+}

frontend/projects/ui/src/app/pages/backups-routes/pages/backup-jobs/backup-jobs.page.html

@@ -15,9 +15,9 @@ <h2>
           Scheduling automatic backups is an excellent way to ensure your
           Embassy data is safely backed up. Your Embassy will issue a
           notification whenever one of your scheduled backups succeeds or fails.
-          <a [href]="docsUrl" target="_blank" rel="noreferrer"
-            >View instructions</a
-          >
+          <a [href]="docsUrl" target="_blank" rel="noreferrer">
+            View instructions
+          </a>
         </h2>
       </ion-label>
     </ion-item>
@@ -27,6 +27,7 @@ <h2>
       <ion-button
         class="ion-padding-start"
         strong
+        size="small"
         (click)="presentModalCreate()"
       >
         <ion-icon slot="start" name="add"></ion-icon>

frontend/projects/ui/src/app/pages/backups-routes/pages/backup-targets/backup-targets.page.html

@@ -16,17 +16,22 @@ <h2>
           backups. They can be physical drives plugged into your server, shared
           folders on your Local Area Network (LAN), or third party clouds such
           as Dropbox or Google Drive.
-          <a [href]="docsUrl" target="_blank" rel="noreferrer"
-            >View instructions</a
-          >
+          <a [href]="docsUrl" target="_blank" rel="noreferrer">
+            View instructions
+          </a>
         </h2>
       </ion-label>
     </ion-item>
 
     <!-- unknown disks -->
     <ion-item-divider>
       Unknown Physical Drives
-      <ion-button class="ion-padding-start" strong (click)="refresh()">
+      <ion-button
+        class="ion-padding-start"
+        strong
+        size="small"
+        (click)="refresh()"
+      >
         <ion-icon slot="start" name="refresh"></ion-icon>
         Refresh
       </ion-button>
@@ -56,23 +61,24 @@ <h2>
             *ngFor="let disk of targets['unknown-disks']; let i = index"
             class="ion-align-items-center grid-row-border"
           >
-            <ion-col size="3"
-              >{{ disk.vendor || 'unknown make' }}, {{ disk.model || 'unknown
-              model' }}</ion-col
-            >
+            <ion-col size="3">
+              {{ disk.vendor || 'unknown make' }}, {{ disk.model || 'unknown
+              model' }}
+            </ion-col>
             <ion-col size="3">{{ disk.label }}</ion-col>
             <ion-col size="2">{{ disk.capacity | convertBytes }}</ion-col>
-            <ion-col size="2"
-              >{{ disk.used ? (disk.used | convertBytes) : 'unknown' }}</ion-col
-            >
+            <ion-col size="2">
+              {{ disk.used ? (disk.used | convertBytes) : 'unknown' }}
+            </ion-col>
             <ion-col size="2">
               <ion-button
+                strong
                 size="small"
                 style="float: right"
                 (click)="presentModalAddPhysical(disk, i)"
               >
                 <ion-icon name="add" slot="start"></ion-icon>
-                Add
+                Save
               </ion-button>
             </ion-col>
           </ion-row>
@@ -91,6 +97,7 @@ <h2>
       <ion-button
         class="ion-padding-start"
         strong
+        size="small"
         (click)="presentModalAddRemote()"
       >
         <ion-icon slot="start" name="add"></ion-icon>
@@ -126,7 +133,7 @@ <h2>
           >
             <ion-col size="3">{{ target.name }}</ion-col>
             <ion-col class="inline">
-              <ion-icon [name]="getIcon(target.type)" size="small"> </ion-icon>
+              <ion-icon [name]="getIcon(target.type)" size="small"></ion-icon>
               &nbsp; {{ target.type | titlecase }}
             </ion-col>
             <ion-col>

frontend/projects/ui/src/app/pages/backups-routes/pages/backups/backups.page.html

@@ -16,7 +16,7 @@
     <ion-item button backupCreate>
       <ion-icon slot="start" name="add"></ion-icon>
       <ion-label>
-        <h2>Create Backup</h2>
+        <h2>Create a Backup</h2>
         <p>Create a one-time backup</p>
       </ion-label>
     </ion-item>
@@ -30,33 +30,33 @@ <h2>Restore From Backup</h2>
     <ion-item button routerLink="jobs">
       <ion-icon slot="start" name="hammer-outline"></ion-icon>
       <ion-label>
-        <h2>Backup Jobs</h2>
+        <h2>Jobs</h2>
         <p>Manage backup jobs</p>
       </ion-label>
     </ion-item>
     <ion-item button routerLink="targets">
       <ion-icon slot="start" name="server-outline"></ion-icon>
       <ion-label>
-        <h2>Backup Targets</h2>
+        <h2>Targets</h2>
         <p>Manage backup targets</p>
       </ion-label>
     </ion-item>
     <ion-item button routerLink="history">
       <ion-icon slot="start" name="archive-outline"></ion-icon>
       <ion-label>
-        <h2>View History</h2>
+        <h2>History</h2>
         <p>View your entire backup history</p>
       </ion-label>
     </ion-item>
 
-    <ion-item-divider>Active and Upcoming</ion-item-divider>
+    <ion-item-divider>Upcoming Jobs</ion-item-divider>
 
     <div class="grid-fixed">
       <ion-grid class="ion-padding">
         <ion-row class="grid-headings">
+          <ion-col size="3">Scheduled</ion-col>
           <ion-col size="2.5">Job</ion-col>
-          <ion-col size="2.5">Next Run</ion-col>
-          <ion-col size="2.5">Target</ion-col>
+          <ion-col size="3">Target</ion-col>
           <ion-col size="2.5">Packages</ion-col>
         </ion-row>
         <!-- loaded -->
@@ -66,8 +66,7 @@ <h2>View History</h2>
               *ngFor="let upcoming of upcoming"
               class="ion-align-items-center grid-row-border"
             >
-              <ion-col size="2.5">{{ upcoming.name }}</ion-col>
-              <ion-col size="2.5">
+              <ion-col size="3">
                 <ion-text
                   *ngIf="current.id === upcoming.id; else notRunning"
                   color="success"
@@ -78,16 +77,17 @@ <h2>View History</h2>
                   {{ upcoming.next | date : 'MMM d, y, h:mm a' }}
                 </ng-template>
               </ion-col>
-              <ion-col size="2.5" class="inline">
+              <ion-col size="2.5">{{ upcoming.name }}</ion-col>
+              <ion-col size="3" class="inline">
                 <ion-icon
                   [name]="(upcoming.target | getDisplayInfo).icon"
                   size="small"
                 ></ion-icon>
                 &nbsp; {{ upcoming.target.name }}
               </ion-col>
-              <ion-col size="2.5"
-                >{{ upcoming['package-ids'].length }} Packages</ion-col
-              >
+              <ion-col size="2.5">
+                {{ upcoming['package-ids'].length }} Packages
+              </ion-col>
             </ion-row>
 
             <p *ngIf="!upcoming.length">

frontend/projects/ui/src/app/pages/server-routes/sessions/sessions.page.html

@@ -54,9 +54,9 @@
       Other Sessions
       <ion-button
         class="ion-padding-start"
+        color="danger"
         strong
-        color="primary"
-        [fill]="empty ? 'outline' : 'solid'"
+        size="small"
         (click)="kill()"
         [disabled]="empty"
       >
@@ -94,6 +94,7 @@
           <ion-row
             *ngFor="let session of otherSessions; let i = index"
             class="ion-align-items-center grid-row-border"
+            [class.highlighted]="selected[session.id]"
           >
             <ion-col size="6" class="inline">
               <div class="checkbox" (click)="toggleChecked(session.id)">

frontend/projects/ui/src/app/pages/server-routes/sessions/sessions.page.scss

@@ -0,0 +1,3 @@
+.highlighted {
+  background-color: var(--ion-color-medium-shade);
+}

frontend/projects/ui/src/app/services/api/api.fixures.ts

@@ -690,6 +690,23 @@ export module Mock {
         },
       },
     },
+    {
+      id: 'kladhbfwhrfeubdsk',
+      'started-at': new Date().toISOString(),
+      'completed-at': new Date(new Date().valueOf() + 10000).toISOString(),
+      'package-ids': ['bitcoind', 'lnd'],
+      job: BackupJobs[0],
+      report: {
+        server: {
+          attempted: true,
+          error: null,
+        },
+        packages: {
+          bitcoind: { error: null },
+          lnd: { error: null },
+        },
+      },
+    },
   ]
 
   export const BackupInfo: RR.GetBackupInfoRes = {