updated fallback page: changed background colour, removed feedback ba…

…r, updated french url
veteransaffairscanada · May 1, 2019 · 4aa0e60 · 4aa0e60
1 parent d3e2d52
commit 4aa0e60
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 43 deletions.
diff --git a/components/layout.js b/components/layout.js
@@ -91,11 +91,13 @@ class Layout extends Component {
               </div>
               <main id="main">{this.props.children}</main>
             </Content>
-            <div css={backgoundColour1}>
-              <Container>
-                <FeedbackBar t={t} />
-              </Container>
-            </div>
+            {!this.props.parentIsFallbackPage ? (
+              <div css={backgoundColour1}>
+                <Container>
+                  <FeedbackBar t={t} />
+                </Container>
+              </div>
+            ) : null}
             <div id="footer_styles" css={fontStyle}>
               {t("current-language-code") === "en" ? (
                 <VacFooterEn />
@@ -119,7 +121,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}>