Add responsive styles to footer

client/src/views/footer/index.js

@@ -4,8 +4,9 @@ import classNames from 'classnames'
 import { NavLink, Link } from 'react-router-dom'
 
 import { withStyles } from '@material-ui/core/styles'
+import withWidth from '@material-ui/core/withWidth'
 import { connect } from 'react-redux'
-import lightGreen from '@material-ui/core/colors/lightGreen';
+import lightGreen from '@material-ui/core/colors/lightGreen'
 
 import Typography from '@material-ui/core/Typography'
 import Grid from '@material-ui/core/Grid'
@@ -31,13 +32,25 @@ const styles = theme => ({
     textDecoration: 'none'
   },
   descriptionLeft: {
-    marginLeft: theme.spacing.unit * 12
+    marginLeft: theme.spacing.unit * 8,
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: 0
+    },
+    [theme.breakpoints.down('xs')]: {
+      textAlign: 'center'
+    }
   },
   signupRight: {
-    marginTop: theme.spacing.unit * 3
+    marginTop: theme.spacing.unit * 2,
+    [theme.breakpoints.down('xs')]: {
+      textAlign: 'center'
+    }
   },
   signupContainer: {
-    marginBottom: theme.spacing.unit * 2
+    marginBottom: theme.spacing.unit * 2,
+    [theme.breakpoints.down('xs')]: {
+      textAlign: 'center'
+    }
   },
   footer: {
     borderTop: `4px solid ${theme.palette.secondary.light}`,
@@ -47,8 +60,14 @@ const styles = theme => ({
     color: theme.palette.primary.light
   },
   footerContainer: {
-    marginRight: theme.spacing.unit * 4,
-    marginLeft: theme.spacing.unit * 4
+    width: 'auto',
+    marginLeft: theme.spacing.unit * 3,
+    marginRight: theme.spacing.unit * 3,
+    [theme.breakpoints.up(1200 + theme.spacing.unit * 3 * 2)]: {
+      width: 1200,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    }
   },
   footerLink: {
     textDecoration: 'none',
@@ -59,6 +78,9 @@ const styles = theme => ({
   footerInputRoot: {
     'label + &': {
       marginTop: theme.spacing.unit * 3
+    },
+    [theme.breakpoints.down('xs')]: {
+      textAlign: 'center'
     }
   },
   footerInput: {
@@ -106,7 +128,7 @@ const styles = theme => ({
 
 class Footer extends Component {
   render () {
-    let { classes } = this.props
+    let { classes, width } = this.props
 
     const masterApp = this.props.context.masterApp
     if (masterApp.footer.visible === false) {
@@ -120,26 +142,26 @@ class Footer extends Component {
             justify='space-evenly'
             className={classes.footerContainer}
           >
-            <Grid item xs={12} md={4} >
+            <Grid item xs={12} sm={4} md={4}>
               <NavLink to='/'>
                 <img alt='' src={aalogo} width={'100%'} height={'auto'} />
               </NavLink>
-              <Grid container className={classes.descriptionLeft}>
-                <Typography variant='subtitle2' className={classes.textLight} ><strong>Advanced Algos Ltd.</strong></Typography>
+              <Grid container className={classes.descriptionLeft} direction='column'>
+                <Typography variant='subtitle2' className={classes.textLight} ><strong>Advanced Algos Ltd. {width}</strong></Typography>
                 <Typography variant='subtitle1' className={classes.textLight} gutterBottom>Ground Floor, Palace Court, Church Street,<br />St. Julians&nbsp;STJ3049, Malta</Typography>
                 <Typography variant='subtitle1' className={classes.textLight}>
                   <Link to='legal-privacy-statement.shtml' className={classes.linkLight}>Privacy Statement</Link> | <a href='legal-terms-of-service.shtml' className={classes.linkLight}>Terms of Service</a>
                 </Typography>
               </Grid>
             </Grid>
-            <Grid item xs={12} md={1} />
-            <Grid item xs={12} md={6} >
-              <Grid container className={classes.signupRight}>
+            <Grid item xs={12} sm={1} md={1} />
+            <Grid item xs={12} sm={7} md={6}>
+              <Grid container className={classes.signupRight} direction='column'>
                 <Typography variant='h4' className={classes.textWhite} gutterBottom>Stay in touch!</Typography>
                 <Typography variant='subtitle1' className={classes.textWhite} gutterBottom>Opt-in our mailing list to stay up to date with the Advanced Algos Project.</Typography>
                 <form id='email-signup' action='#' className='form-inline' autoComplete='off'>
                   <Typography variant='body2' className={classes.textSuccess} gutterBottom>Thank you for your interest! We'll keep you informed</Typography>
-                  <Grid container className={classes.signupContainer}>
+                  <Grid container className={classes.signupContainer} justify={width === 'xs' ? 'center' : 'flex-start'}>
                     <InputBase
                       id='footer-input'
                       placeholder='Enter your email'
@@ -152,8 +174,8 @@ class Footer extends Component {
                   </Grid>
                 </form>
               </Grid>
-              <Typography variant='subtitle1' className={classes.textWhite}>Meet us on Social Networks:</Typography>
-              <Grid container justify='flex-start'>
+              <Typography variant='subtitle1' className={classes.textWhite} style={{ textAlign: width === 'xs' ? 'center' : '' }}>Meet us on Social Networks:</Typography>
+              <Grid container justify={width === 'xs' ? 'center' : 'flex-start'}>
                 <Link to='https://t.me/advancedalgoscommunity' title='Join us on Telgram' className={classes.linkLight}>
                   <FontAwesomeIcon
                     icon={faTelegramPlane}
@@ -182,7 +204,8 @@ class Footer extends Component {
 }
 
 Footer.propTypes = {
-  classes: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired,
+  width: PropTypes.object
 }
 
 const mapStateToProps = (state) => {
@@ -191,4 +214,6 @@ const mapStateToProps = (state) => {
   }
 }
 
-export default connect(mapStateToProps)(withStyles(styles)(Footer))
+const FooterWithStyles = withStyles(styles)(Footer)
+
+export default connect(mapStateToProps)(withWidth()(FooterWithStyles))