Introduces AppText, Link and FramedSegment redesign

components/common/app-text.js

@@ -1,14 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Text } from 'react-native'
-import styles from "../../styles"
+import { StyleSheet, Text } from 'react-native'
+
 import Link from './link'
 
+import { Colors, Typography } from '../../styles/redesign'
+
 export default function AppText({ children, onPress, numberOfLines, style}) {
   // we parse for links in case the text contains any
   return (
     <Link>
-      <Text style={[styles.appText, style]}
+      <Text style={[styles.text, style]}
         onPress={onPress}
         numberOfLines={numberOfLines}
       >
@@ -24,3 +26,10 @@ AppText.propTypes = {
   numberOfLines: PropTypes.number,
   style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
 }
+
+const styles = StyleSheet.create({
+  text: {
+    color: Colors.grey,
+    ...Typography.mainText
+  }
+})

components/common/framed-segment.js

@@ -1,29 +1,41 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
 
-import { View } from 'react-native'
 import AppText from './app-text'
-import styles from '../../styles'
+
+import { Containers, Typography } from '../../styles/redesign'
 
 const FramedSegment = ({ children, last, style, title }) => {
-  const viewStyle = [styles.framedSegment, style]
-  if (last) viewStyle.push(styles.framedSegmentLast)
+  const containerStyle = last ? styles.containerLast : styles.container
+
   return (
-    <View style={[viewStyle]}>
-      {title && <AppText style={styles.framedSegmentTitle}>{title}</AppText>}
+    <View style={[containerStyle, style]}>
+      {title && <AppText style={styles.title}>{title}</AppText>}
       {children}
     </View>
   )
 }
 
 FramedSegment.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]),
+  children: PropTypes.node,
   last: PropTypes.bool,
   style: PropTypes.object,
   title: PropTypes.string
 }
 
+const styles = StyleSheet.create({
+  container: {
+    ...Containers.segmentContainer,
+    ...Containers.bottomBorder
+  },
+  containerLast: {
+    ...Containers.segmentContainer,
+    ...Containers.marginBottom
+  },
+  title: {
+    ...Typography.titleSmall
+  }
+})
+
 export default FramedSegment

components/common/link.js

@@ -1,29 +1,39 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Hyperlink from 'react-native-hyperlink'
-import styles from '../../styles'
+import { StyleSheet } from 'react-native'
+
+import { Colors, Typography } from '../../styles/redesign'
+
 import links from '../../i18n/en/links'
 
-export default function Link(props) {
+const Link = ({ children }) => {
   return (
     <Hyperlink
       linkStyle={styles.link}
       linkText={replaceUrlWithText}
       linkDefault
     >
-      {props.children}
+      {children}
     </Hyperlink>
   )
 }
 
 Link.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ])
+  children: PropTypes.node
 }
 
+const styles = StyleSheet.create({
+  link: {
+    color: Colors.purple,
+    ...Typography.mainText,
+    ...Typography.underline,
+  }
+})
+
 function replaceUrlWithText(url) {
   const link = Object.values(links).find(l => l.url === url)
   return (link && link.text) || url
-}
+}
+
+export default Link