diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js index 51b28fa..27d84cb 100644 --- a/components/cycle-day/symptom-box.js +++ b/components/cycle-day/symptom-box.js @@ -94,7 +94,7 @@ class SymptomBox extends Component { {symptomTitles[symptom].toLowerCase()} {symptomDataToDisplay && - + {symptomDataToDisplay} } @@ -132,13 +132,13 @@ const styles = StyleSheet.create({ textContainer: { flexDirection: 'column', justifyContent: 'center', - marginLeft: Spacing.small, + marginLeft: Spacing.tiny, maxWidth: Spacing.textWidth }, text: { fontSize: Sizes.small, fontStyle: 'italic', - lineHeight: 14 + lineHeight: scale(14) }, textDisabled: { color: Colors.greyLight diff --git a/styles/spacing.js b/styles/spacing.js index baa3ed5..aa4124b 100644 --- a/styles/spacing.js +++ b/styles/spacing.js @@ -1,12 +1,12 @@ -import { moderateScale } from 'react-native-size-matters' +import { scale } from 'react-native-size-matters' import { fontRatio } from '../config' export default { - tiny: moderateScale(4 / fontRatio), - small: moderateScale(10 / fontRatio), - base: moderateScale(16 / fontRatio), - large: moderateScale(20 / fontRatio), + tiny: scale(4 / fontRatio), + small: scale(10 / fontRatio), + base: scale(16 / fontRatio), + large: scale(20 / fontRatio), symptomTileWidth: '48%', textWidth: '70%' } diff --git a/styles/typography.js b/styles/typography.js index 6d9539c..9c6aa86 100644 --- a/styles/typography.js +++ b/styles/typography.js @@ -1,4 +1,6 @@ import { Platform } from 'react-native' +import { scale } from 'react-native-size-matters' + import { fontRatio } from '../config' @@ -11,14 +13,14 @@ export const fonts = { } export const sizes = { - tiny: 7 / fontRatio, - footnote: 10 / fontRatio, - small: 13 / fontRatio, - base: 18 / fontRatio, - subtitle: 22 / fontRatio, - title: 24 / fontRatio, - huge: 32 / fontRatio, - icon: 40 / fontRatio, + tiny: scale(7 / fontRatio), + footnote: scale(10 / fontRatio), + small: scale(13 / fontRatio), + base: scale(18 / fontRatio), + subtitle: scale(22 / fontRatio), + title: scale(24 / fontRatio), + huge: scale(32 / fontRatio), + icon: scale(40 / fontRatio), } const accentText = { @@ -29,12 +31,12 @@ const accentText = { const accentTextBig = { ...accentText, - fontSize: 30 / fontRatio, + fontSize: scale(30 / fontRatio), } const accentTextGiant = { ...accentText, - fontSize: sizes.icon / fontRatio, + fontSize: sizes.icon, } const accentTextHuge = {