Uidesign

src/components/appBar.js

@@ -5,6 +5,8 @@ import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
 import Typography from '@material-ui/core/Typography'
 import Icon from '@material-ui/core/Icon'
+import Grid from '@material-ui/core/Grid'
+import SmarteaMasthead from '../images/smartea2x.png'
 
 const styles = {
   root: {
@@ -18,15 +20,18 @@ const styles = {
 function ButtonAppBar(props) {
   const { classes, bank } = props
   return (
-    <AppBar position="static">
+    <AppBar position="static" >
       <Toolbar>
-        <Typography variant="h6" color="inherit" className={classes.grow}>
-          SmarTea Pants
-        </Typography>
-        <div>
-          <Icon className={classes.icon}>upward_arrow</Icon>
-          <Typography color="inherit">Bank: ${bank}</Typography>
-        </div>
+        <Grid container justify="space-between" alignItems="center">
+          <Grid item sm={5}>
+            <Typography><img src={ SmarteaMasthead } /></Typography>
+          </Grid>
+          <div>
+            <Grid>
+              <Typography color="inherit" variant="h5">Bank: ${bank}</Typography>
+            </Grid> 
+          </div>
+        </Grid>
       </Toolbar>
     </AppBar>
   )

src/components/image.js

@@ -17,9 +17,9 @@ const Image = () => (
   <StaticQuery
     query={graphql`
       query {
-        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+        placeholderImage: file(relativePath: { eq: "smartea2x.png" }) {
           childImageSharp {
-            fluid(maxWidth: 300) {
+            fluid(maxWidth: 500) {
               ...GatsbyImageSharpFluid
             }
           }