[C-4070] Improve sign-up page for various screen sizes (#7938)

AudiusProject · Mar 26, 2024 · cc18be2 · cc18be2
1 parent b313b4f
commit cc18be2
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 398 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/common/src/messages/sign-on/pages.ts b/packages/common/src/messages/sign-on/pages.ts
@@ -26,11 +26,6 @@ export const createEmailPageMessages = {
   signUp: 'Sign Up Free',
   haveAccount: 'Already have an account?',
   signIn: 'Sign In',
-  subHeader: {
-    // Two separate lines separated by a divider. Can't include the divider here since its different for native vs web
-    line1: 'Join the revolution in music streaming!',
-    line2: 'Discover, connect, and create on Audius.'
-  },
   socialsDividerText: 'Or, get started with one of your socials',
   unknownError: 'Unknown error occurred.',
   metaMaskNotRecommended: 'Signing up with MetaMask is not recommended.',

diff --git a/packages/mobile/src/screens/sign-on-screen/screens/CreateEmailScreen.tsx b/packages/mobile/src/screens/sign-on-screen/screens/CreateEmailScreen.tsx
@@ -106,17 +106,7 @@ export const CreateEmailScreen = (props: SignOnScreenProps) => {
             <SocialMediaLoading onClose={handleCloseSocialMediaLogin} />
           ) : null}
           <Flex style={{ zIndex: 1 }} gap='l'>
-            <Heading
-              heading={createEmailPageMessages.title}
-              description={
-                <>
-                  {createEmailPageMessages.subHeader.line1}
-                  {'\n'}
-                  {createEmailPageMessages.subHeader.line2}
-                </>
-              }
-              centered
-            />
+            <Heading heading={createEmailPageMessages.title} centered />
             <Flex direction='column' gap='l'>
               <NewEmailField
                 name='email'

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -148,7 +148,6 @@
     "numeral": "2.0.6",
     "orbit-controls": "0.0.1",
     "perspective-camera": "2.0.1",
-    "pixi.js": "4.8.9",
     "prop-types": "15.7.2",
     "query-string": "6.13.5",
     "raw-loader": "0.5.1",

diff --git a/packages/web/src/components/background-animations/BackgroundWaves.jsx b/packages/web/src/components/background-animations/BackgroundWaves.jsx
diff --git a/packages/web/src/components/profile-picture/ProfilePicture.module.css b/packages/web/src/components/profile-picture/ProfilePicture.module.css
@@ -88,7 +88,9 @@
 }
 
 .editMode.hasChanged:not(.modalOpen) .profilePictureBackground:hover .overlay,
-.editMode.hasChanged:not(.modalOpen) .profilePictureBackground:hover .imageSelectionButton {
+.editMode.hasChanged:not(.modalOpen)
+  .profilePictureBackground:hover
+  .imageSelectionButton {
   opacity: 1;
   pointer-events: all;
 }

diff --git a/packages/web/src/pages/sign-in-page/SignInPage.tsx b/packages/web/src/pages/sign-in-page/SignInPage.tsx
@@ -13,6 +13,7 @@ import {
 import { Form, Formik, useField } from 'formik'
 import { useDispatch } from 'react-redux'
 import { Link } from 'react-router-dom'
+import { useWindowSize } from 'react-use'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
 
 import audiusLogoColored from 'assets/img/audiusLogoColored.png'
@@ -37,6 +38,8 @@ import { SignInWithMetaMaskButton } from './SignInWithMetaMaskButton'
 
 const SignInSchema = toFormikValidationSchema(signInSchema)
 
+const smallDesktopWindowHeight = 900
+
 type SignInValues = {
   email: string
   password: string
@@ -45,6 +48,8 @@ type SignInValues = {
 export const SignInPage = () => {
   const dispatch = useDispatch()
   const { isMobile } = useMedia()
+  const { height: windowHeight } = useWindowSize()
+  const isSmallDesktop = windowHeight < smallDesktopWindowHeight
   const navigate = useNavigateToPage()
   const [showForgotPassword, setShowForgotPassword] = useState(false)
   const { value: existingEmail } = useSelector(getEmailField)
@@ -94,8 +99,8 @@ export const SignInPage = () => {
           gap='l'
         >
           <Flex as={Form} direction='column' gap='2xl'>
-            <Box alignSelf='center'>
-              {isMobile ? (
+            <Box alignSelf={isSmallDesktop ? 'flex-start' : 'center'}>
+              {isMobile || isSmallDesktop ? (
                 <IconAudiusLogoHorizontalColor />
               ) : (
                 <PreloadImage

diff --git a/packages/web/src/pages/sign-on-page/AudiusValues.tsx b/packages/web/src/pages/sign-on-page/AudiusValues.tsx
@@ -22,17 +22,24 @@ type AudiusValueProps = { icon: IconComponent; text: string; dynamic?: boolean }
  */
 const AudiusValue = (props: AudiusValueProps) => {
   const { icon: Icon, text } = props
+  const isMedium = useMediaQuery(
+    '(max-width: 1363px) and (min-width: 1094px), (max-width: 860px) and (min-width: 645px)'
+  )
   const isSmall = useMediaQuery(
-    '(max-width: 1363px) and (min-width: 860px), (max-width: 645px)'
+    '(max-width: 1094px) and (min-width: 860px), (max-width: 645px)'
   )
 
   return (
     <Flex alignItems='center' justifyContent='center' gap='m'>
-      <Icon color='staticWhite' size={isSmall ? 'l' : '2xl'} shadow='drop' />
+      <Icon
+        color='staticWhite'
+        size={isSmall ? 'l' : isMedium ? 'l' : '2xl'}
+        shadow='drop'
+      />
       <Text
         variant={isSmall ? 'title' : 'heading'}
         tag='h2'
-        size={isSmall ? 'l' : 'xl'}
+        size={isSmall ? 'l' : isMedium ? 'm' : 'xl'}
         strength={isSmall ? 'weak' : 'default'}
         color='staticWhite'
         shadow='emphasis'
@@ -53,22 +60,26 @@ type AudiusValuesProps = {
 
 export const AudiusValues = (props: AudiusValuesProps) => {
   const isMobile = useMediaQuery('(max-width: 860px)')
+
+  const isMedium = useMediaQuery(
+    '(max-width: 1363px) and (min-width: 1094px), (max-width: 860px) and (min-width: 645px)'
+  )
   const isSmall = useMediaQuery(
-    '(max-width: 1363px) and (min-width: 860px), (max-width: 645px)'
+    '(max-width: 1094px) and (min-width: 860px), (max-width: 645px)'
   )
 
   return (
     <Flex
       direction='column'
-      gap={isSmall ? 'l' : 'xl'}
+      gap={isSmall || isMedium ? 'l' : 'xl'}
       alignItems='center'
-      p={isSmall ? 'xl' : '2xl'}
+      p={isSmall || isMedium ? 'xl' : '2xl'}
       {...props}
     >
       {isMobile ? null : (
         <Text
-          variant={isSmall ? 'heading' : 'display'}
-          size='s'
+          variant={isSmall || isMedium ? 'heading' : 'display'}
+          size={isMedium ? 'xl' : 's'}
           strength='strong'
           color='staticWhite'
           shadow='emphasis'