Moving styles to entry point and adding a homepage(unfinished)

client/src/App.js

@@ -7,6 +7,7 @@ import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { withStyles } from '@material-ui/core/styles'
 import { theme, globalStyles } from './styles'
+import './styles/styles.scss'
 
 import { client } from './graphql/apollo'
 import Auth from './auth'

client/src/styles/styles.scss

@@ -265,3 +265,41 @@ header.menu{
     }
   }
 }
+
+.bannerTopBar{
+  background-image: url(https://advancedalgos.net/img/photos/teams.jpg);
+  width: 100%;
+  height: 220px;
+  &.big{
+    height: 100vh;
+    .caption{
+      display: block;
+    }
+  }
+  &.medium{
+    height: 50vh;
+    .caption{
+      display: block;
+    }
+  }
+  .caption{
+    display: none;
+    position: relative;
+    top: 50%;
+    transform: translateY(-100%);
+    font-family: Saira;
+    .title{
+      color: white;
+      font-size: 64px;
+      line-height: 78px;
+      font-weight: 100;
+    }
+    .text{
+      color: white;
+      font-size: 20px;
+      line-height: 30px;
+      font-weight: 600;
+      padding: 20px 0 0.5em 0;
+    }
+  }
+}

client/src/views/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/views/home/index.js

@@ -1,63 +1,17 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import CssBaseline from '@material-ui/core/CssBaseline'
-import Typography from '@material-ui/core/Typography'
-import { withStyles } from '@material-ui/core/styles'
-
-const styles = theme => ({
-  '@global': {
-    body: {
-      backgroundColor: theme.palette.common.white
-    }
-  },
-  layout: {
-    width: '100%',
-    height: '100%'
-  },
-  heroContent: {
-    textColor: theme.palette.common.white,
-    maxWidth: 600,
-    height: 800,
-    margin: '0 auto',
-    padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
-  }
-})
+import BannerTopBar from '../BannerTopBar'
 
 class Home extends Component {
   render () {
-    const { classes } = this.props
     return (
-      <React.Fragment>
-        <CssBaseline />
-        <main className={classes.layout}>
-          <div className={classes.heroContent}>
-            <Typography
-              variant='h2'
-              align='center'
-              color='textPrimary'
-              gutterBottom
-            >
-              Collaborate. Innovate. Evolve.
-            </Typography>
-            <Typography
-              variant='h6'
-              align='center'
-              color='textSecondary'
-              component='h3'
-            >
-              Welcome to the Advanced Algos Platform
-            </Typography>
-          </div>
-        </main>
-
-      </React.Fragment>
+      <BannerTopBar
+        size='big'
+        title='Advanced Algos Platform'
+        text='Enabling the evolutionary race towards the emergence of superalgos'
+        backgroundUrl='https://aacorporatesitedevelop.azurewebsites.net/img/photos/superalgos-platform.jpg'
+      />
     )
   }
 }
 
-Home.propTypes = {
-  classes: PropTypes.object.isRequired
-}
-
-export default withStyles(styles)(Home)
+export default Home

client/src/views/layout/header/index.js

@@ -4,9 +4,6 @@ import { Link } from 'react-router-dom'
 import jwtDecode from 'jwt-decode'
 import withWidth from '@material-ui/core/withWidth'
 
-// styles
-import './styles.scss'
-
 // components
 import { LoggedIn } from './LoggedIn'