closes #1900 (#1920)

* closes #1900

* fix refresh bug

Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>

frontend/projects/setup-wizard/src/app/pages/home/home.page.ts

@@ -47,7 +47,7 @@ export class HomePage {
   }
 
   async ionViewDidEnter() {
-    this.loaded = true // needed to accomodate autoHight="true" on swiper. Otherwise Swiper height might be 0 when navigatging *to* this page from later page. Happens on refresh.
+    this.loaded = true // needed to accommodate autoHight="true" on swiper. Otherwise Swiper height might be 0 when navigating *to* this page from later page. Happens on refresh.
     if (this.swiper) {
       this.swiper.allowTouchMove = false
     }

frontend/projects/ui/src/app/components/toast-container/refresh-alert/refresh-alert.component.html

@@ -1,5 +1,9 @@
-<alert *ngIf="show$ | async" header="Refresh needed" (dismiss)="onDismiss()">
+<alert *ngIf="show$ | async" header="Refresh Needed" (dismiss)="onDismiss()">
   Your user interface is cached and out of date. Hard refresh the page to get
   the latest UI.
-  <a alertButton class="enter-click" href=".">Refresh Page</a>
+  <ul>
+    <li><b>On Mac</b>: cmd + shift + R</li>
+    <li><b>On Linux/Windows</b>: ctrl + shift + R</li>
+  </ul>
+  <a alertButton class="enter-click" role="cancel">Ok</a>
 </alert>

frontend/projects/ui/src/app/components/toast-container/refresh-alert/refresh-alert.service.ts

@@ -6,7 +6,6 @@ import { PatchDB } from 'patch-db-client'
 import { ConfigService } from '../../../services/config.service'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 
-// Watch for connection status
 @Injectable({ providedIn: 'root' })
 export class RefreshAlertService extends Observable<boolean> {
   private readonly stream$ = this.patch.watch$('server-info', 'version').pipe(