Merge branch 'uiux' into develop

src/app/features/home/onboarding/tutorial/tutorial.page.scss

@@ -8,8 +8,8 @@ ion-content {
       height: 100vh;
 
       svg {
-        padding-top: 5vh;
-        padding-bottom: 5vh;
+        padding-top: 8vh;
+        padding-bottom: calc(12vh + env(safe-area-inset-bottom));
       }
 
       button {
@@ -18,6 +18,7 @@ ion-content {
         right: 20px;
         color: white;
         font-size: 20px;
+        padding-bottom: calc(5vh + env(safe-area-inset-bottom));
       }
     }
   }

src/global.scss

@@ -25,6 +25,26 @@
 // @import "~@ionic/angular/css/text-transformation.css";
 // @import "~@ionic/angular/css/flex-utils.css";
 
+html {
+  background-color: var(--ion-color-primary);
+
+  --ion-safe-area-top: env(safe-area-inset-top);
+  --ion-safe-area-bottom: env(safe-area-inset-bottom);
+  --ion-safe-area-left: env(safe-area-inset-left);
+  --ion-safe-area-right: env(safe-area-inset-right);
+}
+
+.ios-bottom-safe-area {
+  padding-bottom: var(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  background-color: var(--ion-color-secondary);
+}
+
+ion-app {
+  margin-top: env(safe-area-inset-top);
+  margin-bottom: env(safe-area-inset-bottom);
+}
+
 .ion-page {
   background-color: white;
 }
@@ -43,31 +63,6 @@ mat-toolbar {
   }
 }
 
-// avoid overlapping with the status bar on most iOS devices
-@media (min-width: 380px) {
-  .ios mat-toolbar {
-    padding-top: 30px;
-    min-height: 90px;
-    height: 90px;
-  }
-}
-
-// avoid overlapping with the status bar on iPhone 6s plus/7plus/ 8 plus series
-@media (min-height: 736px) and (max-width: 750px) {
-  .ios mat-toolbar {
-    padding-top: 0;
-  }
-}
-
-// avoid overlapping with the status bar on iPhone 12 mini ＆ iPhone 12 series
-@media (min-height: 750px) {
-  .ios mat-toolbar {
-    padding-top: 30px;
-    min-height: 90px;
-    height: 90px;
-  }
-}
-
 button.expand {
   width: calc(100vw - 16px);
   margin: 0 8px;