Update/misc UI fixes (#1961)

* fix login error message spacing and ensure not longer than 64 chars

* spinner color to tertiary

* totally responsive homepage cards

* copy changes, back button for marketplace, minor styling

* center setup wizard tiles; adjust external link style

* remove cert note from setup success

* convert launch card to go to login button

* change system settings to system; update icons

* refactor card widget input as full card details; more card resizing for home page

* cleanup

* clean up widget params

* delete contructor

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

frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts

@@ -56,7 +56,7 @@ export class ToButtonsPipe implements PipeTransform {
           this.modalService.presentModalConfig({ pkgId: pkg.manifest.id }),
         title: 'Config',
         description: `Customize ${pkgTitle}`,
-        icon: 'construct-outline',
+        icon: 'options-outline',
       },
       // properties
       {

frontend/projects/ui/src/app/pages/home/home.page.html

@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content>
-  <div style="padding: 36px 0">
+  <div class="padding-top">
     <widget-list></widget-list>
   </div>
 </ion-content>

frontend/projects/ui/src/app/pages/home/home.page.scss

@@ -0,0 +1,9 @@
+.padding-top {
+  padding-top: 2rem;
+}
+
+@media (min-width: 2000px) {
+  .padding-top {
+    padding-top: 10rem;
+  }
+}

frontend/projects/ui/src/app/pages/login/login.page.html

@@ -39,9 +39,6 @@
                     ></ion-icon>
                   </ion-button>
                 </ion-item>
-                <p style="text-align: left; padding-top: 4px">
-                  <ion-text color="danger">{{ error }}</ion-text>
-                </p>
               </ion-item-group>
               <ion-button
                 class="login-button"
@@ -51,6 +48,9 @@
               >
                 <span style="font-size: larger; font-weight: bold">Login</span>
               </ion-button>
+              <p style="text-align: left; padding-top: 4px">
+                <ion-text color="danger">{{ error }}</ion-text>
+              </p>
             </form>
           </ion-card-content>
         </ion-card>

frontend/projects/ui/src/app/pages/login/login.page.scss

@@ -28,6 +28,7 @@ ion-card {
   background: var(--ion-color-step-200);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 44px;
+  min-height: 16rem;
 }
 
 .input-label {

frontend/projects/ui/src/app/pages/login/login.page.ts

@@ -40,6 +40,10 @@ export class LoginPage {
 
     try {
       document.cookie = ''
+      if (this.password.length > 64) {
+        this.error = 'Password must be less than 65 characters'
+        return
+      }
       await this.api.login({
         password: this.password,
         metadata: { platforms: getPlatforms() },

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

@@ -1,5 +1,8 @@
 <ion-header>
   <ion-toolbar>
+    <ion-buttons slot="start" *ngIf="back">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
     <ion-title>Marketplace</ion-title>
     <ion-buttons slot="end">
       <badge-menu-button></badge-menu-button>

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
 import { ModalController } from '@ionic/angular'
 import { AbstractMarketplaceService } from '@start9labs/marketplace'
 import { PatchDB } from 'patch-db-client'
@@ -15,6 +16,8 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MarketplaceListPage {
+  readonly back = !!this.route.snapshot.queryParamMap.get('back')
+
   readonly store$ = this.marketplaceService.getSelectedStore$().pipe(
     filter(Boolean),
     map(({ info, packages }) => {
@@ -73,6 +76,7 @@ export class MarketplaceListPage {
     private readonly marketplaceService: MarketplaceService,
     private readonly modalCtrl: ModalController,
     private readonly config: ConfigService,
+    private readonly route: ActivatedRoute,
   ) {}
 
   category = 'featured'

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-routing.module.ts

@@ -4,11 +4,7 @@ import { Routes, RouterModule } from '@angular/router'
 const routes: Routes = [
   {
     path: '',
-    redirectTo: 'browse',
     pathMatch: 'full',
-  },
-  {
-    path: 'browse',
     loadChildren: () =>
       import('./marketplace-list/marketplace-list.module').then(
         m => m.MarketplaceListPageModule,

frontend/projects/ui/src/app/pages/notifications/notifications.page.ts

@@ -26,7 +26,7 @@ export class NotificationsPage {
   notifications: ServerNotifications = []
   beforeCursor?: number
   needInfinite = false
-  fromToast = false
+  fromToast = !!this.route.snapshot.queryParamMap.get('toast')
   readonly perPage = 40
   readonly packageData$ = this.patch.watch$('package-data')
 
@@ -41,7 +41,6 @@ export class NotificationsPage {
   ) {}
 
   async ngOnInit() {
-    this.fromToast = !!this.route.snapshot.queryParamMap.get('toast')
     this.notifications = await this.getNotifications()
     this.loading = false
   }

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

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title> System Settings </ion-title>
+    <ion-title> System </ion-title>
     <ion-buttons slot="end">
       <badge-menu-button></badge-menu-button>
     </ion-buttons>