Introduces AppTextInput and Button components styling update

components/common/app-text-input.js

@@ -1,42 +1,23 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { StyleSheet, TextInput } from 'react-native'
 
-import { Colors } from '../../styles/redesign'
+import { Colors, Spacing, Typography } from '../../styles/redesign'
 
-const AppTextInput = ({
-  autoFocus,
-  onChangeText,
-  placeholder,
-  value,
-  ...props
-}) => {
-
-  return (
-    <TextInput
-      autoFocus={autoFocus}
-      onChangeText={onChangeText}
-      placeholder={placeholder}
-      style={styles.input}
-      value={value}
-      {...props}
-    />
-  )
-}
-
-AppTextInput.propTypes = {
-  autoFocus: PropTypes.bool,
-  onChangeText: PropTypes.func,
-  placeholder: PropTypes.string,
-  value: PropTypes.string,
+const AppTextInput = ({ ...props }) => {
+  return <TextInput style={styles.input} {...props} />
 }
 
 const styles = StyleSheet.create({
   input: {
+    backgroundColor: 'white',
     borderColor: Colors.grey,
     borderRadius: 5,
     borderStyle: 'solid',
     borderWidth: 1,
+    color: Colors.greyDark,
+    marginTop: Spacing.base,
+    paddingHorizontal: Spacing.base,
+    ...Typography.mainText
   }
 })
 

components/common/button.js

@@ -6,9 +6,11 @@ import AppText from './app-text'
 
 import { Colors, Fonts, Spacing } from '../../styles/redesign'
 
-const Button = ({ children, isCTA, onPress, testID }) => {
+const Button = ({ children, isCTA, isSmall, onPress, testID }) => {
   const buttonStyle = isCTA ? styles.cta : styles.regular
-  const textStyle = isCTA ? styles.buttonTextBold : styles.buttonTextRegular
+  const textCTA = isCTA ? styles.buttonTextBold : styles.buttonTextRegular
+  const textStyle = isSmall ? [ textCTA, textSmall ] : [textCTA, text]
+
   return (
     <TouchableOpacity onPress={onPress} style={buttonStyle} testID={testID}>
       <AppText style={textStyle}>{children}</AppText>
@@ -19,6 +21,7 @@ const Button = ({ children, isCTA, onPress, testID }) => {
 Button.propTypes = {
   children: PropTypes.node,
   isCTA: PropTypes.bool,
+  isSmall: PropTypes.bool,
   onPress: PropTypes.func,
   testID: PropTypes.string
 }
@@ -28,6 +31,12 @@ const text = {
   textTransform: 'uppercase'
 }
 
+const textSmall = {
+  fontSize: Fonts.small,
+  padding: Spacing.small,
+  textTransform: 'uppercase'
+}
+
 const button = {
   alignItems: 'center',
   justifyContent: 'center',
@@ -45,13 +54,11 @@ const styles = StyleSheet.create({
   },
   buttonTextBold: {
     color: 'white',
-    fontFamily: Fonts.bold,
-    ...text
+    fontFamily: Fonts.bold
   },
   buttonTextRegular: {
     color: Colors.greyDark,
-    fontFamily: Fonts.main,
-    ...text
+    fontFamily: Fonts.main
   }
 })