From 842e8a2a2428ed389bb23db1f76423b924dd0218 Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Wed, 25 Mar 2020 16:21:29 +0100
Subject: [PATCH] Introduces AppTextInput and Button components styling update

---
 components/common/app-text-input.js | 35 +++++++----------------------
 components/common/button.js         | 19 +++++++++++-----
 2 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/components/common/app-text-input.js b/components/common/app-text-input.js
index 389490e..a1c8f99 100644
--- a/components/common/app-text-input.js
+++ b/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
   }
 })
 
diff --git a/components/common/button.js b/components/common/button.js
index fd2213f..8adf7ea 100644
--- a/components/common/button.js
+++ b/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
   }
 })