universal md styling

diagnostic-ui/src/app/app.module.ts

@@ -19,7 +19,9 @@ const useMocks = require('../../config.json').useMocks
   imports: [
     HttpClientModule,
     BrowserModule,
-    IonicModule.forRoot(),
+    IonicModule.forRoot({
+      mode: 'md',
+    }),
     AppRoutingModule,
   ],
   providers: [

setup-wizard/src/app/app.module.ts

@@ -26,6 +26,7 @@ const useMocks = require('../../config.json').useMocks as boolean
   imports: [
     BrowserModule,
     IonicModule.forRoot({
+      mode: 'md',
       navAnimation: iosTransitionAnimation,
     }),
     AppRoutingModule,

ui/src/app/app.module.ts

@@ -29,7 +29,9 @@ import { GlobalErrorHandler } from './services/global-error-handler.service'
   imports: [
     HttpClientModule,
     BrowserModule,
-    IonicModule.forRoot(),
+    IonicModule.forRoot({
+      mode: 'md',
+    }),
     AppRoutingModule,
     IonicStorageModule.forRoot({
       storeName: '_embassykv',

ui/src/app/pages/apps-routes/app-show/app-show.page.html

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="services"></ion-back-button>
     </ion-buttons>
-    <ion-item lines="none">
+    <ion-item lines="none" color="light">
       <ion-avatar slot="start">
         <img [src]="pkg['static-files'].icon" />
       </ion-avatar>

ui/src/global.scss

@@ -159,7 +159,7 @@ ion-icon {
 
 ion-toolbar {
   --min-height: 72px;
-  --ion-background-color: var(--ion-color-light); 
+  --background: var(--ion-color-light); 
 }
 
 ion-infinite-scroll ion-infinite-scroll-content {
@@ -255,10 +255,16 @@ ion-slides {
   }
 }
 
+ion-back-button {
+  --background: var(--ion-color-light); 
+  --color: var(--ion-color-dark);
+}
+
 ion-item-divider {
   text-transform: uppercase;
   --padding-top: 24px;
   font-weight: 600;
+  --background: transparent;
   --color: var(--ion-color-dark);
   font-size: medium;
   border-bottom: none;