feat(404-page): upgrade 404 page animations

upgrade TitleWithDivider to use all available props - no breaking changes

components/HoC/TitleWithDivider.tsx

@@ -6,15 +6,15 @@ interface ITitleDividerProps extends MUI.TypographyProps {
 }
 
 const TitleWithDivider: React.FC<ITitleDividerProps> = (props) => {
-  const { text, variant, gutterBottom } = props
+  const { text, color, ...rest } = props
 
   return (
     <MUI.Grid item xs={12}>
       <TitleAnimation>
         <MUI.Typography
-          color="primary"
-          variant={variant}
-          gutterBottom={gutterBottom}>
+          color={color || 'primary'}
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...rest}>
           {text}
         </MUI.Typography>
       </TitleAnimation>

pages/404.tsx

@@ -1,21 +1,31 @@
+import TitleWithDivider from '@components/HoC/TitleWithDivider'
 import { PageAnimation } from '@components/UI'
 import * as MUI from '@material-ui/core'
 import { lpar } from '@util/characters'
 import { PageProps } from 'PageProps'
 
 const Page404: React.FC<PageProps> = () => (
-  <PageAnimation layoutID="layout">
-    <MUI.Typography variant="h1" color="primary" gutterBottom align="center">
-      404 - Page Not Found :{lpar}
-    </MUI.Typography>
+  <>
+    <TitleWithDivider
+      align="center"
+      variant="h1"
+      text={`
+      404 - Page Not Found :${lpar}`}
+    />
     {/* TODO: Make this a Framer animation to showcase and make errors more fun */}
-    <MUI.Typography variant="h2" color="secondary" gutterBottom align="center">
-      Redirecting in 10 seconds...
-    </MUI.Typography>
-    <MUI.Button fullWidth size="large">
-      Go to front page?
-    </MUI.Button>
-  </PageAnimation>
+    <PageAnimation layoutID="layout">
+      <MUI.Typography
+        variant="h2"
+        color="secondary"
+        gutterBottom
+        align="center">
+        Redirecting in 10 seconds...
+      </MUI.Typography>
+      <MUI.Button fullWidth size="large">
+        Go to front page?
+      </MUI.Button>
+    </PageAnimation>
+  </>
 )
 
 export default Page404