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 @@
-
+
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;