UI cosmetic improvements (#1486)

* resize alerts and modals

* fix log color

* closes #1404

Co-authored-by: Matt Hill <matthill@Matt-M1.local>

frontend/projects/shared/styles/shared.scss

@@ -1,7 +1,15 @@
+$wide-modal: 900px;
+
 ion-input {
   caret-color: gray;
 }
 
+ion-alert {
+  .alert-wrapper {
+    --min-width: 320px;
+  }
+}
+
 ion-modal::part(content) {
   position: absolute;
   height: 90% !important;
@@ -15,16 +23,6 @@ ion-modal::part(content) {
   box-shadow: 0 0 70px 70px black;
 }
 
-@media (min-width: 1000px) {
-  ion-modal::part(content) {
-    position: absolute;
-    height: 80% !important;
-    top: 10%;
-    width: 50% !important;
-    left: 25%;
-  }
-}
-
 .alertlike-modal {
   &::part(content) {
     max-height: 380px !important;
@@ -36,10 +34,25 @@ ion-modal::part(content) {
 }
 
 @media (min-width: 1000px) {
+  ion-modal::part(content) {
+    position: absolute;
+    height: 80% !important;
+    top: 10%;
+    width: $wide-modal !important;
+    left: calc((100vw - $wide-modal) / 2) !important;
+  }
+
   .alertlike-modal {
     &::part(content) {
-      width: 60% !important;
+      width: $wide-modal !important;
-      left: 20% !important;
+      left: calc((100vw - $wide-modal) / 2) !important;
+    }
+  }
+
+  ion-alert {
+    .alert-wrapper {
+      --width: 50%;
+      --max-width: 500px;
     }
   }
 }

frontend/projects/ui/src/app/app/global/services/update-toast.service.ts

@@ -78,7 +78,6 @@ export class UpdateToastService extends Observable<unknown> {
 const LOADER: LoadingOptions = {
   spinner: 'lines',
   message: 'Restarting...',
-  cssClass: 'loader',
 }
 
 const TOAST: ToastOptions = {

frontend/projects/ui/src/app/app/snek/snek.directive.ts

@@ -33,7 +33,6 @@ export class SnekDirective {
       if (data?.highScore > highScore) {
         const loader = await this.loadingCtrl.create({
           spinner: 'lines',
-          cssClass: 'loader',
           message: 'Saving High Score...',
         })
 

frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.ts

@@ -144,7 +144,6 @@ export class BackupDrivesComponent {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Testing connectivity to shared folder...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -203,7 +202,6 @@ export class BackupDrivesComponent {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Testing connectivity to shared folder...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -221,7 +219,6 @@ export class BackupDrivesComponent {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Removing...',
-      cssClass: 'loader',
     })
     await loader.present()
 

frontend/projects/ui/src/app/components/logs/logs.page.ts

@@ -5,6 +5,9 @@ import { RR } from 'src/app/services/api/api.types'
 var Convert = require('ansi-to-html')
 var convert = new Convert({
   bg: 'transparent',
+  colors: {
+    4: 'Cyan',
+  },
 })
 
 @Component({

frontend/projects/ui/src/app/modals/app-config/app-config.page.ts

@@ -140,7 +140,6 @@ export class AppConfigPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: `Saving config. This could take a while...`,
-      cssClass: 'loader',
     })
     await loader.present()
 

frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts

@@ -70,7 +70,6 @@ export class AppRecoverSelectPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Initializing...',
-      cssClass: 'loader',
     })
     await loader.present()
 

frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts

@@ -102,7 +102,7 @@ export class AppActionsPage {
               handler: () => {
                 this.executeAction(action.key)
               },
-              cssClass: 'wide-alert enter-click',
+              cssClass: 'enter-click',
             },
           ],
         })
@@ -159,7 +159,6 @@ export class AppActionsPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Executing action...',
-      cssClass: 'loader',
     })
     await loader.present()
 

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.ts

@@ -116,7 +116,6 @@ export class AppShowStatusComponent {
       const loader = await this.loadingCtrl.create({
         message: `Stopping...`,
         spinner: 'lines',
-        cssClass: 'loader',
       })
       await loader.present()
 
@@ -143,7 +142,6 @@ export class AppShowStatusComponent {
     const loader = await this.loadingCtrl.create({
       message: `Starting...`,
       spinner: 'lines',
-      cssClass: 'loader',
     })
     await loader.present()
 

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

@@ -143,7 +143,6 @@ export class DeveloperListPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Creating Project...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -191,7 +190,6 @@ export class DeveloperListPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Saving...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -208,7 +206,6 @@ export class DeveloperListPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Removing Project...',
-      cssClass: 'loader',
     })
     await loader.present()
 

frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.ts

@@ -72,7 +72,6 @@ export class DeveloperMenuPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Saving...',
-      cssClass: 'loader',
     })
     await loader.present()
 

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

@@ -36,7 +36,6 @@ export class LoginPage {
     this.loader = await this.loadingCtrl.create({
       message: 'Logging in',
       spinner: 'lines',
-      cssClass: 'loader',
     })
     await this.loader.present()
 

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

@@ -21,7 +21,8 @@
         <marketplace-item [pkg]="pkg">
           <marketplace-status
             class="status"
-            [pkg]="localPkgs[pkg.manifest.id]"
+            [version]="pkg.manifest.version"
+            [localPkg]="localPkgs[pkg.manifest.id]"
           ></marketplace-status>
         </marketplace-item>
       </ion-col>

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

@@ -6,7 +6,8 @@
       <marketplace-package [pkg]="pkg">
         <marketplace-status
           class="status"
-          [pkg]="localPkg$ | async"
+          [version]="pkg.manifest.version"
+          [localPkg]="localPkg$ | async"
         ></marketplace-status>
         <marketplace-show-controls
           position="controls"

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/marketplace-status.component.html

@@ -1,9 +1,15 @@
-<ng-container *ngIf="pkg; else none" [ngSwitch]="pkg.state">
+<ng-container *ngIf="localPkg; else none" [ngSwitch]="localPkg.state">
   <div *ngSwitchCase="PackageState.Installed">
-    <ion-text *ngIf="(version | compareEmver: version) === 0" color="success">
+    <ion-text
+      *ngIf="(version | compareEmver: localVersion) === 0"
+      color="success"
+    >
       Installed
     </ion-text>
-    <ion-text *ngIf="(version | compareEmver: version) === 1" color="warning">
+    <ion-text
+      *ngIf="(version | compareEmver: localVersion) === 1"
+      color="warning"
+    >
       Update Available
     </ion-text>
   </div>
@@ -15,7 +21,7 @@
   </div>
   <div *ngSwitchDefault>
     <ion-text
-      *ngIf="pkg['install-progress'] | installProgress as progress"
+      *ngIf="localPkg['install-progress'] | installProgress as progress"
       color="primary"
     >
       Installing

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/marketplace-status.component.ts

@@ -8,11 +8,13 @@ import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 })
 export class MarketplaceStatusComponent {
   @Input()
-  pkg?: PackageDataEntry
+  version: string
+  @Input()
+  localPkg?: PackageDataEntry
 
   PackageState = PackageState
 
-  get version(): string {
+  get localVersion(): string {
-    return this.pkg?.manifest.version || ''
+    return this.localPkg?.manifest.version || ''
   }
 }

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

@@ -70,7 +70,6 @@ export class NotificationsPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Deleting...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -118,11 +117,11 @@ export class NotificationsPage {
     await modal.present()
   }
 
-  async viewFullMessage(title: string, message: string) {
+  async viewFullMessage(header: string, message: string) {
     const alert = await this.alertCtrl.create({
-      header: title,
+      header,
-      message: message,
+      message,
-      cssClass: 'wider-alert',
+      cssClass: 'notification-detail-alert',
       buttons: [
         {
           text: `OK`,
@@ -159,7 +158,6 @@ export class NotificationsPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Deleting...',
-      cssClass: 'loader',
     })
     await loader.present()
 

frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.page.ts

@@ -138,7 +138,6 @@ export class MarketplacesPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Validating Marketplace...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -183,7 +182,6 @@ export class MarketplacesPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Deleting...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -211,7 +209,6 @@ export class MarketplacesPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Validating Marketplace...',
-      cssClass: 'loader',
     })
 
     await loader.present()
@@ -254,7 +251,6 @@ export class MarketplacesPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Validating Marketplace...',
-      cssClass: 'loader',
     })
     await loader.present()
 

frontend/projects/ui/src/app/pages/server-routes/preferences/preferences.page.ts

@@ -68,7 +68,6 @@ export class PreferencesPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Saving...',
-      cssClass: 'loader',
     })
     await loader.present()
 

frontend/projects/ui/src/app/pages/server-routes/restore/restore.component.ts

@@ -66,7 +66,6 @@ export class RestorePage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Decrypting drive...',
-      cssClass: 'loader',
     })
     await loader.present()
 

frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts

@@ -155,7 +155,6 @@ export class ServerBackupPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Beginning backup...',
-      cssClass: 'loader',
     })
     await loader.present()
 

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

@@ -180,7 +180,6 @@ export class ServerShowPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Restarting...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -197,7 +196,6 @@ export class ServerShowPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Shutting down...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -214,7 +212,6 @@ export class ServerShowPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Hard Restarting...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -231,7 +228,6 @@ export class ServerShowPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Checking for updates',
-      cssClass: 'loader',
     })
     await loader.present()
 

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

@@ -55,7 +55,6 @@ export class SessionsPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Killing session...',
-      cssClass: 'loader',
     })
     await loader.present()
 

frontend/projects/ui/src/app/pages/server-routes/ssh-keys/ssh-keys.page.ts

@@ -66,7 +66,6 @@ export class SSHKeysPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Saving...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -103,7 +102,6 @@ export class SSHKeysPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Deleting...',
-      cssClass: 'loader',
     })
     await loader.present()
 

frontend/projects/ui/src/app/pages/server-routes/wifi/wifi.page.ts

@@ -68,7 +68,7 @@ export class WifiPage {
             role: 'cancel',
           },
         ],
-        cssClass: 'wide-alert enter-click',
+        cssClass: 'enter-click',
       })
       await alert.present()
       return
@@ -103,7 +103,7 @@ export class WifiPage {
           },
         },
       ],
-      cssClass: 'wide-alert enter-click select-warning',
+      cssClass: 'enter-click select-warning',
     })
     await alert.present()
   }
@@ -171,7 +171,6 @@ export class WifiPage {
   private async setCountry(country: string): Promise<void> {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -264,7 +263,6 @@ export class WifiPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Connecting. This could take a while...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -282,7 +280,6 @@ export class WifiPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Deleting...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -301,7 +298,6 @@ export class WifiPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Saving...',
-      cssClass: 'loader',
     })
     await loader.present()
 
@@ -324,7 +320,6 @@ export class WifiPage {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
       message: 'Connecting. This could take a while...',
-      cssClass: 'loader',
     })
     await loader.present()
 

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

@@ -796,7 +796,7 @@ export module Mock {
       code: 4,
       level: NotificationLevel.Error,
       title: 'Service Crashed',
-      message: new Array(50)
+      message: new Array(40)
         .fill(
           `2021-11-27T18:36:30.451064Z 2021-11-27T18:36:30Z tor: Thread interrupt
         2021-11-27T18:36:30.452833Z 2021-11-27T18:36:30Z Shutdown: In progress...
@@ -922,7 +922,7 @@ export module Mock {
     {
       timestamp: '2019-12-26T14:21:30.872Z',
       message:
-        '2021/11/09 22:55:04 \u001b[0;32;49mPOST \u001b[0;32;49m200\u001b[0m photoview.embassy/api/graphql \u001b[0;36;49m1.169406ms\u001b[0m unauthenticated',
+        '2021/11/09 22:55:04 \u001b[34mPOST \u001b[0;32;49m200\u001b[0m photoview.embassy/api/graphql \u001b[0;36;49m1.169406ms\u001b[0m unauthenticated',
     },
     {
       timestamp: '2019-12-26T14:22:30.872Z',

frontend/projects/ui/src/app/services/api/mock-patch.ts

@@ -19,7 +19,7 @@ export const mockPatchData: DataModel = {
     gaming: undefined,
   },
   'server-info': {
-    id: 'embassy-abcdefgh',
+    id: 'abcdefgh',
     version: '0.3.1',
     'last-backup': null,
     'lan-address': 'https://embassy-abcdefgh.local',

frontend/projects/ui/src/app/services/marketplace.service.ts

@@ -117,7 +117,6 @@ export class MarketplaceService extends AbstractMarketplaceService {
         this.loadingCtrl.create({
           spinner: 'lines',
           message: 'Beginning Installation',
-          cssClass: 'loader',
         }),
       ),
     ).pipe(

frontend/projects/ui/src/app/services/server-config.service.ts

@@ -31,7 +31,6 @@ export class ServerConfigService {
           const loader = await this.loadingCtrl.create({
             spinner: 'lines',
             message: 'Saving...',
-            cssClass: 'loader',
           })
           loader.present()
 

frontend/projects/ui/src/styles.scss

@@ -63,10 +63,6 @@ $subheader-height: 48px;
   color: var(--ion-color-warning);
 }
 
-.wide-alert {
-  --min-width: 400px;
-}
-
 .break-all {
   word-break: break-all;
 }
@@ -81,20 +77,6 @@ $subheader-height: 48px;
   }
 }
 
-.item-subdivider {
-  padding: 0 16px;
-  margin-top: 0;
-}
-
-.loader {
-  --spinner-color: var(--ion-color-warning) !important;
-  z-index: 40000 !important;
-}
-
-.borderless {
-  border-style: none;
-}
-
 .center {
   display: block;
   margin: auto;
@@ -216,8 +198,15 @@ ion-button {
   }
 }
 
-.wider-alert .alert-wrapper {
+.notification-detail-alert {
-  min-width: 60% !important;
+  .alert-wrapper {
+    --max-height: 80% !important;
+    --width: 90% !important;
+    --max-width: 900px !important;
+  }
+  .alert-message {
+    max-height: unset;
+  }
 }
 
 ion-slides {
@@ -251,7 +240,8 @@ ion-label {
 }
 
 ion-loading {
-  z-index: 100 !important;
+  --spinner-color: var(--ion-color-warning) !important;
+  z-index: 40000 !important;
 }
 
 .swiper-pagination {