[C-3260, C-3236] Layout for SignIn page (web)

packages/harmony/src/components/input/TextInput/TextInput.tsx

@@ -111,6 +111,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
  placeholder={shouldShowPlaceholder ? placeholderText : undefined}
  aria-label={props['aria-label'] ?? labelText}
  aria-required={required}
+ role='textbox'
  id={id}
  {...other}
  />

packages/harmony/src/components/typography/Icons/index.ts

@@ -209,3 +209,4 @@ export { ReactComponent as IconWithdraw } from '../../../assets/icons/Withdraw.s
 export { ReactComponent as IconFeed } from '../../../assets/icons/Feed.svg'
 export { ReactComponent as IconSave } from '../../../assets/icons/Save.svg'
 export { ReactComponent as IconrecoveryEmail } from '../../../assets/icons/recoveryEmail.svg'
+export { ReactComponent as IconHeadphones } from '../../../assets/icons/Headphones.svg'

packages/probers/cypress/e2e/signIn.cy.ts

@@ -23,7 +23,7 @@ describe('Sign In', () => {
  assertOnSignInPage()
  })
 
- it.only('can navigate to sign-in from sign-up', () => {
+ it('can navigate to sign-in from sign-up', () => {
  cy.visit('signup')
  cy.findByText(/already have an account?/i)
  cy.findByRole('link', { name: /Sign In/ }).click()

packages/web/src/components/form-fields/HarmonyTextField.tsx

@@ -0,0 +1,24 @@
+import { TextInput } from '@audius/harmony'
+import { TextInputProps } from '@audius/harmony/dist/components/input/TextInput/types'
+import { useField } from 'formik'
+
+export type TextFieldProps = TextInputProps & {
+ name: string
+}
+
+// TODO: rename to TextField and replace old usages
+export const HarmonyTextField = (props: TextFieldProps) => {
+ const { name, ...other } = props
+ const [field, { touched, error }] = useField(name)
+
+ const hasError = Boolean(touched && error)
+
+ return (
+ <TextInput
+ {...field}
+ error={hasError}
+ helperText={hasError ? error : undefined}
+ {...other}
+ />
+ )
+}

packages/web/src/pages/sign-in-page/SignInPage.module.css

@@ -0,0 +1,11 @@
+.root {
+ background-color: var(--harmony-white);
+}
+
+.logo {
+ max-height: 160px;
+ max-width: 160px;
+ height: 100%;
+ width: 100%;
+ object-fit: contain;
+}

packages/web/src/pages/sign-in-page/SignInPage.tsx

@@ -1,21 +1,34 @@
 import { useCallback } from 'react'
 
-import { Button } from '@audius/harmony'
+import {
+ Box,
+ Button,
+ Flex,
+ IconArrowRight,
+ IconVisibilityHidden,
+ Text
+} from '@audius/harmony'
 import { Button as ButtonTmp } from '@audius/stems'
 import { Form, Formik } from 'formik'
 import { useDispatch } from 'react-redux'
 import { Link } from 'react-router-dom'
 
+import audiusLogoColored from 'assets/img/audiusLogoColored.png'
 import { signIn } from 'common/store/pages/signon/actions'
-import { TextField } from 'components/form-fields'
+import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
+import PreloadImage from 'components/preload-image/PreloadImage'
+import { PageWithAudiusValues } from 'pages/sign-on/components/desktop/PageWithAudiusValues'
 import { SIGN_UP_PAGE } from 'utils/route'
 
+import styles from './SignInPage.module.css'
+
 const messages = {
-header: 'Sign Into Audius',
+title: 'Sign Into Audius',
  emailLabel: 'Email',
  passwordLabel: 'Password',
  signIn: 'Sign In',
- createAccount: 'Create An Account'
+ createAccount: 'Create An Account',
+ forgotPassword: 'Forgot password?'
 }
 
 type SignInValues = {
@@ -39,21 +52,74 @@ export const SignInPage = () => {
  )
 
  return (
- <div>
- <h1>{messages.header}</h1>
- <Formik initialValues={initialValues} onSubmit={handleSubmit}>
- <Form>
- <TextField name='email' label={messages.emailLabel} />
- <TextField name='password' label={messages.passwordLabel} />
- <Button type='submit'> {messages.signIn} </Button>
- </Form>
- </Formik>
- <ButtonTmp
- // @ts-ignore
- as={Link}
- to={SIGN_UP_PAGE}
- text={messages.createAccount}
- />
- </div>
+ <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'
+ >
+ {/* TODO: confirm 40px spacing value */}
+ <Flex direction='column' gap='2xl' alignItems='center'>
+ <PreloadImage
+ src={audiusLogoColored}
+ className={styles.logo}
+ alt='Audius Colored Logo'
+ />
+ <Flex w='100%' direction='row' justifyContent='flex-start'>
+ <Text variant='heading' size='l' tag='h1' color='heading'>
+ {messages.title}
+ </Text>
+ </Flex>
+ <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+ <Box w='100%'>
+ <Form>
+ <Flex direction='column' gap='2xl' w='100%'>
+ <Flex direction='column' gap='l'>
+ {/* TODO: replace old TextField */}
+ <HarmonyTextField
+ name='email'
+ label={messages.emailLabel}
+ />
+ {/* TODO: password visibility icon and toggle */}
+ <HarmonyTextField
+ name='password'
+ label={messages.passwordLabel}
+ endIcon={IconVisibilityHidden}
+ type='password'
+ />
+ </Flex>
+ <Flex direction='column' gap='l'>
+ <Button iconRight={IconArrowRight} type='submit'>
+ {messages.signIn}
+ </Button>
+ <Flex direction='row' alignItems='flexStart'>
+ <Text color='heading'>
+ {/* TODO: link destination */}
+ <Link to={''}>{messages.forgotPassword}</Link>
+ </Text>
+ </Flex>
+ </Flex>
+ </Flex>
+ </Form>
+ </Box>
+ </Formik>
+ </Flex>
+ {/* TODO: switch to stems button when we have asChild support */}
+ <ButtonTmp
+ // @ts-ignore
+ as={Link}
+ to={SIGN_UP_PAGE}
+ text={messages.createAccount}
+ />{' '}
+ </Flex>
+ </PageWithAudiusValues>
+ </Flex>
  )
 }

packages/web/src/pages/sign-on/components/desktop/PageWithAudiusValues.module.css

@@ -0,0 +1,26 @@
+.root {
+ box-shadow: var(--harmony-shadow-far);
+ /* TODO: should this be on box/flex? */
+ overflow: hidden;
+}
+
+.valuesRoot {
+ background: radial-gradient(
+ 77.16% 77.16% at 50% 51.81%,
+ rgba(91, 35, 225, 0.8) 0%,
+ rgba(113, 41, 230, 0.64) 67.96%,
+ rgba(162, 47, 235, 0.5) 100%
+ ),
+ url('../../../../assets/img/2-DJ-4-3.jpg'), lightgray 50% / cover no-repeat;
+ background-position: -175px;
+ background-size: cover;
+}
+
+.valueRow,
+.valuesRoot h1 {
+ color: var(--harmony-static-white);
+}
+
+.icon path {
+ fill: currentColor;
+}

packages/web/src/pages/sign-on/components/desktop/PageWithAudiusValues.tsx

@@ -0,0 +1,83 @@
+import React, { PropsWithChildren } from 'react'
+
+import {
+ Box,
+ Flex,
+ IconCloudUpload,
+ IconComponent,
+ IconHeadphones,
+ IconMessage,
+ Text
+} from '@audius/harmony'
+
+import styles from './PageWithAudiusValues.module.css'
+
+type PageWithAudiusValuesProps = PropsWithChildren<{}>
+
+const messages = {
+ heading: 'Your Music, Your Way',
+ unlimitedStreaming: 'Unlimited Streaming & Uploads',
+ directMessages: 'Message & Connect With Fans',
+ adFree: 'Ad-Free, Offline Listening'
+}
+
+export const PageWithAudiusValues = (props: PageWithAudiusValuesProps) => {
+ const { children } = props
+ return (
+ <Flex
+ className={styles.root}
+ direction='row'
+ w={1280}
+ h={864}
+ borderRadius='l'
+ shadow='far'
+ >
+ {children}
+ <AudiusValues />
+ </Flex>
+ )
+}
+
+const AudiusValue = (props: { icon: IconComponent; text: string }) => {
+ const { icon: Icon, text } = props
+ return (
+ <Flex
+ className={styles.valueRow}
+ direction='row'
+ gap='l'
+ alignItems='center'
+ >
+ <Icon className={styles.icon} />
+ <Text variant='heading' size='xl'>
+ {text}
+ </Text>
+ </Flex>
+ )
+}
+
+const AudiusValues = () => {
+ return (
+ <Flex
+ className={styles.valuesRoot}
+ w={800}
+ h={864}
+ direction='column'
+ alignItems='center'
+ justifyContent='center'
+ >
+ <Flex direction='column' gap='xl'>
+ <Box pb='l'>
+ <Text variant='display' size='s' strength='strong'>
+ {messages.heading}
+ </Text>
+ </Box>
+ <AudiusValue
+ icon={IconCloudUpload}
+ text={messages.unlimitedStreaming}
+ />
+ <AudiusValue icon={IconMessage} text={messages.directMessages} />
+ <AudiusValue icon={IconHeadphones} text={messages.adFree} />
+ </Flex>
+ </Flex>
+ )
+}