Page MenuHomePhabricator
Files F3523629

D14066.id46298.diff
No OneTemporary
Actions

D14066.id46298.diff
View Options

diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js
--- a/native/account/logged-out-modal.react.js
+++ b/native/account/logged-out-modal.react.js
@@ -37,6 +37,7 @@
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';
@@ -55,7 +56,6 @@
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'];
@@ -116,18 +116,6 @@
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,
@@ -137,23 +125,17 @@
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,
@@ -176,15 +158,6 @@
right: 0,
top: 0,
},
- siweButton: {
- backgroundColor: 'siweButton',
- flex: 1,
- flexDirection: 'row',
- justifyContent: 'center',
- },
- siweButtonText: {
- color: 'siweButtonText',
- },
siweOr: {
flex: 1,
flexDirection: 'row',
@@ -210,9 +183,6 @@
fontSize: 17,
textAlign: 'center',
},
- siweIcon: {
- paddingRight: 10,
- },
};
const isForegroundSelector = createIsForegroundSelector(
@@ -470,22 +440,6 @@
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,
}));
@@ -498,30 +452,39 @@
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>
);
}
@@ -529,16 +492,11 @@
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>
@@ -553,16 +511,11 @@
<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>
);
}, [
@@ -571,18 +524,14 @@
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;
diff --git a/native/account/prompt-button.react.js b/native/account/prompt-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/prompt-button.react.js
@@ -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;
diff --git a/native/components/primary-button.react.js b/native/components/primary-button.react.js
--- a/native/components/primary-button.react.js
+++ b/native/components/primary-button.react.js
@@ -5,25 +5,36 @@
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];
@@ -50,6 +61,13 @@
);
}, [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}
@@ -57,7 +75,7 @@
style={buttonStyle}
disabled={variant === 'disabled' || variant === 'loading'}
>
- <Text style={buttonTextStyle}>{label}</Text>
+ {content}
{spinner}
</Button>
);

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 9:51 AM (1 h, 43 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2699370
Default Alt Text
D14066.id46298.diff (9 KB)

Event Timeline