+Material UI, +Material Icons, +Header, +Colors

package.json

@@ -3,8 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "material-ui": "next",
+    "material-ui-icons": "^1.0.0-alpha.19",
+    "prop-types": "^15.5.10",
     "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react-dom": "^15.6.1",
+    "react-router-dom": "^4.1.1"
   },
   "devDependencies": {
     "eslint": "^3.19.0",

public/index.html

@@ -10,6 +10,8 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <!--<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">-->
 
   <!--

src/components/colors.js

@@ -0,0 +1,8 @@
+import { white, blueGrey } from 'material-ui/styles/colors';
+
+const colors = {
+  white,
+  lightestblueGrey: blueGrey[50],
+};
+
+export default colors;

src/components/header/Header.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import AppBar from 'material-ui/AppBar';
+import Toolbar from 'material-ui/Toolbar';
+import Typography from 'material-ui/Typography';
+import Button from 'material-ui/Button';
+import IconButton from 'material-ui/IconButton';
+import AvTimer from 'material-ui-icons/AvTimer';
+import Settings from 'material-ui-icons/Settings';
+import colors from './../colors';
+
+const styleSheet = createStyleSheet('Header', {
+  root: {
+    width: '100%',
+  },
+  bar: {
+    height: 70,
+  },
+  title: {
+    flex: 1,
+    paddingTop: 14,
+    fontSize: 36,
+    fontWeight: 400,
+    letterSpacing: 1.4,
+  },
+  settings: {
+    paddingTop: 3,
+    fontSize: 20,
+    color: colors.lightestblueGrey,
+    textTransform: 'capitalize',
+  },
+});
+
+function Header(props) {
+  const classes = props.classes;
+  return (
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar className={classes.bar}>
+          <IconButton color="contrast" aria-label="Menu">
+            <AvTimer color={colors.lightestblueGrey} />
+          </IconButton>
+          <Typography
+            color="inherit"
+            className={classes.title}
+            gutterBottom
+            align="center"
+          >
+            Time Table Generator
+          </Typography>
+          <Button>
+            <Settings color={colors.lightestblueGrey} />
+            <Typography
+              color="reds"
+              type="caption"
+              className={classes.settings}
+            >
+              &nbsp;Settings
+            </Typography>
+          </Button>
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}
+
+Header.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(Header);

src/components/home/Home.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import Header from '../../components/header/Header';
+
+class Home extends Component {
+  render() {
+    return <Header />;
+  }
+}
+
+export default Home;

src/index.js

@@ -1,12 +1,14 @@
-// @flow
-
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { MuiThemeProvider } from 'material-ui/styles';
 import registerServiceWorker from './registerServiceWorker';
 import './index.css';
+import Home from './components/home/Home';
 
 ReactDOM.render(
-  <div> Hello World!</div>,
+  <MuiThemeProvider>
+    <Home />
+  </MuiThemeProvider>,
   document.getElementById('root'),
 );