add some mobile responsive breakpoints

app/components/Voting.js

@@ -6,6 +6,8 @@ import AddPoll from './simple-voting/AddPoll';
 import PollsList from './simple-voting/PollsList';
 import StatusLogo from '../ui/components/StatusLogo';
 import Collapse from '@material-ui/core/Collapse';
+import Hidden from '@material-ui/core/Hidden';
+import Typography from '@material-ui/core/Typography';
 import { VotingContext } from '../context';
 
 class Voting extends PureComponent {
@@ -17,17 +19,22 @@ class Voting extends PureComponent {
     return (
       <VotingContext.Consumer>
         {({ getPolls, rawPolls }) =>
-          <Fragment>
+          <div>
             <CssBaseline />
             <AppBar togglePoll={togglePoll} />
             <div style={{ margin: '30px', textAlign: 'center' }}>
               <img src="images/logo.png" width="200" />
+              <Hidden smUp>
+                <Typography variant="headline" color="inherit">
+                  What should we build next?
+                </Typography>
+              </Hidden>
             </div>
             <Collapse in={addPoll}>
               <AddPoll togglePoll={togglePoll} getPolls={getPolls} />
             </Collapse>
             {rawPolls && <PollsList rawPolls={rawPolls}  />}
-          </Fragment>
+          </div>
         }
       </VotingContext.Consumer>
     )

app/components/standard/AppBar.js

@@ -7,6 +7,7 @@ import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
+import Hidden from '@material-ui/core/Hidden';
 import { VotingContext } from '../../context';
 
 const hasSnt = snt => Number(snt.balance) > 0;
@@ -14,34 +15,42 @@ const hasSnt = snt => Number(snt.balance) > 0;
 const styles = {
   root: {
     flexGrow: 1,
-    fontSize: '16px'
+    fontSize: '16px',
   },
-  flex: {
+  text: {
     flex: 1,
   },
   menuButton: {
     marginLeft: -12,
     marginRight: 20,
   },
+  toolBar: {
+    display: 'flex',
+    justifyContent: 'space-around'
+  }
 };
 
 function ButtonAppBar(props) {
   const { classes, togglePoll } = props;
   return (
     <VotingContext.Consumer>
-      {({ snt, toggleAdmin }) =>
-        <div className={classes.root} >
-          <AppBar position="static">
-            <Toolbar>
+    {({ snt, toggleAdmin }) =>
+      <div className={classes.root} >
+        <AppBar position="static">
+          <Toolbar className={classes.toolBar}>
+            <Hidden lgDown>
               <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={toggleAdmin} />
+            </Hidden>
+            <Hidden smDown>
               <Typography variant="display1" color="inherit" className={classes.flex}>
                 What should we build next?
               </Typography>
-              {snt && <Button disabled={!hasSnt(snt)} variant="outlined" color="inherit" style={{ fontSize: '16px' }} onClick={togglePoll}>{hasSnt(snt) ? 'Add Proposal' : 'Your account has no SNT'}</Button>}
-            </Toolbar>
-          </AppBar>
-        </div>
-      }
+            </Hidden>
+            {snt && <Button disabled={!hasSnt(snt)} variant="outlined" color="inherit" style={{ fontSize: '16px' }} onClick={togglePoll}>{hasSnt(snt) ? 'Add Proposal' : 'Your account has no SNT'}</Button>}
+          </Toolbar>
+        </AppBar>
+      </div>
+    }
     </VotingContext.Consumer>
   );
 }