fix(headers): harmonize page headers

- use primary color - use condense style on ios
Boehringer-Ingelheim · Jan 27, 2021 · b520bbb · b520bbb
1 parent 5646258
commit b520bbb
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 74 deletions.
diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,15 @@
 /* Allow users to select and copy text
 https://allexperts16.blogspot.com/2018/06/allow-users-to-select-and-copy-text-in.html */
 
+.app-background {
+  background: var(--background);
+  color: var(--color);
+}
+
+.app-fullscreen {
+  min-height: calc(100% - var(--offset-top));
+}
+
 .chapter-card {
   height: 300px;
   max-height: 300px;

diff --git a/src/pages/About/index.tsx b/src/pages/About/index.tsx
@@ -23,7 +23,7 @@ export const AboutPage: React.FC = () => {
 
   return (
     <IonPage>
-      <IonHeader translucent={true}>
+      <IonHeader>
         <IonToolbar color="primary">
           <IonButtons slot="start">
             <IonMenuButton />
@@ -32,54 +32,56 @@ export const AboutPage: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent fullscreen={true}>
+      <IonContent color="primary" fullscreen>
         <IonHeader collapse="condense">
-          <IonToolbar>
+          <IonToolbar color="primary">
             <IonTitle size="large">{t('ABOUT.TITLE')}</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <IonGrid class="ion-padding ion-text-justify">
-          <IonRow class="ion-justify-content-center">
-            <IonCol size="12" sizeSm="6">
-              <IonImg src={t('ABOUT.IMAGE.01.FILENAME')} />
-              <p>{t('ABOUT.TEXT.PARAGRAPH.01')}</p>
-              <p>{t('ABOUT.TEXT.PARAGRAPH.02')}</p>
-              <p>{t('ABOUT.TEXT.PARAGRAPH.03')}</p>
-              <IonItem
-                lines="none"
-                href="https://makingmorehealth.org"
-                target="_blank"
-              >
-                <IonIcon icon={globe} slot="start" />
-                <IonLabel>makingmorehealth.org</IonLabel>
-              </IonItem>
-              <IonItem
-                lines="none"
-                href="mailto:[email protected]"
-                target="_blank"
-              >
-                <IonIcon icon={mail} slot="start" />
-                <IonLabel>[email protected]</IonLabel>
-              </IonItem>
-              <IonItem
-                lines="none"
-                href="https://www.facebook.com/makingmorehealth"
-                target="_blank"
-              >
-                <IonIcon icon={logoFacebook} slot="start" />
-                <IonLabel>@makingmorehealth</IonLabel>
-              </IonItem>
-              <IonItem
-                lines="none"
-                href="https://www.linkedin.com/company/making-more-health1/"
-                target="_blank"
-              >
-                <IonIcon icon={logoLinkedin} slot="start" />
-                <IonLabel>Making More Health</IonLabel>
-              </IonItem>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
+        <div className="app-background app-fullscreen">
+          <IonGrid class="ion-padding ion-text-justify">
+            <IonRow class="ion-justify-content-center">
+              <IonCol size="12" sizeSm="6">
+                <IonImg src={t('ABOUT.IMAGE.01.FILENAME')} />
+                <p>{t('ABOUT.TEXT.PARAGRAPH.01')}</p>
+                <p>{t('ABOUT.TEXT.PARAGRAPH.02')}</p>
+                <p>{t('ABOUT.TEXT.PARAGRAPH.03')}</p>
+                <IonItem
+                  lines="none"
+                  href="https://makingmorehealth.org"
+                  target="_blank"
+                >
+                  <IonIcon icon={globe} slot="start" />
+                  <IonLabel>makingmorehealth.org</IonLabel>
+                </IonItem>
+                <IonItem
+                  lines="none"
+                  href="mailto:[email protected]"
+                  target="_blank"
+                >
+                  <IonIcon icon={mail} slot="start" />
+                  <IonLabel>[email protected]</IonLabel>
+                </IonItem>
+                <IonItem
+                  lines="none"
+                  href="https://www.facebook.com/makingmorehealth"
+                  target="_blank"
+                >
+                  <IonIcon icon={logoFacebook} slot="start" />
+                  <IonLabel>@makingmorehealth</IonLabel>
+                </IonItem>
+                <IonItem
+                  lines="none"
+                  href="https://www.linkedin.com/company/making-more-health1/"
+                  target="_blank"
+                >
+                  <IonIcon icon={logoLinkedin} slot="start" />
+                  <IonLabel>Making More Health</IonLabel>
+                </IonItem>
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        </div>
       </IonContent>
     </IonPage>
   );

diff --git a/src/pages/CreditsPage/CreditsPage.tsx b/src/pages/CreditsPage/CreditsPage.tsx
@@ -19,28 +19,30 @@ export const CreditsPage: React.FC = () => {
   return (
     <IonPage>
       <IonHeader>
-        <IonToolbar>
+        <IonToolbar color="primary">
           <IonButtons slot="start">
             <IonMenuButton />
           </IonButtons>
           <IonTitle>{t('CREDITS.TITLE')}</IonTitle>
         </IonToolbar>
       </IonHeader>
 
-      <IonContent fullscreen>
+      <IonContent color="primary" fullscreen>
         <IonHeader collapse="condense">
-          <IonToolbar>
+          <IonToolbar color="primary">
             <IonTitle size="large">{t('CREDITS.TITLE')}</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <IonItem class="ion-padding" lines="none">
-          <IonImg
-            class="ion-padding"
-            className="drop-shadow margin-auto width-15rem"
-            src={t('CREDITS.IMAGE.01.FILENAME')}
-          />
-        </IonItem>
-        <CreditsList></CreditsList>
+        <div className="app-background app-fullscreen">
+          <IonItem class="ion-padding" lines="none">
+            <IonImg
+              class="ion-padding"
+              className="drop-shadow margin-auto width-15rem"
+              src={t('CREDITS.IMAGE.01.FILENAME')}
+            />
+          </IonItem>
+          <CreditsList></CreditsList>
+        </div>
       </IonContent>
     </IonPage>
   );

diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
@@ -25,8 +25,15 @@ export const HomePage: React.FC = () => {
           <IonTitle>{t(`APP.NAME`)}</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent fullscreen={true}>
-        <HomeContainer />
+      <IonContent color="primary" fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar color="primary">
+            <IonTitle size="large">{t('APP.NAME')}</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <div className="app-background app-fullscreen">
+          <HomeContainer />
+        </div>
       </IonContent>
     </IonPage>
   );

diff --git a/src/pages/Search/index.tsx b/src/pages/Search/index.tsx
@@ -34,12 +34,19 @@ export const SearchPage: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent>
-        <IonSearchbar
-          value={searchValue}
-          onIonChange={(event) => setSearchValue(event.detail.value!)}
-        ></IonSearchbar>
-        <SearchResults results={results} />
+      <IonContent color="primary" fullscreen={true}>
+        <IonHeader collapse="condense">
+          <IonToolbar color="primary">
+            <IonTitle size="large">{t('SEARCH.TITLE')}</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <div className="app-background app-fullscreen">
+          <IonSearchbar
+            value={searchValue}
+            onIonChange={(event) => setSearchValue(event.detail.value!)}
+          ></IonSearchbar>
+          <SearchResults results={results} />
+        </div>
       </IonContent>
     </IonPage>
   );

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