sign up footer

AudiusProject · Nov 13, 2023 · 3df2e9c · 3df2e9c
1 parent e52b8c2
commit 3df2e9c
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 58 deletions.
diff --git 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) {
   <Flex justifyContent='space-between'>
     <ShadowLevel shadow='near' />
     <ShadowLevel shadow='mid' />
+    <ShadowLevel shadow='midInverted' />
     <ShadowLevel shadow='far' />
     <ShadowLevel shadow='emphasis' />
     <ShadowLevel
@@ -80,13 +81,14 @@ export function ShadowLevel(props) {
   </Flex>
 </Unstyled>
 
-| 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
@@ -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
@@ -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
@@ -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
@@ -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 (
-    <div>
+    <div className={styles.container}>
       <Switch>
         <SignUpRoute exact path={SIGN_UP_EMAIL_PAGE}>
           <SignUpPage />

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
@@ -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
@@ -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 (
+    <Flex
+      pv='l'
+      justifyContent='center'
+      gap='l'
+      alignItems='center'
+      direction='column'
+      className={styles.container}
+    >
+      {children}
+    </Flex>
+  )
+}
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
@@ -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
@@ -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 (
-    <Box pv='3xl' className={styles.container}>
-      <Formik
-        innerRef={formikRef}
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={handleSubmit}
-        validateOnChange={false}
-      >
-        {({ isSubmitting, isValid, isValidating }) => (
-          <Form>
-            <Box>
-              <Flex gap='l' direction='column'>
-                <Box>
-                  <Text size='s' variant='label' color='subdued'>
-                    1 {messages.outOf} 2
-                  </Text>
-                </Box>
-                <Box>
-                  <Text
-                    color='heading'
-                    size='l'
-                    strength='default'
-                    variant='heading'
-                  >
-                    {messages.pickYourHandle}
-                  </Text>
-                </Box>
-                <Box>
-                  <Text size='l' variant='body'>
-                    {messages.handleDescription}
-                  </Text>
+    <Formik
+      innerRef={formikRef}
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={handleSubmit}
+      validateOnChange={false}
+    >
+      {({ isSubmitting, isValid, isValidating }) => (
+        <Flex
+          direction='column'
+          className={styles.outerContainer}
+          justifyContent='space-between'
+        >
+          <Box pv='3xl' className={styles.contentContainer}>
+            <Form>
+              <Box>
+                <Flex gap='l' direction='column'>
+                  <Box>
+                    <Text size='s' variant='label' color='subdued'>
+                      1 {messages.outOf} 2
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text
+                      color='heading'
+                      size='l'
+                      strength='default'
+                      variant='heading'
+                    >
+                      {messages.pickYourHandle}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text size='l' variant='body'>
+                      {messages.handleDescription}
+                    </Text>
+                  </Box>
+                </Flex>
+                <Box mt='2xl'>
+                  <HandleField />
                 </Box>
-              </Flex>
-              <Box mt='2xl'>
-                <HandleField />
               </Box>
-              <Button
-                type='submit'
-                disabled={!isValid || isSubmitting}
-                isLoading={isSubmitting || isValidating}
-              >
-                {messages.continue}
-              </Button>
-            </Box>
-          </Form>
-        )}
-      </Formik>
-    </Box>
+            </Form>
+          </Box>
+          <ContinueFooter>
+            <Button
+              type='submit'
+              disabled={!isValid || isSubmitting}
+              isLoading={isSubmitting || isValidating}
+              iconRight={IconArrowRight}
+            >
+              {messages.continue}
+            </Button>
+            <PlainButton
+              onClick={handleClickBackIcon}
+              variant={PlainButtonType.SUBDUED}
+            >
+              {messages.goBack}
+            </PlainButton>
+          </ContinueFooter>
+        </Flex>
+      )}
+    </Formik>
   )
 }