rework ca-wiz and add icons to menu for warnings

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

@@ -45,18 +45,7 @@ export class SuccessPage {
 
   async ngAfterViewInit() {
     this.ngZone.runOutsideAngular(() => this.initMatrix())
-    try {
-      const ret = await this.api.complete()
-      if (!this.isKiosk) {
-        this.torAddress = ret['tor-address']
-        this.lanAddress = ret['lan-address'].replace(/^https:/, 'http:')
-        this.cert = ret['root-ca']
-
-        await this.api.exit()
-      }
-    } catch (e: any) {
-      await this.errCtrl.present(e)
-    }
+    setTimeout(() => this.complete(), 1000)
   }
 
   download() {
@@ -83,6 +72,21 @@ export class SuccessPage {
     this.api.exit()
   }
 
+  private async complete() {
+    try {
+      const ret = await this.api.complete()
+      if (!this.isKiosk) {
+        this.torAddress = ret['tor-address']
+        this.lanAddress = ret['lan-address'].replace(/^https:/, 'http:')
+        this.cert = ret['root-ca']
+
+        await this.api.exit()
+      }
+    } catch (e: any) {
+      await this.errCtrl.present(e)
+    }
+  }
+
   private initMatrix() {
     this.ctx = this.canvas.nativeElement.getContext('2d')!
     this.canvas.nativeElement.width = window.innerWidth

frontend/projects/ui/src/app/app/menu/menu.component.html

@@ -22,11 +22,17 @@
       <ion-label class="label montserrat" routerLinkActive="label_selected">
         {{ page.title }}
       </ion-label>
+      <ion-icon
+        *ngIf="page.url === '/system' && (warning$ | async)"
+        color="warning"
+        size="small"
+        name="warning"
+      ></ion-icon>
       <ion-icon
         *ngIf="page.url === '/system' && (showEOSUpdate$ | async)"
         color="success"
         size="small"
-        name="rocket-outline"
+        name="rocket"
       ></ion-icon>
       <ion-badge
         *ngIf="page.url === '/updates' && (updateCount$ | async) as updateCount"

frontend/projects/ui/src/app/app/menu/menu.component.ts

@@ -11,7 +11,9 @@ import {
   filter,
   first,
   map,
+  merge,
   Observable,
+  of,
   pairwise,
   startWith,
   switchMap,
@@ -22,6 +24,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
 import { SplitPaneTracker } from 'src/app/services/split-pane.service'
 import { Emver, THEME } from '@start9labs/shared'
 import { ConnectionService } from 'src/app/services/connection.service'
+import { ConfigService } from 'src/app/services/config.service'
 
 @Component({
   selector: 'app-menu',
@@ -111,6 +114,11 @@ export class MenuComponent {
 
   readonly theme$ = inject(THEME)
 
+  readonly warning$ = merge(
+    of(this.config.isTorHttp()),
+    this.patch.watch$('server-info', 'ntp-synced').pipe(map(synced => !synced)),
+  )
+
   constructor(
     private readonly patch: PatchDB<DataModel>,
     private readonly eosService: EOSService,
@@ -119,5 +127,6 @@ export class MenuComponent {
     private readonly splitPane: SplitPaneTracker,
     private readonly emver: Emver,
     private readonly connectionService: ConnectionService,
+    private readonly config: ConfigService,
   ) {}
 }

frontend/projects/ui/src/app/components/widget-card/widget-card.component.scss

@@ -19,33 +19,35 @@ ion-card {
     font-family: 'Open Sans';
     padding: 0.6rem;
     font-weight: 600;
-    font-size: calc(12px + 0.5vw);
-    height: 3rem;
+    height: 2.4rem;
   }
 
   ion-card-content {
-    min-height: 9rem;
+    min-height: 8rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 
     ion-icon {
-      font-size: calc(90px + 0.5vw);
+      font-size: calc(90px + 0.4vw);
       --ionicon-stroke-width: 1rem;
     }
   }
 
   ion-footer {
-    padding: 1rem;
+    padding: 0 1rem;
     font-family: 'Open Sans';
     font-size: clamp(1rem, calc(12px + 0.5vw), 1.3rem);
-    height: 9rem;
+    height: 4.5rem;
     width: clamp(13rem, 80%, 18rem);
     margin: 0 auto;
     * {
       max-width: 100%;
     }
+    p {
+      margin-top: 0;
+    }
   }
 
   .footer-md::before {
@@ -54,9 +56,6 @@ ion-card {
 }
 
 @media (max-width: 900px) {
-  ion-card-title, ion-footer {
-    height: auto !important;
-  }
   ion-footer {
     width: 10rem;
   }

frontend/projects/ui/src/app/components/widget-list/widget-list.component.html

@@ -1,14 +1,7 @@
 <div #gridContent>
   <ion-grid>
     <ion-row class="ion-justify-content-center ion-align-items-center">
-      <ion-col
-        *ngFor="let card of cards"
-        responsiveCol
-        sizeLg="4"
-        sizeSm="6"
-        sizeXs="12"
-        class="ion-align-self-center"
-      >
+      <ion-col *ngFor="let card of cards" sizeXs="12">
         <widget-card
           [cardDetails]="card"
           [containerDimensions]="containerDimensions"

frontend/projects/ui/src/app/components/widget-list/widget-list.component.scss

@@ -3,11 +3,17 @@ ion-col {
   --ion-grid-column-padding: 1rem;
 }
 
-@media (min-width: 1800px) {
+@media (min-width: 1700px) {
   div {
-    padding: 0 20%;
+    padding: 0 7%;
   }
   ion-col {
     max-width: 24rem !important;
   }
+}
+
+@media (min-width: 2000px) {
+  div {
+    padding: 0 12%;
+  }
 }

frontend/projects/ui/src/app/components/widget-list/widget-list.component.ts

@@ -38,33 +38,33 @@ export class WidgetListComponent {
 
   cards: Card[] = [
     {
-      title: 'Visit the Marketplace',
+      title: 'Server Info',
+      icon: 'information-circle-outline',
+      color: 'var(--alt-green)',
+      description: 'View information about your server',
+      link: '/system/specs',
+    },
+    {
+      title: 'Browse',
       icon: 'storefront-outline',
-      color: 'var(--alt-blue)',
-      description: 'Shop for your favorite open source services',
+      color: 'var(--alt-purple)',
+      description: 'Browse for services to install',
       link: '/marketplace',
       qp: { back: 'true' },
     },
-    {
-      title: 'Root CA',
-      icon: 'ribbon-outline',
-      color: 'var(--alt-orange)',
-      description: `Download and trust your server's root certificate authority`,
-      link: '/system/root-ca',
-    },
     {
       title: 'Create Backup',
       icon: 'duplicate-outline',
-      color: 'var(--alt-purple)',
+      color: 'var(--alt-blue)',
       description: 'Back up StartOS and service data',
       link: '/system/backup',
     },
     {
-      title: 'Server Info',
-      icon: 'information-circle-outline',
-      color: 'var(--alt-green)',
-      description: 'View basic information about your server',
-      link: '/system/specs',
+      title: 'Monitor',
+      icon: 'pulse-outline',
+      color: 'var(--alt-orange)',
+      description: `View your system resource usage`,
+      link: '/system/metrics',
     },
     {
       title: 'User Manual',
@@ -77,7 +77,7 @@ export class WidgetListComponent {
       title: 'Contact Support',
       icon: 'chatbubbles-outline',
       color: 'var(--alt-red)',
-      description: 'Get help from the Start9 team and community',
+      description: 'Get help from the Start9 community',
       link: 'https://start9.com/contact',
     },
   ]