diff --git a/packages/harmony/src/assets/icons/Metamask.svg b/packages/harmony/src/assets/icons/Metamask.svg deleted file mode 100644 index 6dab8ab2f77..00000000000 --- a/packages/harmony/src/assets/icons/Metamask.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/harmony/src/components/button/BaseButton/BaseButton.tsx b/packages/harmony/src/components/button/BaseButton/BaseButton.tsx index 153089ef006..2920c1e8b15 100644 --- 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( const { iconLeft: LeftIconComponent, iconRight: RightIconComponent, - isStaticIcon, disabled, isLoading, widthToHideText, @@ -94,7 +93,7 @@ export const BaseButton = forwardRef( }) } - 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 index e815dec629b..5df50083544 100644 --- 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 index 7a13a08d00a..ab73af9db4d 100644 --- 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 = { render: (props) => ( - + ) } diff --git a/packages/harmony/src/components/text-link/TextLink.tsx b/packages/harmony/src/components/text-link/TextLink.tsx index 64959e99ae0..e3077379b47 100644 --- 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 index b7917581a11..86845e74e55 100644 --- a/packages/harmony/src/components/text-link/types.ts +++ b/packages/harmony/src/components/text-link/types.ts @@ -28,10 +28,10 @@ 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 @@ -39,4 +39,11 @@ export type TextLinkProps = TextLinkTextProps & * @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 index 1e6cb0eaa14..3e06534fcc7 100644 --- 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 - diff --git a/packages/harmony/src/icons/logos.ts b/packages/harmony/src/icons/logos.ts index a088b9ea8a0..bf474389470 100644 --- 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 index 9595b036275..510ab434b5e 100644 --- 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 = () => { <> - - {isSignInRedesignEnabled ? : } + + {isSignInRedesignEnabled ? : } + + + {isSignInRedesignEnabled ? : } diff --git a/packages/web/src/assets/img/DJportrait.jpg b/packages/web/src/assets/img/DJportrait.jpg deleted file mode 100644 index 185be27e0b6..00000000000 Binary files a/packages/web/src/assets/img/DJportrait.jpg and /dev/null differ diff --git a/packages/web/src/components/background-animations/BackgroundWaves.jsx b/packages/web/src/components/background-animations/BackgroundWaves.jsx index e92f245d939..84e784e5aa9 100644 --- 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) => {
{ 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 new file mode 100644 index 00000000000..0292f0fa773 --- /dev/null +++ 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 index a10d77557aa..4c2f8a10947 100644 --- 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 ( - <> - - {messages.metaTitle} - - - - - - - {isMobile ? ( - - ) : ( - - )} - - - {messages.title} - - - - - - - - {!isMobile ? : null} - - {messages.forgotPassword} - - - - {!isMobile ? ( - - ) : null} - - - + + {isMobile ? ( + + + + ) : ( + + + + + + + + + + )} + ) } diff --git a/packages/web/src/pages/sign-in-page/SignInPageDesktop.tsx b/packages/web/src/pages/sign-in-page/SignInPageDesktop.tsx new file mode 100644 index 00000000000..9eede2b9458 --- /dev/null +++ b/packages/web/src/pages/sign-in-page/SignInPageDesktop.tsx @@ -0,0 +1,87 @@ +import { + Box, + Button, + ButtonType, + Flex, + IconArrowRight, + Text, + TextLink +} from '@audius/harmony' +import { Form } from 'formik' +import { Link } from 'react-router-dom' + +import audiusLogoColored from 'assets/img/audiusLogoColored.png' +import { HarmonyPasswordField } from 'components/form-fields/HarmonyPasswordField' +import { HarmonyTextField } from 'components/form-fields/HarmonyTextField' +import PreloadImage from 'components/preload-image/PreloadImage' +import { + ArtworkContainer, + AudiusValues +} from 'pages/sign-on/components/AudiusValues' +import { LeftContentContainer } from 'pages/sign-on/components/desktop/LeftContentContainer' +import { SignOnContainerDesktop } from 'pages/sign-on/components/desktop/SignOnContainerDesktop' +import { userHasMetaMask } from 'pages/sign-up-page/utils/metamask' +import { SIGN_UP_PAGE } from 'utils/route' + +import styles from './SignInPage.module.css' +import { SignInWithMetaMaskButton } from './SignInWithMetaMaskButton' + +const messages = { + title: 'Sign Into Audius', + emailLabel: 'Email', + passwordLabel: 'Password', + signIn: 'Sign In', + createAccount: 'Create An Account', + forgotPassword: 'Forgot password?' +} + +export const SignInPageDesktop = () => { + return ( + + + + + + + {messages.title} + + + +
+ + + + + + + + + {userHasMetaMask ? : null} + + + {messages.forgotPassword} + + + +
+ + + + + + + + + ) +} diff --git a/packages/web/src/pages/sign-in-page/SignInPageMobile.module.css b/packages/web/src/pages/sign-in-page/SignInPageMobile.module.css new file mode 100644 index 00000000000..79c44f08608 --- /dev/null +++ b/packages/web/src/pages/sign-in-page/SignInPageMobile.module.css @@ -0,0 +1,19 @@ +.root { + z-index: 1; + 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-y: bottom; + background-position-x: -110px; + background-size: 150%; +} + +.content { + background-color: var(--harmony-bg-white); + border-bottom-left-radius: var(--harmony-border-radius-2xl); + border-bottom-right-radius: var(--harmony-border-radius-2xl); +} diff --git a/packages/web/src/pages/sign-in-page/SignInPageMobile.tsx b/packages/web/src/pages/sign-in-page/SignInPageMobile.tsx new file mode 100644 index 00000000000..43b18edc98a --- /dev/null +++ b/packages/web/src/pages/sign-in-page/SignInPageMobile.tsx @@ -0,0 +1,93 @@ +import { + Box, + Button, + Flex, + IconArrowRight, + IconAudiusLogoHorizontalColor, + Text, + TextLink +} from '@audius/harmony' +import { Form } from 'formik' +import { Link } from 'react-router-dom' + +import { HarmonyPasswordField } from 'components/form-fields/HarmonyPasswordField' +import { HarmonyTextField } from 'components/form-fields/HarmonyTextField' +import { ArtworkContainer } from 'pages/sign-on/components/AudiusValues' +import { SignOnContainerMobile } from 'pages/sign-on/components/mobile/SignOnContainerMobile' +import { SIGN_UP_PAGE } from 'utils/route' + +import styles from './SignInPageMobile.module.css' + +const messages = { + title: 'Sign Into Audius', + emailLabel: 'Email', + passwordLabel: 'Password', + signIn: 'Sign In', + newToAudius: 'New to Audius?', + createAccount: 'Create an Account', + forgotPassword: 'Forgot password?' +} + +export const SignInPageMobile = () => { + return ( + + + + + + + {messages.title} + + +
+ + + + + + + + + {messages.forgotPassword} + + + +
+ + + + + + {messages.newToAudius}{' '} + + {messages.createAccount} + + + + + + ) +} diff --git a/packages/web/src/pages/sign-in-page/SignInWithMetaMaskButton.tsx b/packages/web/src/pages/sign-in-page/SignInWithMetaMaskButton.tsx index 5233b7af829..b068a8a475d 100644 --- a/packages/web/src/pages/sign-in-page/SignInWithMetaMaskButton.tsx +++ b/packages/web/src/pages/sign-in-page/SignInWithMetaMaskButton.tsx @@ -1,19 +1,11 @@ -import { useCallback } from 'react' - -import { Button, ButtonType, IconMetamask } from '@audius/harmony' - import { useNavigateToPage } from 'hooks/useNavigateToPage' -import { userHasMetaMask } from 'pages/sign-up-page/utils/metamask' +import { MetaMaskOption } from 'pages/sign-on/components/desktop/MetaMaskOption' import { FEED_PAGE } from 'utils/route' -const messages = { - signIn: 'Sign In With MetaMask' -} - export const SignInWithMetaMaskButton = () => { const navigate = useNavigateToPage() - const handleClick = useCallback(async () => { + const handleSignInWithMetaMask = async () => { try { window.localStorage.setItem('useMetaMask', JSON.stringify(true)) } catch (err) { @@ -21,18 +13,9 @@ export const SignInWithMetaMaskButton = () => { } navigate(FEED_PAGE) window.location.reload() - }, [navigate]) - - if (!userHasMetaMask) return null + } return ( - + ) } diff --git a/packages/web/src/pages/sign-in-page/index.ts b/packages/web/src/pages/sign-in-page/index.ts index 1b9a10f9fcf..d31765bf815 100644 --- a/packages/web/src/pages/sign-in-page/index.ts +++ b/packages/web/src/pages/sign-in-page/index.ts @@ -1 +1 @@ -export { SignInPage } from './SignInPage' +export { SignInPage as default } from './SignInPage' diff --git a/packages/web/src/pages/sign-on-page/SignOnPage.tsx b/packages/web/src/pages/sign-on-page/SignOnPage.tsx deleted file mode 100644 index bc09fbb1354..00000000000 --- a/packages/web/src/pages/sign-on-page/SignOnPage.tsx +++ /dev/null @@ -1,161 +0,0 @@ -import { useEffect } from 'react' - -import { - Box, - Flex, - IconCloseAlt, - Paper, - Text, - TextLink, - useTheme -} from '@audius/harmony' -import { Link, Route, Switch } from 'react-router-dom' -import { useToggle } from 'react-use' - -import djBackground from 'assets/img/2-DJ-4-3.jpg' -import djPortrait from 'assets/img/DJportrait.jpg' -import BackgroundWaves from 'components/background-animations/BackgroundWaves' -import { useMedia } from 'hooks/useMedia' -import { SignInPage } from 'pages/sign-in-page/SignInPage' -import { AudiusValues } from 'pages/sign-on-page/AudiusValues' -import SignUpPage from 'pages/sign-up-page' -import { SIGN_IN_PAGE, SIGN_UP_PAGE, TRENDING_PAGE } from 'utils/route' - -const messages = { - newToAudius: 'New to Audius?', - createAccount: 'Create an Account' -} - -export const SignOnPage = () => { - const { isMobile } = useMedia() - const [isExpanded] = useToggle(false) - const [isLoaded, setIsLoaded] = useToggle(false) - const { spacing, motion } = useTheme() - - useEffect(() => { - setIsLoaded(true) - }, [setIsLoaded]) - - const routes = ( - - - - - - - - - ) - - if (isMobile) { - return ( - - - - - - {routes} - - - - - - - - - {messages.newToAudius}{' '} - - {messages.createAccount} - - - - - - - ) - } - - return ( - - - - - - - - {routes} - - - - - - - ) -} diff --git a/packages/web/src/pages/sign-on-page/index.ts b/packages/web/src/pages/sign-on-page/index.ts deleted file mode 100644 index caab1679630..00000000000 --- a/packages/web/src/pages/sign-on-page/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { SignOnPage as default } from './SignOnPage' diff --git a/packages/web/src/pages/sign-on-page/AudiusValues.module.css b/packages/web/src/pages/sign-on/components/AudiusValues.module.css similarity index 100% rename from packages/web/src/pages/sign-on-page/AudiusValues.module.css rename to packages/web/src/pages/sign-on/components/AudiusValues.module.css diff --git a/packages/web/src/pages/sign-on-page/AudiusValues.tsx b/packages/web/src/pages/sign-on/components/AudiusValues.tsx similarity index 90% rename from packages/web/src/pages/sign-on-page/AudiusValues.tsx rename to packages/web/src/pages/sign-on/components/AudiusValues.tsx index 78e43688689..ae4dd0eed95 100644 --- a/packages/web/src/pages/sign-on-page/AudiusValues.tsx +++ b/packages/web/src/pages/sign-on/components/AudiusValues.tsx @@ -69,20 +69,10 @@ const AudiusValue = (props: AudiusValueProps) => { /** * Renders all the audius values */ - -type AudiusValuesProps = { - className?: string -} - -export const AudiusValues = (props: AudiusValuesProps) => { +export const AudiusValues = () => { const { isDesktop } = useMedia() return ( - + {isDesktop ? ( { className={cn(styles.logo, styles.desktop)} /> - + {messages.title} @@ -48,6 +51,7 @@ export const CreateEmailPageDesktop = () => { diff --git a/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageMobile.tsx b/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageMobile.tsx index ec436e5cabd..2382f2af6ad 100644 --- a/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageMobile.tsx +++ b/packages/web/src/pages/sign-up-page/pages/CreateEmailPage/CreateEmailPageMobile.tsx @@ -13,7 +13,10 @@ import { useFormikContext } from 'formik' import { Link } from 'react-router-dom' import { HarmonyTextField } from 'components/form-fields/HarmonyTextField' -import { ArtworkContainer, AudiusValues } from 'pages/sign-on-page/AudiusValues' +import { + ArtworkContainer, + AudiusValues +} from 'pages/sign-on/components/AudiusValues' import { MobileContentContainer } from 'pages/sign-on/components/desktop/MobileContentContainer' import { SignOnContainerMobile } from 'pages/sign-on/components/mobile/SignOnContainerMobile' import { SIGN_IN_PAGE } from 'utils/route' 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 4bd2b92067f..87d5e88abe9 100644 --- a/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx +++ b/packages/web/src/pages/sign-up-page/pages/CreatePasswordPage.tsx @@ -22,7 +22,10 @@ import { } from 'components/completion-checklist-item/CompletionChecklistItem' import { ExternalLink } from 'components/link' import { useNavigateToPage } from 'hooks/useNavigateToPage' -import { ArtworkContainer, AudiusValues } from 'pages/sign-on-page/AudiusValues' +import { + ArtworkContainer, + AudiusValues +} from 'pages/sign-on/components/AudiusValues' import { LeftContentContainer } from 'pages/sign-on/components/desktop/LeftContentContainer' import { SignOnContainerDesktop } from 'pages/sign-on/components/desktop/SignOnContainerDesktop' import {