Skip to content

Commit

Permalink
[native] Extract the buttons from the logged out modal
Browse files Browse the repository at this point in the history
Summary:
These buttons will be used later in the stack. Use the primary buttons instead of the old styling.

Before
{F3407708}

After
{F3407706}

Depends on D14064

Test Plan: Check if the logged out modal still looks correct.

Reviewers: kamil, angelika, ashoat

Reviewed By: ashoat

Subscribers: ashoat

Differential Revision: https://phab.comm.dev/D14066
  • Loading branch information
palys-swm committed Dec 10, 2024
1 parent a7176ef commit b298be8
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 99 deletions.
135 changes: 42 additions & 93 deletions native/account/logged-out-modal.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js';
import LogInPanel from './log-in-panel.react.js';
import type { LogInState } from './log-in-panel.react.js';
import LoggedOutStaffInfo from './logged-out-staff-info.react.js';
import PromptButton from './prompt-button.react.js';
import { authoritativeKeyserverID } from '../authoritative-keyserver.js';
import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
import ConnectedStatusBar from '../connected-status-bar.react.js';
Expand All @@ -55,7 +56,6 @@ import { derivedDimensionsInfoSelector } from '../selectors/dimensions-selectors
import { splashStyleSelector } from '../splash.js';
import { useStyles } from '../themes/colors.js';
import { AnimatedView } from '../types/styles.js';
import EthereumLogo from '../vectors/ethereum-logo.react.js';

let initialAppLoad = true;
const safeAreaEdges = ['top', 'bottom'];
Expand Down Expand Up @@ -116,18 +116,6 @@ const unboundStyles = {
position: 'absolute',
top: 13,
},
button: {
borderRadius: 4,
marginBottom: 4,
marginTop: 4,
marginLeft: 4,
marginRight: 4,
paddingBottom: 14,
paddingLeft: 18,
paddingRight: 18,
paddingTop: 14,
flex: 1,
},
buttonContainer: {
bottom: 0,
left: 0,
Expand All @@ -137,23 +125,17 @@ const unboundStyles = {
position: 'absolute',
right: 0,
},
buttonText: {
fontFamily: 'OpenSans-Semibold',
fontSize: 17,
textAlign: 'center',
},
classicAuthButton: {
backgroundColor: 'purpleButton',
},
classicAuthButtonText: {
color: 'whiteText',
},
registerButtons: {
flexDirection: 'row',
},
signInButtons: {
flexDirection: 'row',
},
firstSignInButton: {
marginRight: 8,
flex: 1,
},
lastSignInButton: {
marginLeft: 8,
flex: 1,
},
container: {
backgroundColor: 'transparent',
flex: 1,
Expand All @@ -176,15 +158,6 @@ const unboundStyles = {
right: 0,
top: 0,
},
siweButton: {
backgroundColor: 'siweButton',
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
siweButtonText: {
color: 'siweButtonText',
},
siweOr: {
flex: 1,
flexDirection: 'row',
Expand All @@ -210,9 +183,6 @@ const unboundStyles = {
fontSize: 17,
textAlign: 'center',
},
siweIcon: {
paddingRight: 10,
},
};

const isForegroundSelector = createIsForegroundSelector(
Expand Down Expand Up @@ -470,22 +440,6 @@ function LoggedOutModal(props: Props) {
styles.loadingIndicator,
]);

const classicAuthButtonStyle = React.useMemo(
() => [styles.button, styles.classicAuthButton],
[styles.button, styles.classicAuthButton],
);
const classicAuthButtonTextStyle = React.useMemo(
() => [styles.buttonText, styles.classicAuthButtonText],
[styles.buttonText, styles.classicAuthButtonText],
);
const siweAuthButtonStyle = React.useMemo(
() => [styles.button, styles.siweButton],
[styles.button, styles.siweButton],
);
const siweAuthButtonTextStyle = React.useMemo(
() => [styles.buttonText, styles.siweButtonText],
[styles.buttonText, styles.siweButtonText],
);
const buttonsViewOpacity = useAnimatedStyle(() => ({
opacity: buttonOpacity.value,
}));
Expand All @@ -498,47 +452,51 @@ function LoggedOutModal(props: Props) {
return null;
}

const signInButtons = [];
const signInButtons: Array<React.Element<any>> = [];
if (!usingRestoreFlow) {
signInButtons.push(
<TouchableOpacity
<PromptButton
text="Sign in"
onPress={onPressLogIn}
style={classicAuthButtonStyle}
activeOpacity={0.6}
variant="regular"
key="login-form"
>
<Text style={classicAuthButtonTextStyle}>Sign in</Text>
</TouchableOpacity>,
/>,
);
}
if (__DEV__ || usingRestoreFlow) {
const buttonText = usingRestoreFlow ? 'Sign in' : 'Sign in (QR)';
signInButtons.push(
<TouchableOpacity
<PromptButton
text={buttonText}
onPress={onPressQRCodeSignIn}
style={classicAuthButtonStyle}
activeOpacity={0.6}
variant="regular"
key="qr-code-login"
>
<Text style={classicAuthButtonTextStyle}>{buttonText}</Text>
</TouchableOpacity>,
/>,
);
}

if (signInButtons.length === 2) {
signInButtons[0] = (
<View style={styles.firstSignInButton} key="login-form">
{signInButtons[0]}
</View>
);
signInButtons[1] = (
<View style={styles.lastSignInButton} key="qr-code-login">
{signInButtons[1]}
</View>
);
}

let siweSection = null;
if (!usingRestoreFlow) {
siweSection = (
<>
<TouchableOpacity
<PromptButton
text="Sign in with Ethereum"
onPress={onPressSIWE}
style={siweAuthButtonStyle}
activeOpacity={0.6}
>
<View style={styles.siweIcon}>
<EthereumLogo />
</View>
<Text style={siweAuthButtonTextStyle}>Sign in with Ethereum</Text>
</TouchableOpacity>
variant="siwe"
/>
<View style={styles.siweOr}>
<View style={styles.siweOrLeftHR} />
<Text style={styles.siweOrText}>or</Text>
Expand All @@ -553,16 +511,11 @@ function LoggedOutModal(props: Props) {
<LoggedOutStaffInfo />
{siweSection}
<View style={styles.signInButtons}>{signInButtons}</View>
<View style={styles.registerButtons}>
<TouchableOpacity
onPress={onPressNewRegister}
style={classicAuthButtonStyle}
activeOpacity={0.6}
key="new"
>
<Text style={classicAuthButtonTextStyle}>Register</Text>
</TouchableOpacity>
</View>
<PromptButton
text="Register"
onPress={onPressNewRegister}
variant="regular"
/>
</AnimatedView>
);
}, [
Expand All @@ -571,18 +524,14 @@ function LoggedOutModal(props: Props) {
onPressLogIn,
onPressQRCodeSignIn,
onPressSIWE,
classicAuthButtonStyle,
classicAuthButtonTextStyle,
siweAuthButtonStyle,
siweAuthButtonTextStyle,
buttonsViewStyle,
styles.siweIcon,
styles.firstSignInButton,
styles.lastSignInButton,
styles.siweOr,
styles.siweOrLeftHR,
styles.siweOrText,
styles.siweOrRightHR,
styles.signInButtons,
styles.registerButtons,
]);

const windowWidth = dimensions.width;
Expand Down
58 changes: 58 additions & 0 deletions native/account/prompt-button.react.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
// @flow

import * as React from 'react';
import { Text, View } from 'react-native';

import PrimaryButton from '../components/primary-button.react.js';
import { useStyles } from '../themes/colors.js';
import EthereumLogo from '../vectors/ethereum-logo.react.js';

type Props = {
+text: string,
+onPress: () => mixed,
+variant: 'regular' | 'siwe',
};

function PromptButton(props: Props): React.Node {
const styles = useStyles(unboundStyles);

const { text, onPress, variant } = props;
if (variant === 'regular') {
return (
<View style={styles.container}>
<PrimaryButton onPress={onPress} label={text} />
</View>
);
}

return (
<View style={styles.container}>
<PrimaryButton onPress={onPress} style={styles.siweButton}>
<View style={styles.siweIcon}>
<EthereumLogo />
</View>
<Text style={styles.buttonText}>{text}</Text>
</PrimaryButton>
</View>
);
}

const unboundStyles = {
container: { flex: 1 },
buttonText: {
fontSize: 18,
textAlign: 'center',
color: 'siweButtonText',
},
siweButton: {
backgroundColor: 'siweButton',
flexDirection: 'row',
justifyContent: 'center',
padding: 12,
},
siweIcon: {
paddingRight: 10,
},
};

export default PromptButton;
30 changes: 24 additions & 6 deletions native/components/primary-button.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,36 @@ import { Text, View, ActivityIndicator } from 'react-native';

import Button from './button.react.js';
import { useColors, useStyles } from '../themes/colors.js';
import type { ViewStyle } from '../types/styles';

type Props = {
+onPress: () => mixed,
+label: string,
+label?: string,
+variant?: 'enabled' | 'disabled' | 'loading' | 'outline',
+children?: React.Node,
+style?: ViewStyle,
};
function PrimaryButton(props: Props): React.Node {
const { onPress, label, variant } = props;

const styles = useStyles(unboundStyles);
const buttonStyle = React.useMemo(() => {
let style;
if (variant === 'disabled' || variant === 'loading') {
return [styles.button, styles.disabledButton];
style = [styles.button, styles.disabledButton];
} else if (variant === 'outline') {
return [styles.button, styles.outlineButton];
style = [styles.button, styles.outlineButton];
} else {
return styles.button;
style = [styles.button];
}
}, [variant, styles.button, styles.disabledButton, styles.outlineButton]);
return [...style, props.style];
}, [
props.style,
styles.button,
styles.disabledButton,
styles.outlineButton,
variant,
]);
const buttonTextStyle = React.useMemo(() => {
if (variant === 'disabled') {
return [styles.buttonText, styles.disabledButtonText];
Expand All @@ -50,14 +61,21 @@ function PrimaryButton(props: Props): React.Node {
);
}, [variant, styles.spinner, colors.panelForegroundLabel]);

const content = React.useMemo(() => {
if (label) {
return <Text style={buttonTextStyle}>{label}</Text>;
}
return props.children;
}, [buttonTextStyle, label, props.children]);

return (
<Button
onPress={onPress}
iosActiveOpacity={0.6}
style={buttonStyle}
disabled={variant === 'disabled' || variant === 'loading'}
>
<Text style={buttonTextStyle}>{label}</Text>
{content}
{spinner}
</Button>
);
Expand Down

0 comments on commit b298be8

Please sign in to comment.