From e6dff4f5d2f9d1650d94453a3bda6bc4f8d11cf3 Mon Sep 17 00:00:00 2001
From: Matt Hill <matthewonthemoon@gmail.com>
Date: Sun, 12 Dec 2021 14:29:02 -0700
Subject: [PATCH] universal md styling

---
 diagnostic-ui/src/app/app.module.ts                      | 4 +++-
 setup-wizard/src/app/app.module.ts                       | 1 +
 ui/src/app/app.module.ts                                 | 4 +++-
 ui/src/app/pages/apps-routes/app-show/app-show.page.html | 2 +-
 ui/src/global.scss                                       | 8 +++++++-
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/diagnostic-ui/src/app/app.module.ts b/diagnostic-ui/src/app/app.module.ts
index 877394061..9c5bf012e 100644
--- a/diagnostic-ui/src/app/app.module.ts
+++ b/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: [
diff --git a/setup-wizard/src/app/app.module.ts b/setup-wizard/src/app/app.module.ts
index f7fcc5af3..cd0e42e10 100644
--- a/setup-wizard/src/app/app.module.ts
+++ b/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,
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 3712a1eb1..7d25a6e1c 100644
--- a/ui/src/app/app.module.ts
+++ b/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',
diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.html b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
index 881b96505..8404262ba 100644
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/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>
diff --git a/ui/src/global.scss b/ui/src/global.scss
index e84b92fd2..77798c7aa 100644
--- a/ui/src/global.scss
+++ b/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;