Delete button

app/containers/Passcode/Base/Button.js

@@ -7,7 +7,7 @@ import { themes } from '../../../constants/colors';
 import Touch from '../../../utils/touch';
 
 const Button = ({
-	text, disabled, theme, onPress
+	text, disabled, theme, onPress, del
 }) => (
 	<Touch
 		style={[styles.buttonCircle, { backgroundColor: themes[theme].backgroundColor, borderColor: themes[theme].borderColor }]}
@@ -15,9 +15,19 @@ const Button = ({
 		theme={theme}
 		onPress={() => onPress && onPress(text)}
 	>
+		{
+			del
+				? (
+					<Text style={[styles.deleteText, { color: themes[theme].titleText }]}>
+						del
+					</Text>
+				)
+				: (
 					<Text style={[styles.text, { color: themes[theme].titleText }]}>
 						{text}
 					</Text>
+				)
+		}
 	</Touch>
 );
 
@@ -25,6 +35,7 @@ Button.propTypes = {
 	text: PropTypes.string,
 	theme: PropTypes.string,
 	disabled: PropTypes.bool,
+	del: PropTypes.bool,
 	onPress: PropTypes.func
 };
 

app/containers/Passcode/Base/index.js

@@ -107,7 +107,7 @@ const Base = forwardRef(({
 							<Button text='0' theme={theme} onPress={onPressNumber} />
 						</Col>
 						<Col style={styles.colButtonCircle}>
-							<Button text='X' theme={theme} onPress={onPressDelete} />
+							<Button del theme={theme} onPress={onPressDelete} />
 						</Col>
 					</Row>
 				</Grid>

app/containers/Passcode/Base/styles.js

@@ -6,8 +6,7 @@ export default StyleSheet.create({
 	container: {
 		flex: 1,
 		justifyContent: 'center',
-		alignItems: 'center',
+		alignItems: 'center'
-		// width: '100%'
 	},
 	viewTitle: {
 		flexDirection: 'column',
@@ -50,12 +49,15 @@ export default StyleSheet.create({
 		fontSize: grid.unit * 2,
 		fontWeight: '200'
 	},
+	deleteText: {
+		fontSize: grid.unit * 1.2,
+		fontWeight: '200'
+	},
 	buttonCircle: {
 		alignItems: 'center',
 		justifyContent: 'center',
 		width: grid.unit * 4,
 		height: grid.unit * 4,
-		backgroundColor: 'rgb(242, 245, 251)',
 		borderRadius: grid.unit * 2,
 		borderWidth: 1
 	},