major: HDKD feature

src/colors.js

@@ -16,7 +16,7 @@
 
 export default {
 	bg: '#1B1B1B',
-	bg_alert: '#ED332B',
+	bg_alert: '#EB5757',
 	bg_button: '#48A5C2',
 	bg_text: '#FFFFFF',
 	bg_text_sec: '#FFFFFF',

src/components/ButtonIcon.js

@@ -33,23 +33,24 @@ export default class ButtonIcon extends React.PureComponent<{
 	onPress: () => any
 }> {
 	static propTypes = {
+		iconColor: PropTypes.string,
 		iconName: PropTypes.string.isRequired,
 		iconType: PropTypes.string,
-		onPress: PropTypes.func.isRequired,
+		onPress: PropTypes.func,
 		style: ViewPropTypes.style
 	};
 
 	render() {
-		const { iconName, iconType, onPress } = this.props;
+		const { iconColor, iconName, iconType, onPress } = this.props;
 
 		const Touchable =
 			Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 		return (
 			<Touchable accessibilityComponentType="button" onPress={onPress}>
 				<View style={styles.button}>
 					<Icon
-						color={colors.bg_text_sec}
-						size={24}
+						color={iconColor || colors.bg_text_sec}
+						size={26}
 						name={iconName}
 						type={iconType}
 					/>
@@ -66,6 +67,7 @@ const styles = StyleSheet.create({
 		borderRadius: 24,
 		height: 32,
 		justifyContent: 'center',
+		marginLeft: 8,
 		width: 32
 	}
 });

src/components/IdentitiesSwitch.js

@@ -25,7 +25,11 @@ function IdentitiesSwitch(props) {
 
 	return (
 		<View>
-			<ButtonIcon onPress={() => setVisible(!visible)} iconName="fingerprint" />
+			<ButtonIcon
+				onPress={() => setVisible(!visible)}
+				iconName="md-finger-print"
+				iconType="ionicon"
+			/>
 			<Modal animationType="fade" visible={visible} transparent={true}>
 				<View style={styles.container}>
 					<Text>Identities Switch</Text>

src/components/SecurityHeader.js

@@ -16,14 +16,12 @@
 
 import NetInfo from '@react-native-community/netinfo';
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import { View } from 'react-native';
 import { withNavigation } from 'react-navigation';
 
 import colors from '../colors';
-import fonts from '../fonts';
-import TouchableItem from './TouchableItem';
 import IdentitiesSwitch from '../components/IdentitiesSwitch';
+import ButtonIcon from './ButtonIcon';
 
 class SecurityHeader extends React.Component {
 	state = {
@@ -48,30 +46,23 @@ class SecurityHeader extends React.Component {
 		}
 
 		return (
-			<TouchableItem onPress={() => this.props.navigation.navigate('Security')}>
-				<View
-					style={{
-						alignItems: 'center',
-						flexDirection: 'row',
-						paddingRight: 14
-					}}
-				>
-					<Icon style={styles.headerSecureIcon} name="security" />
-					<IdentitiesSwitch />
-				</View>
-			</TouchableItem>
+			<View
+				style={{
+					alignItems: 'center',
+					flexDirection: 'row',
+					paddingRight: 14
+				}}
+			>
+				<IdentitiesSwitch />
+				<ButtonIcon
+					onPress={() => this.props.navigation.navigate('Security')}
+					iconName="security"
+					iconColor={colors.bg_alert}
+				/>
+				<ButtonIcon iconType="ionicon" iconName="md-more" />
+			</View>
 		);
 	}
 }
 
-const styles = StyleSheet.create({
-	headerSecureIcon: {
-		color: colors.bg_alert,
-		fontFamily: fonts.bold,
-		fontSize: 20,
-		marginLeft: 0,
-		paddingRight: 5
-	}
-});
-
 export default withNavigation(SecurityHeader);