Add AppHelp component

components/common/AppHelp.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
+
+import AppText from '../common/app-text'
+
+import { Containers, Spacing, Typography } from '../../styles'
+
+const AppHelp = ({ text }) => (
+  <View style={styles.container}>
+    <AppText style={styles.accentPurple}>*</AppText>
+    <AppText>{text}</AppText>
+  </View>
+)
+
+AppHelp.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  text: PropTypes.string.isRequired,
+}
+
+const styles = StyleSheet.create({
+  accentPurple: {
+    ...Typography.accentPurple,
+    alignSelf: 'flex-start',
+    paddingRight: Spacing.base,
+  },
+  container: {
+    ...Containers.rowContainer,
+    padding: Spacing.base,
+  },
+})
+
+export default AppHelp

styles/typography.js

@@ -6,7 +6,7 @@ import Spacing from './spacing'
 
 export const fonts = {
   main: Platform.OS === 'ios' ? 'Jost-Book' : 'Jost-400-Book',
-  bold : Platform.OS === 'ios' ? 'Jost-Bold' : 'Jost-700-Bold',
+  bold: Platform.OS === 'ios' ? 'Jost-Bold' : 'Jost-700-Bold',
 }
 
 export const sizes = {
@@ -23,7 +23,7 @@ export const sizes = {
 const accentText = {
   fontFamily: fonts.bold,
   textAlignVertical: 'center',
-  textTransform: 'uppercase'
+  textTransform: 'uppercase',
 }
 
 const accentTextBig = {
@@ -43,47 +43,51 @@ const accentTextHuge = {
 
 const accentTextSmall = {
   ...accentText,
-  fontSize: sizes.small
+  fontSize: sizes.small,
 }
 
 const title = {
   color: Colors.purple,
-  marginVertical: Spacing.large
+  marginVertical: Spacing.large,
 }
 
 const label = {
   fontSize: sizes.small,
-  textTransform: 'uppercase'
+  textTransform: 'uppercase',
 }
 
 export default {
   accentOrange: {
     ...accentTextSmall,
-    color: Colors.orange
+    color: Colors.orange,
+  },
+  accentPurple: {
+    ...accentTextSmall,
+    color: Colors.purple,
   },
   accentPurpleBig: {
     ...accentTextBig,
-    color: Colors.purple
+    color: Colors.purple,
   },
   accentPurpleGiant: {
     ...accentTextGiant,
-    color: Colors.purple
+    color: Colors.purple,
   },
   accentPurpleHuge: {
     ...accentTextHuge,
-    color: Colors.purple
+    color: Colors.purple,
   },
   mainText: {
     fontFamily: fonts.main,
-    fontSize: sizes.base
+    fontSize: sizes.base,
   },
   label: {
-    ...label
+    ...label,
   },
   labelBold: {
     color: Colors.greyDark,
     fontWeight: 'bold',
-    ...label
+    ...label,
   },
   labelLight: {
     color: Colors.grey,
@@ -91,7 +95,7 @@ export default {
   },
   subtitle: {
     fontSize: sizes.subtitle,
-    ...title
+    ...title,
   },
   title: {
     alignSelf: 'center',
@@ -99,7 +103,7 @@ export default {
     fontWeight: '700',
     fontSize: sizes.title,
     marginHorizontal: Spacing.base,
-    ...title
+    ...title,
   },
   titleWithoutMargin: {
     alignSelf: 'center',
@@ -107,5 +111,5 @@ export default {
     fontFamily: fonts.bold,
     fontWeight: '700',
     fontSize: sizes.title,
-  }
+  },
 }