Revert "[C-3388] Improve sign-on root (#6753)" (#6764)

AudiusProject · Nov 21, 2023 · 29abb47 · 29abb47
1 parent 591a153
commit 29abb47
Show file tree

Hide file tree

Showing 26 changed files with 297 additions and 351 deletions.
diff --git a/packages/harmony/src/assets/icons/Metamask.svg b/packages/harmony/src/assets/icons/Metamask.svg
diff --git a/packages/harmony/src/components/button/BaseButton/BaseButton.tsx b/packages/harmony/src/components/button/BaseButton/BaseButton.tsx
@@ -17,7 +17,6 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
     const {
       iconLeft: LeftIconComponent,
       iconRight: RightIconComponent,
-      isStaticIcon,
       disabled,
       isLoading,
       widthToHideText,
@@ -94,7 +93,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
       })
     }
 
-    const iconCss = !isStaticIcon && {
+    const iconCss = {
       '& path': {
         fill: 'currentcolor'
       }

diff --git a/packages/harmony/src/components/button/types.ts b/packages/harmony/src/components/button/types.ts
@@ -53,10 +53,6 @@ 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
    */

diff --git a/packages/harmony/src/components/text-link/TextLink.stories.tsx b/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} showUnderline />
+      <TextLink {...props} _isHovered />
     </Flex>
   )
 }

diff --git a/packages/harmony/src/components/text-link/TextLink.tsx b/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,
-        ...(showUnderline && hoverStyles)
+        ...(_isHovered && hoverStyles)
       }}
       variant={textVariant}
       {...other}

diff --git a/packages/harmony/src/components/text-link/types.ts b/packages/harmony/src/components/text-link/types.ts
@@ -28,15 +28,22 @@ export type TextLinkProps = TextLinkTextProps &
     textVariant?: TextProps['variant']
 
     /**
-     * When true, always show the link underline. This can help emphasize that
-     * a text-link is present when next to other text.
+     * If true, prevent the click event from being propagated to other elements.
+     * @default true
      */
-    showUnderline?: boolean
+    stopPropagation?: 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
   }
diff --git a/packages/harmony/src/icons/Logos.stories.mdx b/packages/harmony/src/icons/Logos.stories.mdx
@@ -11,7 +11,6 @@ import {
   IconLogoLinkByStripe,
   IconDiscord,
   IconFacebook,
-  IconMetamask,
   IconSnapChat,
   IconTelegram,
   IconTwitter,
@@ -68,7 +67,6 @@ Logos are used as a visual representation of our brand and other businesses we p
   <IconTelegram />
   <IconSnapChat />
   <IconTikTok />
-  <IconMetamask />
 </Flex>
 
 <Divider />

diff --git a/packages/harmony/src/icons/logos.ts b/packages/harmony/src/icons/logos.ts
@@ -7,7 +7,6 @@ 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'

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

diff --git a/packages/web/src/assets/img/DJportrait.jpg b/packages/web/src/assets/img/DJportrait.jpg
diff --git a/packages/web/src/components/background-animations/BackgroundWaves.jsx b/packages/web/src/components/background-animations/BackgroundWaves.jsx
@@ -104,7 +104,7 @@ const BackgroundWaves = (props) => {
     <div
       ref={canvasRef}
       className={cn({ [props.className]: !!props.className })}
-      css={{
+      style={{
         position: 'fixed',
         top: 0,
         left: 0,

diff --git a/packages/web/src/components/preload-image/PreloadImage.tsx b/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(() => {

diff --git a/packages/web/src/pages/sign-in-page/SignInPage.module.css b/packages/web/src/pages/sign-in-page/SignInPage.module.css
@@ -0,0 +1,7 @@
+.logo {
+  max-height: 160px;
+  max-width: 160px;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
diff --git a/packages/web/src/pages/sign-in-page/SignInPage.tsx b/packages/web/src/pages/sign-in-page/SignInPage.tsx
@@ -1,41 +1,23 @@
 import { useCallback } from 'react'
 
-import {
-  Flex,
-  Text,
-  IconAudiusLogoHorizontalColor,
-  Button,
-  IconArrowRight,
-  TextLink,
-  ButtonType,
-  Box
-} from '@audius/harmony'
-import { Form, Formik } from 'formik'
-import { Helmet } from 'react-helmet'
+import { Box, IconCloseAlt, useTheme } from '@audius/harmony'
+import { Formik } from 'formik'
 import { useDispatch } from 'react-redux'
-import { Link } from 'react-router-dom'
+import { Link, useHistory } from 'react-router-dom'
 
-import audiusLogoColored from 'assets/img/audiusLogoColored.png'
 import { signIn } from 'common/store/pages/signon/actions'
-import { HarmonyPasswordField } from 'components/form-fields/HarmonyPasswordField'
-import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
-import PreloadImage from 'components/preload-image/PreloadImage'
+import BackgroundWaves from 'components/background-animations/BackgroundWaves'
+import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
+import Page from 'components/page/Page'
 import { useMedia } from 'hooks/useMedia'
-import { SIGN_UP_PAGE } from 'utils/route'
+import { BASE_URL, SIGN_IN_PAGE, TRENDING_PAGE } from 'utils/route'
 
-import { SignInWithMetaMaskButton } from './SignInWithMetaMaskButton'
+import { SignInPageDesktop } from './SignInPageDesktop'
+import { SignInPageMobile } from './SignInPageMobile'
 
 const messages = {
-  metaTitle: 'Sign In • Audius',
-  metaDescription: 'Sign into your Audius account',
-
-  title: 'Sign Into Audius',
-  emailLabel: 'Email',
-  passwordLabel: 'Password',
-  signIn: 'Sign In',
-  newToAudius: 'New to Audius?',
-  createAccount: 'Create an Account',
-  forgotPassword: 'Forgot password?'
+  title: 'Sign In',
+  description: 'Sign into your Audius account'
 }
 
 type SignInValues = {
@@ -50,7 +32,7 @@ const initialValues = {
 
 export const SignInPage = () => {
   const dispatch = useDispatch()
-  const { isMobile } = useMedia()
+  const history = useHistory()
 
   const handleSubmit = useCallback(
     (values: SignInValues) => {
@@ -60,76 +42,41 @@ export const SignInPage = () => {
     [dispatch]
   )
 
+  const { isMobile } = useMedia()
+  const { spacing } = useTheme()
+
+  const pageProps = {
+    title: messages.title,
+    description: messages.description,
+    canonicalUrl: `${BASE_URL}/${SIGN_IN_PAGE}`
+  }
+
   return (
-    <>
-      <Helmet>
-        <title>{messages.metaTitle}</title>
-        <meta name='description' content={messages.metaDescription} />
-      </Helmet>
-      <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-        <Flex
-          flex={1}
-          direction='column'
-          justifyContent='space-between'
-          h='100%'
-          p='2xl'
-          pb={!isMobile ? 'unit14' : undefined}
-        >
-          <Flex as={Form} direction='column' gap='2xl'>
-            <Box alignSelf='center'>
-              {isMobile ? (
-                <IconAudiusLogoHorizontalColor />
-              ) : (
-                <PreloadImage
-                  src={audiusLogoColored}
-                  alt='Audius Logo'
-                  css={{
-                    maxHeight: '160px',
-                    maxWidth: '160px',
-                    height: '100%',
-                    width: '100%',
-                    objectFit: 'contain'
-                  }}
-                />
-              )}
-            </Box>
-            <Text
-              variant='heading'
-              size='l'
-              tag='h1'
-              color='accent'
-              css={{ textAlign: isMobile ? 'center' : undefined }}
-            >
-              {messages.title}
-            </Text>
-            <Flex direction='column' gap='l'>
-              <HarmonyTextField name='email' label={messages.emailLabel} />
-              <HarmonyPasswordField
-                name='password'
-                label={messages.passwordLabel}
-              />
-            </Flex>
-            <Flex direction='column' gap='l' w='100%'>
-              <Button iconRight={IconArrowRight} type='submit'>
-                {messages.signIn}
-              </Button>
-              {!isMobile ? <SignInWithMetaMaskButton /> : null}
-              <TextLink
-                variant='visible'
-                textVariant='body'
-                css={{ textAlign: isMobile ? 'center' : undefined }}
-              >
-                {messages.forgotPassword}
-              </TextLink>
-            </Flex>
-          </Flex>
-          {!isMobile ? (
-            <Button variant={ButtonType.SECONDARY} asChild>
-              <Link to={SIGN_UP_PAGE}>{messages.createAccount}</Link>
-            </Button>
-          ) : null}
-        </Flex>
-      </Formik>
-    </>
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {isMobile ? (
+        <MobilePageContainer {...pageProps} fullHeight>
+          <SignInPageMobile />
+        </MobilePageContainer>
+      ) : (
+        <Page>
+          <BackgroundWaves />
+          <Link to={TRENDING_PAGE}>
+            <IconCloseAlt
+              color='staticWhite'
+              css={{
+                position: 'absolute',
+                left: spacing['2xl'],
+                top: spacing['2xl'],
+                zIndex: 1
+              }}
+              onClick={history.goBack}
+            />
+          </Link>
+          <Box css={{ zIndex: 1 }}>
+            <SignInPageDesktop />
+          </Box>
+        </Page>
+      )}
+    </Formik>
   )
 }