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 { StyleSheet, Text } from 'react-native'
-import styles from "../../styles"
+
 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]
+  const containerStyle = last ? styles.containerLast : styles.container
-  if (last) viewStyle.push(styles.framedSegmentLast)
+
   return (
-    <View style={[viewStyle]}>
+    <View style={[containerStyle, style]}>
-      {title && <AppText style={styles.framedSegmentTitle}>{title}</AppText>}
+      {title && <AppText style={styles.title}>{title}</AppText>}
       {children}
     </View>
   )
 }
 
 FramedSegment.propTypes = {
-  children: PropTypes.oneOfType([
+  children: PropTypes.node,
-    PropTypes.arrayOf(PropTypes.node),
-    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([
+  children: PropTypes.node
-    PropTypes.arrayOf(PropTypes.node),
-    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

styles/colors.js

@@ -0,0 +1,10 @@
+export default {
+  grey: '#A5A5A5',
+  greyLight: '#D2D2D2',
+  greySuperLight: '#F2F2F2',
+  orange: '#F38337',
+  purple: '#3A2671',
+  purpleLight: '#5D4F8A',
+  tourquise: '#69CBC1',
+  tourquiseLight: '#CFECEA',
+}

styles/containers.js

@@ -0,0 +1,18 @@
+import Colors from './colors'
+import Spacing from './spacing'
+
+export default {
+  bottomBorder: {
+    borderStyle: 'solid',
+    borderBottomWidth: 2,
+    borderBottomColor: Colors.greySuperLight,
+    paddingBottom: Spacing.base
+  },
+  centerItems: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center'
+  },
+  marginBottom: { marginBottom: Spacing.base },
+  segmentContainer: { marginHorizontal: Spacing.base }
+}

styles/redesign.js

@@ -0,0 +1,5 @@
+import Colors from './colors'
+import Containers from './containers'
+import Typography from './typography'
+
+export { Colors, Containers, Typography }

styles/spacing.js

@@ -0,0 +1,3 @@
+export default {
+  base: 16
+}

styles/typography.js

@@ -0,0 +1,28 @@
+import Colors from './colors'
+import Spacing from './spacing'
+
+const fonts = {
+  main: 'Jost-400-Book',
+  bold : 'Jost-700-Bold',
+}
+
+const sizes = {
+  mainMedium: 18,
+  mainLarge: 20,
+  titleSmall: 22,
+  titleMedium: 24,
+  titleLarge: 28
+}
+
+export default {
+  mainText: {
+    fontFamily: fonts.main,
+    fontSize: sizes.mainMedium
+  },
+  underline: { textDecorationLine: 'underline' },
+  titleSmall: {
+    color: Colors.purple,
+    fontSize: sizes.titleSmall,
+    marginVertical: Spacing.base
+  }
+}