From 00774dea25eb5a456d8f23ca8fb395e696743742 Mon Sep 17 00:00:00 2001
From: "Edwin P. Magezi" <edwinm_p@yahoo.com>
Date: Mon, 10 Jun 2019 15:10:36 +0300
Subject: [PATCH 1/7] [New] hard coded banner

---
 src/components/molecules/Banner/Banner.tsx | 21 +++++++++++++++++++++
 src/components/molecules/Banner/index.ts   |  1 +
 src/components/templates/Generic/index.tsx | 14 ++++++++------
 3 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 src/components/molecules/Banner/Banner.tsx
 create mode 100644 src/components/molecules/Banner/index.ts

diff --git a/src/components/molecules/Banner/Banner.tsx b/src/components/molecules/Banner/Banner.tsx
new file mode 100644
index 000000000..a28f38217
--- /dev/null
+++ b/src/components/molecules/Banner/Banner.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { css } from 'glamor';
+import { Message } from 'semantic-ui-react';
+
+const messageStyles = css({
+  textAlign: 'center',
+  marginBottom: '0 !important',
+  borderRadius: '0 !important'
+});
+
+const Banner = () => {
+  return (
+    <Message warning { ...messageStyles }>
+      The Development Data Hub is not currently displaying the most up-to-date data,
+      as it is soon to undergo redevelopment.
+      If you have any data-related questions please email info@devinit.org
+    </Message>
+  );
+};
+
+export default Banner;
diff --git a/src/components/molecules/Banner/index.ts b/src/components/molecules/Banner/index.ts
new file mode 100644
index 000000000..bc95f09d6
--- /dev/null
+++ b/src/components/molecules/Banner/index.ts
@@ -0,0 +1 @@
+export * from './Banner';
diff --git a/src/components/templates/Generic/index.tsx b/src/components/templates/Generic/index.tsx
index a9df40a89..6c055188e 100644
--- a/src/components/templates/Generic/index.tsx
+++ b/src/components/templates/Generic/index.tsx
@@ -1,8 +1,9 @@
+import Link from 'next/link';
 import * as React from 'react';
 import { Container } from 'semantic-ui-react';
+import Banner from '../../molecules/Banner/Banner';
 import Footer from '../../molecules/Footer';
 import Menu from '../../molecules/Menu';
-import Link from 'next/link';
 import { menuData } from './data';
 
 interface Props {
@@ -11,11 +12,12 @@ interface Props {
 
 const Generic: React.SFC<Props> = ({ children }) =>
   <Container fluid>
-      <Menu menu={ menuData.menu } nextLink={ Link } />
-      <div style={ { marginTop: '4em' } }>
-        { children }
-      </div>
-      <Footer />
+    <Menu menu={ menuData.menu } nextLink={ Link } />
+    <div style={ { marginTop: '4em' } }>
+      <Banner/>
+      { children }
+    </div>
+    <Footer />
   </Container>;
 
 export default Generic;

From 9f0c904f8fff1b578706d0ece2f0d36c906680a3 Mon Sep 17 00:00:00 2001
From: "Edwin P. Magezi" <edwinm_p@yahoo.com>
Date: Tue, 11 Jun 2019 14:01:25 +0300
Subject: [PATCH 2/7] [Update] banner styling

---
 src/components/molecules/Banner/Banner.tsx   | 68 ++++++++++++++++----
 src/components/templates/Spotlight/index.tsx |  8 +--
 2 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/src/components/molecules/Banner/Banner.tsx b/src/components/molecules/Banner/Banner.tsx
index a28f38217..bc462dd90 100644
--- a/src/components/molecules/Banner/Banner.tsx
+++ b/src/components/molecules/Banner/Banner.tsx
@@ -1,21 +1,67 @@
 import * as React from 'react';
 import { css } from 'glamor';
-import { Message } from 'semantic-ui-react';
+import { Grid, Message } from 'semantic-ui-react';
+import * as localforage from 'localforage';
 
 const messageStyles = css({
   textAlign: 'center',
   marginBottom: '0 !important',
-  borderRadius: '0 !important'
+  marginTop: '1rem !important',
+  backgroundColor: '#fee7c1 !important'
 });
+const textStyle = css({
+  fontWeight: 'bold',
+  paddingRight: '3rem !important'
+});
+const closeButtonStyles = css({
+  position: 'absolute',
+  top: '38px',
+  right: '16px',
+  cursor: 'pointer'
+});
+
+class Banner extends React.Component {
+  state = { showBanner: false };
+
+  render() {
+    if (this.state.showBanner) {
+      return (
+        <Message warning { ...messageStyles } floating size="big">
+          <Grid columns={ 2 } container stackable>
+            <Grid.Row>
+              <Grid.Column width={ 1 }>
+                <i aria-hidden="true" className="icon warning sign big"/>
+              </Grid.Column>
+              <Grid.Column width={ 15 } { ...textStyle }>
+                The Development Data Hub is not currently displaying the most up-to-date data,
+                as it is soon to undergo redevelopment.
+                If you have any data-related questions please email info@devinit.org
+              </Grid.Column>
+            </Grid.Row>
+          <i aria-hidden="true" className="icon close" { ...closeButtonStyles } onClick={ this.onClose }/>
+          </Grid>
+        </Message>
+      );
+    }
+
+    return null;
+  }
+
+  componentDidMount() {
+    localforage.getItem('showBanner').then(showBanner => {
+      if (showBanner === null) {
+        this.setState({ showBanner: true });
+        localforage.setItem('showBanner', true);
+      } else {
+        this.setState({ showBanner });
+      }
+    });
+  }
 
-const Banner = () => {
-  return (
-    <Message warning { ...messageStyles }>
-      The Development Data Hub is not currently displaying the most up-to-date data,
-      as it is soon to undergo redevelopment.
-      If you have any data-related questions please email info@devinit.org
-    </Message>
-  );
-};
+  private onClose = () => {
+    this.setState({ showBanner: false });
+    localforage.setItem('showBanner', false);
+  }
+}
 
 export default Banner;
diff --git a/src/components/templates/Spotlight/index.tsx b/src/components/templates/Spotlight/index.tsx
index d6713a33e..3429cad28 100644
--- a/src/components/templates/Spotlight/index.tsx
+++ b/src/components/templates/Spotlight/index.tsx
@@ -1,5 +1,7 @@
 import { capitalize } from '@devinit/prelude/lib/strings';
+import { css } from 'glamor';
 import { Div, H4, Img } from 'glamorous';
+import Link from 'next/link';
 import router from 'next/router';
 import * as React from 'react';
 import { Container, Grid, Icon } from 'semantic-ui-react';
@@ -10,11 +12,9 @@ import DynamicMap from '../../organisms/Map/DynamicMap';
 import SpotLightNavTabsKe, { SpotlightKeProps } from '../../organisms/NavBarTabs/spotlightKe';
 import SpotLightNavTabsUg, { SpotlightUgProps } from '../../organisms/NavBarTabs/spotlightUg';
 import { getSpotlightPageData } from '../../pageData';
+import { mediaQueries } from '../../theme';
 import { Country } from '../../types';
 import Generic from '../Generic';
-import Link from 'next/link';
-import { css } from 'glamor';
-import { mediaQueries } from '../../theme';
 
 const responsiveCountryProfile = css({
   [mediaQueries.phone]: {
@@ -41,7 +41,7 @@ export default class Spotlight extends React.Component<Props> {
     const navState = { state: this.props.state } as SpotlightKeProps | SpotlightUgProps;
 
     return (
-      <Generic >
+      <Generic>
         <Container>
           <H4 paddingTop="2em" position="absolute" right="20%" { ...responsiveCountryProfile }>
             { this.renderCountryFlag() }

From 73538afc5f284313a69b262d8f16726dce0a6af5 Mon Sep 17 00:00:00 2001
From: "Edwin P. Magezi" <edwinm_p@yahoo.com>
Date: Tue, 11 Jun 2019 14:10:45 +0300
Subject: [PATCH 3/7] Bump version to 3.5.2

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2b9494837..c8111594c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@devinit/dh-app",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index eac79975f..9c541cbb1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devinit/dh-app",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "config": {
     "API": "http://212.111.41.68:3000/graphql",
     "API_DEV": "http://212.111.41.68:9090/graphql",

From 2b8378a84a14f60c4ebb9ec55f58cf39c91ab673 Mon Sep 17 00:00:00 2001
From: "Edwin P. Magezi" <edwinm_p@yahoo.com>
Date: Tue, 11 Jun 2019 14:59:21 +0300
Subject: [PATCH 4/7] [Update] reduce on banner text size

---
 src/components/molecules/Banner/Banner.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/Banner/Banner.tsx b/src/components/molecules/Banner/Banner.tsx
index bc462dd90..89c3d9ae2 100644
--- a/src/components/molecules/Banner/Banner.tsx
+++ b/src/components/molecules/Banner/Banner.tsx
@@ -7,6 +7,7 @@ const messageStyles = css({
   textAlign: 'center',
   marginBottom: '0 !important',
   marginTop: '1rem !important',
+  borderRadius: '0 !important',
   backgroundColor: '#fee7c1 !important'
 });
 const textStyle = css({
@@ -26,7 +27,7 @@ class Banner extends React.Component {
   render() {
     if (this.state.showBanner) {
       return (
-        <Message warning { ...messageStyles } floating size="big">
+        <Message warning { ...messageStyles } floating size="large">
           <Grid columns={ 2 } container stackable>
             <Grid.Row>
               <Grid.Column width={ 1 }>

From fd2a273ff89f5baa467aa086f75d3fcde9b1d581 Mon Sep 17 00:00:00 2001
From: "Edwin P. Magezi" <edwinm_p@yahoo.com>
Date: Wed, 12 Jun 2019 12:35:42 +0300
Subject: [PATCH 5/7] [Update] banner text colour

---
 src/components/molecules/Banner/Banner.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/Banner/Banner.tsx b/src/components/molecules/Banner/Banner.tsx
index 89c3d9ae2..f379f040e 100644
--- a/src/components/molecules/Banner/Banner.tsx
+++ b/src/components/molecules/Banner/Banner.tsx
@@ -8,7 +8,8 @@ const messageStyles = css({
   marginBottom: '0 !important',
   marginTop: '1rem !important',
   borderRadius: '0 !important',
-  backgroundColor: '#fee7c1 !important'
+  backgroundColor: '#fee7c1 !important',
+  color: '#794b02 !important'
 });
 const textStyle = css({
   fontWeight: 'bold',

From fb57e2c0e03ec3a50818617868fdb25ebaae4bb6 Mon Sep 17 00:00:00 2001
From: "Edwin P. Magezi" <edwinm_p@yahoo.com>
Date: Wed, 12 Jun 2019 12:42:11 +0300
Subject: [PATCH 6/7] [Update] style banner as a normal alert

---
 src/components/molecules/Banner/Banner.tsx | 36 +++++++++++-----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/molecules/Banner/Banner.tsx b/src/components/molecules/Banner/Banner.tsx
index f379f040e..7218fa477 100644
--- a/src/components/molecules/Banner/Banner.tsx
+++ b/src/components/molecules/Banner/Banner.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { css } from 'glamor';
-import { Grid, Message } from 'semantic-ui-react';
+import { Container, Grid, Message } from 'semantic-ui-react';
 import * as localforage from 'localforage';
 
 const messageStyles = css({
   textAlign: 'center',
   marginBottom: '0 !important',
-  marginTop: '1rem !important',
-  borderRadius: '0 !important',
   backgroundColor: '#fee7c1 !important',
   color: '#794b02 !important'
 });
@@ -28,21 +26,23 @@ class Banner extends React.Component {
   render() {
     if (this.state.showBanner) {
       return (
-        <Message warning { ...messageStyles } floating size="large">
-          <Grid columns={ 2 } container stackable>
-            <Grid.Row>
-              <Grid.Column width={ 1 }>
-                <i aria-hidden="true" className="icon warning sign big"/>
-              </Grid.Column>
-              <Grid.Column width={ 15 } { ...textStyle }>
-                The Development Data Hub is not currently displaying the most up-to-date data,
-                as it is soon to undergo redevelopment.
-                If you have any data-related questions please email info@devinit.org
-              </Grid.Column>
-            </Grid.Row>
-          <i aria-hidden="true" className="icon close" { ...closeButtonStyles } onClick={ this.onClose }/>
-          </Grid>
-        </Message>
+        <Container style={ { padding: '1rem' } }>
+          <Message warning { ...messageStyles } floating size="large">
+            <Grid columns={ 2 } container stackable>
+              <Grid.Row>
+                <Grid.Column width={ 1 }>
+                  <i aria-hidden="true" className="icon warning sign big"/>
+                </Grid.Column>
+                <Grid.Column width={ 15 } { ...textStyle }>
+                  The Development Data Hub is not currently displaying the most up-to-date data,
+                  as it is soon to undergo redevelopment.
+                  If you have any data-related questions please email info@devinit.org
+                </Grid.Column>
+              </Grid.Row>
+            <i aria-hidden="true" className="icon close" { ...closeButtonStyles } onClick={ this.onClose }/>
+            </Grid>
+          </Message>
+        </Container>
       );
     }
 

From a47c6bf547548a8d59b2aae00c617da09f8ae7f4 Mon Sep 17 00:00:00 2001
From: "Edwin P. Magezi" <edwinm_p@yahoo.com>
Date: Mon, 17 Jun 2019 12:09:13 +0300
Subject: [PATCH 7/7] [Fix] hide menubar overflow

---
 src/components/molecules/Menu/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/Menu/index.tsx b/src/components/molecules/Menu/index.tsx
index 1b300215c..f6b729c50 100644
--- a/src/components/molecules/Menu/index.tsx
+++ b/src/components/molecules/Menu/index.tsx
@@ -1,3 +1,4 @@
+import { css } from 'glamor';
 import glamorous from 'glamorous';
 import { red, white } from '../../theme/semantic';
 import { Container } from 'semantic-ui-react';
@@ -22,13 +23,15 @@ const MenuContainer = glamorous.div({
   height: '57px'
 });
 
+const containerStyles = css({ overflow: 'hidden !important' });
+
 export type Props = Menu & {
   nextLink?: React.ComponentClass<LinkState>;
 };
 
 const menu = (props: Props) =>
   <MenuContainer>
-    <Container>
+    <Container { ...containerStyles }>
       <Logo />
       <DesktopMenu { ...props } />
       <MobileMenu { ...props } />