From 3df2e9c9020997814e80544d3650fb5e6d0c8a4f Mon Sep 17 00:00:00 2001 From: Nikki Kang Date: Mon, 13 Nov 2023 17:01:52 -0300 Subject: [PATCH] sign up footer --- .../foundations/shadows/Shadow.stories.mdx | 16 ++- .../src/foundations/shadows/shadows.css | 2 + .../src/foundations/shadows/shadows.ts | 2 + .../sign-up-page/SignUpRootPage.module.css | 7 + .../src/pages/sign-up-page/SignUpRootPage.tsx | 5 +- .../components/ContinueFooter.module.css | 6 + .../components/ContinueFooter.tsx | 22 +++ .../pages/PickHandlePage.module.css | 6 +- .../sign-up-page/pages/PickHandlePage.tsx | 125 +++++++++++------- 9 files changed, 133 insertions(+), 58 deletions(-) create mode 100644 packages/web/src/pages/sign-up-page/SignUpRootPage.module.css create mode 100644 packages/web/src/pages/sign-up-page/components/ContinueFooter.module.css create mode 100644 packages/web/src/pages/sign-up-page/components/ContinueFooter.tsx diff --git a/packages/harmony/src/foundations/shadows/Shadow.stories.mdx b/packages/harmony/src/foundations/shadows/Shadow.stories.mdx index 7e5c33a2693..3f1183bac84 100644 --- a/packages/harmony/src/foundations/shadows/Shadow.stories.mdx +++ b/packages/harmony/src/foundations/shadows/Shadow.stories.mdx @@ -68,6 +68,7 @@ export function ShadowLevel(props) { + -| Name | Description | -| --------------- | ------------------------------------------------------------------------------------------------- | -| shadow-near | Optimal for onPress states on cards. | -| shadow-mid | Used for smaller card elements and the default state for card elements with a hover interaction. | -| shadow-far | Used for hover state for card elements, larger cards/sections without hover states, and modals | -| shadow-emphasis | Used for separating elements from their background | -| shadow-special | Shadow derived from the dominate color of the artwork it’s surrounding. Used for playing artwork. | +| Name | Description | +| ------------------- | ------------------------------------------------------------------------------------------------- | +| shadow-near | Optimal for onPress states on cards. | +| shadow-mid | Used for smaller card elements and the default state for card elements with a hover interaction. | +| shadow-mid-inverted | This is the same as mid but with the values offset the other direction. | +| shadow-far | Used for hover state for card elements, larger cards/sections without hover states, and modals | +| shadow-emphasis | Used for separating elements from their background | +| shadow-special | Shadow derived from the dominate color of the artwork it’s surrounding. Used for playing artwork. | ## Usage and examples diff --git a/packages/harmony/src/foundations/shadows/shadows.css b/packages/harmony/src/foundations/shadows/shadows.css index 74050156d73..b9a061a77e3 100644 --- a/packages/harmony/src/foundations/shadows/shadows.css +++ b/packages/harmony/src/foundations/shadows/shadows.css @@ -7,6 +7,8 @@ root { 0px 0px 6px 0px rgba(0, 0, 0, 0.02); --harmony-shadow-mid: 0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04); + --harmony-shadow-mid-inverted: 0px -4px 8px 0px rgba(0, 0, 0, 0.06), + 0px 0px 4px 0px rgba(0, 0, 0, 0.04); --harmony-shadow-far: 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 4px 0px rgba(0, 0, 0, 0.04); --harmony-shadow-emphasis: 0px 1.34018px 8px 0px rgba(0, 0, 0, 0.2), diff --git a/packages/harmony/src/foundations/shadows/shadows.ts b/packages/harmony/src/foundations/shadows/shadows.ts index d93a8b98efe..7605e214464 100644 --- a/packages/harmony/src/foundations/shadows/shadows.ts +++ b/packages/harmony/src/foundations/shadows/shadows.ts @@ -1,6 +1,8 @@ export const shadows = { near: '0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.02)', mid: '0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)', + midInverted: + '0px -4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)', far: '0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)', emphasis: '0px 1.34018px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 15px 0px rgba(0, 0, 0, 0.1)', diff --git a/packages/web/src/pages/sign-up-page/SignUpRootPage.module.css b/packages/web/src/pages/sign-up-page/SignUpRootPage.module.css new file mode 100644 index 00000000000..fa4a274721d --- /dev/null +++ b/packages/web/src/pages/sign-up-page/SignUpRootPage.module.css @@ -0,0 +1,7 @@ +.container { + height: 100%; +} + +.whitePageContainer { + height: 100%; +} diff --git a/packages/web/src/pages/sign-up-page/SignUpRootPage.tsx b/packages/web/src/pages/sign-up-page/SignUpRootPage.tsx index fdbfdebf26f..c26feb1e52c 100644 --- a/packages/web/src/pages/sign-up-page/SignUpRootPage.tsx +++ b/packages/web/src/pages/sign-up-page/SignUpRootPage.tsx @@ -15,6 +15,7 @@ import { TRENDING_PAGE } from 'utils/route' +import styles from './SignUpRootPage.module.css' import { ProgressHeader } from './components/ProgressHeader' import { CreatePasswordPage } from './pages/CreatePasswordPage' import { FinishProfilePage } from './pages/FinishProfilePage' @@ -34,7 +35,7 @@ const determineAllowedRoute = ( ) => { const attemptedPath = requestedRoute.replace('/signup/', '') // Have to type as string[] to avoid too narrow of a type for comparing against - let allowedRoutes: string[] = [SignUpPath.createEmail] // create email is available by default + let allowedRoutes: string[] = [SignUpPath.createEmail, SignUpPath.pickHandle] // create email is available by default if (signUpState.email.value) { // Already have email allowedRoutes.push(SignUpPath.createPassword) @@ -103,7 +104,7 @@ export function SignUpRoute({ children, ...rest }: RouteProps) { export const SignUpRootPage = () => { return ( -
+
diff --git a/packages/web/src/pages/sign-up-page/components/ContinueFooter.module.css b/packages/web/src/pages/sign-up-page/components/ContinueFooter.module.css new file mode 100644 index 00000000000..f7f6d77da52 --- /dev/null +++ b/packages/web/src/pages/sign-up-page/components/ContinueFooter.module.css @@ -0,0 +1,6 @@ +.container { + box-shadow: var(--harmony-shadow-mid-inverted); + width: 100%; + position: sticky; + bottom: 0; +} diff --git a/packages/web/src/pages/sign-up-page/components/ContinueFooter.tsx b/packages/web/src/pages/sign-up-page/components/ContinueFooter.tsx new file mode 100644 index 00000000000..c47751b165b --- /dev/null +++ b/packages/web/src/pages/sign-up-page/components/ContinueFooter.tsx @@ -0,0 +1,22 @@ +import { PropsWithChildren } from 'react' + +import { Flex } from '@audius/harmony' + +import styles from './ContinueFooter.module.css' + +type ContinueFooterProps = PropsWithChildren<{}> + +export const ContinueFooter = ({ children }: ContinueFooterProps) => { + return ( + + {children} + + ) +} diff --git a/packages/web/src/pages/sign-up-page/pages/PickHandlePage.module.css b/packages/web/src/pages/sign-up-page/pages/PickHandlePage.module.css index b8897482035..758138d7848 100644 --- a/packages/web/src/pages/sign-up-page/pages/PickHandlePage.module.css +++ b/packages/web/src/pages/sign-up-page/pages/PickHandlePage.module.css @@ -1,4 +1,8 @@ -.container { +.outerContainer { + height: 100%; +} + +.contentContainer { max-width: 610px; margin: 0 auto; } diff --git a/packages/web/src/pages/sign-up-page/pages/PickHandlePage.tsx b/packages/web/src/pages/sign-up-page/pages/PickHandlePage.tsx index 45e3aeb2153..38e137f5436 100644 --- a/packages/web/src/pages/sign-up-page/pages/PickHandlePage.tsx +++ b/packages/web/src/pages/sign-up-page/pages/PickHandlePage.tsx @@ -1,7 +1,15 @@ import { useCallback, useContext, useEffect, useMemo, useRef } from 'react' import { AudiusQueryContext, useDebouncedCallback } from '@audius/common' -import { Box, Button, Flex, Text } from '@audius/harmony' +import { + Box, + Button, + Flex, + IconArrowRight, + PlainButton, + PlainButtonType, + Text +} from '@audius/harmony' import { Form, Formik, FormikProps, useFormikContext } from 'formik' import { isEmpty } from 'lodash' import { useDispatch, useSelector } from 'react-redux' @@ -13,8 +21,9 @@ import { getHandleField } from 'common/store/pages/signon/selectors' import { HarmonyTextField } from 'components/form-fields/HarmonyTextField' import { useNavigateToPage } from 'hooks/useNavigateToPage' import { audiusBackendInstance } from 'services/audius-backend/audius-backend-instance' -import { SIGN_UP_FINISH_PROFILE_PAGE } from 'utils/route' +import { SIGN_UP_FINISH_PROFILE_PAGE, SIGN_UP_PASSWORD_PAGE } from 'utils/route' +import { ContinueFooter } from '../components/ContinueFooter' import { generateHandleSchema, errorMessages as handleErrorMessages @@ -30,6 +39,7 @@ const messages = { handle: 'Handle', continue: 'Continue', linkToClaim: 'Link to claim.', + goBack: 'Go Back', ...handleErrorMessages } @@ -101,6 +111,10 @@ export const PickHandlePage = () => { const { value } = useSelector(getHandleField) + const handleClickBackIcon = useCallback(() => { + navigate(SIGN_UP_PASSWORD_PAGE) + }, [navigate]) + const handleSubmit = useCallback( (values: PickHandleValues) => { const { handle } = values @@ -115,53 +129,68 @@ export const PickHandlePage = () => { } return ( - - - {({ isSubmitting, isValid, isValidating }) => ( -
- - - - - 1 {messages.outOf} 2 - - - - - {messages.pickYourHandle} - - - - - {messages.handleDescription} - + + {({ isSubmitting, isValid, isValidating }) => ( + + + + + + + + 1 {messages.outOf} 2 + + + + + {messages.pickYourHandle} + + + + + {messages.handleDescription} + + + + + - - - - - - - )} -
- + + + + + + {messages.goBack} + + + + )} + ) }