From c56039d28ee48463ceb5c26ed4c3018c39bdbe0a Mon Sep 17 00:00:00 2001
From: Simon G <development@gol.ms>
Date: Wed, 27 Jan 2021 17:40:26 +0100
Subject: [PATCH] fix(ios): show condense header in primary color

---
 src/index.css                         |  8 ++------
 src/pages/About/index.tsx             |  2 +-
 src/pages/CreditsPage/CreditsPage.tsx |  2 +-
 src/pages/Page.tsx                    |  2 +-
 src/pages/Search/index.tsx            |  2 +-
 src/pages/Settings/SettingsPage.tsx   | 16 +++++++---------
 src/theme/bright.theme.css            | 12 ++++++++++++
 src/theme/dark.theme.css              | 12 ++++++++++++
 8 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/index.css b/src/index.css
index 5c58aff..3d1bfe7 100644
--- 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
index 88985bb..830bc33 100644
--- 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
index 5ea26e2..0f5f35f 100644
--- 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
index 2f635fc..e742116 100644
--- 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
index 11d456f..9b0e2f9 100644
--- 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
index 831d357..96e9853 100644
--- 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
index 6a12633..4f13f31 100644
--- 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
index 4da1fc5..70ccac8 100644
--- 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
    * ----------------------------------------------------------------------------