build a proper alignment for a footer

Question

I just review a footer to make it better using a different UI framework. I try to align it but it's not properly working. The right side is not is overlapping. I tried using <div> and apply the style to set up a different element.

The issue I have is the text Follow behind the button need to be aligned with the icons and the image, input form, button and text 'Follow' and icons must be aligned in one single line and centred in the middle of the page.

The copyright text on the second line is properly aligned

I tried different combination but still not properly done

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Toolbar, Button } from '@material-ui/core';
import AppBar from '@material-ui/core/AppBar';
import VillageLogo from '../assets/images/village-logo.svg';
import InputBase from '@material-ui/core/InputBase';
import TextContents from '../theme/TextContents';
import FacebookIcon from '@material-ui/icons/Facebook';
import TwitterIcon from '@material-ui/icons/Twitter';
import InstagramIcon from '@material-ui/icons/Instagram';
import LinkedInIcon from '@material-ui/icons/LinkedIn';

const useStyles = makeStyles(theme => ({
    root: {
      display: "flex",
      boxShadow: "none",
      backgroundColor:  "#ffffff",
      marginTop: theme.spacing(3)
    },
    logo: {
        width:"214px",
        height:"28px",
        marginLeft: theme.spacing(20),
        marginRight: theme.spacing(3)

    },
    subscribe: {
        display: "flex",
        position: 'relative',
        borderRadius: "21px",
        backgroundColor: "#f4f7f8",
        marginRight: theme.spacing(2),
        marginLeft: theme.spacing(3),
        width: "467px",
        height: "40px",
       // [theme.breakpoints.up('sm')]: {
       //   marginLeft: theme.spacing(3),
      //    width: 'auto',
       // },
      },
      inputRoot: {
        color: "#cecece",
        fontFamily: "Source Sans Pro",
        fontSize: "18px"
      },
      inputInput: {
        paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
        width: "467px",
      //  [theme.breakpoints.up('md')]: {
      //    width: '20ch',
      //  },
      },
      whiteButton:{
        borderRadius: 21, 
        fontSize: '14px' ,
        fontWeight: "bold",
        textAlign: "center",
        color: "#ff7255",
        boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
        paddingTop: "5px",
        paddingBottom: "7px",
        paddingLeft: "20px",
        paddingRight: "20px",
        backgroundColor: "#ffffff", 
        borderColor: "#ffffff",
        fontFamily: "Source Sans Pro",
      },
      textFollow:{
        fontSize: '14px' ,
        fontWeight: "bold",
        textAlign: "center",
        color: "#ff7255",
        fontFamily: "Source Sans Pro",
      },
      textCopy:{
        fontSize: '14px' ,
        fontWeight: "bold",
        textAlign: "center",
        color: "#ff7255",
        fontFamily: "Source Sans Pro",
      },
      socialIcon:{
          width: '18px',
          height:'18px',
          color: '#ff7255'
      },
      followDesc:{
        display: "flex",
        alignItems: "center",
        marginLeft: theme.spacing(2),
        margin: "auto",
      },
      footerMenu:{
          display: "flex",
          position: 'relative'
      }

  }));


function Footer(){

    const styles = useStyles();

    return (
        <div className={styles.root}>
            <AppBar position="static" className={styles.root}>
                <Toolbar>
                    <img src={VillageLogo} alt="logo" className={styles.logo}/>
                    <div className={styles.footerMenu}>
                        <div className={styles.subscribe}>
                            <InputBase
                                placeholder={TextContents.SearchPlaceHolder}
                                classes={{
                                    root: styles.inputRoot,
                                    input: styles.inputInput,
                                }}
                                inputProps={{ 'aria-label': 'subscribe' }}/>
                            <Button className={styles.whiteButton}> {TextContents.Join}</Button>
                        </div>
                        <div className={styles.followDesc}>
                            <p className={styles.textFollow}>{TextContents.Follow}</p>
                            <FacebookIcon className={styles.socialIcon}/>
                            <TwitterIcon className={styles.socialIcon}/>
                            <InstagramIcon className={styles.socialIcon}/>
                            <LinkedInIcon className={styles.socialIcon}/>
                        </div>
                    </div>
                </Toolbar>
                <div>
                    <p className={styles.textCopy}>{TextContents.Copyright}</p>
                </div>
            </AppBar>
        </div>
    );
}



export default Footer

Answer 1

can you try this:

I added justifyContent: "center"

      followDesc:{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        marginLeft: theme.spacing(2),
        margin: "auto",
      },

oh and you need to get rid of margin on the p element.

try adding somewhere:

p { margin: 0 } or change the p to a div element instead

edit =====

to replicate it like the above do 2 things

add minWidth: 75px in here:

  textFollow: {
    fontSize: "14px",
    fontWeight: "bold",
    textAlign: "center",
    color: "#ff7255",
    fontFamily: "Source Sans Pro",
    minWidth: '75px'
  },

and move this line: <Button className={styles.whiteButton}> join</Button> underneath this line: <div className={styles.followDesc}>

so it looks like this:

<div className={styles.followDesc}>
  <Button className={styles.whiteButton}> join</Button>
  <p className={styles.textFollow}>Follow us</p>
  <FacebookIcon className={styles.socialIcon} />
  <TwitterIcon className={styles.socialIcon} />
  <InstagramIcon className={styles.socialIcon} />
  <LinkedInIcon className={styles.socialIcon} />
</div>