Introduces Home component redesign

components/common/app-text.js

@@ -6,10 +6,16 @@ import Link from './link'
 
 import { Colors, Typography } from '../../styles/redesign'
 
-export default function AppText({ children, onPress, numberOfLines, style}) {
+export default function AppText({
+  children,
+  linkStyle,
+  onPress,
+  numberOfLines,
+  style
+}) {
   // we parse for links in case the text contains any
   return (
-    <Link>
+    <Link style={linkStyle}>
       <Text style={[styles.text, style]}
         onPress={onPress}
         numberOfLines={numberOfLines}
@@ -22,6 +28,7 @@ export default function AppText({ children, onPress, numberOfLines, style}) {
 
 AppText.propTypes = {
   children: PropTypes.node,
+  linkStyle: PropTypes.object,
   onPress: PropTypes.func,
   numberOfLines: PropTypes.number,
   style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),

components/common/button.js

@@ -7,7 +7,7 @@ import AppText from './app-text'
 import { Colors, Fonts, Spacing } from '../../styles/redesign'
 
 const Button = ({ children, isCTA, onPress, testID }) => {
-  const buttonStyle = isCTA ? styles.orange : {}
+  const buttonStyle = isCTA ? styles.cta : styles.regular
   const textStyle = isCTA ? styles.buttonTextBold : styles.buttonTextRegular
   return (
     <TouchableOpacity onPress={onPress} style={buttonStyle} testID={testID}>
@@ -23,24 +23,35 @@ Button.propTypes = {
   testID: PropTypes.string
 }
 
-const button = {
-  paddingHorizontal: Spacing.large,
-  paddingVertical: Spacing.base,
+const text = {
+  padding: Spacing.base,
   textTransform: 'uppercase'
 }
 
+const button = {
+  alignItems: 'center',
+  justifyContent: 'center',
+  margin: Spacing.base
+}
+
 const styles = StyleSheet.create({
-  orange: {
+  regular: {
+    ...button
+  },
+  cta: {
     backgroundColor: Colors.orange,
-    borderRadius: 25
+    borderRadius: 25,
+    ...button
   },
   buttonTextBold: {
-    fontFamily: Fonts.main,
-    ...button
+    color: 'white',
+    fontFamily: Fonts.bold,
+    ...text
   },
   buttonTextRegular: {
-    fontFamily: Fonts.bold,
-    ...button
+    color: Colors.greyDark,
+    fontFamily: Fonts.main,
+    ...text
   }
 })
 

components/common/link.js

@@ -7,10 +7,10 @@ import { Colors, Typography } from '../../styles/redesign'
 
 import links from '../../i18n/en/links'
 
-const Link = ({ children }) => {
+const Link = ({ children, style }) => {
   return (
     <Hyperlink
-      linkStyle={styles.link}
+      linkStyle={[styles.link, style]}
       linkText={replaceUrlWithText}
       linkDefault
     >
@@ -20,7 +20,8 @@ const Link = ({ children }) => {
 }
 
 Link.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  style: PropTypes.object
 }
 
 const styles = StyleSheet.create({

components/common/menu-icon.js

@@ -10,7 +10,7 @@ const Icon = createIconSetFromIcoMoon(iconConfig, '', 'Menu')
 const MenuIcon = ({ isActive, name }) => {
   const color = isActive ? Colors.greyDark : Colors.grey
 
-  return <Icon name={name} size={Sizes.icon} color={color} />
+  return <Icon name={name} size={Sizes.huge} color={color} />
 }
 
 MenuIcon.propTypes = {