UI cosmetic improvements (#1486)

* resize alerts and modals * fix log color * closes #1404 Co-authored-by: Matt Hill <matthill@Matt-M1.local>
2026-03-26 02:11:53 +00:00 · 2022-06-06 11:31:45 -06:00
parent 18e2c610bc
commit d53e295569
30 changed files with 68 additions and 90 deletions
--- a/frontend/projects/shared/styles/shared.scss
+++ b/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;
-      left: 20% !important;
+      width: $wide-modal !important;
+      left: calc((100vw - $wide-modal) / 2) !important;
+    }
+  }
+
+  ion-alert {
+    .alert-wrapper {
+      --width: 50%;
+      --max-width: 500px;
    }
  }
 }
--- a/frontend/projects/ui/src/app/app/global/services/update-toast.service.ts
+++ b/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 = {
--- a/frontend/projects/ui/src/app/app/snek/snek.directive.ts
+++ b/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...',
        })

--- a/frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/components/logs/logs.page.ts
+++ b/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({
--- a/frontend/projects/ui/src/app/modals/app-config/app-config.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/login/login.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list-content/marketplace-list-content.component.html
+++ b/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>
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
+++ b/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"
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/marketplace-status.component.html
+++ b/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
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-status/marketplace-status.component.ts
+++ b/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 {
-    return this.pkg?.manifest.version || ''
+  get localVersion(): string {
+    return this.localPkg?.manifest.version || ''
  }
 }
--- a/frontend/projects/ui/src/app/pages/notifications/notifications.page.ts
+++ b/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,
-      message: message,
-      cssClass: 'wider-alert',
+      header,
+      message,
+      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()

--- a/frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/server-routes/preferences/preferences.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/server-routes/restore/restore.component.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/server-routes/sessions/sessions.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/server-routes/ssh-keys/ssh-keys.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/pages/server-routes/wifi/wifi.page.ts
+++ b/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()

--- a/frontend/projects/ui/src/app/services/api/api.fixures.ts
+++ b/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',
--- a/frontend/projects/ui/src/app/services/api/mock-patch.ts
+++ b/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',
--- a/frontend/projects/ui/src/app/services/marketplace.service.ts
+++ b/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(
--- a/frontend/projects/ui/src/app/services/server-config.service.ts
+++ b/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()

--- a/frontend/projects/ui/src/styles.scss
+++ b/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 {
-  min-width: 60% !important;
+.notification-detail-alert {
+  .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 {