From 3beb5c9fcbcffae1e3dab73592217d90a435f85a Mon Sep 17 00:00:00 2001
From: Abhishek Jakhar <abhishekjakhar.11@gmail.com>
Date: Fri, 23 Oct 2020 11:34:04 +0530
Subject: [PATCH] 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                |  5 ++++
 .../src/layout/ErrorPage/ErrorPage.test.tsx   | 12 ++++++----
 .../core/src/layout/ErrorPage/ErrorPage.tsx   | 11 +++++++--
 .../core/src/layout/ErrorPage/MicDrop.tsx     | 23 +++++++++++++++----
 4 files changed, 39 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/spicy-moles-yell.md

diff --git a/.changeset/spicy-moles-yell.md b/.changeset/spicy-moles-yell.md
new file mode 100644
index 0000000000..72b648b30b
--- /dev/null
+++ b/.changeset/spicy-moles-yell.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+make ErrorPage responsive + fix the test case
diff --git a/packages/core/src/layout/ErrorPage/ErrorPage.test.tsx b/packages/core/src/layout/ErrorPage/ErrorPage.test.tsx
index 91322ee2a5..23b42c0a11 100644
--- a/packages/core/src/layout/ErrorPage/ErrorPage.test.tsx
+++ b/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();
   });
 });
diff --git a/packages/core/src/layout/ErrorPage/ErrorPage.tsx b/packages/core/src/layout/ErrorPage/ErrorPage.tsx
index 3d80955cc9..b41308dd6d 100644
--- a/packages/core/src/layout/ErrorPage/ErrorPage.tsx
+++ b/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>
diff --git a/packages/core/src/layout/ErrorPage/MicDrop.tsx b/packages/core/src/layout/ErrorPage/MicDrop.tsx
index ca0a0ae0a6..aa8aaaf5e7 100644
--- a/packages/core/src/layout/ErrorPage/MicDrop.tsx
+++ b/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"
+    />
+  );
 };