feat: add hero image to auth pages (#3730)

packages/components/src/CelebrationHero/CelebrationHere.stories.tsx

@@ -0,0 +1,12 @@
+import { CelebrationHero } from './CelebrationHero'
+
+import type { Meta, StoryFn } from '@storybook/react'
+
+export default {
+  title: 'Components/CelebrationHero',
+  component: CelebrationHero,
+} as Meta<typeof CelebrationHero>
+
+export const Default: StoryFn<typeof CelebrationHero> = () => (
+  <CelebrationHero />
+)

packages/components/src/CelebrationHero/CelebrationHero.tsx

@@ -0,0 +1,7 @@
+import { Image } from 'theme-ui'
+
+import Celebration from '../../assets/images/celebration.svg'
+
+export const CelebrationHero = () => {
+  return <Image loading="lazy" src={Celebration} />
+}

packages/components/src/index.ts

@@ -9,6 +9,7 @@ export { CommentItem } from './CommentItem/CommentItem'
 export { CommentList } from './CommentList/CommentList'
 export { CreateReply } from './CreateReply/CreateReply'
 export { ConfirmModal } from './ConfirmModal/ConfirmModal'
+export { CelebrationHero } from './CelebrationHero/CelebrationHero'
 export { CreateComment } from './CreateComment/CreateComment'
 export { DiscussionContainer } from './DiscussionContainer/DiscussionContainer'
 export { DiscussionTitle } from './DiscussionTitle/DiscussionTitle'

src/pages/SignIn/SignIn.tsx

@@ -2,7 +2,12 @@ import React, { useEffect, useState } from 'react'
 import { Field, Form } from 'react-final-form'
 import { Link, useNavigate } from 'react-router-dom'
 import { observer } from 'mobx-react'
-import { Button, FieldInput, TextNotification } from 'oa-components'
+import {
+  Button,
+  CelebrationHero,
+  FieldInput,
+  TextNotification,
+} from 'oa-components'
 import { getFriendlyMessage } from 'oa-shared'
 import { PasswordField } from 'src/common/Form/PasswordField'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
@@ -114,10 +119,11 @@ const SignInPage = observer((props: IProps) => {
                 sx={{ width: '100%' }}
                 css={{ maxWidth: '620px' }}
                 mx={'auto'}
-                mt={['20px', '100px']}
+                mt={[5, 10]}
                 mb={3}
               >
                 <Flex sx={{ flexDirection: 'column', width: '100%' }}>
+                  <CelebrationHero />
                   <Card bg={'softblue'}>
                     <Flex px={3} py={2}>
                       <Heading>Welcome back</Heading>

src/pages/SignUp/SignUp.tsx

@@ -2,7 +2,12 @@ import { useState } from 'react'
 import { Field, Form } from 'react-final-form'
 import { Link, Navigate, useNavigate } from 'react-router-dom'
 import { observer } from 'mobx-react'
-import { Button, ExternalLink, FieldInput } from 'oa-components'
+import {
+  Button,
+  CelebrationHero,
+  ExternalLink,
+  FieldInput,
+} from 'oa-components'
 import { FRIENDLY_MESSAGES } from 'oa-shared'
 import { PasswordField } from 'src/common/Form/PasswordField'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
@@ -123,10 +128,11 @@ const SignUpPage = observer(() => {
               sx={{ width: '100%' }}
               css={{ maxWidth: '620px' }}
               mx={'auto'}
-              mt={20}
+              mt={[5, 10]}
               mb={3}
             >
               <Flex sx={{ flexDirection: 'column', width: '100%' }}>
+                <CelebrationHero />
                 <Card bg={'softblue'}>
                   <Flex px={3} py={2} sx={{ width: '100%' }}>
                     <Heading>Hey, nice to see you here</Heading>

src/pages/SignUp/SignUpMessage.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { Button } from 'oa-components'
+import { Button, CelebrationHero } from 'oa-components'
 import { Card, Flex, Heading, Text } from 'theme-ui'
 
 const SignUpMessagePage = () => (
@@ -9,10 +9,11 @@ const SignUpMessagePage = () => (
     sx={{ width: '100%' }}
     css={{ maxWidth: '620px' }}
     mx={'auto'}
-    mt={20}
+    mt={[5, 10]}
     mb={3}
   >
     <Flex sx={{ flexDirection: 'column', width: '100%' }}>
+      <CelebrationHero />
       <Card sx={{ backgroundColor: 'softblue', px: 3, py: 2 }}>
         <Heading>Sent</Heading>
       </Card>