diff --git a/packages/components/assets/images/email.svg b/packages/components/assets/images/email.svg
new file mode 100644
index 0000000000..1ae1b83853
--- /dev/null
+++ b/packages/components/assets/images/email.svg
@@ -0,0 +1,18 @@
+
diff --git a/packages/components/src/CelebrationHero/CelebrationHere.stories.tsx b/packages/components/src/CelebrationHero/CelebrationHere.stories.tsx
deleted file mode 100644
index abc758c982..0000000000
--- a/packages/components/src/CelebrationHero/CelebrationHere.stories.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CelebrationHero } from './CelebrationHero'
-
-import type { Meta, StoryFn } from '@storybook/react'
-
-export default {
- title: 'Components/CelebrationHero',
- component: CelebrationHero,
-} as Meta
-
-export const Default: StoryFn = () => (
-
-)
diff --git a/packages/components/src/CelebrationHero/CelebrationHero.tsx b/packages/components/src/CelebrationHero/CelebrationHero.tsx
deleted file mode 100644
index 0a636a23a1..0000000000
--- a/packages/components/src/CelebrationHero/CelebrationHero.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Image } from 'theme-ui'
-
-import Celebration from '../../assets/images/celebration.svg'
-
-export const CelebrationHero = () => {
- return
-}
diff --git a/packages/components/src/HeroBanner/HeroBanner.stories.tsx b/packages/components/src/HeroBanner/HeroBanner.stories.tsx
new file mode 100644
index 0000000000..325ceaac13
--- /dev/null
+++ b/packages/components/src/HeroBanner/HeroBanner.stories.tsx
@@ -0,0 +1,16 @@
+import { HeroBanner } from './HeroBanner'
+
+import type { Meta, StoryFn } from '@storybook/react'
+
+export default {
+ title: 'Components/HeroBanner',
+ component: HeroBanner,
+} as Meta
+
+export const Celebration: StoryFn = () => (
+
+)
+
+export const Email: StoryFn = () => (
+
+)
diff --git a/packages/components/src/HeroBanner/HeroBanner.tsx b/packages/components/src/HeroBanner/HeroBanner.tsx
new file mode 100644
index 0000000000..9d02b79dc8
--- /dev/null
+++ b/packages/components/src/HeroBanner/HeroBanner.tsx
@@ -0,0 +1,17 @@
+import { Image } from 'theme-ui'
+
+import Celebration from '../../assets/images/celebration.svg'
+import Email from '../../assets/images/email.svg'
+
+export interface IProps {
+ type: 'celebration' | 'email'
+}
+
+export const HeroBanner = ({ type }: IProps) => {
+ const src = {
+ celebration: Celebration,
+ email: Email,
+ }
+
+ return
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 8590229916..3943e2c349 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -9,7 +9,6 @@ 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'
@@ -29,6 +28,7 @@ export { Guidelines } from './Guidelines/Guidelines'
export { FlagIcon, FlagIconHowTos, FlagIconEvents } from './FlagIcon/FlagIcon'
export { FollowButton } from './FollowButton/FollowButton'
export { GlobalStyles } from './GlobalStyles/GlobalStyles'
+export { HeroBanner } from './HeroBanner/HeroBanner'
export { Icon } from './Icon/Icon'
export { IconCountWithTooltip } from './IconCountWithTooltip/IconCountWithTooltip'
export { ImageCrop } from './ImageCrop/ImageCrop'
diff --git a/packages/cypress/src/integration/SignUp.spec.ts b/packages/cypress/src/integration/SignUp.spec.ts
index 8085897476..3227365dfa 100644
--- a/packages/cypress/src/integration/SignUp.spec.ts
+++ b/packages/cypress/src/integration/SignUp.spec.ts
@@ -32,7 +32,7 @@ describe('[User sign-up]', () => {
cy.step('Using valid inputs')
cy.signUpNewUser()
- cy.get('div').contains('Sign up successful').should('be.visible')
+ cy.contains('Yay! You signed up!')
cy.get('[data-cy=user-menu]')
})
})
diff --git a/src/pages/SignIn/SignIn.tsx b/src/pages/SignIn/SignIn.tsx
index 188bb9aa3b..8a2fc8b3c1 100644
--- a/src/pages/SignIn/SignIn.tsx
+++ b/src/pages/SignIn/SignIn.tsx
@@ -2,12 +2,7 @@ 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,
- CelebrationHero,
- FieldInput,
- TextNotification,
-} from 'oa-components'
+import { Button, FieldInput, HeroBanner, TextNotification } from 'oa-components'
import { getFriendlyMessage } from 'oa-shared'
import { PasswordField } from 'src/common/Form/PasswordField'
import { useCommonStores } from 'src/common/hooks/useCommonStores'
@@ -53,7 +48,6 @@ const SignInPage = observer((props: IProps) => {
const navigate = useNavigate()
const [{ authProvider, notificationProps, errorMsg }, setState] =
useState({
- // if passed form values from props initially populate
formValues: {
email: props.preloadValues ? props.preloadValues.email : '',
password: props.preloadValues ? props.preloadValues.password : '',
@@ -123,125 +117,88 @@ const SignInPage = observer((props: IProps) => {
mb={3}
>
-
-
-
- Welcome back
-
-
-
+
+
- {/* PauthProvider Provider Select */}
- {!authProvider && (
- <>
-
- Login with :
-
- {Object.values(AUTH_PROVIDERS).map((p) => (
-
- ))}
-
- )}
- {/* Login Form */}
- {authProvider && (
- <>
-
+ Log in
+
+
+ Don't have an account? Sign-up here
+
+
+
+
+ {notificationProps && notificationProps.text && (
+
+
- Log in to your account
-
-
-
-
-
-
-
-
-
- {errorMsg}
-
-
-
- Don't have an account?
-
-
-
- resetPasword(values.email)}
- >
- Lost password?
-
-
-
+ {getFriendlyMessage(notificationProps?.text)}
+
+
+ )}
- {notificationProps && (
-
-
- {getFriendlyMessage(notificationProps?.text)}
-
-
- )}
+ {errorMsg && {errorMsg}}
-
-
-
-
- )}
+
+
+
+
+
+
+
+
+
+
+ resetPasword(values.email)}
+ >
+ Forgotten password?
+
+
+
+
+
+
+
diff --git a/src/pages/SignUp/SignUp.tsx b/src/pages/SignUp/SignUp.tsx
index 57980d67d5..2c746f1ded 100644
--- a/src/pages/SignUp/SignUp.tsx
+++ b/src/pages/SignUp/SignUp.tsx
@@ -2,12 +2,7 @@ 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,
- CelebrationHero,
- ExternalLink,
- FieldInput,
-} from 'oa-components'
+import { Button, ExternalLink, FieldInput, HeroBanner } from 'oa-components'
import { FRIENDLY_MESSAGES } from 'oa-shared'
import { PasswordField } from 'src/common/Form/PasswordField'
import { useCommonStores } from 'src/common/hooks/useCommonStores'
@@ -132,53 +127,44 @@ const SignUpPage = observer(() => {
mb={3}
>
-
-
-
- Hey, nice to see you here
-
-
-
+
+
-
- Create an account
-
-
+
+ Create an account
- Already have an account ?
{' '}
- Sign-in here
+ Already have an account? Sign-in here
-
- {state.errorMsg}
-
+ {state.errorMsg && (
+
+ {state.errorMsg}
+
+ )}
-
+
Think carefully. You can't change this.
{
/>
-
+
It can be personal or work email.
{
/>
{
/>
{
validate={required}
/>
-
+