From 8c1c72ccc90783f8558cf3398bb76d653e25ba71 Mon Sep 17 00:00:00 2001 From: mashazyu Date: Mon, 23 Mar 2020 09:39:55 +0100 Subject: [PATCH] Introduces AppText, Link and FramedSegment redesign --- components/common/app-text.js | 15 +++++++++++--- components/common/framed-segment.js | 32 ++++++++++++++++++++--------- components/common/link.js | 26 +++++++++++++++-------- styles/colors.js | 10 +++++++++ styles/containers.js | 18 ++++++++++++++++ styles/redesign.js | 5 +++++ styles/spacing.js | 3 +++ styles/typography.js | 28 +++++++++++++++++++++++++ 8 files changed, 116 insertions(+), 21 deletions(-) create mode 100644 styles/colors.js create mode 100644 styles/containers.js create mode 100644 styles/redesign.js create mode 100644 styles/spacing.js create mode 100644 styles/typography.js diff --git a/components/common/app-text.js b/components/common/app-text.js index ad861e6..eb85c6e 100644 --- a/components/common/app-text.js +++ b/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 ( - @@ -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 + } +}) \ No newline at end of file diff --git a/components/common/framed-segment.js b/components/common/framed-segment.js index 7321615..b20b871 100644 --- a/components/common/framed-segment.js +++ b/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 ( - - {title && {title}} + + {title && {title}} {children} ) } 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 diff --git a/components/common/link.js b/components/common/link.js index 3b62c4c..26b4a5d 100644 --- a/components/common/link.js +++ b/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 ( - {props.children} + {children} ) } 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 -} \ No newline at end of file +} + +export default Link \ No newline at end of file diff --git a/styles/colors.js b/styles/colors.js new file mode 100644 index 0000000..8aecfb9 --- /dev/null +++ b/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', +} \ No newline at end of file diff --git a/styles/containers.js b/styles/containers.js new file mode 100644 index 0000000..50f986f --- /dev/null +++ b/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 } +} \ No newline at end of file diff --git a/styles/redesign.js b/styles/redesign.js new file mode 100644 index 0000000..5656d35 --- /dev/null +++ b/styles/redesign.js @@ -0,0 +1,5 @@ +import Colors from './colors' +import Containers from './containers' +import Typography from './typography' + +export { Colors, Containers, Typography } diff --git a/styles/spacing.js b/styles/spacing.js new file mode 100644 index 0000000..037caa1 --- /dev/null +++ b/styles/spacing.js @@ -0,0 +1,3 @@ +export default { + base: 16 +} \ No newline at end of file diff --git a/styles/typography.js b/styles/typography.js new file mode 100644 index 0000000..15371a1 --- /dev/null +++ b/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 + } +}