From 82ec8476364a4e84bfc6ff75b93f289d0e76d5ef Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 9 Nov 2018 17:37:03 +0100
Subject: [PATCH] BannerTopBar replaces TopBar

---
 client/package.json                         |  2 +-
 client/src/components/BannerTopBar/index.js | 18 +++++++++
 client/src/components/Browse.js             |  9 ++++-
 client/src/components/Home.js               |  9 ++++-
 client/src/components/Search.js             |  9 ++++-
 client/src/components/TopBar/index.js       | 42 ---------------------
 client/src/components/TopBar/styles.js      | 39 -------------------
 client/src/components/User.js               |  9 ++++-
 8 files changed, 47 insertions(+), 90 deletions(-)
 create mode 100644 client/src/components/BannerTopBar/index.js
 delete mode 100644 client/src/components/TopBar/index.js
 delete mode 100644 client/src/components/TopBar/styles.js

diff --git a/client/package.json b/client/package.json
index 6efd82661..e52309b1e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@advancedalgos/users-client",
   "description": "Advanced Algos Users client-side web app",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "main": "src/index.js",
   "dependencies": {
     "@material-ui/core": "^3.2.0",
diff --git a/client/src/components/BannerTopBar/index.js b/client/src/components/BannerTopBar/index.js
new file mode 100644
index 000000000..255e9888d
--- /dev/null
+++ b/client/src/components/BannerTopBar/index.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import Typography from '@material-ui/core/Typography'
+
+const BannerTopBar = ({
+  size,
+  backgroundUrl,
+  title,
+  text
+}) => (
+  <div className={`bannerTopBar ${size}`} style={backgroundUrl ? { backgroundImage: `url(${backgroundUrl})` } : {}}>
+    <div className='caption'>
+      <Typography className='title' variant='h1' align='center'>{title}</Typography>
+      <Typography className='text' variant='h2' align='center'>{text}</Typography>
+    </div>
+  </div>
+)
+
+export default BannerTopBar
diff --git a/client/src/components/Browse.js b/client/src/components/Browse.js
index 7dbaefb78..a1ef87aa6 100644
--- a/client/src/components/Browse.js
+++ b/client/src/components/Browse.js
@@ -1,13 +1,18 @@
 import React, { Component } from 'react'
 import UserList from './UserList'
-import TopBar from './TopBar'
+import BannerTopBar from './BannerTopBar'
 
 class Browse extends Component {
 
   render () {
     return (
       <React.Fragment>
-        <TopBar size='medium' title='Users Directory' text='Everyone involved in Advanced Algos is here.' />
+        <BannerTopBar
+          size='medium'
+          title='Users Directory'
+          text='Everyone involved in Advanced Algos is here.'
+          backgroundUrl='https://advancedalgos.net/img/photos/connect.jpg'
+        />
         <UserList />
       </React.Fragment>
     )
diff --git a/client/src/components/Home.js b/client/src/components/Home.js
index 7e5506fa9..bbd5a1b80 100644
--- a/client/src/components/Home.js
+++ b/client/src/components/Home.js
@@ -1,12 +1,17 @@
 import React, { Component } from 'react'
-import TopBar from './TopBar'
+import BannerTopBar from './BannerTopBar'
 
 class Home extends Component {
 
   render () {
     return (
       <React.Fragment>
-        <TopBar size='big' title='Users Module' text='Responsible for all human users of the Advanced Algos Platform.' />
+        <BannerTopBar
+          size='big'
+          title='Users Module'
+          text='Responsible for all human users of the Advanced Algos Platform.'
+          backgroundUrl='https://advancedalgos.net/img/photos/connect.jpg'
+        />
       </React.Fragment>
     )
   }
diff --git a/client/src/components/Search.js b/client/src/components/Search.js
index 041116bd3..76ba4097a 100644
--- a/client/src/components/Search.js
+++ b/client/src/components/Search.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import UserSearch from './UserSearch'
 import {compose} from 'react-apollo'
 import Paper from '@material-ui/core/Paper'
-import TopBar from './TopBar'
+import BannerTopBar from './BannerTopBar'
 
 // Materia UI
 
@@ -25,7 +25,12 @@ class Search extends Component {
     const { classes } = this.props
     return (
       <React.Fragment>
-        <TopBar size='medium' title='Users Search' text='Find anyone involved in Advanced Algos here.' />
+        <BannerTopBar
+          size='medium'
+          title='Users Search'
+          text='Find anyone involved in Advanced Algos here.'
+          backgroundUrl='https://advancedalgos.net/img/photos/connect.jpg'
+        />
         <Paper className={classes.root}>
           <UserSearch />
         </Paper>
diff --git a/client/src/components/TopBar/index.js b/client/src/components/TopBar/index.js
deleted file mode 100644
index 82e6b319f..000000000
--- a/client/src/components/TopBar/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { Typography } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
-
-import styles from './styles';
-
-class TopBar extends React.Component {
-  render() {
-    const {
-      classes,
-      size,
-      title,
-      text,
-    } = this.props;
-    if (size === 'big') {
-      return (
-        <div className={classes.rootBig}>
-          <div className={classes.captions}>
-            <Typography className={classes.title} variant='headline' align='center'>{title}</Typography>
-            <Typography className={classes.text} variant='subheading' align='center'>{text}</Typography>
-          </div>
-        </div>
-      );
-    }
-    if (size === 'medium') {
-      return (
-        <div className={classes.rootMedium}>
-          <div className={classes.captions}>
-            <Typography className={classes.title} variant='headline' align='center'>{title}</Typography>
-            <Typography className={classes.text} variant='subheading' align='center'>{text}</Typography>
-          </div>
-        </div>
-      );
-    }
-    return (
-      <div className={classes.rootSmall} />
-    );
-  }
-}
-
-export default withStyles(styles)(TopBar);
diff --git a/client/src/components/TopBar/styles.js b/client/src/components/TopBar/styles.js
deleted file mode 100644
index ef12ddf5f..000000000
--- a/client/src/components/TopBar/styles.js
+++ /dev/null
@@ -1,39 +0,0 @@
-const styles = () => ({
-  rootBig: {
-    backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
-    width: '100%',
-    height: '100vh',
-  },
-  rootMedium: {
-    backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
-    width: '100%',
-    height: '50vh',
-  },
-  rootSmall: {
-    backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
-    width: '100%',
-    height: '220px',
-  },
-  captions: {
-    position: 'relative',
-    top: '50%',
-    transform: 'translateY(-50%)',
-  },
-  title: {
-    fontFamily: 'Saira',
-    color: 'white',
-    fontSize: '64px',
-    lineHeight: '78px',
-    fontWeight: 100,
-  },
-  text: {
-    fontFamily: 'Saira',
-    color: 'white',
-    fontSize: '20px',
-    lineHeight: '30px',
-    fontWeight: 600,
-    padding: '20px 0 0.5em 0',
-  },
-});
-
-export default styles;
diff --git a/client/src/components/User.js b/client/src/components/User.js
index 2e5c7e1fb..4fc70a777 100644
--- a/client/src/components/User.js
+++ b/client/src/components/User.js
@@ -1,11 +1,16 @@
 import React from 'react'
 import UserTabs from './UserTabs'
-import TopBar from './TopBar'
+import BannerTopBar from './BannerTopBar'
 
 const User = () => {
   return (
     <React.Fragment>
-      <TopBar size='medium' title='Your Profile' text='Manage your profile info, pictures and more.' />
+      <BannerTopBar
+        size='medium'
+        title='Your Profile'
+        text='Manage your profile info, pictures and more.'
+        backgroundUrl='https://advancedalgos.net/img/photos/connect.jpg'
+      />
       <UserTabs />
     </React.Fragment>
   )