BannerTopBar replaces TopBar

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",

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

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>
     )

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>
     )
   }

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>

client/src/components/TopBar/index.js

@@ -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);

client/src/components/TopBar/styles.js

@@ -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;

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>
   )