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,17 +125,6 @@ position: 'absolute', right: 0, }, - buttonText: { - fontFamily: 'OpenSans-Semibold', - fontSize: 17, - textAlign: 'center', - }, - classicAuthButton: { - backgroundColor: 'purpleButton', - }, - classicAuthButtonText: { - color: 'whiteText', - }, registerButtons: { flexDirection: 'row', }, @@ -176,15 +153,6 @@ right: 0, top: 0, }, - siweButton: { - backgroundColor: 'siweButton', - flex: 1, - flexDirection: 'row', - justifyContent: 'center', - }, - siweButtonText: { - color: 'siweButtonText', - }, siweOr: { flex: 1, flexDirection: 'row', @@ -210,9 +178,6 @@ fontSize: 17, textAlign: 'center', }, - siweIcon: { - paddingRight: 10, - }, }; const isForegroundSelector = createIsForegroundSelector( @@ -470,22 +435,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, })); @@ -501,27 +450,23 @@ const signInButtons = []; if (!usingRestoreFlow) { signInButtons.push( - - Sign in - , + />, ); } if (__DEV__ || usingRestoreFlow) { const buttonText = usingRestoreFlow ? 'Sign in' : 'Sign in (QR)'; signInButtons.push( - - {buttonText} - , + />, ); } @@ -529,16 +474,11 @@ if (!usingRestoreFlow) { siweSection = ( <> - - - - - Sign in with Ethereum - + variant="siwe" + /> or @@ -554,14 +494,11 @@ {siweSection} {signInButtons} - - Register - + variant="regular" + /> ); @@ -571,12 +508,7 @@ onPressLogIn, onPressQRCodeSignIn, onPressSIWE, - classicAuthButtonStyle, - classicAuthButtonTextStyle, - siweAuthButtonStyle, - siweAuthButtonTextStyle, buttonsViewStyle, - styles.siweIcon, styles.siweOr, styles.siweOrLeftHR, styles.siweOrText, 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,99 @@ +// @flow + +import * as React from 'react'; +import { Text, TouchableOpacity, View } from 'react-native'; + +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 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 { text, onPress, variant } = props; + if (variant === 'regular') { + return ( + + {text} + + ); + } + + return ( + + + + + {text} + + ); +} + +const unboundStyles = { + button: { + borderRadius: 4, + marginBottom: 4, + marginTop: 4, + marginLeft: 4, + marginRight: 4, + paddingBottom: 14, + paddingLeft: 18, + paddingRight: 18, + paddingTop: 14, + flex: 1, + }, + buttonText: { + fontFamily: 'OpenSans-Semibold', + fontSize: 17, + textAlign: 'center', + }, + classicAuthButton: { + backgroundColor: 'purpleButton', + }, + classicAuthButtonText: { + color: 'whiteText', + }, + siweButton: { + backgroundColor: 'siweButton', + flexDirection: 'row', + justifyContent: 'center', + }, + siweButtonText: { + color: 'siweButtonText', + }, + siweIcon: { + paddingRight: 10, + }, +}; + +export default PromptButton;