[C-3354, C-3396, C-3397] Sign up QA

packages/common/src/audius-query/AudiusQueryContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react'
+import { createContext, useContext } from 'react'
 
 import type { AudiusSdk } from '@audius/sdk'
 import type { Dispatch } from 'redux'
@@ -22,3 +22,15 @@ export type AudiusQueryContextType = {
 export const AudiusQueryContext = createContext<AudiusQueryContextType | null>(
   null
 )
+
+export const useAudiusQueryContext = () => {
+  const audiusQueryContext = useContext(AudiusQueryContext)
+
+  if (!audiusQueryContext) {
+    throw new Error(
+      'useQueryContext has to be used within <AudiusQueryContext.Provider>'
+    )
+  }
+
+  return audiusQueryContext
+}

packages/harmony/src/components/button/BaseButton/BaseButton.tsx

@@ -17,6 +17,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
     const {
       iconLeft: LeftIconComponent,
       iconRight: RightIconComponent,
+      isStaticIcon,
       disabled,
       isLoading,
       widthToHideText,
@@ -93,7 +94,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
       })
     }
 
-    const iconCss = {
+    const iconCss = !isStaticIcon && {
       '& path': {
         fill: 'currentcolor'
       }

packages/harmony/src/components/button/types.ts

@@ -53,6 +53,10 @@ export type BaseButtonProps = {
    */
   iconRight?: IconComponent
 
+  /**
+   * When true, do not override icon's fill colors
+   */
+  isStaticIcon?: boolean
   /**
    * Show a spinning loading state instead of the left icon
    */

packages/harmony/src/components/layout/Divider/Divider.tsx

@@ -36,7 +36,8 @@ export const Divider = (props: DividerProps) => {
     ...(!children &&
       orientation === 'vertical' && {
         borderRight: border,
-        alignSelf: 'stretch'
+        alignSelf: 'stretch',
+        height: 'auto'
       }),
     ...(!children &&
       orientation === 'horizontal' && {

packages/harmony/src/components/layout/Paper/types.ts

@@ -5,8 +5,6 @@ import type {
   ShadowOptions
 } from 'foundations'
 
-import type { FlexProps } from '../Flex'
-
 /**
  * An elevated container which stands out from the background.
  */
@@ -15,7 +13,7 @@ export type PaperProps = {
    * Background Color
    * @default white
    */
-  backgroundColor?: Exclude<BackgroundColors, 'default'>
+  backgroundColor?: BackgroundColors
 
   /**
    * Border type. If not provided, no border will be used.
@@ -33,5 +31,5 @@ export type PaperProps = {
    * Elevation Shadow
    * @default mid
    */
-  shadow?: Exclude<ShadowOptions, 'drop'> | 'none'
-} & FlexProps
+  shadow?: Exclude<ShadowOptions, 'drop'>
+}

packages/harmony/src/components/text-link/TextLink.stories.tsx

@@ -18,7 +18,7 @@ const meta: Meta<typeof TextLink> = {
   render: (props) => (
     <Flex direction='row' gap='4xl'>
       <TextLink {...props} />
-      <TextLink {...props} _isHovered />
+      <TextLink {...props} showUnderline />
     </Flex>
   )
 }

packages/harmony/src/components/text-link/TextLink.tsx

@@ -10,13 +10,13 @@ import type { TextLinkProps } from './types'
  */
 export const TextLink = (props: TextLinkProps) => {
   const {
-    _isHovered = false,
     asChild = false,
     children,
     variant = 'default',
     isExternal = false,
     onClick,
     textVariant,
+    showUnderline,
     ...other
   } = props
 
@@ -48,7 +48,7 @@ export const TextLink = (props: TextLinkProps) => {
         color: variantColors[variant],
         textDecoration: 'none',
         ':hover': hoverStyles,
-        ...(_isHovered && hoverStyles)
+        ...(showUnderline && hoverStyles)
       }}
       variant={textVariant}
       {...other}

packages/harmony/src/components/text-link/types.ts

@@ -28,22 +28,15 @@ export type TextLinkProps = TextLinkTextProps &
     textVariant?: TextProps['variant']
 
     /**
-     * If true, prevent the click event from being propagated to other elements.
-     * @default true
+     * When true, always show the link underline. This can help emphasize that
+     * a text-link is present when next to other text.
      */
-    stopPropagation?: boolean
+    showUnderline?: boolean
 
     /**
      * Mark as true if the link destination is outside of the app. Causes the
      * link to open in a new tab.
      * @default false
      */
     isExternal?: boolean
-
-    // Internal props
-
-    /**
-     * @ignore: This prop is for internal use only
-     */
-    _isHovered?: boolean
   }

packages/harmony/src/foundations/color/semantic.ts

@@ -29,7 +29,8 @@ const createSemanticTheme = (primitives: PrimitiveColors) => ({
     default: primitives.special.background,
     white: primitives.special.white,
     surface1: primitives.neutral.n25,
-    surface2: primitives.neutral.n100
+    surface2: primitives.neutral.n100,
+    accent: primitives.secondary.s300
   },
   border: {
     default: primitives.neutral.n100,

packages/harmony/src/foundations/shadows/shadows.ts

@@ -7,7 +7,8 @@ export const shadows = {
   emphasis:
     '0px 1.34018px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 15px 0px rgba(0, 0, 0, 0.1)',
   special: '0px 1px 20px -3px #565776',
-  drop: 'drop-shadow(0px 1.34018px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0px 6px 15px rgba(0, 0, 0, 0.1))'
+  drop: 'drop-shadow(0px 1.34018px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0px 6px 15px rgba(0, 0, 0, 0.1))',
+  flat: undefined
 }
 
 export type Shadows = typeof shadows

packages/harmony/src/icons/Logos.stories.mdx

@@ -11,6 +11,7 @@ import {
   IconLogoLinkByStripe,
   IconDiscord,
   IconFacebook,
+  IconMetamask,
   IconSnapChat,
   IconTelegram,
   IconTwitter,
@@ -67,6 +68,7 @@ Logos are used as a visual representation of our brand and other businesses we p
   <IconTelegram />
   <IconSnapChat />
   <IconTikTok />
+  <IconMetamask />
 </Flex>
 
 <Divider />

packages/harmony/src/icons/logos.ts

@@ -7,6 +7,7 @@ export { default as IconLogoCoinbase } from '../assets/icons/Coinbase.svg'
 export { default as IconLogoLinkByStripe } from '../assets/icons/LinkByStripe.svg'
 export { default as IconDiscord } from '../assets/icons/Discord.svg'
 export { default as IconFacebook } from '../assets/icons/Facebook.svg'
+export { default as IconMetamask } from '../assets/icons/Metamask.svg'
 export { default as IconSnapChat } from '../assets/icons/SnapChat.svg'
 export { default as IconTelegram } from '../assets/icons/Telegram.svg'
 export { default as IconTwitter } from '../assets/icons/Twitter.svg'

packages/web/src/app/App.tsx

@@ -19,8 +19,7 @@ import WebPlayer from './web-player/WebPlayer'
 import '../services/webVitals'
 
 const SignOn = lazy(() => import('pages/sign-on/SignOn'))
-const SignInPage = lazy(() => import('pages/sign-in-page'))
-const SignUpPage = lazy(() => import('pages/sign-up-page'))
+const SignOnPage = lazy(() => import('pages/sign-on-page'))
 
 export const AppInner = () => {
   const { isEnabled: isSignInRedesignEnabled } = useFlag(
@@ -31,11 +30,8 @@ export const AppInner = () => {
     <>
       <SomethingWrong />
       <Switch>
-        <Route path={SIGN_IN_PAGE}>
-          {isSignInRedesignEnabled ? <SignInPage /> : <SignOn signIn />}
-        </Route>
-        <Route path={SIGN_UP_PAGE}>
-          {isSignInRedesignEnabled ? <SignUpPage /> : <SignOn signIn={false} />}
+        <Route path={[SIGN_IN_PAGE, SIGN_UP_PAGE]}>
+          {isSignInRedesignEnabled ? <SignOnPage /> : <SignOn signIn />}
         </Route>
         <Route exact path='/oauth/auth'>
           <OAuthLoginPage />

packages/web/src/components/background-animations/BackgroundWaves.jsx

@@ -104,7 +104,7 @@ const BackgroundWaves = (props) => {
     <div
       ref={canvasRef}
       className={cn({ [props.className]: !!props.className })}
-      style={{
+      css={{
         position: 'fixed',
         top: 0,
         left: 0,

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

@@ -0,0 +1,15 @@
+import { PasswordInput, PasswordInputProps } from '@audius/harmony'
+import { useField } from 'formik'
+
+export type PasswordFieldProps = PasswordInputProps & {
+  name: string
+}
+
+export const PasswordField = (props: PasswordFieldProps) => {
+  const { name, ...other } = props
+  const [field, { touched, error }] = useField(name)
+
+  const hasError = Boolean(touched && error)
+
+  return <PasswordInput {...field} error={hasError} {...other} />
+}

packages/web/src/components/instagram-auth/InstagramAuth.tsx

@@ -174,7 +174,7 @@ const InstagramAuth = ({
   const getDefaultButtonContent = useCallback(() => <span>{text}</span>, [text])
 
   return (
-    <div
+    <span
       role='button'
       onClick={handleClick}
       style={style}
@@ -184,7 +184,7 @@ const InstagramAuth = ({
       })}
     >
       {children || getDefaultButtonContent()}
-    </div>
+    </span>
   )
 }
 

packages/web/src/components/preload-image/PreloadImage.tsx

@@ -18,7 +18,7 @@ const PreloadImage = ({
   alt?: string
   asBackground?: boolean
   preloaded?: boolean
-  className: string
+  className?: string
 }) => {
   const [isLoaded, setIsLoaded] = useState(preloaded)
   useEffect(() => {

packages/web/src/components/stepped-progress/SteppedProgress.tsx

@@ -1,6 +1,6 @@
-import { forwardRef, useEffect, useRef, useState } from 'react'
+import { Fragment, forwardRef, useEffect, useRef, useState } from 'react'
 
-import { Flex, IconComponent, Text } from '@audius/harmony'
+import { Box, Flex, IconComponent, Text } from '@audius/harmony'
 
 import { Divider } from 'components/divider'
 
@@ -73,10 +73,10 @@ export const SteppedProgress = ({
     return () => window.removeEventListener('resize', setTabPosition)
   }, [activeStep, steps])
   return (
-    <>
+    <Box>
       <Flex alignItems='center' gap='s'>
         {steps.map((s, i) => (
-          <>
+          <Fragment key={s.key}>
             <Step
               ref={(el) => {
                 if (el) {
@@ -86,18 +86,17 @@ export const SteppedProgress = ({
               icon={s.icon}
               label={s.label}
               isActive={activeStep === s.key}
-              key={s.key}
             />
             {i !== steps.length - 1 ? (
               <Divider className={styles.connector} variant='default' />
             ) : null}
-          </>
+          </Fragment>
         ))}
       </Flex>
       <span
         className={styles.underline}
         style={{ left: stepUnderlineLeft, width: stepUnderlineWidth }}
       />
-    </>
+    </Box>
   )
 }

packages/web/src/components/twitter-auth/TwitterAuth.tsx

@@ -168,14 +168,14 @@ const TwitterAuth = (props: TwitterAuthProps) => {
   }
 
   return (
-    <div
+    <span
       role='button'
       onClick={onButtonClick}
       style={style}
       className={className}
     >
       {children || getDefaultButtonContent()}
-    </div>
+    </span>
   )
 }