Moves unique styles of Button component from common to local file

components/common/button.js

@@ -4,11 +4,11 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 
 import AppText from './app-text'
 
-import { Containers, Typography } from '../../styles/redesign'
+import { Colors, Fonts, Spacing } from '../../styles/redesign'
 
-const Button = ({ children, isOrange, onPress, testID }) => {
-  const buttonStyle = isOrange ? styles.orange : {}
-  const textStyle = isOrange ? styles.buttonTextBold : styles.buttonTextRegular
+const Button = ({ children, isCTA, onPress, testID }) => {
+  const buttonStyle = isCTA ? styles.orange : {}
+  const textStyle = isCTA ? styles.buttonTextBold : styles.buttonTextRegular
   return (
     <TouchableOpacity onPress={onPress} style={buttonStyle} testID={testID}>
       <AppText style={textStyle}>{children}</AppText>
@@ -18,20 +18,29 @@ const Button = ({ children, isOrange, onPress, testID }) => {
 
 Button.propTypes = {
   children: PropTypes.node,
-  isOrange: PropTypes.bool,
+  isCTA: PropTypes.bool,
   onPress: PropTypes.func,
   testID: PropTypes.string
 }
 
+const button = {
+  paddingHorizontal: Spacing.large,
+  paddingVertical: Spacing.base,
+  textTransform: 'uppercase'
+}
+
 const styles = StyleSheet.create({
   orange: {
-    ...Containers.orangeButton
+    backgroundColor: Colors.orange,
+    borderRadius: 25
   },
   buttonTextBold: {
-    ...Typography.buttonTextBold
+    fontFamily: Fonts.main,
+    ...button
   },
   buttonTextRegular: {
-    ...Typography.buttonTextRegular
+    fontFamily: Fonts.bold,
+    ...button
   }
 })
 

styles/containers.js

@@ -12,10 +12,6 @@ export default {
     borderStyle: 'solid',
     borderWidth: 1,
   },
-  orangeButton: {
-    backgroundColor: Colors.orange,
-    borderRadius: 25
-  },
   page: {
     backgroundColor: Colors.tourquiseLight,
     flex: 1

styles/redesign.js

@@ -1,6 +1,6 @@
 import Colors from './colors'
 import Containers from './containers'
 import Spacing from './spacing'
-import Typography, { sizes as Sizes } from './typography'
+import Typography, { fonts as Fonts, sizes as Sizes } from './typography'
 
-export { Colors, Containers, Spacing, Sizes, Typography }
+export { Colors, Containers, Fonts, Spacing, Sizes, Typography }

styles/typography.js

@@ -1,7 +1,7 @@
 import Colors from './colors'
 import Spacing from './spacing'
 
-const fonts = {
+export const fonts = {
   main: 'Jost-400-Book',
   bold : 'Jost-700-Bold',
 }
@@ -12,21 +12,7 @@ export const sizes = {
   title: 24
 }
 
-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.base