Sign up redesign

packages/harmony/src/foundations/color/primitive.css

@@ -256,7 +256,7 @@ html[data-theme='default-light'] {
   --harmony-n-700: #4a5263;
   --harmony-n-800: #343b49;
   --harmony-n-900: #232834;
-  --harmony-n-950: #141821;
+  --harmony-n-950: #0c0f14;
   /* Special Colors */
   --harmony-white: #ffffff;
   --harmony-background: #f6f5f7;
@@ -296,20 +296,20 @@ html[data-theme='default-dark'] {
   --harmony-s-400: #cf90ff;
   --harmony-s-500: #d7a3ff;
   /* Neutral Colors */
-  --harmony-neutral: #949494;
+  --harmony-neutral: #d1d1d1;
   --harmony-n-25: #0f0f0f;
   --harmony-n-50: #141414;
   --harmony-n-100: #1f1f1f;
   --harmony-n-150: #292929;
   --harmony-n-200: #333333;
   --harmony-n-300: #474747;
   --harmony-n-400: #636363;
-  --harmony-n-500: #6b6b6b;
-  --harmony-n-600: #757575;
-  --harmony-n-700: #858585;
-  --harmony-n-800: #949494;
-  --harmony-n-900: #a3a3a3;
-  --harmony-n-950: #b2b2b2;
+  --harmony-n-500: #757575;
+  --harmony-n-600: #8f8f8f;
+  --harmony-n-700: #9e9e9e;
+  --harmony-n-800: #d1d1d1;
+  --harmony-n-900: #e0e0e0;
+  --harmony-n-950: #ededed;
   /* Special Colors */
   --harmony-white: #0f0f0f;
   --harmony-background: #000000;

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

@@ -41,7 +41,7 @@ const defaultLightPrimitives = {
     n700: '#4A5263',
     n800: '#343B49',
     n900: '#232834',
-    n950: '#141821',
+    n950: '#0C0F14',
     default: '#343B49',
     neutral: '#343B49'
   },
@@ -107,14 +107,14 @@ const defaultDarkPrimitives = {
     n200: '#333333',
     n300: '#474747',
     n400: '#636363',
-    n500: '#6B6B6B',
-    n600: '#757575',
-    n700: '#858585',
-    n800: '#949494',
-    n900: '#A3A3A3',
-    n950: '#B2B2B2',
-    default: '#949494',
-    neutral: '#949494'
+    n500: '#757575',
+    n600: '#8F8F8F',
+    n700: '#9E9E9E',
+    n800: '#D1D1D1',
+    n900: '#E0E0E0',
+    n950: '#EDEDED',
+    default: '#D1D1D1',
+    neutral: '#D1D1D1'
   },
   special: {
     background: '#000000',

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@audius/mobile",
-  "version": "1.5.166",
+  "version": "1.5.167",
   "private": true,
   "scripts": {
     "android:dev": "ENVFILE=.env.dev turbo run android -- --mode=prodDebug",

packages/mobile/src/screens/sign-on-screen/screens/SignOnScreen.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react'
 import { useEffect, useState } from 'react'
 
 import { css } from '@emotion/native'
@@ -9,32 +8,20 @@ import {
   updateRouteOnCompletion,
   setValueField
 } from 'common/store/pages/signon/actions'
-import { ImageBackground, SafeAreaView } from 'react-native'
-import Animated, {
-  CurvedTransition,
-  FadeIn,
-  FadeOut,
-  SlideInUp
-} from 'react-native-reanimated'
+import { useDarkMode } from 'react-native-dynamic'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { usePrevious } from 'react-use'
 
 import {
+  Divider,
   Flex,
-  IconAudiusLogoHorizontalColorNew,
   IconAudiusLogoHorizontalNew,
-  Paper,
-  RadialGradient,
   Text,
   TextLink,
-  useTheme
+  ThemeProvider as HarmonyThemeProvider
 } from '@audius/harmony-native'
-import DJBackground from 'app/assets/images/DJportrait.jpg'
 import type { NonLinkProps } from 'app/harmony-native/components/TextLink/types'
 import { dispatch } from 'app/store'
 
-import { AudiusValues } from '../components/AudiusValues'
-import { PANEL_EXPAND_DURATION } from '../constants'
 import type { SignOnScreenParamList } from '../types'
 
 import { CreateEmailScreen } from './CreateEmailScreen'
@@ -46,102 +33,25 @@ const messages = {
   createAccount: 'Create an Account'
 }
 
-const AnimatedPaper = Animated.createAnimatedComponent(Paper)
-const AnimatedFlex = Animated.createAnimatedComponent(Flex)
-
 const CreateAccountLink = (props: NonLinkProps) => {
   const { onPress } = props
-  const { spacing } = useTheme()
-
-  return (
-    <AnimatedFlex
-      alignItems='center'
-      justifyContent='flex-end'
-      style={css({ flexGrow: 1 })}
-      entering={FadeIn}
-      exiting={FadeOut}
-    >
-      <SafeAreaView style={{ paddingBottom: spacing['3xl'] }}>
-        <Text
-          variant='title'
-          strength='weak'
-          textAlign='center'
-          color='inverse'
-          style={{ justifyContent: 'flex-end' }}
-        >
-          {messages.newToAudius}{' '}
-          <TextLink showUnderline onPress={onPress}>
-            {messages.createAccount}
-          </TextLink>
-        </Text>
-      </SafeAreaView>
-    </AnimatedFlex>
-  )
-}
 
-const Background = () => {
   return (
     <Flex
-      h='100%'
-      w='100%'
       alignItems='center'
       justifyContent='flex-end'
-      style={css({
-        position: 'absolute',
-        top: 0,
-        left: 0
-      })}
+      style={css({ flexGrow: 1 })}
     >
-      <RadialGradient
-        style={css({ position: 'absolute', zIndex: 1 })}
-        colors={[
-          'rgba(91, 35, 225, 0.8)',
-          'rgba(113, 41, 230, 0.64)',
-          'rgba(162, 47, 235, 0.5)'
-        ]}
-        stops={[0, 0.67, 1]}
-        radius={100}
-      />
-      <ImageBackground
-        source={DJBackground}
-        style={{
-          width: '100%',
-          height: '100%',
-          position: 'absolute',
-          top: 0
-        }}
-        resizeMode='cover'
-      />
+      <Text variant='title' strength='weak' textAlign='center' color='subdued'>
+        {messages.newToAudius}{' '}
+        <TextLink showUnderline onPress={onPress}>
+          {messages.createAccount}
+        </TextLink>
+      </Text>
     </Flex>
   )
 }
 
-type ExpandablePanelProps = {
-  children: ReactNode
-}
-
-const ExpandablePanel = (props: ExpandablePanelProps) => {
-  const { children } = props
-  const insets = useSafeAreaInsets()
-  const { cornerRadius } = useTheme()
-  return (
-    <AnimatedPaper
-      entering={SlideInUp.duration(PANEL_EXPAND_DURATION)}
-      layout={CurvedTransition}
-      style={css({
-        overflow: 'hidden',
-        paddingTop: insets.top,
-        borderBottomLeftRadius: cornerRadius['3xl'],
-        borderBottomRightRadius: cornerRadius['3xl']
-      })}
-    >
-      <Flex gap='2xl' ph='l' pv='2xl'>
-        {children}
-      </Flex>
-    </AnimatedPaper>
-  )
-}
-
 export type SignOnScreenParams = {
   screen: SignOnScreenType
   guestEmail?: string
@@ -158,15 +68,14 @@ type SignOnScreenProps = {
  */
 export const SignOnScreen = (props: SignOnScreenProps) => {
   const { isSplashScreenDismissed } = props
-  const theme = useTheme()
   const { params } = useRoute<RouteProp<SignOnScreenParamList, 'SignOn'>>()
   const {
     screen: screenParam = 'sign-up',
     guestEmail,
     routeOnCompletion
   } = params ?? {}
   const [screen, setScreen] = useState<SignOnScreenType>(screenParam)
-  const previousScreen = usePrevious(screen)
+  const insets = useSafeAreaInsets()
 
   useEffect(() => {
     if (guestEmail) {
@@ -181,38 +90,41 @@ export const SignOnScreen = (props: SignOnScreenProps) => {
     setScreen(screenParam)
   }, [guestEmail, routeOnCompletion, screenParam])
 
+  const isDarkMode = useDarkMode()
+  const signOnThemeName = isDarkMode ? 'default-dark' : 'default-light'
+
+  if (!isSplashScreenDismissed) return null
+
   return (
-    <>
-      <Background />
-      {isSplashScreenDismissed ? (
-        <Flex flex={1} style={css({ flexGrow: 1, zIndex: 2 })} h='100%'>
-          <ExpandablePanel>
-            {theme.type === 'dark' ? (
-              <IconAudiusLogoHorizontalNew
-                style={css({ alignSelf: 'center' })}
-                width={200}
-                color='inverse'
-              />
-            ) : (
-              <IconAudiusLogoHorizontalColorNew
-                style={css({ alignSelf: 'center' })}
-              />
-            )}
-            {screen === 'sign-up' ? (
-              <CreateEmailScreen onChangeScreen={setScreen} />
-            ) : (
-              <SignInScreen />
-            )}
-          </ExpandablePanel>
+    <HarmonyThemeProvider themeName={signOnThemeName}>
+      <Flex
+        flex={1}
+        h='100%'
+        backgroundColor='surface1'
+        style={css({ paddingTop: insets.top })}
+      >
+        <Divider />
+        <Flex
+          flex={1}
+          alignItems='stretch'
+          style={css({ gap: 48, paddingHorizontal: 16, paddingVertical: 80 })}
+        >
+          <IconAudiusLogoHorizontalNew
+            style={css({ alignSelf: 'center' })}
+            height={48}
+            width={236}
+            color='default'
+          />
           {screen === 'sign-up' ? (
-            <AudiusValues
-              isPanelExpanded={previousScreen && previousScreen !== screen}
-            />
+            <CreateEmailScreen onChangeScreen={setScreen} />
           ) : (
-            <CreateAccountLink onPress={() => setScreen('sign-up')} />
+            <SignInScreen />
           )}
+          {screen === 'sign-in' ? (
+            <CreateAccountLink onPress={() => setScreen('sign-up')} />
+          ) : null}
         </Flex>
-      ) : null}
-    </>
+      </Flex>
+    </HarmonyThemeProvider>
   )
 }

packages/web/package.json

@@ -3,7 +3,7 @@
   "productName": "Audius",
   "description": "The Audius web client reference implementation",
   "author": "Audius",
-  "version": "1.5.166",
+  "version": "1.5.167",
   "private": true,
   "scripts": {
     "DEV & BUILD========================================": "",

packages/web/src/app/ThemeProvider.tsx

@@ -56,8 +56,9 @@ const selectHarmonyTheme = (state: AppState): Theme => {
     case LegacyTheme.MATRIX:
       return 'matrix'
     case LegacyTheme.AUTO:
-    default:
       return sysAppearance === 'dark' ? 'classic-dark' : 'classic-light'
+    default:
+      return sysAppearance === 'dark' ? 'default-dark' : 'default-light'
   }
 }