import React from "react"; import { Avatar, Grid, Typography, makeStyles } from "@material-ui/core"; import DescriptionIcon from "@material-ui/icons/Description"; const useStyles = makeStyles((theme) => ({ image: { backgroundRepeat: "no-repeat", backgroundColor: "rgba(9, 109, 217, 0.671)", backgroundSize: "cover", backgroundPosition: "center", }, startText: { display: "flex", flexDirection: "column", marginTop: "1rem", }, tips: { backgroundColor: "white", width: "70%", height: "auto", padding: "10px", borderRadius: "18px", marginLeft: "15%", }, spacing: { padding: "15px 0px", }, avatar: { margin: theme.spacing(1), backgroundColor: theme.palette.primary.main, alignSelf: "center", }, })); function TipsLayout(props) { const classes = useStyles(); return ( <Grid item xs={false} sm={4} md={3} className={classes.image}> <Grid item className={classes.startText}> <Avatar className={classes.avatar}> <DescriptionIcon /> </Avatar> <Typography component="h1" variant="h5" className={classes.spacing} > Start Making Your Resume </Typography> </Grid> <Grid item className={classes.tips}> {props.tips} </Grid> </Grid> ); } export default TipsLayout;