Merge pull request #2131 from veteransaffairscanada/fallback_page_cle…

…anup Fallback page minor styling
veteransaffairscanada · May 1, 2019 · 906cf95 · 906cf95
2 parents 56bf521 + f47b5a7
commit 906cf95
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 55 deletions.
diff --git a/components/layout.js b/components/layout.js
@@ -82,27 +82,33 @@ class Layout extends Component {
           <ErrorBoundary>
             <Content>
               <SkipToMainContent skipLink={skipLink} t={t} />
-              <div id="header_css" css={black_bg}>
+              {!this.props.parentIsFallbackPage ? (
+                <div id="header_css" css={black_bg}>
+                  {t("current-language-code") === "en" ? (
+                    <VacHeaderEn t={t} url={url} />
+                  ) : (
+                    <VacHeaderFr t={t} url={url} />
+                  )}
+                </div>
+              ) : null}
+              <main id="main">{this.props.children}</main>
+            </Content>
+            {!this.props.parentIsFallbackPage ? (
+              <div css={backgoundColour1}>
+                <Container>
+                  <FeedbackBar t={t} />
+                </Container>
+              </div>
+            ) : null}
+            {!this.props.parentIsFallbackPage ? (
+              <div id="footer_styles" css={fontStyle}>
                 {t("current-language-code") === "en" ? (
-                  <VacHeaderEn t={t} url={url} />
+                  <VacFooterEn />
                 ) : (
-                  <VacHeaderFr t={t} url={url} />
+                  <VacFooterFr />
                 )}
               </div>
-              <main id="main">{this.props.children}</main>
-            </Content>
-            <div css={backgoundColour1}>
-              <Container>
-                <FeedbackBar t={t} />
-              </Container>
-            </div>
-            <div id="footer_styles" css={fontStyle}>
-              {t("current-language-code") === "en" ? (
-                <VacFooterEn />
-              ) : (
-                <VacFooterFr />
-              )}
-            </div>
+            ) : null}
           </ErrorBoundary>
           {noScriptTag}
         </div>
@@ -119,7 +125,8 @@ Layout.propTypes = {
   url: PropTypes.object.isRequired,
   skipLink: PropTypes.string.isRequired,
   title: PropTypes.string,
-  backgroundColor: PropTypes.string
+  backgroundColor: PropTypes.string,
+  parentIsFallbackPage: PropTypes.bool
 };
 
 Layout.defaultProps = {

diff --git a/fallback-pages/browser-incompatible.html b/fallback-pages/browser-incompatible.html
@@ -1,46 +1,53 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Your browser is not supported | Ton navigateur n'est pas supporté</title>
-    <link href="//cdn.muicss.com/mui-0.9.39-rc1/css/mui.min.css" rel="stylesheet" type="text/css"/>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>
+      Your browser is not supported | Ton navigateur n'est pas supporté
+    </title>
+    <link
+      href="//cdn.muicss.com/mui-0.9.39-rc1/css/mui.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
     <style>
       /**
        * Body CSS
        */
-html,
-body {
-  height: 100%;
-}
-html,
-body
-{
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
-}
-/**
+      html,
+      body {
+        height: 100%;
+      }
+      html,
+      body {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
+      }
+      /**
  * Content CSS
  */
-#content-wrapper {
-  min-height: 100%;
-}
-</style>
-</head>
-<body>
-  <div id="content-wrapper" class="mui--text-center">
-    <br/>
-    <br/>
-    <p>
-      Your current version of this browser is not supported. Please update to the latest version.      
-      To see a list of all benefits click <a href='/all-benefits'>here</a>.
-    </p>
-    <p>
-      Votre version actuelle de ce navigateur n'est pas supportée. S'il vous plaît mettre à jour à la dernière version.
-      Pour voir la liste complète des avantages, cliquez <a href='/all-benefits'>ici</a>.
-    </p>
-  </div>
-</body>
+      #content-wrapper {
+        min-height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="content-wrapper" class="mui--text-center">
+      <br />
+      <br />
+      <p>
+        Your current version of this browser is not supported. Please update to
+        the latest version. To see a list of all benefits click
+        <a href="/all-benefits">here</a>.
+      </p>
+      <p>
+        Votre version actuelle de ce navigateur n'est pas supportée. S'il vous
+        plaît mettre à jour à la dernière version. Pour voir la liste complète
+        des avantages, cliquez <a href="/all-benefits?lng=fr">ici</a>.
+      </p>
+    </div>
+  </body>
 </html>
diff --git a/pages/all-benefits.js b/pages/all-benefits.js
@@ -9,6 +9,7 @@ import { connect } from "react-redux";
 import BenefitList from "../components/benefit_list";
 import Container from "../components/container";
 import Header from "../components/typography/header";
+import { globalTheme } from "../theme";
 
 const header = css`
   padding-bottom: 10px;
@@ -28,6 +29,8 @@ export class AllBenefits extends Component {
         title={t("titles.all_benefits")}
         skipLink="#mainContent"
         url={url}
+        backgroundColor={globalTheme.colour.paleGreyTwo}
+        parentIsFallbackPage={true}
       >
         <Container id="mainContent">
           <Header size="xl" headingLevel="h1" paddingTop="30" styles={header}>