Introduces AppTextInput and Button components styling update

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
   }
 })