Add info banner to alert users of downtime (#421)

* feat: add info banner

* test: set CI=false

* chore: set max width

* chore: remove banner-max-width

Co-authored-by: Ian Chen <ian-@gmx.com>

frontend/src/components/common/index.ts

@@ -21,3 +21,4 @@ export { default as CredLabelInput } from './cred-label-input'
 export { default as Dropdown } from './dropdown'
 export { default as BodyWrapper } from './body-wrapper'
 export { default as CsvUpload } from './csv-upload'
+export { default as InfoBanner } from './info-banner'

frontend/src/components/common/info-banner/InfoBanner.module.scss

@@ -0,0 +1,21 @@
+@import 'styles/_variables';
+@import 'styles/_mixins';
+.container {
+  background-color: $indigo-blue;
+  height: auto;
+  padding: 4px $site-padding;
+  color: white;
+  text-align: center;
+  @include flex-horizontal;
+  justify-content: center;
+
+  .infoText {
+    max-width: $header-max-width;
+    font-size: 0.8rem;
+  }
+
+  @include mobile() {
+    padding: 4px $mobile-site-padding;
+    text-align: justify;
+  }
+}

frontend/src/components/common/info-banner/InfoBanner.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import styles from './InfoBanner.module.scss'
+
+const InfoBanner = (props: any) => {
+  const { children } = props
+  if (!children) {
+    return null
+  }
+
+  return (
+    <div className={styles.container}>
+      <span className={styles.infoText}>{children}</span>
+    </div>
+  )
+}
+
+export default InfoBanner

frontend/src/components/common/info-banner/index.ts

@@ -0,0 +1 @@
+export { default } from './InfoBanner'

frontend/src/components/landing/Landing.tsx

@@ -11,10 +11,12 @@ import {
   PRIVACY_URL,
   TC_URL,
   REPORT_BUG_URL,
+  INFO_BANNER,
 } from 'config'
-import PrimaryButton from 'components/common/primary-button'
+
 import Navbar from './nav-bar'
 import Banner from './banner'
+import { InfoBanner, PrimaryButton } from 'components/common'
 import { AuthContext } from 'contexts/auth.context'
 import { getLandingStats } from 'services/stats.service'
 
@@ -150,6 +152,7 @@ const Landing = () => {
   return (
     <div className={styles.landing}>
       <Banner></Banner>
+      <InfoBanner>{INFO_BANNER}</InfoBanner>
       <div className={styles.topContainer}>
         <Navbar></Navbar>
         <div className={styles.innerContainer}>

frontend/src/components/landing/banner/Banner.module.scss

@@ -9,8 +9,6 @@
   font-style: normal;
 }
 
-$banner-max-width: 1400px;
-
 .container {
   background-color: #f0f0f0;
   height: auto;
@@ -24,7 +22,7 @@ $banner-max-width: 1400px;
   a {
     @include flex-horizontal;
     width: 100%;
-    max-width: $banner-max-width;
+    max-width: $header-max-width;
     margin: 0 auto;
     align-items: center;
     color: #484848;

frontend/src/components/login/Login.tsx

@@ -3,15 +3,15 @@ import { Redirect } from 'react-router-dom'
 import { OutboundLink } from 'react-ga'
 
 import LoginInput from './login-input'
-import { GUIDE_URL, CONTACT_US_URL } from 'config'
+import { GUIDE_URL, CONTACT_US_URL, INFO_BANNER } from 'config'
 import { AuthContext } from 'contexts/auth.context'
-
+import { InfoBanner } from 'components/common'
 import styles from './Login.module.scss'
 import loginImg from 'assets/img/landing/login.svg'
 import appLogo from 'assets/img/brand/app-logo.svg'
 import companyLogo from 'assets/img/brand/company-logo-dark.svg'
 
-const Landing = () => {
+const Login = () => {
   const authContext = useContext(AuthContext)
 
   if (authContext.isAuthenticated) {
@@ -20,6 +20,7 @@ const Landing = () => {
 
   return (
     <>
+      <InfoBanner>{INFO_BANNER}</InfoBanner>
       <div className={styles.topContainer}>
         <div className={styles.innerContainer}>
           <div className={styles.textContainer}>
@@ -66,4 +67,4 @@ const Landing = () => {
   )
 }
 
-export default Landing
+export default Login

frontend/src/config.ts

@@ -45,3 +45,4 @@ export const PRIVACY_URL = process.env.REACT_APP_PRIVACY_URL as string
 export const TC_URL = process.env.REACT_APP_TC_URL as string
 export const REPORT_BUG_URL = process.env.REACT_APP_REPORT_BUG_URL as string
 export const GA_TRACKING_ID = process.env.REACT_APP_GA_TRACKING_ID as string
+export const INFO_BANNER = process.env.REACT_APP_INFO_BANNER as string

netlify.toml

@@ -9,4 +9,4 @@
   publish = "build"
 
   # Default build command.
-  command = "npm run build && echo '/* /index.html  200' | cat >build/_redirects"
+  command = "CI=false npm run build && echo '/* /index.html  200' | cat > build/_redirects"