fix: 404 error page responsive and test case (#3052)

* make 404 error page responsive

* add alt attribute to mic drop image on 404 page

* fix test case of ErrorPage

.changeset/spicy-moles-yell.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+make ErrorPage responsive + fix the test case

packages/core/src/layout/ErrorPage/ErrorPage.test.tsx

@@ -20,12 +20,14 @@ import { renderInTestApp } from '@backstage/test-utils';
 
 describe('<ErrorPage/>', () => {
   it('should render with status code, status message and go back link', async () => {
-    const rendered = await renderInTestApp(
+    const { getByText, getByTestId } = await renderInTestApp(
       <ErrorPage status="404" statusMessage="PAGE NOT FOUND" />,
     );
-    rendered.getByText(/page not found/i);
-    rendered.getByText(/404/i);
-    rendered.getByText(/Looks like someone dropped the mic!/i);
-    expect(rendered.getByTestId('go-back-link')).toBeDefined();
+    expect(getByText(/page not found/i)).toBeInTheDocument();
+    expect(getByText(/404/i)).toBeInTheDocument();
+    expect(
+      getByText(/looks like someone dropped the mic!/i),
+    ).toBeInTheDocument();
+    expect(getByTestId('go-back-link')).toBeInTheDocument();
   });
 });

packages/core/src/layout/ErrorPage/ErrorPage.tsx

@@ -30,9 +30,16 @@ interface IErrorPageProps {
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   container: {
     padding: theme.spacing(8),
+    [theme.breakpoints.down('xs')]: {
+      padding: theme.spacing(2),
+    },
   },
   title: {
     paddingBottom: theme.spacing(5),
+    [theme.breakpoints.down('xs')]: {
+      paddingBottom: theme.spacing(4),
+      fontSize: 32,
+    },
   },
   subtitle: {
     color: theme.palette.textSubtle,
@@ -48,9 +55,9 @@ export const ErrorPage = ({
   const navigate = useNavigate();
 
   return (
-    <Grid container className={classes.container}>
+    <Grid container spacing={0} className={classes.container}>
       <MicDrop />
-      <Grid item xs={12} sm={4}>
+      <Grid item xs={12} sm={8} md={4}>
         <Typography variant="body1" className={classes.subtitle}>
           ERROR {status}: {statusMessage}
         </Typography>

packages/core/src/layout/ErrorPage/MicDrop.tsx

@@ -18,16 +18,29 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core';
 import MicDropSvgUrl from './mic-drop.svg';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   micDrop: {
     maxWidth: '60%',
-    bottom: 10,
-    right: 10,
     position: 'absolute',
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+    [theme.breakpoints.down('xs')]: {
+      maxWidth: '96%',
+      position: 'relative',
+      bottom: 'unset',
+      right: 'unset',
+      margin: `${theme.spacing(10)}px auto ${theme.spacing(4)}px`,
+    },
   },
-});
+}));
 
 export const MicDrop = () => {
   const classes = useStyles();
-  return <img src={MicDropSvgUrl} className={classes.micDrop} alt="" />;
+  return (
+    <img
+      src={MicDropSvgUrl}
+      className={classes.micDrop}
+      alt="Girl dropping mic from her hands"
+    />
+  );
 };