react to enter key for alerts and modals. Styling and logic

ui/src/app/modals/app-config/app-config.page.html

@@ -1,9 +1,14 @@
-<ion-header style="min-height: unset;">
-  <ion-toolbar *ngIf="patch.data['package-data'][pkgId] as pkg">
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="dismiss()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
     <ion-title>Config</ion-title>
     <ion-buttons slot="end" class="ion-padding-end">
       <ion-button fill="clear" [disabled]="loadingText" (click)="resetDefaults()">
-        <ion-icon slot="start" name="refresh-outline"></ion-icon>
+        <ion-icon slot="start" name="refresh"></ion-icon>
         Reset Defaults
       </ion-button>
     </ion-buttons>
@@ -19,17 +24,11 @@
   <ng-template #loaded>
 
     <ng-container *ngIf="patch.data['package-data'][pkgId] as pkg">
-      <ng-container *ngIf="pkg.manifest.config && !pkg.installed.status.configured && !edited">
-        <ion-item class="notifier-item">
-          <ion-label>
-            <h2 style="display: flex; align-items: center; margin-bottom: 3px;">
-              <ion-icon size="small" style="margin-right: 5px" slot="start" color="dark" slot="start" name="alert-circle-outline"></ion-icon>
-              <ion-text style="font-size: smaller;">Initial Config</ion-text>
-            </h2>
-            <p style="font-size: small">To use the default config for {{ pkg.manifest.title }}, click "Save" above.</p>
-          </ion-label>
-        </ion-item>
-      </ng-container>
+      <ion-item>
+        <ion-label>
+          <ion-text color="success">To use the default config for {{ pkg.manifest.title }}, click "Save" below.</ion-text>
+        </ion-label>
+      </ion-item>
 
       <ng-container *ngIf="rec && showRec">
         <ion-item class="rec-item">
@@ -81,13 +80,8 @@
 
 <ion-footer>
   <ion-toolbar *ngIf="patch.data['package-data'][pkgId] as pkg">
-    <ion-buttons slot="start" class="ion-padding-start">
-      <ion-button fill="outline" (click)="dismiss()">
-        Cancel
-      </ion-button>
-    </ion-buttons>
     <ion-buttons slot="end" class="ion-padding-end">
-      <ion-button fill="outline" color="primary" [disabled]="loadingText" (click)="save(pkg)">
+      <ion-button fill="outline" [disabled]="loadingText" (click)="save(pkg)" class="enter-click">
         Save
       </ion-button>
     </ion-buttons>

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

@@ -172,6 +172,7 @@ export class AppConfigPage {
           handler: () => {
             this.modalCtrl.dismiss()
           },
+          cssClass: 'enter-click',
         },
       ],
     })

ui/src/app/modals/enum-list/enum-list.page.html

@@ -1,10 +1,15 @@
 <ion-header>
   <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="dismiss()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
     <ion-title>
       {{ spec.name }}
     </ion-title>
     <ion-buttons slot="end">
-      <ion-button slot="end" fill="clear" color="primary" (click)="toggleSelectAll()">
+      <ion-button slot="end" fill="clear" (click)="toggleSelectAll()">
         {{ selectAll ? 'All' : 'None' }}
       </ion-button>
     </ion-buttons>
@@ -22,13 +27,8 @@
 
 <ion-footer>
   <ion-toolbar>
-    <ion-buttons slot="start" class="ion-padding-start">
-      <ion-button fill="outline" (click)="dismiss()">
-        Cancel
-      </ion-button>
-    </ion-buttons>
     <ion-buttons slot="end" class="ion-padding-end">
-      <ion-button fill="outline" color="primary" (click)="save()">
+      <ion-button fill="outline" (click)="save()" class="enter-click">
         Done
       </ion-button>
     </ion-buttons>

ui/src/app/modals/generic-form/generic-form.page.html

@@ -1,5 +1,10 @@
 <ion-header>
   <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="dismiss()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
     <ion-title>{{ title }}</ion-title>
   </ion-toolbar>
 </ion-header>
@@ -15,13 +20,8 @@
 
 <ion-footer>
   <ion-toolbar>
-    <ion-buttons slot="start" class="ion-padding-start">
-      <ion-button fill="clear" (click)="dismiss()">
-        Cancel
-      </ion-button>
-    </ion-buttons>
     <ion-buttons slot="end" class="ion-padding-end">
-      <ion-button *ngFor="let button of buttons" fill="clear" (click)="handleClick(button)">
+      <ion-button *ngFor="let button of buttons" fill="outline" (click)="handleClick(button)">
         {{ button.text }}
       </ion-button>
     </ion-buttons>

ui/src/app/modals/os-welcome/os-welcome.page.scss

@@ -8,5 +8,5 @@
 
 .main-content {
   height: 100%;
-  color: var(--ion-color-medium);
+  color: var(--ion-color-dark);
 }