Skip to content

Commit 459889b

Browse files
dylanjeffersdylanjeffers
authored
Sign up redesign (#13807)
1 parent 810923f commit 459889b

25 files changed

Lines changed: 741 additions & 1125 deletions

File tree

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ html[data-theme='default-light'] {
256256
--harmony-n-700: #4a5263;
257257
--harmony-n-800: #343b49;
258258
--harmony-n-900: #232834;
259-
--harmony-n-950: #141821;
259+
--harmony-n-950: #0c0f14;
260260
/* Special Colors */
261261
--harmony-white: #ffffff;
262262
--harmony-background: #f6f5f7;
@@ -296,20 +296,20 @@ html[data-theme='default-dark'] {
296296
--harmony-s-400: #cf90ff;
297297
--harmony-s-500: #d7a3ff;
298298
/* Neutral Colors */
299-
--harmony-neutral: #949494;
299+
--harmony-neutral: #d1d1d1;
300300
--harmony-n-25: #0f0f0f;
301301
--harmony-n-50: #141414;
302302
--harmony-n-100: #1f1f1f;
303303
--harmony-n-150: #292929;
304304
--harmony-n-200: #333333;
305305
--harmony-n-300: #474747;
306306
--harmony-n-400: #636363;
307-
--harmony-n-500: #6b6b6b;
308-
--harmony-n-600: #757575;
309-
--harmony-n-700: #858585;
310-
--harmony-n-800: #949494;
311-
--harmony-n-900: #a3a3a3;
312-
--harmony-n-950: #b2b2b2;
307+
--harmony-n-500: #757575;
308+
--harmony-n-600: #8f8f8f;
309+
--harmony-n-700: #9e9e9e;
310+
--harmony-n-800: #d1d1d1;
311+
--harmony-n-900: #e0e0e0;
312+
--harmony-n-950: #ededed;
313313
/* Special Colors */
314314
--harmony-white: #0f0f0f;
315315
--harmony-background: #000000;

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const defaultLightPrimitives = {
4141
n700: '#4A5263',
4242
n800: '#343B49',
4343
n900: '#232834',
44-
n950: '#141821',
44+
n950: '#0C0F14',
4545
default: '#343B49',
4646
neutral: '#343B49'
4747
},
@@ -107,14 +107,14 @@ const defaultDarkPrimitives = {
107107
n200: '#333333',
108108
n300: '#474747',
109109
n400: '#636363',
110-
n500: '#6B6B6B',
111-
n600: '#757575',
112-
n700: '#858585',
113-
n800: '#949494',
114-
n900: '#A3A3A3',
115-
n950: '#B2B2B2',
116-
default: '#949494',
117-
neutral: '#949494'
110+
n500: '#757575',
111+
n600: '#8F8F8F',
112+
n700: '#9E9E9E',
113+
n800: '#D1D1D1',
114+
n900: '#E0E0E0',
115+
n950: '#EDEDED',
116+
default: '#D1D1D1',
117+
neutral: '#D1D1D1'
118118
},
119119
special: {
120120
background: '#000000',

‎packages/mobile/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@audius/mobile",
3-
"version": "1.5.166",
3+
"version": "1.5.167",
44
"private": true,
55
"scripts": {
66
"android:dev": "ENVFILE=.env.dev turbo run android -- --mode=prodDebug",

‎packages/mobile/src/assets/images/DJportrait.jpg‎

-385 KB
Binary file not shown.

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

Lines changed: 42 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import type { ReactNode } from 'react'
21
import { useEffect, useState } from 'react'
32

43
import { css } from '@emotion/native'
@@ -9,32 +8,20 @@ import {
98
updateRouteOnCompletion,
109
setValueField
1110
} from 'common/store/pages/signon/actions'
12-
import { ImageBackground, SafeAreaView } from 'react-native'
13-
import Animated, {
14-
CurvedTransition,
15-
FadeIn,
16-
FadeOut,
17-
SlideInUp
18-
} from 'react-native-reanimated'
11+
import { useDarkMode } from 'react-native-dynamic'
1912
import { useSafeAreaInsets } from 'react-native-safe-area-context'
20-
import { usePrevious } from 'react-use'
2113

2214
import {
15+
Divider,
2316
Flex,
24-
IconAudiusLogoHorizontalColorNew,
2517
IconAudiusLogoHorizontalNew,
26-
Paper,
27-
RadialGradient,
2818
Text,
2919
TextLink,
30-
useTheme
20+
ThemeProvider as HarmonyThemeProvider
3121
} from '@audius/harmony-native'
32-
import DJBackground from 'app/assets/images/DJportrait.jpg'
3322
import type { NonLinkProps } from 'app/harmony-native/components/TextLink/types'
3423
import { dispatch } from 'app/store'
3524

36-
import { AudiusValues } from '../components/AudiusValues'
37-
import { PANEL_EXPAND_DURATION } from '../constants'
3825
import type { SignOnScreenParamList } from '../types'
3926

4027
import { CreateEmailScreen } from './CreateEmailScreen'
@@ -46,102 +33,25 @@ const messages = {
4633
createAccount: 'Create an Account'
4734
}
4835

49-
const AnimatedPaper = Animated.createAnimatedComponent(Paper)
50-
const AnimatedFlex = Animated.createAnimatedComponent(Flex)
51-
5236
const CreateAccountLink = (props: NonLinkProps) => {
5337
const { onPress } = props
54-
const { spacing } = useTheme()
55-
56-
return (
57-
<AnimatedFlex
58-
alignItems='center'
59-
justifyContent='flex-end'
60-
style={css({ flexGrow: 1 })}
61-
entering={FadeIn}
62-
exiting={FadeOut}
63-
>
64-
<SafeAreaView style={{ paddingBottom: spacing['3xl'] }}>
65-
<Text
66-
variant='title'
67-
strength='weak'
68-
textAlign='center'
69-
color='inverse'
70-
style={{ justifyContent: 'flex-end' }}
71-
>
72-
{messages.newToAudius}{' '}
73-
<TextLink showUnderline onPress={onPress}>
74-
{messages.createAccount}
75-
</TextLink>
76-
</Text>
77-
</SafeAreaView>
78-
</AnimatedFlex>
79-
)
80-
}
8138

82-
const Background = () => {
8339
return (
8440
<Flex
85-
h='100%'
86-
w='100%'
8741
alignItems='center'
8842
justifyContent='flex-end'
89-
style={css({
90-
position: 'absolute',
91-
top: 0,
92-
left: 0
93-
})}
43+
style={css({ flexGrow: 1 })}
9444
>
95-
<RadialGradient
96-
style={css({ position: 'absolute', zIndex: 1 })}
97-
colors={[
98-
'rgba(91, 35, 225, 0.8)',
99-
'rgba(113, 41, 230, 0.64)',
100-
'rgba(162, 47, 235, 0.5)'
101-
]}
102-
stops={[0, 0.67, 1]}
103-
radius={100}
104-
/>
105-
<ImageBackground
106-
source={DJBackground}
107-
style={{
108-
width: '100%',
109-
height: '100%',
110-
position: 'absolute',
111-
top: 0
112-
}}
113-
resizeMode='cover'
114-
/>
45+
<Text variant='title' strength='weak' textAlign='center' color='subdued'>
46+
{messages.newToAudius}{' '}
47+
<TextLink showUnderline onPress={onPress}>
48+
{messages.createAccount}
49+
</TextLink>
50+
</Text>
11551
</Flex>
11652
)
11753
}
11854

119-
type ExpandablePanelProps = {
120-
children: ReactNode
121-
}
122-
123-
const ExpandablePanel = (props: ExpandablePanelProps) => {
124-
const { children } = props
125-
const insets = useSafeAreaInsets()
126-
const { cornerRadius } = useTheme()
127-
return (
128-
<AnimatedPaper
129-
entering={SlideInUp.duration(PANEL_EXPAND_DURATION)}
130-
layout={CurvedTransition}
131-
style={css({
132-
overflow: 'hidden',
133-
paddingTop: insets.top,
134-
borderBottomLeftRadius: cornerRadius['3xl'],
135-
borderBottomRightRadius: cornerRadius['3xl']
136-
})}
137-
>
138-
<Flex gap='2xl' ph='l' pv='2xl'>
139-
{children}
140-
</Flex>
141-
</AnimatedPaper>
142-
)
143-
}
144-
14555
export type SignOnScreenParams = {
14656
screen: SignOnScreenType
14757
guestEmail?: string
@@ -158,15 +68,14 @@ type SignOnScreenProps = {
15868
*/
15969
export const SignOnScreen = (props: SignOnScreenProps) => {
16070
const { isSplashScreenDismissed } = props
161-
const theme = useTheme()
16271
const { params } = useRoute<RouteProp<SignOnScreenParamList, 'SignOn'>>()
16372
const {
16473
screen: screenParam = 'sign-up',
16574
guestEmail,
16675
routeOnCompletion
16776
} = params ?? {}
16877
const [screen, setScreen] = useState<SignOnScreenType>(screenParam)
169-
const previousScreen = usePrevious(screen)
78+
const insets = useSafeAreaInsets()
17079

17180
useEffect(() => {
17281
if (guestEmail) {
@@ -181,38 +90,41 @@ export const SignOnScreen = (props: SignOnScreenProps) => {
18190
setScreen(screenParam)
18291
}, [guestEmail, routeOnCompletion, screenParam])
18392

93+
const isDarkMode = useDarkMode()
94+
const signOnThemeName = isDarkMode ? 'default-dark' : 'default-light'
95+
96+
if (!isSplashScreenDismissed) return null
97+
18498
return (
185-
<>
186-
<Background />
187-
{isSplashScreenDismissed ? (
188-
<Flex flex={1} style={css({ flexGrow: 1, zIndex: 2 })} h='100%'>
189-
<ExpandablePanel>
190-
{theme.type === 'dark' ? (
191-
<IconAudiusLogoHorizontalNew
192-
style={css({ alignSelf: 'center' })}
193-
width={200}
194-
color='inverse'
195-
/>
196-
) : (
197-
<IconAudiusLogoHorizontalColorNew
198-
style={css({ alignSelf: 'center' })}
199-
/>
200-
)}
201-
{screen === 'sign-up' ? (
202-
<CreateEmailScreen onChangeScreen={setScreen} />
203-
) : (
204-
<SignInScreen />
205-
)}
206-
</ExpandablePanel>
99+
<HarmonyThemeProvider themeName={signOnThemeName}>
100+
<Flex
101+
flex={1}
102+
h='100%'
103+
backgroundColor='surface1'
104+
style={css({ paddingTop: insets.top })}
105+
>
106+
<Divider />
107+
<Flex
108+
flex={1}
109+
alignItems='stretch'
110+
style={css({ gap: 48, paddingHorizontal: 16, paddingVertical: 80 })}
111+
>
112+
<IconAudiusLogoHorizontalNew
113+
style={css({ alignSelf: 'center' })}
114+
height={48}
115+
width={236}
116+
color='default'
117+
/>
207118
{screen === 'sign-up' ? (
208-
<AudiusValues
209-
isPanelExpanded={previousScreen && previousScreen !== screen}
210-
/>
119+
<CreateEmailScreen onChangeScreen={setScreen} />
211120
) : (
212-
<CreateAccountLink onPress={() => setScreen('sign-up')} />
121+
<SignInScreen />
213122
)}
123+
{screen === 'sign-in' ? (
124+
<CreateAccountLink onPress={() => setScreen('sign-up')} />
125+
) : null}
214126
</Flex>
215-
) : null}
216-
</>
127+
</Flex>
128+
</HarmonyThemeProvider>
217129
)
218130
}

‎packages/web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"productName": "Audius",
44
"description": "The Audius web client reference implementation",
55
"author": "Audius",
6-
"version": "1.5.166",
6+
"version": "1.5.167",
77
"private": true,
88
"scripts": {
99
"DEV & BUILD========================================": "",

‎packages/web/src/app/ThemeProvider.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,9 @@ const selectHarmonyTheme = (state: AppState): Theme => {
5656
case LegacyTheme.MATRIX:
5757
return 'matrix'
5858
case LegacyTheme.AUTO:
59-
default:
6059
return sysAppearance === 'dark' ? 'classic-dark' : 'classic-light'
60+
default:
61+
return sysAppearance === 'dark' ? 'default-dark' : 'default-light'
6162
}
6263
}
6364

‎packages/web/src/assets/img/DJportrait.jpg‎

-385 KB
Binary file not shown.

0 commit comments

Comments
 (0)