diff --git a/client/src/views/footer/index.js b/client/src/views/footer/index.js index 1ee5d60ef..57268bbc8 100644 --- a/client/src/views/footer/index.js +++ b/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} > - + - - Advanced Algos Ltd. + + Advanced Algos Ltd. {width} Ground Floor, Palace Court, Church Street,
St. Julians STJ3049, Malta
Privacy Statement | Terms of Service
- - - + + + Stay in touch! Opt-in our mailing list to stay up to date with the Advanced Algos Project.
Thank you for your interest! We'll keep you informed - + - Meet us on Social Networks: - + Meet us on Social Networks: + { @@ -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))