All files / src/pages Error404.js

100% Statements 7/7
100% Branches 0/0
100% Functions 3/3
100% Lines 6/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54              61x   4x                                                   4x 8x 8x               4x                
import React from 'react';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';
import makeStyles from '@material-ui/core/styles/makeStyles';
import ErrorOutlineRoundedIcon from '@material-ui/icons/ErrorOutlineRounded';
import Typography from '@material-ui/core/Typography';
 
const Error404 = () => {
 
  const useStyles = makeStyles((theme) => ({
    errorPageStyle: {
      textAlign: 'center',
      '& h1': {
        [theme.breakpoints.down('sm')]: {
          color: theme.palette.warning.main,
          fontSize: '72px',
        },
        [theme.breakpoints.up('md')]: {
          color: theme.palette.warning.main,
          fontSize: '72px',
        },
      },
      '& h6': {
        [theme.breakpoints.down('sm')]: {
          fontSize: '24px',
          color: theme.palette.text.secondary,
        },
        [theme.breakpoints.up('md')]: {
          fontSize: '24px',
          color: theme.palette.text.secondary,
        },
      },
    },
  }));
 
  const ErrorSection = () => {
    const classes = useStyles();
    return (
      <Container maxWidth= 'sm' className={classes.errorPageStyle} >
        <Typography variant='h1'>404<ErrorOutlineRoundedIcon style={{ fontSize: 60 , transform: "translateX(12px) translateY(6px)" }}/></Typography>
        <Typography variant='h6'>Oops! The page you are looking for has moved or does not exist.</Typography>
      </Container>
    );
  };
 
  return (
    <Box className='containerDefault' py={10} px={5}>
      <ErrorSection/>
    </Box>
  )
}
 
export default Error404;