Feature: add stats explainer take2

components/common/Footnote.js

@@ -7,13 +7,16 @@ import Asterisk from '../common/Asterisk'
 
 import { Colors, Spacing } from '../../styles'
 
-const Footnote = ({ children }) => {
+const Footnote = ({ children, colorLabel }) => {
   if (!children) return false
 
   return (
     <View style={styles.container}>
       <Asterisk />
-      <AppText linkStyle={styles.link} style={styles.text}>
+      <AppText
+        linkStyle={styles.link}
+        style={{ ...styles.text, color: Colors[colorLabel] }}
+      >
         {children}
       </AppText>
     </View>
@@ -22,6 +25,11 @@ const Footnote = ({ children }) => {
 
 Footnote.propTypes = {
   children: PropTypes.node,
+  colorLabel: PropTypes.string,
+}
+
+Footnote.defaultProps = {
+  colorLabel: 'greyDark',
 }
 
 const styles = StyleSheet.create({
@@ -29,14 +37,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignContent: 'flex-start',
     marginBottom: Spacing.tiny,
-    marginTop: Spacing.small,
+    marginTop: Spacing.base,
   },
   link: {
     color: 'white',
   },
   text: {
-    color: Colors.greyLight,
-    paddingLeft: Spacing.base,
+    paddingLeft: Spacing.small,
   },
 })
 

components/common/app-modal.js

@@ -1,20 +1,33 @@
 import React from 'react'
-import { Modal, StyleSheet, TouchableOpacity } from 'react-native'
+import {
+  Dimensions,
+  Modal,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native'
 import PropTypes from 'prop-types'
 
-const AppModal = ({ children, onClose }) => {
-  return (
-    <Modal
-      animationType="fade"
-      onRequestClose={onClose}
-      transparent={true}
-      visible={true}
-    >
-      <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
+import CloseIcon from './close-icon'
+
+import { Sizes, Spacing } from '../../styles'
+
+const AppModal = ({ children, onClose }) => (
+  <Modal
+    animationType="fade"
+    onRequestClose={onClose}
+    transparent={true}
+    visible={true}
+  >
+    <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
+    <View style={styles.modalWindow}>
+      <View style={styles.headerContainer}>
+        <CloseIcon onClose={onClose} />
+      </View>
       {children}
-    </Modal>
-  )
-}
+    </View>
+  </Modal>
+)
 
 AppModal.propTypes = {
   children: PropTypes.node,
@@ -27,6 +40,28 @@ const styles = StyleSheet.create({
     flex: 1,
     opacity: 0.5,
   },
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingTop: Spacing.base,
+    paddingHorizontal: Spacing.base,
+    position: 'absolute',
+    width: '100%',
+    zIndex: 3, // works on ios
+    elevation: 3, // works on android
+  },
+  modalWindow: {
+    alignSelf: 'center',
+    backgroundColor: 'white',
+    borderRadius: 10,
+    marginTop: Sizes.huge * 2,
+    paddingVertical: Spacing.large * 2,
+    position: 'absolute',
+    maxHeight: Dimensions.get('window').height * 0.7,
+    zIndex: 2, // works on ios
+    elevation: 2, // works on android
+    minWidth: '80%',
+  },
 })
 
 export default AppModal