diff --git a/components/common/segment.js b/components/common/segment.js index beb7a67..1405845 100644 --- a/components/common/segment.js +++ b/components/common/segment.js @@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native' import AppText from './app-text' -import { Containers, Typography } from '../../styles/redesign' +import { Colors, Spacing, Sizes, Typography } from '../../styles/redesign' const Segment = ({ children, last, title }) => { const containerStyle = last ? styles.containerLast : styles.container @@ -23,17 +23,29 @@ Segment.propTypes = { title: PropTypes.string } +const bottomBorder = { + borderStyle: 'solid', + borderBottomWidth: 2, + borderBottomColor: Colors.grey, + paddingBottom: Spacing.base +} + +const segmentContainer = { + marginHorizontal: Spacing.base, + marginBottom: Spacing.base, +} + const styles = StyleSheet.create({ container: { - ...Containers.segmentContainer, - ...Containers.bottomBorder + ...segmentContainer, + ...bottomBorder }, containerLast: { - ...Containers.segmentContainer, - ...Containers.marginBottom + ...segmentContainer }, title: { - ...Typography.titleSmall + fontSize: Sizes.subtitle, + ...Typography.title } }) diff --git a/styles/containers.js b/styles/containers.js index 731a1c2..66c3f0c 100644 --- a/styles/containers.js +++ b/styles/containers.js @@ -1,13 +1,6 @@ import Colors from './colors' -import Spacing from './spacing' export default { - bottomBorder: { - borderStyle: 'solid', - borderBottomWidth: 2, - borderBottomColor: Colors.grey, - paddingBottom: Spacing.base - }, centerItems: { alignItems: 'center', flex: 1, @@ -19,7 +12,6 @@ export default { borderStyle: 'solid', borderWidth: 1, }, - marginBottom: { marginBottom: Spacing.base }, orangeButton: { backgroundColor: Colors.orange, borderRadius: 25 @@ -27,6 +19,5 @@ export default { page: { backgroundColor: Colors.tourquiseLight, flex: 1 - }, - segmentContainer: { marginHorizontal: Spacing.base } + } } \ No newline at end of file diff --git a/styles/redesign.js b/styles/redesign.js index 5656d35..019a9b8 100644 --- a/styles/redesign.js +++ b/styles/redesign.js @@ -1,5 +1,6 @@ import Colors from './colors' import Containers from './containers' -import Typography from './typography' +import Spacing from './spacing' +import Typography, { sizes as Sizes } from './typography' -export { Colors, Containers, Typography } +export { Colors, Containers, Spacing, Sizes, Typography } diff --git a/styles/typography.js b/styles/typography.js index 81b098d..5e47d81 100644 --- a/styles/typography.js +++ b/styles/typography.js @@ -6,12 +6,10 @@ const fonts = { bold : 'Jost-700-Bold', } -const sizes = { - mainMedium: 18, - mainLarge: 20, - titleSmall: 22, - titleMedium: 24, - titleLarge: 28 +export const sizes = { + base: 18, + subtitle: 22, + title: 24 } const button = { @@ -20,12 +18,6 @@ const button = { textTransform: 'uppercase' } -const title = { - color: Colors.purple, - marginHorizontal: Spacing.base, - marginVertical: Spacing.large -} - export default { buttonTextBold: { fontFamily: fonts.bold, @@ -37,18 +29,18 @@ export default { }, mainText: { fontFamily: fonts.main, - fontSize: sizes.mainMedium + fontSize: sizes.base }, pageTitle: { alignSelf: 'center', fontFamily: fonts.bold, fontWeight: '700', - fontSize: sizes.titleMedium, - ...title + fontSize: sizes.title, + marginHorizontal: Spacing.base, }, - titleSmall: { - fontSize: sizes.titleSmall, - ...title + title: { + color: Colors.purple, + marginVertical: Spacing.large }, underline: { textDecorationLine: 'underline' } }