From b16ef3c621649849127e5c2f17554c619282d49f Mon Sep 17 00:00:00 2001
From: Matt Hill <matthewonthemoon@gmail.com>
Date: Fri, 2 Jul 2021 13:56:34 -0600
Subject: [PATCH] more styling

---
 ui/src/app/app.component.html                 |   2 +-
 ui/src/app/app.component.scss                 |   2 +-
 ui/src/app/app.component.ts                   |  10 +-
 .../badge-menu.component.scss                 |  11 +-
 .../object-config.component.scss              |   6 -
 .../app-config-value.page.html                |   6 +-
 .../app-interfaces/app-interfaces.page.html   |  76 +++++++------
 .../apps-routes/app-list/app-list.page.html   |   4 +-
 .../apps-routes/app-list/app-list.page.scss   |  12 +-
 .../apps-routes/app-logs/app-logs.page.html   |   2 +-
 .../app-properties/app-properties.page.html   |  20 ++--
 .../app-restore/app-restore.page.html         |  85 +++++++-------
 .../apps-routes/app-show/app-show.page.html   |  37 +++---
 .../apps-routes/app-show/app-show.page.scss   |  23 +---
 .../apps-routes/app-show/app-show.page.ts     |   4 +-
 .../app-release-notes.page.html               |   2 +-
 .../app-release-notes.page.ts                 |   6 +-
 .../marketplace-show.page.html                | 105 ++++++++++++++++--
 .../marketplace-show.page.scss                |   8 +-
 .../marketplace-routes/marketplace.service.ts |   1 +
 .../notifications/notifications.page.html     |   2 +-
 .../pages/notifications/notifications.page.ts |   4 +
 .../dev-ssh-keys/dev-ssh-keys.page.html       |   2 +-
 .../app/pages/server-routes/lan/lan.page.html |   4 +-
 .../app/pages/server-routes/lan/lan.page.scss |   3 -
 .../server-backup/server-backup.page.html     |  80 ++++++-------
 .../server-logs/server-logs.page.html         |   2 +-
 .../server-specs/server-specs.page.html       |   4 +-
 .../pages/server-routes/wifi/wifi.page.html   |   2 +-
 ui/src/app/services/api/mock-app-fixures.ts   |  32 +++---
 ui/src/global.scss                            |  26 +++--
 ui/src/theme/variables.scss                   |   2 -
 32 files changed, 314 insertions(+), 271 deletions(-)

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index f40fa527b..c51219840 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -3,7 +3,7 @@
     <ion-menu contentId="main-content" type="overlay">
       <ion-header>
         <ion-toolbar style="--background: var(--ion-background-color);">
-          <ion-title *ngIf="serverName; else dots">{{ serverName }}</ion-title>
+          <ion-title>Menu</ion-title>
           <ng-template #dots>
             <ion-title><ion-spinner name="dots" color="warning"></ion-spinner></ion-title>
           </ng-template>
diff --git a/ui/src/app/app.component.scss b/ui/src/app/app.component.scss
index e3d6ad8bc..ae0a824eb 100644
--- a/ui/src/app/app.component.scss
+++ b/ui/src/app/app.component.scss
@@ -1,5 +1,5 @@
 .selected {
-  --background: linear-gradient(120deg, #1e1e1e -1%, var(--ion-color-start9) 100%);
+  --background: linear-gradient(120deg, #1e1e1e -1%, var(--ion-color-danger) 100%);
 }
 
 .menu-style {
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 482107643..bb9e718c9 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -113,12 +113,8 @@ export class AppComponent {
   }
 
   watchPatch (): void {
-    combineLatest([
-      this.patch.watch$('ui', 'server-name'),
-      this.patch.watch$('server-info', 'unread-notification-count'),
-    ])
-    .subscribe(([name, unread]) => {
-      this.serverName = name
+    this.patch.watch$('server-info', 'unread-notification-count')
+    .subscribe(unread => {
       this.unreadCount = unread
     })
   }
@@ -233,7 +229,7 @@ export class AppComponent {
           side: 'end',
           text: 'View',
           handler: () => {
-            this.router.navigate(['/notifications'])
+            this.router.navigate(['/notifications'], { queryParams: { toast: true } })
           },
         },
       ],
diff --git a/ui/src/app/components/badge-menu-button/badge-menu.component.scss b/ui/src/app/components/badge-menu-button/badge-menu.component.scss
index 74b1d1001..32955e4a6 100644
--- a/ui/src/app/components/badge-menu-button/badge-menu.component.scss
+++ b/ui/src/app/components/badge-menu-button/badge-menu.component.scss
@@ -1,14 +1,5 @@
-// .ios-badge {
-//   background-color: var(--ion-color-start9);
-//   position: absolute;
-//   top: 1px;
-//   left: 62%;
-//   border-radius: 5px;
-//   z-index: 1;
-// }
-
 .md-badge {
-  background-color: var(--ion-color-start9);
+  background-color: var(--ion-color-danger);
   position: absolute;
   top: -8px;
   left: 56%;
diff --git a/ui/src/app/components/object-config/object-config.component.scss b/ui/src/app/components/object-config/object-config.component.scss
index 97beee453..62a262f47 100644
--- a/ui/src/app/components/object-config/object-config.component.scss
+++ b/ui/src/app/components/object-config/object-config.component.scss
@@ -2,12 +2,6 @@
   margin: 0 16px;
 }
 
-.help-button {
-  position: relative;
-  bottom: 7px;
-  right: 9px;
-}
-
 .new-tag {
   padding: 0px 5px;
   font-weight: bold;
diff --git a/ui/src/app/modals/app-config-value/app-config-value.page.html b/ui/src/app/modals/app-config-value/app-config-value.page.html
index 182c29ac0..8c2d95fb4 100644
--- a/ui/src/app/modals/app-config-value/app-config-value.page.html
+++ b/ui/src/app/modals/app-config-value/app-config-value.page.html
@@ -9,7 +9,7 @@
       {{ spec.name }}
     </ion-title>
     <ion-buttons *ngIf="!!saveFn" slot="end">
-      <ion-button [disabled]="!!error" (click)="save()" color="primary">
+      <ion-button [disabled]="!!error" (click)="save()">
         Save
       </ion-button>
     </ion-buttons>
@@ -22,7 +22,7 @@
 
   <ion-item-group>
     <ion-item-divider>
-      <ion-button *ngIf="spec.type === 'string' && spec.copyable" style="padding-right: 12px;" size="small" slot="end" fill="clear" color="primary" (click)="copy()">
+      <ion-button *ngIf="spec.type === 'string' && spec.copyable" style="padding-right: 12px;" size="small" slot="end" fill="clear" (click)="copy()">
         <ion-icon slot="icon-only" name="copy-outline" size="small"></ion-icon>
       </ion-button>
     </ion-item-divider>
@@ -73,7 +73,7 @@
       </p>
       <p *ngIf="spec.default !== undefined">
         <ion-text color="medium">
-          <p>Default: {{ defaultDescription }} <ion-icon style="padding-left: 8px;" name="refresh-outline" color="primary" (click)="refreshDefault()"></ion-icon></p>
+          <p>Default: {{ defaultDescription }} <ion-icon style="padding-left: 8px;" name="refresh-outline" color="dark" style="cursor: pointer;" (click)="refreshDefault()"></ion-icon></p>
           <p *ngIf="spec.type === 'number' && spec.units">Units: {{ spec.units }}</p>
         </ion-text>
       </p>
diff --git a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html
index b239172f3..a98d84ab4 100644
--- a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html
+++ b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html
@@ -7,41 +7,43 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top">
-  <ng-container *ngIf="pkg">
-
-    <ion-card style="margin-bottom: 16px;" *ngFor="let interface of pkg.installed.manifest.interfaces | keyvalue: asIsOrder">
-      <ion-card-header>
-        <ion-card-title>
-          {{ interface.value.name }}
-          <ion-button class="vertical-align" *ngIf="interface.value.ui" [disabled]="!(pkg | isLaunchable)" fill="clear" (click)="launch(pkg.installed)">
-            <ion-icon slot="icon-only" name="rocket-outline" size="small"></ion-icon>
-          </ion-button>
-        </ion-card-title>
-        <ion-card-subtitle>{{ interface.value.description }}</ion-card-subtitle>
-      </ion-card-header>
-      <ion-card-content>
-        <ng-container *ngIf="pkg.installed['interface-info'].addresses[interface.key] as int">
-          <ion-item>
-            <ion-label class="ion-text-wrap">
-              <h2>Tor Address</h2>
-              <p>{{ 'http://' + int['tor-address'] }}</p>
-            </ion-label>
-            <ion-button slot="end" fill="clear" (click)="copy('http://' + int['tor-address'])">
-              <ion-icon size="small" slot="icon-only" name="copy-outline"></ion-icon>
-            </ion-button>
-          </ion-item>
-          <ion-item>
-            <ion-label class="ion-text-wrap">
-              <h2>LAN Address</h2>
-              <p>{{ 'https://' + int['lan-address'] }}</p>
-            </ion-label>
-            <ion-button slot="end" fill="clear" (click)="copy('https://' + int['lan-address'])">
-              <ion-icon size="small" slot="icon-only" name="copy-outline"></ion-icon>
-            </ion-button>
-          </ion-item>
-        </ng-container>
-      </ion-card-content>
-    </ion-card>
-  </ng-container>
+<ion-content>
+    <ion-grid *ngIf="pkg">
+      <ion-row>
+        <ion-col *ngFor="let interface of pkg.installed.manifest.interfaces | keyvalue: asIsOrder" sizeSm="12" sizeMd="6">
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>{{ interface.value.name }}</ion-card-title>
+              <ion-card-subtitle>{{ interface.value.description }}</ion-card-subtitle>
+              <ion-button style="margin-top: 12px;" *ngIf="interface.value.ui" [disabled]="!(pkg | isLaunchable)" fill="outline" color="dark" expand="block" (click)="launch(pkg.installed)">
+                Launch
+                <ion-icon slot="end" name="rocket-outline"></ion-icon>
+              </ion-button>
+            </ion-card-header>
+            <ion-card-content>
+              <ng-container *ngIf="pkg.installed['interface-info'].addresses[interface.key] as int">
+                <ion-item>
+                  <ion-label class="ion-text-wrap">
+                    <h2>Tor Address</h2>
+                    <p>{{ 'http://' + int['tor-address'] }}</p>
+                  </ion-label>
+                  <ion-button slot="end" fill="clear" (click)="copy('http://' + int['tor-address'])">
+                    <ion-icon size="small" slot="icon-only" name="copy-outline"></ion-icon>
+                  </ion-button>
+                </ion-item>
+                <ion-item>
+                  <ion-label class="ion-text-wrap">
+                    <h2>LAN Address</h2>
+                    <p>{{ 'https://' + int['lan-address'] }}</p>
+                  </ion-label>
+                  <ion-button slot="end" fill="clear" (click)="copy('https://' + int['lan-address'])">
+                    <ion-icon size="small" slot="icon-only" name="copy-outline"></ion-icon>
+                  </ion-button>
+                </ion-item>
+              </ng-container>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
 </ion-content>
\ No newline at end of file
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.html b/ui/src/app/pages/apps-routes/app-list/app-list.page.html
index e0d3ba3c7..f3e50d01b 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.html
+++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.html
@@ -11,7 +11,7 @@
 
   <div *ngIf="pkgs | empty; else list" class="ion-text-center ion-padding">
     <div style="display: flex; flex-direction: column; justify-content: center; height: 40vh">
-      <h2>Welcome to your <span style="font-style: italic; color: var(--ion-color-start9)">Embassy</span></h2>
+      <h2>Welcome to your <span style="font-style: italic; color: var(--ion-color-danger)">Embassy</span></h2>
       <p class="ion-text-wrap">Get started by installing your first service.</p>
     </div>
     <ion-button [routerLink]="['/marketplace']" style="width: 50%;" fill="outline">
@@ -24,7 +24,7 @@
     <ion-grid>
       <ion-row>
         <ion-col *ngFor="let pkg of pkgs | keyvalue : asIsOrder" sizeXs="4" sizeSm="3" sizeLg="3" sizeXl="2">
-          <ion-card class="installed-card" style="position:relative" [routerLink]="['/services', (pkg.value | manifest).id]">
+          <ion-card class="installed-card" [routerLink]="['/services', (pkg.value | manifest).id]">
             <div class="launch-container" *ngIf="pkg.value | hasUi">
               <div class="launch-button-triangle"  (click)="launchUi(pkg.value, $event)" [class.launch-disabled]="!(pkg.value | isLaunchable)">
                 <ion-icon name="rocket-outline"></ion-icon>
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.scss b/ui/src/app/pages/apps-routes/app-list/app-list.page.scss
index 2649c9bc1..0fdfaa11e 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.scss
+++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.scss
@@ -1,5 +1,5 @@
 .installed-card {
-  margin: 0;
+  margin: 2px;
   background: linear-gradient(37deg, #333333, #131313);
   border-radius: 10px;
   text-align: center;
@@ -13,7 +13,7 @@
 
     ion-card-title {
       font-size: calc(10px + .4vw);
-      color: white;
+      color: var(--ion-color-dark);
       margin: 10px 0;
       white-space: nowrap;
       overflow: hidden;
@@ -24,8 +24,7 @@
 
 .main-img {
   width: 50%;
-  margin: 9px;
-  color: white;
+  margin: 12px;
   border-radius: var(--icon-border-radius);
 }
 
@@ -48,10 +47,7 @@
 }
 
 .launch-button-triangle {
-  width: 0px;
-  height: 0px;
   right: 0px;
-  margin: 0px;
 
   border-style: solid;
   border-width: 22px;
@@ -81,6 +77,4 @@
 .launch-container {
   position: absolute;
   right: 0px;
-  top: 0px;
-  margin: 0px;
 }
diff --git a/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html b/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html
index 51e5aadec..2f7347c1e 100644
--- a/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html
+++ b/ui/src/app/pages/apps-routes/app-logs/app-logs.page.html
@@ -4,7 +4,7 @@
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
     <ion-title>Logs</ion-title>
-    <ion-buttons slot="end" class="ion-padding-end">
+    <ion-buttons slot="end">
       <ion-button (click)="getLogs()">
         <ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
       </ion-button>
diff --git a/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html b/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
index f8f279d73..4fc2b1cdd 100644
--- a/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
+++ b/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
@@ -3,8 +3,8 @@
     <ion-buttons slot="start">
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
-    <ion-title>Values</ion-title>
-    <ion-buttons slot="end" class="ion-padding-end">
+    <ion-title>Properties</ion-title>
+    <ion-buttons slot="end">
       <ion-button (click)="refresh()">
         <ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
       </ion-button>
@@ -30,7 +30,7 @@
     <!-- no properties -->
     <ion-item *ngIf="properties | empty">
       <ion-label class="ion-text-wrap">
-        <p>No values.</p>
+        <p>No properties.</p>
       </ion-label>
     </ion-item>
 
@@ -39,8 +39,8 @@
       <div *ngFor="let prop of node | keyvalue: asIsOrder">
         <!-- object -->
         <ion-item button detail="true" *ngIf="prop.value.type === 'object'" (click)="goToNested(prop.key)">
-          <ion-button *ngIf="prop.value.description" class="help-button" fill="clear" slot="start" (click)="presentDescription(prop, $event)">
-            <ion-icon size="small" slot="icon-only" name="help-circle-outline"></ion-icon>
+          <ion-button *ngIf="prop.value.description" fill="clear" slot="start" (click)="presentDescription(prop, $event)">
+            <ion-icon slot="icon-only" name="help-circle-outline"></ion-icon>
           </ion-button>
           <ion-label class="ion-text-wrap">
             <h2>{{ prop.key }}</h2>
@@ -48,8 +48,8 @@
         </ion-item>
         <!-- not object -->
         <ion-item *ngIf="prop.value.type === 'string'">
-          <ion-button *ngIf="prop.value.description" class="help-button" fill="clear" slot="start" (click)="presentDescription(prop, $event)">
-            <ion-icon size="small" slot="icon-only" name="help-circle-outline"></ion-icon>
+          <ion-button *ngIf="prop.value.description" fill="clear" slot="start" (click)="presentDescription(prop, $event)">
+            <ion-icon slot="icon-only" name="help-circle-outline"></ion-icon>
           </ion-button>
           <ion-label class="ion-text-wrap">
             <h2>{{ prop.key }}</h2>
@@ -57,13 +57,13 @@
           </ion-label>
           <div slot="end" *ngIf="prop.value.copyable || prop.value.qr">
             <ion-button *ngIf="prop.value.masked" fill="clear" (click)="toggleMask(prop.key)">
-              <ion-icon slot="icon-only" [name]="unmasked[prop.key] ? 'eye-off-outline' : 'eye-outline'" [color]="unmasked[prop.key] ? 'danger' : 'primary'" size="small"></ion-icon>
+              <ion-icon slot="icon-only" [name]="unmasked[prop.key] ? 'eye-off-outline' : 'eye-outline'" [color]="unmasked[prop.key] ? 'danger' : 'dark'" size="small"></ion-icon>
             </ion-button>
             <ion-button *ngIf="prop.value.qr" fill="clear" (click)="showQR(prop.value.value)">
-              <ion-icon slot="icon-only" name="qr-code-outline" size="small" color="primary"></ion-icon>
+              <ion-icon slot="icon-only" name="qr-code-outline" size="small"></ion-icon>
             </ion-button>
             <ion-button *ngIf="prop.value.copyable" fill="clear" (click)="copy(prop.value.value)">
-              <ion-icon slot="icon-only" name="copy-outline" size="small" color="primary"></ion-icon>
+              <ion-icon slot="icon-only" name="copy-outline" size="small"></ion-icon>
             </ion-button>
           </div>
         </ion-item>
diff --git a/ui/src/app/pages/apps-routes/app-restore/app-restore.page.html b/ui/src/app/pages/apps-routes/app-restore/app-restore.page.html
index 874104c32..e4615d4f3 100644
--- a/ui/src/app/pages/apps-routes/app-restore/app-restore.page.html
+++ b/ui/src/app/pages/apps-routes/app-restore/app-restore.page.html
@@ -3,8 +3,8 @@
     <ion-buttons slot="start">
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
-    <ion-title>Restore Backup</ion-title>
-    <ion-buttons slot="end" class="ion-padding-end">
+    <ion-title>Restore From Backup</ion-title>
+    <ion-buttons slot="end">
       <ion-button (click)="refresh()">
         <ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
       </ion-button>
@@ -27,49 +27,52 @@
     <ion-item *ngIf="error" style="margin-bottom: 16px;">
       <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
     </ion-item>
-  
+    
     <ion-item class="ion-margin-bottom">
       <ion-label class="ion-text-wrap">
-        <p><ion-text color="dark">About</ion-text></p>
-        <p>
-          Select a location from which to restore {{ title }}. This will overwrite all current data.
-        </p>
+        <p class="ion-padding-bottom"><ion-text color="warning">Warning</ion-text></p>
+        <h2>
+          Restoring from backup will overwrite all current data for {{ title }} .
+        </h2>
       </ion-label>
     </ion-item>
-  
-    <ion-spinner *ngIf="loading; else loaded" name="lines" color="warning" class="center"></ion-spinner>
-  
-    <ng-template #loaded>
-  
-      <ion-item *ngIf="allPartitionsMounted">
-        <ion-text *ngIf="type === 'restore'" class="ion-text-wrap" color="warning">No partitions available. Insert the storage device containing the backup you intend to restore.</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, partition.value)">
-              <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>
-    </ng-template>
+
+    <ion-item-divider>Select Backup Drive</ion-item-divider>
+
+    <ion-item *ngIf="allPartitionsMounted">
+      <ion-text class="ion-text-wrap" color="warning">No partitions available. Insert the storage device containing the backup you intend to restore.</ion-text>
+    </ion-item>
+
+    <ion-grid>
+      <ion-row>
+        <ion-col *ngFor="let disk of disks | keyvalue" sizeSm="12" sizeMd="6">
+          <ion-card>
+            <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, partition.value)">
+                  <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-col>
+      </ion-row>
+    </ion-grid>
   </ng-template>
 
 </ion-content>
diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.html b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
index 4678d0540..c6034f0b7 100644
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
@@ -19,39 +19,30 @@
   <ng-container *ngIf="pkg">
     <!-- top plate -->
     <div class="top-plate">
-      <ion-item class="no-cushion-item" lines="none">
-        <ion-label class="ion-text-wrap" style="
-          display: grid;
-          grid-template-columns: 80px auto;
-          margin: 0px;
-          margin-top: 15px;"
-        >
-          <ion-avatar style="justify-self: center; height: 55px; width: 55px" slot="start">
-            <img [src]="pkg['static-files'].icon" />
-          </ion-avatar>
-          <div style="display: flex; flex-direction: column;">
-            <ion-text style="font-family: 'Montserrat'; font-size: x-large; line-height: normal;" [class.less-large]="manifest.title.length > 20">
-              {{ manifest.title }}
-            </ion-text>
-            <ion-text style="margin-top: -5px; margin-left: 2px;">
-              {{ manifest.version | displayEmver }}
-            </ion-text>
-          </div>
+      <ion-item lines="none">
+        <ion-thumbnail slot="start">
+          <img [src]="pkg['static-files'].icon" />
+        </ion-thumbnail>
+        <ion-label class="ion-text-wrap">
+          <h1 style="font-family: 'Montserrat';" [class.less-large]="manifest.title.length > 20">
+            {{ manifest.title }}
+          </h1>
+          <h5>{{ manifest.version | displayEmver }}</h5>
         </ion-label>
       </ion-item>
   
       <div class="status-readout">
-        <status *ngIf="connected" size="large" weight="bold" [pkg]="pkg"></status>
-        <ion-button *ngIf="pkg.status === FeStatus.NeedsConfig" expand="block" fill="outline" [routerLink]="['config']">
+        <status *ngIf="connected" size="large" weight="500" [pkg]="pkg"></status>
+        <ion-button *ngIf="pkg.status === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
           Configure
         </ion-button>
-        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : pkg.status" expand="block" fill="outline" color="danger" (click)="stop()">
+        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : pkg.status" expand="block" color="danger" (click)="stop()">
           Stop
         </ion-button>
-        <ion-button *ngIf="pkg.status === FeStatus.DependencyIssue" expand="block" fill="outline" (click)="scrollToRequirements()">
+        <ion-button *ngIf="pkg.status === FeStatus.DependencyIssue" expand="block" (click)="scrollToRequirements()">
           Fix
         </ion-button>
-        <ion-button *ngIf="pkg.status === FeStatus.Stopped" expand="block" fill="outline" color="success" (click)="tryStart()">
+        <ion-button *ngIf="pkg.status === FeStatus.Stopped" expand="block" color="success" (click)="tryStart()">
           Start
         </ion-button>
       </div>
diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.scss b/ui/src/app/pages/apps-routes/app-show/app-show.page.scss
index 72cecb7d7..4eaf15be4 100644
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.scss
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.scss
@@ -5,20 +5,24 @@
 .top-plate {
   background: var(--ion-item-background);
   margin: 0 16px;
+  padding: 12px;
   border-radius: 10px;
   border-style: solid;
   border-color: #373737;
+  ion-item {
+    border-radius: 10px;
+  }
 }
 
 .status-readout {
   --background: transparent;
   display: flex;
   justify-content: space-between;
-  padding: 0 10px;
+  padding: 8px 16px;
   border-radius: 10px;
   align-items: center;
   background: var(--ion-background-color);
-  margin: 10px 10px 0px 10px;
+  margin: 10px;
   border-style: solid;
   border-width: 1px;
   border-color: #404040;
@@ -39,18 +43,3 @@
   border-style: solid;
   border-color: #404040;
 }
-
-
-.dep-issue {
-  background: radial-gradient(var(--ion-color-warning) 40%, transparent)
-}
-
-.dep-sat {
-  background: radial-gradient(var(--ion-color-success) 40%, transparent)
-}
-
-ion-item-divider {
-  text-transform: uppercase;
-  margin-top: 22px;
-  font-weight: 400;
-}
\ No newline at end of file
diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
index 4208e21b2..c19352694 100644
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
@@ -239,7 +239,7 @@ export class AppShowPage {
       },
       {
         action: () => this.navCtrl.navigateForward(['properties'], { relativeTo: this.route }),
-        title: 'Values',
+        title: 'Properties',
         icon: 'briefcase-outline',
         color: 'danger',
         disabled: [],
@@ -267,7 +267,7 @@ export class AppShowPage {
       },
       {
         action: () => this.navCtrl.navigateForward(['restore'], { relativeTo: this.route }),
-        title: 'Restore Backup',
+        title: 'Restore From Backup',
         icon: 'color-wand-outline',
         color: 'danger',
         disabled: [FEStatus.Connecting, FEStatus.Installing, FEStatus.Updating, FEStatus.Stopping, FEStatus.Removing, FEStatus.BackingUp, FEStatus.Restoring],
diff --git a/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.html b/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.html
index 38ca00abd..443f84fff 100644
--- a/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.html
+++ b/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.html
@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
-    <ion-title>Version History</ion-title>
+    <ion-title>Release Notes</ion-title>
   </ion-toolbar>
 </ion-header>
 
diff --git a/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.ts b/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.ts
index 83d21fc67..0e6dac0be 100644
--- a/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.ts
+++ b/ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.ts
@@ -14,14 +14,14 @@ export class AppReleaseNotes {
 
   constructor (
     private readonly route: ActivatedRoute,
-    public aaService: MarketplaceService,
+    public marketplaceService: MarketplaceService,
   ) { }
 
   ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
     const version = this.route.snapshot.paramMap.get('version')
-    if (!this.aaService.pkgs[this.pkgId]) {
-      this.aaService.setPkg(this.pkgId, version)
+    if (!this.marketplaceService.pkgs[this.pkgId]) {
+      this.marketplaceService.setPkg(this.pkgId, version)
     }
   }
 
diff --git a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
index ea7f2714c..192f4ced2 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
+++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
@@ -96,7 +96,7 @@
       <ion-item-divider>
         New in {{ pkg.manifest.version | displayEmver }}
         <ion-button [routerLink]="['notes']" style="position: absolute; right: 10px;" fill="clear" color="dark">
-          Release History
+          All Release Notes
           <ion-icon slot="end" name="arrow-forward-outline"></ion-icon>
         </ion-button>
       </ion-item-divider>
@@ -109,9 +109,7 @@
       <ion-item-divider>Description</ion-item-divider>
       <ion-item lines="none" color="transparent">
         <ion-label class="ion-text-wrap">
-          <ion-text>
-            <h5>{{ pkg.manifest.description.long }}</h5>
-          </ion-text>
+          <div id="release-notes" class="release-notes">{{ pkg.manifest.description.long }}</div>
         </ion-label>
       </ion-item>
       <!-- dependencies -->
@@ -137,14 +135,97 @@
             </ion-row>
           </ion-grid>
       </ng-container>
-
-      <!-- versions -->
-      <ion-item-divider>Additional Information</ion-item-divider>
-      <ion-item lines="none" button (click)="presentAlertVersions()" color="transparent">
-        <ion-icon color="dark" slot="start" name="file-tray-stacked-outline"></ion-icon>
-        <ion-label color="dark">Other versions</ion-label>
-      </ion-item>
     </ion-item-group>
 
+    <ion-item-divider>Additional Info</ion-item-divider>
+    <ion-card>
+      <ion-grid>
+        <ion-row>
+          <ion-col sizeSm="12" sizeMd="6">
+            <ion-item-group>
+              <ion-item detail="false">
+                <ion-label>
+                  <h2>Service ID</h2>
+                  <p>{{ pkg.manifest.id }}</p>
+                </ion-label>
+              </ion-item>
+              <ion-item detail="false">
+                <ion-label>
+                  <h2>Categories</h2>
+                  <p>{{ pkg.categories.join(', ') }}</p>
+                </ion-label>
+              </ion-item>
+              <ion-item detail="false">
+                <ion-label>
+                  <h2>Other Versions</h2>
+                  <p>Click to view other versions</p>
+                </ion-label>
+                <ion-button slot="end" fill="clear" (click)="presentAlertVersions()">
+                  <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
+                </ion-button>
+              </ion-item>
+              <ion-item detail="false">
+                <ion-label>
+                  <h2>License</h2>
+                  <p>{{ pkg.manifest.license }}</p>
+                </ion-label>
+                <ion-button slot="end" fill="clear" (click)="presentModalLicense()">
+                  <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
+                </ion-button>
+              </ion-item>
+            </ion-item-group>
+          </ion-col>
+          <ion-col>
+            <ion-item-group>
+              <ion-item detail="false">
+                <ion-label>
+                  <h2>Source Repository</h2>
+                  <p>{{ pkg.manifest['upstream-repo'] }}</p>
+                </ion-label>
+                <ion-button slot="end" fill="clear" [href]="pkg.manifest['upstream-repo']" target="_blank">
+                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
+                </ion-button>
+              </ion-item>
+              <ion-item detail="false">
+                <ion-label>
+                  <h2>Wrapper Repository</h2>
+                  <p>{{ pkg.manifest['wrapper-repo'] }}</p>
+                </ion-label>
+                <ion-button slot="end" fill="clear" [href]="pkg.manifest['wrapper-repo']" target="_blank">
+                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
+                </ion-button>
+              </ion-item>
+              <ion-item detail="false">
+                <ion-label>
+                  <h2>Support Site</h2>
+                  <p>{{ pkg.manifest['support-site'] }}</p>
+                </ion-label>
+                <ion-button slot="end" fill="clear" [href]="pkg.manifest['support-site']" target="_blank">
+                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
+                </ion-button>
+              </ion-item>
+              <ion-item detail="false">
+                <ion-label>
+                  <h2>Marketing Site</h2>
+                  <p>{{ pkg.manifest['marketing-site'] }}</p>
+                </ion-label>
+                <ion-button slot="end" fill="clear" [href]="pkg.manifest['marketing-site']" target="_blank">
+                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
+                </ion-button>
+              </ion-item>
+              <ion-item *ngIf="pkg.manifest['donation-url'] as donationUrl" detail="false">
+                <ion-label>
+                  <h2>Donation Site</h2>
+                  <p>{{ donationUrl }}</p>
+                </ion-label>
+                <ion-button slot="end" fill="clear" [href]="donationUrl" target="_blank">
+                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
+                </ion-button>
+              </ion-item>
+            </ion-item-group>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card>
   </ng-container>
-</ion-content>
\ No newline at end of file
+</ion-content>
diff --git a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.scss b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.scss
index 0b5a89dc0..db758772c 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.scss
+++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.scss
@@ -35,13 +35,7 @@
   color: var(--ion-color-danger);
 }
 
-ion-item-divider {
-  text-transform: uppercase;
-  margin-top: 22px;
-  font-weight: 400;
-}
-
 #release-notes {
   overflow: auto;
-  max-height: 160px;
+  max-height: 120px;
 }
diff --git a/ui/src/app/pages/marketplace-routes/marketplace.service.ts b/ui/src/app/pages/marketplace-routes/marketplace.service.ts
index 0bc87d496..504b659b7 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace.service.ts
+++ b/ui/src/app/pages/marketplace-routes/marketplace.service.ts
@@ -7,6 +7,7 @@ import { ApiService } from 'src/app/services/api/api.service'
 })
 export class MarketplaceService {
   pkgs: { [id: string]: AvailableShow } = { }
+  additionalInfo
 
   constructor (
     private readonly apiService: ApiService,
diff --git a/ui/src/app/pages/notifications/notifications.page.html b/ui/src/app/pages/notifications/notifications.page.html
index 089829f4b..03ea404d9 100644
--- a/ui/src/app/pages/notifications/notifications.page.html
+++ b/ui/src/app/pages/notifications/notifications.page.html
@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-buttons slot="start">
+    <ion-buttons slot="start" *ngIf="fromToast">
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
     <ion-title>Notifications</ion-title>
diff --git a/ui/src/app/pages/notifications/notifications.page.ts b/ui/src/app/pages/notifications/notifications.page.ts
index ddd5e6f4c..f39afcf28 100644
--- a/ui/src/app/pages/notifications/notifications.page.ts
+++ b/ui/src/app/pages/notifications/notifications.page.ts
@@ -3,6 +3,7 @@ import { ApiService } from 'src/app/services/api/api.service'
 import { LoaderService } from 'src/app/services/loader.service'
 import { ServerNotification, ServerNotifications } from 'src/app/services/api/api-types'
 import { AlertController } from '@ionic/angular'
+import { ActivatedRoute } from '@angular/router'
 
 @Component({
   selector: 'notifications',
@@ -15,15 +16,18 @@ export class NotificationsPage {
   notifications: ServerNotifications = []
   page = 1
   needInfinite = false
+  fromToast = false
   readonly perPage = 20
 
   constructor (
     private readonly apiService: ApiService,
     private readonly loader: LoaderService,
     private readonly alertCtrl: AlertController,
+    private readonly route: ActivatedRoute,
   ) { }
 
   async ngOnInit () {
+    this.fromToast = !!this.route.snapshot.queryParamMap.get('toast')
     this.notifications = await this.getNotifications()
     this.loading = false
   }
diff --git a/ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.html b/ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.html
index 51765defa..45e1ad0f1 100644
--- a/ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.html
+++ b/ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.html
@@ -4,7 +4,7 @@
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
     <ion-title>SSH Keys</ion-title>
-    <ion-buttons slot="end" class="ion-padding-end">
+    <ion-buttons slot="end">
       <ion-button (click)="presentModalAdd()">
         <ion-icon slot="icon-only" name="add-outline"></ion-icon>
       </ion-button>
diff --git a/ui/src/app/pages/server-routes/lan/lan.page.html b/ui/src/app/pages/server-routes/lan/lan.page.html
index cd9adcefe..35200aa65 100644
--- a/ui/src/app/pages/server-routes/lan/lan.page.html
+++ b/ui/src/app/pages/server-routes/lan/lan.page.html
@@ -13,7 +13,7 @@
     <!-- about -->
     <ion-item>
       <ion-label class="ion-text-wrap">
-        <p style="padding-bottom: 6px;">About</p>
+        <p class="ion-padding-bottom">About</p>
         <h2>You can connect to your Embassy over your Local Area Network (LAN). This can be useful for achieving a faster experience, as well as a fallback in case the Tor network is experiencing issues.</h2>
       </ion-label>
     </ion-item>
@@ -26,7 +26,7 @@
       <ion-item-divider></ion-item-divider>
       <ion-item>
         <ion-label class="ion-text-wrap">
-          <p style="padding-bottom: 4px;">Setup</p>
+          <p class="ion-padding-bottom">Setup</p>
           <ion-text color="warning" [innerHtml]="lanDisabledExplanation[lanDisabled]"></ion-text>
         </ion-label>
       </ion-item>
diff --git a/ui/src/app/pages/server-routes/lan/lan.page.scss b/ui/src/app/pages/server-routes/lan/lan.page.scss
index ae8a60ab4..e69de29bb 100644
--- a/ui/src/app/pages/server-routes/lan/lan.page.scss
+++ b/ui/src/app/pages/server-routes/lan/lan.page.scss
@@ -1,3 +0,0 @@
-.tiny-icon {
-  font-size: 12px;
-}
\ No newline at end of file
diff --git a/ui/src/app/pages/server-routes/server-backup/server-backup.page.html b/ui/src/app/pages/server-routes/server-backup/server-backup.page.html
index fd976b01f..ce8fcdd85 100644
--- a/ui/src/app/pages/server-routes/server-backup/server-backup.page.html
+++ b/ui/src/app/pages/server-routes/server-backup/server-backup.page.html
@@ -4,7 +4,7 @@
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
     <ion-title>Create Backup</ion-title>
-    <ion-buttons slot="end" class="ion-padding-end">
+    <ion-buttons slot="end">
       <ion-button (click)="doRefresh()">
         <ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
       </ion-button>
@@ -18,52 +18,56 @@
     <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
   </ion-item>
 
-  <ion-item class="ion-margin-bottom">
-    <ion-label class="ion-text-wrap">
-      <p><ion-text color="dark">About</ion-text></p>
-      <p>
-        Select a location to back up your Embassy. Because are diff-based, so your first backup will likely take much longer than subsequent backups.
-      </p>
-      <br />
-      <p>
-        During backup, your Embassy will be unusable.
-      </p>
-    </ion-label>
-  </ion-item>
-
   <ion-spinner *ngIf="loading; else loaded" name="lines" color="warning" class="center"></ion-spinner>
 
   <ng-template #loaded>
 
+    <ion-item class="ion-margin-bottom">
+      <ion-label class="ion-text-wrap">
+        <p class="ion-padding-bottom">About</p>
+        <h2>
+          Create frequent backups of your Embassy to avoid loss of data.
+        </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-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, partition.value)">
-            <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-grid>
+      <ion-row>
+        <ion-col *ngFor="let disk of disks | keyvalue" sizeSm="12" sizeMd="6">
+          <ion-card>
+            <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, partition.value)">
+                  <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-col>
+      </ion-row>
+    </ion-grid>
   </ng-template>
 
 </ion-content>
diff --git a/ui/src/app/pages/server-routes/server-logs/server-logs.page.html b/ui/src/app/pages/server-routes/server-logs/server-logs.page.html
index f2cef6767..c1b8be35c 100644
--- a/ui/src/app/pages/server-routes/server-logs/server-logs.page.html
+++ b/ui/src/app/pages/server-routes/server-logs/server-logs.page.html
@@ -4,7 +4,7 @@
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
     <ion-title>Logs</ion-title>
-    <ion-buttons slot="end" class="ion-padding-end">
+    <ion-buttons slot="end">
       <ion-button (click)="getLogs()">
         <ion-icon slot="icon-only" name="refresh-outline"></ion-icon>
       </ion-button>
diff --git a/ui/src/app/pages/server-routes/server-specs/server-specs.page.html b/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
index 2566c20ff..e6fb810c4 100644
--- a/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
+++ b/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
@@ -27,7 +27,7 @@
         <p>http://{{ server['tor-address'] }}</p>
       </ion-label>
       <ion-button slot="end" fill="clear" (click)="copy('http://' + server['tor-address'])">
-        <ion-icon slot="icon-only" name="copy-outline" color="primary"></ion-icon>
+        <ion-icon slot="icon-only" name="copy-outline"></ion-icon>
       </ion-button>
     </ion-item>
     <ion-item>
@@ -36,7 +36,7 @@
         <p>https://{{ server['lan-address'] }}</p>
       </ion-label>
       <ion-button slot="end" fill="clear" (click)="copy('https://' + server['lan-address'])">
-        <ion-icon slot="icon-only" name="copy-outline" color="primary"></ion-icon>
+        <ion-icon slot="icon-only" name="copy-outline"></ion-icon>
       </ion-button>
     </ion-item>
 
diff --git a/ui/src/app/pages/server-routes/wifi/wifi.page.html b/ui/src/app/pages/server-routes/wifi/wifi.page.html
index 800d8caf1..374bb9122 100644
--- a/ui/src/app/pages/server-routes/wifi/wifi.page.html
+++ b/ui/src/app/pages/server-routes/wifi/wifi.page.html
@@ -4,7 +4,7 @@
       <pwa-back-button></pwa-back-button>
     </ion-buttons>
     <ion-title>WiFi Settings</ion-title>
-    <ion-buttons slot="end" class="ion-padding-end">
+    <ion-buttons slot="end">
       <ion-button [routerLink]="['add']">
         <ion-icon slot="icon-only" name="add-outline"></ion-icon>
       </ion-button>
diff --git a/ui/src/app/services/api/mock-app-fixures.ts b/ui/src/app/services/api/mock-app-fixures.ts
index 52bec63c1..4677bafb8 100644
--- a/ui/src/app/services/api/mock-app-fixures.ts
+++ b/ui/src/app/services/api/mock-app-fixures.ts
@@ -410,9 +410,9 @@ export module Mock {
         versions: ['0.19.0', '0.20.0', '0.21.0'],
         'dependency-metadata': { },
         'release-notes': {
-          '0.19.0': 'release notes for Bitcoin 0.19.0',
-          '0.19.1': 'release notes for Bitcoin 0.19.1',
           '0.19.2': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
+          '0.19.1': 'release notes for Bitcoin 0.19.1',
+          '0.19.0': 'release notes for Bitcoin 0.19.0',
         },
       },
       '0.20.0': {
@@ -425,9 +425,9 @@ export module Mock {
         versions: ['0.19.0', '0.20.0', '0.21.0'],
         'dependency-metadata': { },
         'release-notes': {
-          '0.19.0': 'release notes for Bitcoin 0.19.0',
-          '0.19.1': 'release notes for Bitcoin 0.19.1',
           '0.19.2': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
+          '0.19.1': 'release notes for Bitcoin 0.19.1',
+          '0.19.0': 'release notes for Bitcoin 0.19.0',
         },
       },
       '0.21.0': {
@@ -441,9 +441,9 @@ export module Mock {
         versions: ['0.19.0', '0.20.0', '0.21.0'],
         'dependency-metadata': { },
         'release-notes': {
-          '0.19.0': 'release notes for Bitcoin 0.19.0',
-          '0.19.1': 'release notes for Bitcoin 0.19.1',
           '0.19.2': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
+          '0.19.1': 'release notes for Bitcoin 0.19.1',
+          '0.19.0': 'release notes for Bitcoin 0.19.0',
         },
       },
       'latest': {
@@ -456,9 +456,9 @@ export module Mock {
         versions: ['0.19.0', '0.20.0', '0.21.0'],
         'dependency-metadata': { },
         'release-notes': {
-          '0.19.2': 'release notes for Bitcoin 0.19.2',
-          '0.20.0': 'release notes for Bitcoin 0.20.0',
           '0.21.0': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
+          '0.20.0': 'release notes for Bitcoin 0.20.0',
+          '0.19.2': 'release notes for Bitcoin 0.19.2',
         },
       },
     },
@@ -483,9 +483,9 @@ export module Mock {
           },
         },
         'release-notes': {
-          '0.19.0': 'release notes for LND 0.19.0',
-          '0.19.1': 'release notes for LND 0.19.1',
           '0.19.2': 'release notes for LND 0.19.2',
+          '0.19.1': 'release notes for LND 0.19.1',
+          '0.19.0': 'release notes for LND 0.19.0',
         },
       },
       '0.11.1': {
@@ -508,9 +508,9 @@ export module Mock {
           },
         },
         'release-notes': {
-          '0.19.0': 'release notes for LND 0.19.0',
-          '0.19.1': 'release notes for LND 0.19.1',
           '0.19.2': 'release notes for LND 0.19.2',
+          '0.19.1': 'release notes for LND 0.19.1',
+          '0.19.0': 'release notes for LND 0.19.0',
         },
       },
       'latest': {
@@ -529,9 +529,9 @@ export module Mock {
           },
         },
         'release-notes': {
-          '0.19.0': 'release notes for LND 0.19.0',
-          '0.19.1': 'release notes for LND 0.19.1',
           '0.19.2': 'release notes for LND 0.19.2',
+          '0.19.1': 'release notes for LND 0.19.1',
+          '0.19.0': 'release notes for LND 0.19.0',
         },
       },
     },
@@ -548,9 +548,9 @@ export module Mock {
           },
         },
         'release-notes': {
-          '0.19.0': 'release notes for btc proxy 0.19.0',
-          '0.19.1': 'release notes for btc proxy 0.19.1',
           '0.19.2': 'release notes for btc proxy 0.19.2',
+          '0.19.1': 'release notes for btc proxy 0.19.1',
+          '0.19.0': 'release notes for btc proxy 0.19.0',
         },
       },
     },
diff --git a/ui/src/global.scss b/ui/src/global.scss
index 2f22ee4a3..458dfcd80 100644
--- a/ui/src/global.scss
+++ b/ui/src/global.scss
@@ -47,21 +47,10 @@
   z-index: 40000 !important;
 }
 
-.alert-danger {
-  color: var(--ion-color-danger) !important;
-  & ion-icon {
-    color: var(--ion-color-danger) !important;
-  }
-}
-
 .borderless {
   border-style: none;
 }
 
-.help-button {
-  margin: 0 8px 0 0;
-}
-
 .item-interactive {
   --highlight-background: transparent !important;
 }
@@ -95,6 +84,7 @@
 }
 
 ion-card-title {
+  color: var(--ion-color-dark);
   font-family: 'Montserrat';
 }
 
@@ -120,6 +110,9 @@ ion-badge {
 
 ion-item-divider {
   --background: transparent;
+  text-transform: uppercase;
+  margin-top: 16px;
+  font-weight: 400;
 }
 
 ion-infinite-scroll ion-infinite-scroll-content {
@@ -132,6 +125,13 @@ ion-action-sheet {
 
 ion-alert {
   --backdrop-opacity: 0.75 !important;
+  .alert-button {
+    color: var(--ion-color-dark) !important;
+  }
+}
+
+ion-button {
+  --color: var(--ion-color-dark) !important;
 }
 
 ion-loading {
@@ -292,3 +292,7 @@ ion-item-divider {
   width: 16px !important;
   height: 16px !important;
 }
+
+h2 {
+  line-height: unset;
+}
diff --git a/ui/src/theme/variables.scss b/ui/src/theme/variables.scss
index d710b5ad7..10dedbcf3 100644
--- a/ui/src/theme/variables.scss
+++ b/ui/src/theme/variables.scss
@@ -142,8 +142,6 @@ body.dark {
   --ion-color-light-contrast-rgb: 255,255,255;
   --ion-color-light-shade: #1e2023;
   --ion-color-light-tint: #383a3e;
-
-  --ion-color-start9: #FF4960;
 }
 
 /*