Box Banner

Banner.js

import React from "react";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Avatar from "@material-ui/core/Avatar";
import Divider from "@material-ui/core/Divider";
import CssBaseline from "@material-ui/core/CssBaseline";
import SignalWifiOffIcon from "@material-ui/icons/SignalWifiOff";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import { unstable_Box as Box } from "@material-ui/core/Box";

function Banner() {
  return (
    <React.Fragment>
      <CssBaseline />
      <Paper elevation={0}>
        <Box pt={2} pr={1} pb={1} pl={2}>
          <Grid container spacing={16} alignItems="center" wrap="nowrap">
            <Grid item>
              <Box bgcolor="primary.main" clone>
                <Avatar>
                  <SignalWifiOffIcon />
                </Avatar>
              </Box>
            </Grid>
            <Grid item>
              <Typography>
                You have lost connection to the internet. This app is offline.
              </Typography>
            </Grid>
          </Grid>
          <Grid container justify="flex-end" spacing={8}>
            <Grid item>
              <Button color="primary">Turn on wifi</Button>
            </Grid>
          </Grid>
        </Box>
      </Paper>
      <Divider />
    </React.Fragment>
  );
}

export default Banner;