Introduces AppLoading, AppTextInput, Button components redesign

components/common/app-loading.js

@@ -1,18 +1,24 @@
 import React from 'react'
-
-import { View } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import AppText from './app-text'
+
+import { Containers } from '../../styles/redesign'
+
 import { shared } from '../../i18n/en/labels'
 
 const AppLoadingView = () => {
   return (
-    <View flex={1}>
-      <View style={{flex:1, justifyContent: 'center'}}>
-        <AppText style={{alignSelf: 'center'}}>{shared.loading}</AppText>
-      </View>
+    <View style={styles.container}>
+      <AppText>{shared.loading}</AppText>
     </View>
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.centerItems
+  }
+})
+
 export default AppLoadingView

components/common/app-text-input.js

@@ -1,17 +1,26 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { TextInput } from 'react-native'
-import styles from '../../styles'
+import { StyleSheet, TextInput } from 'react-native'
 
-export default function AppTextInput({ style, ...props }) {
+import { Containers } from '../../styles/redesign'
+
+const AppTextInput = ({
+  autoFocus,
+  onChangeText,
+  placeholder,
+  value,
+  style,
+  ...props
+}) => {
   if (!Array.isArray(style)) style = [style]
+
   return (
     <TextInput
-      style={[styles.textInputField, ...style]}
-      autoFocus={props.autoFocus}
-      onChangeText={props.onChangeText}
-      value={props.value}
-      placeholder={props.placeholder}
+      autoFocus={autoFocus}
+      onChangeText={onChangeText}
+      placeholder={placeholder}
+      style={[styles.input, ...style]}
+      value={value}
       {...props}
     />
   )
@@ -28,3 +37,11 @@ AppTextInput.propTypes = {
 AppTextInput.defaultProps = {
   style: []
 }
+
+const styles = StyleSheet.create({
+  input: {
+    ...Containers.greyBorder
+  }
+})
+
+export default AppTextInput

components/common/button.js

@@ -1,31 +1,38 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { TouchableOpacity } from 'react-native'
-import AppText from './app-text'
-import styles from '../../styles'
+import { StyleSheet, TouchableOpacity } from 'react-native'
 
-export default function Button({
-  backgroundColor,
-  children,
-  onPress,
-  style,
-  testID
-}) {
+import AppText from './app-text'
+
+import { Containers, Typography } from '../../styles/redesign'
+
+const Button = ({ children, isOrange, onPress, testID }) => {
+  const buttonStyle = isOrange ? styles.orange : {}
+  const textStyle = isOrange ? styles.buttonTextBold : styles.buttonTextRegular
   return (
-    <TouchableOpacity
-      onPress={onPress}
-      style={[styles.button, style, { backgroundColor }]}
-      testID={testID}
-    >
-      <AppText style={styles.homeButtonText}>{children}</AppText>
+    <TouchableOpacity onPress={onPress} style={buttonStyle} testID={testID}>
+      <AppText style={textStyle}>{children}</AppText>
     </TouchableOpacity>
   )
 }
 
 Button.propTypes = {
-  backgroundColor: PropTypes.string,
   children: PropTypes.node,
+  isOrange: PropTypes.bool,
   onPress: PropTypes.func,
-  style: PropTypes.object,
   testID: PropTypes.string
 }
+
+const styles = StyleSheet.create({
+  orange: {
+    ...Containers.orangeButton
+  },
+  buttonTextBold: {
+    ...Typography.buttonTextBold
+  },
+  buttonTextRegular: {
+    ...Typography.buttonTextRegular
+  }
+})
+
+export default Button

styles/containers.js

@@ -13,6 +13,16 @@ export default {
     flex: 1,
     justifyContent: 'center'
   },
+  greyBorder: {
+    borderColor: Colors.greyLight,
+    borderRadius: 5,
+    borderStyle: 'solid',
+    borderWidth: 1,
+  },
   marginBottom: { marginBottom: Spacing.base },
+  orangeButton: {
+    backgroundColor: Colors.orange,
+    borderRadius: 25
+  },
   segmentContainer: { marginHorizontal: Spacing.base }
 }

styles/spacing.js

@@ -1,3 +1,4 @@
 export default {
-  base: 16
+  base: 16,
+  large: 20
 }

styles/typography.js

@@ -14,15 +14,29 @@ const sizes = {
   titleLarge: 28
 }
 
+const button = {
+  paddingHorizontal: Spacing.large,
+  paddingVertical: Spacing.base,
+  textTransform: 'uppercase'
+}
+
 export default {
+  buttonTextBold: {
+    fontFamily: fonts.bold,
+    ...button
+  },
+  buttonTextRegular: {
+    fontFamily: fonts.main,
+    ...button
+  },
   mainText: {
     fontFamily: fonts.main,
     fontSize: sizes.mainMedium
   },
-  underline: { textDecorationLine: 'underline' },
   titleSmall: {
     color: Colors.purple,
     fontSize: sizes.titleSmall,
     marginVertical: Spacing.base
-  }
+  },
+  underline: { textDecorationLine: 'underline' }
 }