fix(ios): show condense header in primary color

Boehringer-Ingelheim · Jan 27, 2021 · c56039d · c56039d
1 parent 615f5fa
commit c56039d
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 19 deletions.
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,9 @@
 .app-background {
-  background: var(--background);
+  background: var(--ion-background-color);
   color: var(--color);
 }
 
-.ios .app-fullscreen {
-  min-height: calc(100% - var(--offset-top));
-}
-
-.md .app-fullscreen {
+.app-fullscreen {
   min-height: 100%;
 }
 

diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx
@@ -32,7 +32,7 @@ export const AboutPage: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent color="primary" fullscreen>
+      <IonContent color="primary-collapse-condense" fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar color="primary">
             <IonTitle size="large">{t('ABOUT.TITLE')}</IonTitle>

diff --git a/src/pages/CreditsPage/CreditsPage.tsx b/src/pages/CreditsPage/CreditsPage.tsx
@@ -27,7 +27,7 @@ export const CreditsPage: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent color="primary" fullscreen>
+      <IonContent color="primary-collapse-condense" fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar color="primary">
             <IonTitle size="large">{t('CREDITS.TITLE')}</IonTitle>

diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
@@ -26,7 +26,7 @@ export const HomePage: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent color="primary" fullscreen>
+      <IonContent color="primary-collapse-condense" fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar color="primary">
             <IonTitle size="large">{t('APP.NAME')}</IonTitle>

diff --git a/src/pages/Search/index.tsx b/src/pages/Search/index.tsx
@@ -34,7 +34,7 @@ export const SearchPage: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent color="primary" fullscreen={true}>
+      <IonContent color="primary-collapse-condense" fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar color="primary">
             <IonTitle size="large">{t('SEARCH.TITLE')}</IonTitle>

diff --git a/src/pages/Settings/SettingsPage.tsx b/src/pages/Settings/SettingsPage.tsx
@@ -29,21 +29,19 @@ export const SettingsPage: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent color="primary" fullscreen>
+      <IonContent color="primary-collapse-condense" fullscreen>
         <IonHeader collapse="condense">
           <IonToolbar color="primary">
             <IonTitle size="large">{t('SETTINGS.TITLE')}</IonTitle>
           </IonToolbar>
         </IonHeader>
 
-        <div className="app-background app-fullscreen">
-          <IonList>
-            <SettingsLanguageItems />
-            <SettingsThemeItems />
-            <SettingsGeneralItems />
-            <SettingsResetItem />
-          </IonList>
-        </div>
+        <IonList>
+          <SettingsLanguageItems />
+          <SettingsThemeItems />
+          <SettingsGeneralItems />
+          <SettingsResetItem />
+        </IonList>
       </IonContent>
     </IonPage>
   );

diff --git a/src/theme/bright.theme.css b/src/theme/bright.theme.css
@@ -225,6 +225,18 @@
   --ion-color-tint: #a3d1ff;
 }
 
+.ion-color-primary-collapse-condense {
+  --ion-color-base: linear-gradient(
+    var(--ion-color-primary) 0% 50%,
+    var(--ion-background-color, #ffffff) 50% 100%
+  );
+  --ion-color-base-rgb: var(--ion-color-primary-base-rgb);
+  --ion-color-contrast: var(--ion-color-primary-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb);
+  --ion-color-shade: var(--ion-color-primary-shade);
+  --ion-color-tint: var(--ion-color-primary-tint);
+}
+
 .ion-color-accent-step-0100 {
   --ion-color-base: #0066cc;
   --ion-color-base-rgb: 0, 102, 204;

diff --git a/src/theme/dark.theme.css b/src/theme/dark.theme.css
@@ -76,6 +76,18 @@
   --ion-color-light-tint: #383a3e;
 }
 
+.ion-color-primary-collapse-condense {
+  --ion-color-base: linear-gradient(
+    var(--ion-color-primary) 0% 50%,
+    var(--ion-background-color, #000000) 50% 100%
+  );
+  --ion-color-base-rgb: var(--ion-color-primary-base-rgb);
+  --ion-color-contrast: var(--ion-color-primary-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb);
+  --ion-color-shade: var(--ion-color-primary-shade);
+  --ion-color-tint: var(--ion-color-primary-tint);
+}
+
 /*
    * iOS Dark Theme
    * ----------------------------------------------------------------------------