Page MenuHomePhabricator
Files F3283007

D5956.diff
No OneTemporary
Actions

D5956.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
@@ -22,6 +22,7 @@
import type { Dispatch } from 'lib/types/redux-types';
import { fetchNewCookieFromNativeCredentials } from 'lib/utils/action-utils';
+import EthereumLogo from '../components/ethereum-logo.react.js';
import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react';
import ConnectedStatusBar from '../connected-status-bar.react';
import {
@@ -461,10 +462,15 @@
<>
<TouchableOpacity
onPress={this.onPressSIWE}
- style={styles.button}
+ style={[styles.button, styles.siweButton]}
activeOpacity={0.6}
>
- <Text style={styles.buttonText}>SIWE</Text>
+ <View style={styles.siweIcon}>
+ <EthereumLogo />
+ </View>
+ <Text style={[styles.buttonText, styles.siweButtonText]}>
+ Sign In with Ethereum
+ </Text>
</TouchableOpacity>
<View style={styles.siweOr}>
<View style={styles.siweOrLeftHR} />
@@ -501,17 +507,21 @@
{siweButton}
<TouchableOpacity
onPress={this.onPressLogIn}
- style={styles.button}
+ style={[styles.button, styles.classicAuthButton]}
activeOpacity={0.6}
>
- <Text style={styles.buttonText}>LOG IN</Text>
+ <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
+ Sign in
+ </Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.onPressRegister}
- style={styles.button}
+ style={[styles.button, styles.classicAuthButton]}
activeOpacity={0.6}
>
- <Text style={styles.buttonText}>SIGN UP</Text>
+ <Text style={[styles.buttonText, styles.classicAuthButtonText]}>
+ Register
+ </Text>
</TouchableOpacity>
</Animated.View>
);
@@ -599,30 +609,34 @@
top: 13,
},
button: {
- backgroundColor: '#FFFFFFAA',
- borderRadius: 6,
- marginBottom: 10,
- marginTop: 10,
- paddingBottom: 6,
+ borderRadius: 4,
+ marginBottom: 4,
+ marginTop: 4,
+ paddingBottom: 14,
paddingLeft: 18,
paddingRight: 18,
- paddingTop: 6,
+ paddingTop: 14,
},
buttonContainer: {
bottom: 0,
left: 0,
- marginLeft: 40,
- marginRight: 40,
+ marginLeft: 30,
+ marginRight: 30,
paddingBottom: 20,
position: 'absolute',
right: 0,
},
buttonText: {
- color: '#000000FF',
fontFamily: 'OpenSans-Semibold',
- fontSize: 22,
+ fontSize: 17,
textAlign: 'center',
},
+ classicAuthButton: {
+ backgroundColor: 'purpleButton',
+ },
+ classicAuthButtonText: {
+ color: 'logInText',
+ },
container: {
backgroundColor: 'transparent',
flex: 1,
@@ -645,6 +659,15 @@
right: 0,
top: 0,
},
+ siweButton: {
+ backgroundColor: 'siweButton',
+ flex: 1,
+ flexDirection: 'row',
+ justifyContent: 'center',
+ },
+ siweButtonText: {
+ color: 'siweButtonText',
+ },
siweOr: {
flex: 1,
flexDirection: 'row',
@@ -670,6 +693,9 @@
fontSize: 17,
textAlign: 'center',
},
+ siweIcon: {
+ paddingRight: 10,
+ },
};
const isForegroundSelector = createIsForegroundSelector(
diff --git a/native/components/ethereum-logo.react.js b/native/components/ethereum-logo.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/ethereum-logo.react.js
@@ -0,0 +1,31 @@
+// @flow
+
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+function EthereumLogo(): React.Node {
+ return (
+ <Svg
+ width={16}
+ height={26}
+ viewBox="0 0 256 417"
+ xmlns="http://www.w3.org/2000/svg"
+ preserveAspectRatio="xMidYMid"
+ >
+ <Path
+ fill="#343434"
+ d="m127.961 0-2.795 9.5v275.668l2.795 2.79 127.962-75.638z"
+ />
+ <Path fill="#8C8C8C" d="M127.962 0 0 212.32l127.962 75.639V154.158z" />
+ <Path
+ fill="#3C3C3B"
+ d="m127.961 312.187-1.575 1.92v98.199l1.575 4.6L256 236.587z"
+ />
+ <Path fill="#8C8C8C" d="M127.962 416.905v-104.72L0 236.585z" />
+ <Path fill="#141414" d="m127.961 287.958 127.96-75.637-127.96-58.162z" />
+ <Path fill="#393939" d="m0 212.32 127.96 75.638v-133.8z" />
+ </Svg>
+ );
+}
+
+export default EthereumLogo;
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -85,6 +85,8 @@
tooltipBackground: '#E0E0E0',
logInSpacer: '#FFFFFF33',
logInText: 'white',
+ siweButton: 'white',
+ siweButtonText: '#1F1F1F',
});
export type Colors = $Exact<typeof light>;
@@ -163,6 +165,8 @@
tooltipBackground: '#1F1F1F',
logInSpacer: '#FFFFFF33',
logInText: 'white',
+ siweButton: 'white',
+ siweButtonText: '#1F1F1F',
});
const colors = { light, dark };

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 17, 11:30 AM (21 h, 39 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2523088
Default Alt Text
D5956.diff (5 KB)

Event Timeline