Fixing mobile error page

client/src/components/layouts/StartLayout.tsx

@@ -6,16 +6,26 @@ import { center, columnCenter } from '../../styles/flex';
 export interface Props extends BoxProps {
   header?: boolean;
   backBtn?: boolean;
+  boxProps?: BoxProps;
 }
 
-const StartLayout: React.FC<Props> = ({ children, sx, header = true, backBtn = false }) => (
-  <Box sx={{ minHeight: '100vh', ...center, ...sx }}>
+const StartLayout: React.FC<Props> = ({
+  children,
+  sx,
+  header = true,
+  backBtn = false,
+  boxProps,
+  ...rest
+}) => (
+  <Box sx={{ minHeight: '100vh', ...center, ...sx }} {...rest}>
     <Box
+      {...boxProps}
       sx={{
         height: '300px',
         justifyContent: 'flex-start',
         gap: '20px',
         ...columnCenter,
+        ...boxProps?.sx,
       }}
     >
       {header && <Header disableBackBtn={!backBtn} />}

client/src/pages/ErrorPage.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Stack, Typography } from '@mui/material';
 import HomeLayout, { Props as HomeLayoutProps } from '../components/layouts/HomeLayout';
 import StartLayout, { Props as StartLayoutProps } from '../components/layouts/StartLayout';
 import Button from '../components/UI/buttons/Button';
 import Routes from '../services/Router/Routes';
 import { LayoutProps } from '../types/utils/LayoutProps';
 import ApiError from '../services/Api/ApiError';
-import sadSmile from '/images/sad-smile.svg';
 import { center } from '../styles/flex';
+import usePublicFolder from '../hooks/usePublicFolder';
+import getRandom from '../utils/getRandom';
 
 type ErrorDetails = {
   title: string;
@@ -23,6 +24,9 @@ type Props = LayoutProps & {
 
 const ErrorPage: React.FC<Props> = (props) => {
   const { layout, error, errorDetails, actions, onGoHome, ...rest } = props;
+  const randomNum = useMemo(() => getRandom(1, 5), []);
+  const gifSrc = usePublicFolder(`gifs/error/${randomNum}.gif`);
+
   let status;
   let message;
   let title;
@@ -42,19 +46,34 @@ const ErrorPage: React.FC<Props> = (props) => {
   }
 
   const content = (
-    <Stack spacing={2} alignItems="center">
-      <Stack direction="row" justifyContent="center" alignItems="center" spacing={8}>
-        <img src={sadSmile} alt="sad smile" css={{ height: '200px', width: 'auto' }} />
-        <Typography fontWeight={400} variant="h2" color="error">
+    <Stack spacing={4} paddingInline={4} justifyContent="center" alignItems="center">
+      <img src={gifSrc} alt={title} css={{ maxWidth: 600, width: '100%', height: 'auto' }} />
+      <Stack
+        justifyContent="center"
+        alignItems="center"
+        spacing={3}
+        sx={{
+          wordBreak: 'break-word',
+          wordWrap: 'normal',
+        }}
+      >
+        <Typography
+          textAlign="center"
+          fontWeight={400}
+          variant="h3"
+          color={(theme) => theme.palette.error.main}
+          maxWidth={1200}
+        >
           {title}
         </Typography>
-      </Stack>
 
-      <Typography variant="h6">{message}</Typography>
-
-      <Stack direction="row" spacing={3} alignItems="center">
-        {actions}
+        <Typography textAlign="center" variant="h5" maxWidth={900}>
+          {message}
+        </Typography>
+      </Stack>
+      {actions}
 
+      <Stack>
         <Button
           to={layout === 'home' ? Routes.HOME : Routes.START}
           onClick={onGoHome}
@@ -78,7 +97,11 @@ const ErrorPage: React.FC<Props> = (props) => {
   }
 
   return (
-    <StartLayout header={false} {...(rest as StartLayoutProps)}>
+    <StartLayout
+      boxProps={{ sx: { maxWidth: '100%', height: 'unset' } }}
+      header={false}
+      {...(rest as StartLayoutProps)}
+    >
       {content}
     </StartLayout>
   );