Merge pull request moodlehq#4470 from crazyserver/MOBILE-4653

MOBILE-4653 style: Improve capture media button on dark mode

Author: dpalou

src/core/features/emulator/components/capture-media/capture-media.html

@@ -29,7 +29,7 @@ <h1 *ngIf="title">{{ title | translate }}</h1>
     </core-loading>
 </ion-content>
 
-<ion-footer *ngIf="readyToCapture">
+<ion-footer *ngIf="readyToCapture" class="gray-with-border">
     <ion-row>
         <ion-col />
         <ion-col class="ion-text-center">

src/core/features/emulator/components/capture-media/capture-media.scss

@@ -37,9 +37,4 @@
             }
         }
     }
-
-    ion-footer {
-        background-color: var(--gray-300);
-        border-top: 1px solid var(--gray-500);
-    }
 }

src/theme/components/ion-footer.scss

@@ -0,0 +1,12 @@
+ion-footer {
+    background-color: var(--contrast-background);
+
+    > ion-toolbar:only-child {
+        top: 1px;
+    }
+
+    &.gray-with-border {
+        background-color: var(--core-footer-gray-background);
+        border-top: 1px solid var(--core-footer-gray-border);
+    }
+}

src/theme/components/ionic.scss

@@ -11,6 +11,7 @@
 @import "ion-content.scss";
 @import "ion-datetime.scss";
 @import "ion-fab.scss";
+@import "ion-footer.scss";
 @import "ion-header.scss";
 @import "ion-icon.scss";
 @import "ion-input.scss";

src/theme/theme.base.scss

@@ -108,14 +108,6 @@ ion-tabs.hide-header ion-header {
     display: none;
 }
 
-ion-footer {
-    background-color: var(--contrast-background);
-
-    > ion-toolbar:only-child {
-        top: 1px;
-    }
-}
-
 // Ionic list.
 ion-list {
     padding: 0 !important;

src/theme/theme.dark.scss

@@ -111,6 +111,9 @@
         --core-header-toolbar-color:        var(--text-color);
         --core-header-toolbar-border-color: var(--stroke);
 
+        --core-footer-gray-background: var(--gray-700);
+        --core-footer-gray-border: var(--gray-600);
+
         --core-tabs-background: var(--gray-900);
         --core-tab-background: var(--core-tabs-background);
         --core-tab-color: var(--subdued-text-color);

src/theme/theme.light.scss

@@ -118,6 +118,9 @@
     --core-header-buttons-background: transparent;
     --core-header-buttons-color: var(--core-header-toolbar-color);
 
+    --core-footer-gray-background: var(--gray-300);
+    --core-footer-gray-border: var(--gray-500);
+
     --ion-searchbar-background: var(--ion-background-color);
     --ion-searchbar-border-color: var(--core-input-stroke);
     --ion-searchbar-color: var(--text-color);