From 4364db502cee96b21f683f5945a5d8487b004705 Mon Sep 17 00:00:00 2001
From: Nikki Kang <kangaroo233@gmail.com>
Date: Thu, 2 Nov 2023 13:45:24 -0300
Subject: [PATCH] plug pages into audius values

---
 .../src/components/layout/Flex/index.ts       |   1 +
 .../pages/sign-in-page/SignInPage.module.css  |   4 -
 .../pages/sign-in-page/SignInPageDesktop.tsx  |  15 +-
 .../desktop/LeftContentContainer.module.css   |   4 +
 .../desktop/LeftContentContainer.tsx          |  25 ++
 .../sign-up-page/pages/CreatePasswordPage.tsx | 290 ++++++++++--------
 .../sign-up-page/pages/SignUpPage.module.css  |   4 -
 .../pages/sign-up-page/pages/SignUpPage.tsx   | 197 ++++++------
 .../styles/CreatePasswordPage.module.css      |  17 +-
 9 files changed, 305 insertions(+), 252 deletions(-)
 create mode 100644 packages/web/src/pages/sign-on/components/desktop/LeftContentContainer.module.css
 create mode 100644 packages/web/src/pages/sign-on/components/desktop/LeftContentContainer.tsx

diff --git a/packages/harmony/src/components/layout/Flex/index.ts b/packages/harmony/src/components/layout/Flex/index.ts
index 12035e6be9c..f44f7c9b385 100644
--- a/packages/harmony/src/components/layout/Flex/index.ts
+++ b/packages/harmony/src/components/layout/Flex/index.ts
@@ -1 +1,2 @@
 export { Flex } from './Flex'
+export { FlexProps } from './types'
diff --git a/packages/web/src/pages/sign-in-page/SignInPage.module.css b/packages/web/src/pages/sign-in-page/SignInPage.module.css
index c18e247e5c2..0292f0fa773 100644
--- a/packages/web/src/pages/sign-in-page/SignInPage.module.css
+++ b/packages/web/src/pages/sign-in-page/SignInPage.module.css
@@ -1,7 +1,3 @@
-.root {
-  background-color: var(--harmony-white);
-}
-
 .logo {
   max-height: 160px;
   max-width: 160px;
diff --git a/packages/web/src/pages/sign-in-page/SignInPageDesktop.tsx b/packages/web/src/pages/sign-in-page/SignInPageDesktop.tsx
index 086db71f0c7..5d1b9fd44f4 100644
--- a/packages/web/src/pages/sign-in-page/SignInPageDesktop.tsx
+++ b/packages/web/src/pages/sign-in-page/SignInPageDesktop.tsx
@@ -17,6 +17,7 @@ import { PageWithAudiusValues } from 'pages/sign-on/components/desktop/PageWithA
 import { SIGN_UP_PAGE } from 'utils/route'
 
 import styles from './SignInPage.module.css'
+import { LeftContentContainer } from 'pages/sign-on/components/desktop/LeftContentContainer'
 
 const messages = {
   title: 'Sign Into Audius',
@@ -31,17 +32,7 @@ export const SignInPageDesktop = () => {
   return (
     <Flex h='100%' alignItems='center' justifyContent='center'>
       <PageWithAudiusValues>
-        <Flex
-          className={styles.root}
-          h='100%'
-          w={480}
-          // want 80px but don't have var for it
-          pv='4xl'
-          ph='2xl'
-          direction='column'
-          gap='2xl'
-          justifyContent='space-between'
-        >
+        <LeftContentContainer gap='2xl' justifyContent='space-between'>
           {/* TODO: confirm 40px spacing value */}
           <Flex direction='column' gap='2xl' alignItems='center'>
             <PreloadImage
@@ -93,7 +84,7 @@ export const SignInPageDesktop = () => {
             to={SIGN_UP_PAGE}
             text={messages.createAccount}
           />{' '}
-        </Flex>
+        </LeftContentContainer>
       </PageWithAudiusValues>
     </Flex>
   )
diff --git a/packages/web/src/pages/sign-on/components/desktop/LeftContentContainer.module.css b/packages/web/src/pages/sign-on/components/desktop/LeftContentContainer.module.css
new file mode 100644
index 00000000000..294b1fa21f2
--- /dev/null
+++ b/packages/web/src/pages/sign-on/components/desktop/LeftContentContainer.module.css
@@ -0,0 +1,4 @@
+.root {
+  background-color: var(--harmony-white);
+  text-align: left;
+}
diff --git a/packages/web/src/pages/sign-on/components/desktop/LeftContentContainer.tsx b/packages/web/src/pages/sign-on/components/desktop/LeftContentContainer.tsx
new file mode 100644
index 00000000000..aa6d5e5e0fd
--- /dev/null
+++ b/packages/web/src/pages/sign-on/components/desktop/LeftContentContainer.tsx
@@ -0,0 +1,25 @@
+import { PropsWithChildren } from 'react'
+
+import { Flex, FlexProps } from '@audius/harmony'
+
+import styles from './LeftContentContainer.module.css'
+
+type LeftContentContainerProps = PropsWithChildren<FlexProps>
+
+export const LeftContentContainer = (props: LeftContentContainerProps) => {
+  const { children, ...restProps } = props
+
+  return (
+    <Flex
+      className={styles.root}
+      h='100%'
+      w={480}
+      pv='4xl'
+      ph='2xl'
+      direction='column'
+      {...restProps}
+    >
+      {children}
+    </Flex>
+  )
+}
diff --git a/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx b/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx
index 29b3ded030c..38682fa0ac6 100644
--- a/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx
+++ b/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx
@@ -5,6 +5,7 @@ import {
   Button,
   ButtonType,
   Flex,
+  IconArrowLeft,
   IconArrowRight,
   Text,
   TextInput
@@ -22,6 +23,7 @@ import { ExternalLink } from 'components/link'
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
 import {
   PRIVACY_POLICY,
+  SIGN_UP_EMAIL_PAGE,
   SIGN_UP_HANDLE_PAGE,
   SIGN_UP_START_PAGE,
   TERMS_OF_SERVICE
@@ -36,6 +38,9 @@ import {
   getNumberRequirementStatus,
   isRequirementsFulfilled
 } from '../utils/passwordRequirementUtils'
+import { PageWithAudiusValues } from 'pages/sign-on/components/desktop/PageWithAudiusValues'
+import { LeftContentContainer } from 'pages/sign-on/components/desktop/LeftContentContainer'
+import { IconButton } from '@audius/stems'
 
 const messages = {
   createYourPassword: 'Create Your Password',
@@ -57,7 +62,8 @@ const messages = {
     "By clicking continue, you state you have read and agree to Audius' ",
   termsOfService: 'Terms of Service',
   and: ' and ',
-  privacyPolicy: 'Privacy Policy.'
+  privacyPolicy: 'Privacy Policy.',
+  goBack: 'Go back'
 }
 
 const initialValues = {
@@ -81,6 +87,10 @@ export const CreatePasswordPage = () => {
     }
   }, [emailField.value, navigate])
 
+  const handleClickBackIcon = useCallback(() => {
+    navigate(SIGN_UP_EMAIL_PAGE)
+  }, [])
+
   const handleSubmit = useCallback(
     async ({ password, confirmPassword }: CreatePasswordValues) => {
       const fulfillsRequirements = await isRequirementsFulfilled({
@@ -223,142 +233,156 @@ export const CreatePasswordPage = () => {
   const isValid = !hasPasswordError && !hasConfirmPasswordError
 
   return (
-    // TODO: Remove all props and styles expect `direction='column'` when this page is plugged into sign up modal.
-    <Flex
-      w={480}
-      h={'calc(100vh - 88px)'}
-      p={'3xl'}
-      className={styles.contentContainer}
-      direction='column'
-    >
-      <Box>
-        <Box mt='xl'>
-          <Text color='heading' size='l' strength='default' variant='heading'>
-            {messages.createYourPassword}
-          </Text>
-        </Box>
-        <Box mt='l'>
-          <Text color='default' size='l' variant='body'>
-            {messages.description}
-          </Text>
-        </Box>
-        <Box mt='2xl'>
-          <Text variant='label' size='xs'>
-            {messages.yourEmail}
-          </Text>
-          <Text variant='body' size='m'>
-            {emailField.value}
-          </Text>
-        </Box>
-      </Box>
-      <Box mt='l' className={styles.formOuterContainer}>
-        <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-          {({
-            values,
-            setFieldValue,
-            isSubmitting,
-            handleBlur: formikHandleBlur,
-            touched
-          }) => (
-            <Form style={{ height: '100%' }}>
-              <Flex direction='column' justifyContent='space-between' h='100%'>
-                <Box>
+    <Flex h='100%' alignItems='center' justifyContent='center'>
+      <PageWithAudiusValues>
+        <LeftContentContainer pv='2xl'>
+          <Box>
+            <IconButton
+              onClick={handleClickBackIcon}
+              aria-label={messages.goBack}
+              icon={<IconArrowLeft />}
+              className={styles.backIcon}
+            />
+            <Box mt='xl'>
+              <Text
+                color='heading'
+                size='l'
+                strength='default'
+                variant='heading'
+              >
+                {messages.createYourPassword}
+              </Text>
+            </Box>
+            <Box mt='l'>
+              <Text color='default' size='l' variant='body'>
+                {messages.description}
+              </Text>
+            </Box>
+            <Box mt='2xl'>
+              <Text variant='label' size='xs'>
+                {messages.yourEmail}
+              </Text>
+              <Text variant='body' size='m'>
+                {emailField.value}
+              </Text>
+            </Box>
+          </Box>
+          <Box mt='l' className={styles.formOuterContainer}>
+            <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+              {({
+                values,
+                setFieldValue,
+                isSubmitting,
+                handleBlur: formikHandleBlur,
+                touched
+              }) => (
+                <Form style={{ height: '100%' }}>
                   <Flex
                     direction='column'
-                    gap='l'
-                    className={styles.inputsContainer}
+                    justifyContent='space-between'
+                    h='100%'
                   >
-                    <TextInput
-                      name='password'
-                      type='password'
-                      autoFocus
-                      autoComplete='new-password'
-                      onChange={(e) => {
-                        setFieldValue('password', e.target.value)
-                        handlePasswordChange({
-                          password: e.target.value,
-                          confirmPassword: values.confirmPassword
-                        })
-                      }}
-                      onBlur={(e) => {
-                        formikHandleBlur(e)
-                        handlePasswordBlur(values)
-                      }}
-                      label={messages.passwordLabel}
-                      value={values.password}
-                      error={touched.password && hasPasswordError}
-                    />
-                    <TextInput
-                      name='confirmPassword'
-                      type='password'
-                      autoComplete='new-password'
-                      onChange={(e) => {
-                        setFieldValue('confirmPassword', e.target.value)
-                        handleConfirmPasswordChange({
-                          password: values.password,
-                          confirmPassword: e.target.value
-                        })
-                      }}
-                      onBlur={(e) => {
-                        formikHandleBlur(e)
-                        handleConfirmPasswordBlur(values)
-                      }}
-                      label={messages.confirmPasswordLabel}
-                      value={values.confirmPassword}
-                      error={touched.confirmPassword && hasConfirmPasswordError}
-                    />
-                  </Flex>
-                  <Flex mt='l' gap='l' direction='column'>
-                    {requirements.map((req) => (
-                      <CompletionChecklistItem
-                        key={req.key}
-                        status={req.status}
-                        label={req.label}
-                      />
-                    ))}
-                  </Flex>
-                </Box>
+                    <Box>
+                      <Flex
+                        direction='column'
+                        gap='l'
+                        className={styles.inputsContainer}
+                      >
+                        <TextInput
+                          name='password'
+                          type='password'
+                          autoFocus
+                          autoComplete='new-password'
+                          onChange={(e) => {
+                            setFieldValue('password', e.target.value)
+                            handlePasswordChange({
+                              password: e.target.value,
+                              confirmPassword: values.confirmPassword
+                            })
+                          }}
+                          onBlur={(e) => {
+                            formikHandleBlur(e)
+                            handlePasswordBlur(values)
+                          }}
+                          label={messages.passwordLabel}
+                          value={values.password}
+                          error={touched.password && hasPasswordError}
+                        />
+                        <TextInput
+                          name='confirmPassword'
+                          type='password'
+                          autoComplete='new-password'
+                          onChange={(e) => {
+                            setFieldValue('confirmPassword', e.target.value)
+                            handleConfirmPasswordChange({
+                              password: values.password,
+                              confirmPassword: e.target.value
+                            })
+                          }}
+                          onBlur={(e) => {
+                            formikHandleBlur(e)
+                            handleConfirmPasswordBlur(values)
+                          }}
+                          label={messages.confirmPasswordLabel}
+                          value={values.confirmPassword}
+                          error={
+                            touched.confirmPassword && hasConfirmPasswordError
+                          }
+                        />
+                      </Flex>
+                      <Flex mt='l' gap='l' direction='column'>
+                        {requirements.map((req) => (
+                          <CompletionChecklistItem
+                            key={req.key}
+                            status={req.status}
+                            label={req.label}
+                          />
+                        ))}
+                      </Flex>
+                    </Box>
 
-                <Flex direction='column' gap='l'>
-                  <Text
-                    color='default'
-                    size='s'
-                    strength='default'
-                    variant='body'
-                  >
-                    {messages.agreeTo}
-                    <ExternalLink
-                      variant='body'
-                      color='accentPurple'
-                      size='small'
-                      to={TERMS_OF_SERVICE}
-                    >
-                      {messages.termsOfService}
-                    </ExternalLink>
-                    {messages.and}
-                    <ExternalLink
-                      to={PRIVACY_POLICY}
-                      variant='body'
-                      color='accentPurple'
-                      size='small'
-                    >
-                      {messages.privacyPolicy}
-                    </ExternalLink>
-                  </Text>
-                  <Button
-                    variant={ButtonType.PRIMARY}
-                    disabled={isSubmitting || !isValid}
-                    type='submit'
-                    iconRight={IconArrowRight}
-                  >
-                    {messages.continue}
-                  </Button>
-                </Flex>
-              </Flex>
-            </Form>
-          )}
-        </Formik>
-      </Box>
+                    <Flex direction='column' gap='l'>
+                      <Text
+                        color='default'
+                        size='s'
+                        strength='default'
+                        variant='body'
+                      >
+                        {messages.agreeTo}
+                        <ExternalLink
+                          variant='body'
+                          color='accentPurple'
+                          size='small'
+                          to={TERMS_OF_SERVICE}
+                        >
+                          {messages.termsOfService}
+                        </ExternalLink>
+                        {messages.and}
+                        <ExternalLink
+                          to={PRIVACY_POLICY}
+                          variant='body'
+                          color='accentPurple'
+                          size='small'
+                        >
+                          {messages.privacyPolicy}
+                        </ExternalLink>
+                      </Text>
+                      <Button
+                        variant={ButtonType.PRIMARY}
+                        disabled={isSubmitting || !isValid}
+                        type='submit'
+                        iconRight={IconArrowRight}
+                      >
+                        {messages.continue}
+                      </Button>
+                    </Flex>
+                  </Flex>
+                </Form>
+              )}
+            </Formik>
+          </Box>
+        </LeftContentContainer>
+      </PageWithAudiusValues>
     </Flex>
   )
 }
diff --git a/packages/web/src/pages/sign-up-page/pages/SignUpPage.module.css b/packages/web/src/pages/sign-up-page/pages/SignUpPage.module.css
index 55e0c078b3b..a91e3c1ee9f 100644
--- a/packages/web/src/pages/sign-up-page/pages/SignUpPage.module.css
+++ b/packages/web/src/pages/sign-up-page/pages/SignUpPage.module.css
@@ -6,10 +6,6 @@
   object-fit: contain;
 }
 
-.leftAlignText {
-  text-align: left;
-}
-
 .flex1 {
   flex: 1;
 }
diff --git a/packages/web/src/pages/sign-up-page/pages/SignUpPage.tsx b/packages/web/src/pages/sign-up-page/pages/SignUpPage.tsx
index 6fabb7557e3..d2c551146ee 100644
--- a/packages/web/src/pages/sign-up-page/pages/SignUpPage.tsx
+++ b/packages/web/src/pages/sign-up-page/pages/SignUpPage.tsx
@@ -26,6 +26,8 @@ import { EMAIL_REGEX } from 'utils/email'
 import { SIGN_IN_PAGE, SIGN_UP_PASSWORD_PAGE } from 'utils/route'
 
 import styles from './SignUpPage.module.css'
+import { LeftContentContainer } from 'pages/sign-on/components/desktop/LeftContentContainer'
+import { PageWithAudiusValues } from 'pages/sign-on/components/desktop/PageWithAudiusValues'
 
 const messages = {
   title: 'Sign Up For Audius',
@@ -90,101 +92,108 @@ export const SignUpPage = () => {
   )
 
   return (
-    <Formik
-      validationSchema={toFormikValidationSchema(FormSchema)}
-      initialValues={initialValues}
-      onSubmit={submitHandler}
-      validateOnBlur
-      validateOnChange={false}
-    >
-      {({ isSubmitting }) => (
-        <Form>
-          <Flex
-            direction='column'
-            alignItems='center'
-            ph='2xl'
-            pv='4xl'
-            gap='2xl'
-          >
-            <PreloadImage
-              src={audiusLogoColored}
-              className={styles.logo}
-              alt='Audius Colored Logo'
-            />
-            <Flex
-              direction='column'
-              gap='l'
-              alignItems='flex-start'
-              w='100%'
-              className={styles.leftAlignText}
-            >
-              <Text color='heading' size='l' variant='heading' tag='h1'>
-                {messages.title}
-              </Text>
-              <Text color='default' size='l' variant='body' tag='h2'>
-                {messages.subHeader}
-              </Text>
-            </Flex>
-            <Flex direction='column' gap='l' w='100%' alignItems='flex-start'>
-              <HarmonyTextField
-                name='email'
-                autoFocus
-                autoComplete='email'
-                label={messages.emailLabel}
-              />
-              <Flex w='100%' alignItems='center' gap='s'>
-                <Divider className={styles.flex1} />
-                <Text variant='body' size='m' tag='p' color='subdued'>
-                  {messages.socialsDividerText}
-                </Text>
-                <Divider className={styles.flex1} />
-              </Flex>
-              <Flex direction='row' gap='s' w='100%'>
-                <SocialButton
-                  socialType='twitter'
-                  className={styles.flex1}
-                  aria-label='Sign up with Twitter'
+    <Flex h='100%' alignItems='center' justifyContent='center'>
+      <PageWithAudiusValues>
+        <Formik
+          validationSchema={toFormikValidationSchema(FormSchema)}
+          initialValues={initialValues}
+          onSubmit={submitHandler}
+          validateOnBlur
+          validateOnChange={false}
+        >
+          {({ isSubmitting }) => (
+            <Form>
+              <LeftContentContainer gap='2xl' alignItems='center'>
+                <PreloadImage
+                  src={audiusLogoColored}
+                  className={styles.logo}
+                  alt='Audius Colored Logo'
                 />
-                <SocialButton
-                  socialType='instagram'
-                  className={styles.flex1}
-                  aria-label='Sign up with Instagram'
-                />
-                <SocialButton
-                  socialType='tiktok'
-                  className={styles.flex1}
-                  aria-label='Sign up with TikTok'
-                />
-              </Flex>
-            </Flex>
-            <Flex direction='column' gap='l' alignItems='flex-start' w='100%'>
-              <Button
-                variant={ButtonType.PRIMARY}
-                type='submit'
-                fullWidth
-                iconRight={IconArrowRight}
-                isLoading={isSubmitting}
-              >
-                {messages.signUp}
-              </Button>
-
-              <Text size='l'>
-                {messages.haveAccount}{' '}
-                {/* TODO [C-3278]: Update with Harmony Link */}
-                <Link
-                  to={SIGN_IN_PAGE}
-                  variant='body'
-                  size='medium'
-                  strength='strong'
-                  color='secondary'
+                <Flex
+                  direction='column'
+                  gap='l'
+                  alignItems='flex-start'
+                  w='100%'
                 >
-                  {messages.signIn}
-                </Link>
-              </Text>
-            </Flex>
-          </Flex>
-        </Form>
-      )}
-    </Formik>
+                  <Text color='heading' size='l' variant='heading' tag='h1'>
+                    {messages.title}
+                  </Text>
+                  <Text color='default' size='l' variant='body' tag='h2'>
+                    {messages.subHeader}
+                  </Text>
+                </Flex>
+                <Flex
+                  direction='column'
+                  gap='l'
+                  w='100%'
+                  alignItems='flex-start'
+                >
+                  <HarmonyTextField
+                    name='email'
+                    autoFocus
+                    autoComplete='email'
+                    label={messages.emailLabel}
+                  />
+                  <Flex w='100%' alignItems='center' gap='s'>
+                    <Divider className={styles.flex1} />
+                    <Text variant='body' size='m' tag='p' color='subdued'>
+                      {messages.socialsDividerText}
+                    </Text>
+                    <Divider className={styles.flex1} />
+                  </Flex>
+                  <Flex direction='row' gap='s' w='100%'>
+                    <SocialButton
+                      socialType='twitter'
+                      className={styles.flex1}
+                      aria-label='Sign up with Twitter'
+                    />
+                    <SocialButton
+                      socialType='instagram'
+                      className={styles.flex1}
+                      aria-label='Sign up with Instagram'
+                    />
+                    <SocialButton
+                      socialType='tiktok'
+                      className={styles.flex1}
+                      aria-label='Sign up with TikTok'
+                    />
+                  </Flex>
+                </Flex>
+                <Flex
+                  direction='column'
+                  gap='l'
+                  alignItems='flex-start'
+                  w='100%'
+                >
+                  <Button
+                    variant={ButtonType.PRIMARY}
+                    type='submit'
+                    fullWidth
+                    iconRight={IconArrowRight}
+                    isLoading={isSubmitting}
+                  >
+                    {messages.signUp}
+                  </Button>
+
+                  <Text size='l'>
+                    {messages.haveAccount}{' '}
+                    {/* TODO [C-3278]: Update with Harmony Link */}
+                    <Link
+                      to={SIGN_IN_PAGE}
+                      variant='body'
+                      size='medium'
+                      strength='strong'
+                      color='secondary'
+                    >
+                      {messages.signIn}
+                    </Link>
+                  </Text>
+                </Flex>
+              </LeftContentContainer>
+            </Form>
+          )}
+        </Formik>
+      </PageWithAudiusValues>
+    </Flex>
   )
 }
diff --git a/packages/web/src/pages/sign-up-page/styles/CreatePasswordPage.module.css b/packages/web/src/pages/sign-up-page/styles/CreatePasswordPage.module.css
index b6f7579e381..68d50492106 100644
--- a/packages/web/src/pages/sign-up-page/styles/CreatePasswordPage.module.css
+++ b/packages/web/src/pages/sign-up-page/styles/CreatePasswordPage.module.css
@@ -1,8 +1,15 @@
-.contentContainer {
-  background-color: var(--static-white);
-  text-align: left;
-}
-
 .formOuterContainer {
   flex-grow: 1;
 }
+
+.backIcon {
+  color: var(--harmony-n-400);
+}
+
+.backIcon:hover {
+  color: var(--harmony-n-600);
+}
+
+.backIcon path {
+  fill: currentColor;
+}