From 070c1487afdbf7cc2a434a40f19e271d192ddce0 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sun, 29 Aug 2021 17:53:21 +0200 Subject: [PATCH 01/18] Install react-native-size-matters library for better layout --- package-lock.json | 5 +++++ package.json | 1 + 2 files changed, 6 insertions(+) diff --git a/package-lock.json b/package-lock.json index 1cbff56..30a0b3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8601,6 +8601,11 @@ "resolved": "https://registry.npmjs.org/react-native-simple-toast/-/react-native-simple-toast-1.1.3.tgz", "integrity": "sha512-bkZy25axqlU4L6IoTysSl5KOQA7qdxzivbXz/L/yAw9g9fENxjzYvUUtv5wWtgq7mzOe5HiJ7GCQrOl3MhIevQ==" }, + "react-native-size-matters": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.4.0.tgz", + "integrity": "sha512-8/C0htHrFWeUm9N8JegmadovUfgTWkGBkDPZ1N3YkXtDWb+98Ya2gThiKcu445r8c7YhcrBfnHz/mYsXIusaOQ==" + }, "react-native-swipe-gestures": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz", diff --git a/package.json b/package.json index e931d2f..0e7cbfa 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "react-native-restart": "0.0.17", "react-native-share": "^3.0.0", "react-native-simple-toast": "^1.1.3", + "react-native-size-matters": "^0.4.0", "react-native-vector-icons": "^7.1.0", "react-redux": "^6.0.0", "realm": "^5.0.0", From f842ebe13c52e10f7d80df11866838abfedcc0d9 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sun, 29 Aug 2021 17:53:42 +0200 Subject: [PATCH 02/18] Update stats page styling --- components/stats.js | 17 ++++++++--------- config.js | 28 ++++++++++++++++------------ styles/spacing.js | 12 +++++++----- 3 files changed, 31 insertions(+), 26 deletions(-) diff --git a/components/stats.js b/components/stats.js index c71d979..8c8ee63 100644 --- a/components/stats.js +++ b/components/stats.js @@ -1,5 +1,6 @@ import React from 'react' -import { Dimensions, ImageBackground, StyleSheet, View } from 'react-native' +import { Dimensions, ImageBackground, View } from 'react-native' +import { ScaledSheet } from 'react-native-size-matters' import AppPage from './common/app-page' import AppText from './common/app-text' @@ -28,8 +29,6 @@ const Stats = () => { [cycleData.stdDeviation ? cycleData.stdDeviation : '—', labels.stdLabel], [numberOfCycles, labels.basisOfStatsEnd] ] - const height = screen.height * 0.2 - const marginTop = (height / 8 - Sizes.icon / fontRatio) / 4 return ( @@ -42,12 +41,12 @@ const Stats = () => { {cycleData.mean} @@ -73,13 +72,14 @@ const column = { flexDirection: 'column', } -const styles = StyleSheet.create({ +const styles = ScaledSheet.create({ accentOrange: { ...Typography.accentOrange, fontSize: Sizes.small, }, accentPurpleGiant: { ...Typography.accentPurpleGiant, + marginTop: Spacing.base * (-2), }, accentPurpleHuge: { ...Typography.accentPurpleHuge, @@ -89,7 +89,7 @@ const styles = StyleSheet.create({ alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', - paddingTop: Spacing.base, + paddingTop: Spacing.base }, columnLeft: { ...column, @@ -102,10 +102,9 @@ const styles = StyleSheet.create({ }, image: { resizeMode: 'contain', - }, imageContainter: { - paddingTop: Spacing.large * 2, + paddingTop: Spacing.large * 2.5, marginBottom: Spacing.large, }, pageContainer: { diff --git a/config.js b/config.js index eb5726d..5542093 100644 --- a/config.js +++ b/config.js @@ -1,4 +1,5 @@ -import { Dimensions, PixelRatio, Platform, StatusBar } from 'react-native' +import { PixelRatio, StatusBar } from 'react-native' +import { scale, verticalScale, moderateScale } from 'react-native-size-matters' export const ACTION_DELETE = 'delete' export const ACTION_EXPORT = 'export' @@ -16,20 +17,18 @@ export const SYMPTOMS = [ 'note', ] -const windowWidth = Dimensions.get('window').width -const factor = (windowWidth < 1000) && (Platform.OS === 'ios') ? 1.25 : 1 -export const fontRatio = PixelRatio.getFontScale() * factor +export const fontRatio = PixelRatio.getFontScale() export const CHART_COLUMN_WIDTH = 32 export const CHART_COLUMN_MIDDLE = CHART_COLUMN_WIDTH / 2 -export const CHART_DOT_RADIUS = 6 +export const CHART_DOT_RADIUS = moderateScale(6) export const CHART_GRID_LINE_HORIZONTAL_WIDTH = PixelRatio.roundToNearestPixel(0.3) -export const CHART_ICON_SIZE = 20 -export const CHART_STROKE_WIDTH = 3 -export const CHART_SYMPTOM_HEIGHT_RATIO = 0.08 -export const CHART_XAXIS_HEIGHT_RATIO = 0.1 -export const CHART_YAXIS_WIDTH = 32 -export const CHART_TICK_WIDTH = 44 +export const CHART_ICON_SIZE = moderateScale(20) +export const CHART_STROKE_WIDTH = scale(3) +export const CHART_SYMPTOM_HEIGHT_RATIO = verticalScale(0.08) +export const CHART_XAXIS_HEIGHT_RATIO = verticalScale(0.1) +export const CHART_YAXIS_WIDTH = scale(32) +export const CHART_TICK_WIDTH = scale(44) export const TEMP_SCALE_MAX = 37.5 export const TEMP_SCALE_MIN = 35.5 @@ -38,6 +37,11 @@ export const TEMP_MAX = 39 export const TEMP_MIN = 35 export const TEMP_SLIDER_STEP = 0.5 -export const HIT_SLOP = { top: 20, bottom: 20, left: 20, right: 20 } +export const HIT_SLOP = { + top: verticalScale(20), + bottom: verticalScale(20), + left: scale(20), + right: scale(20) +} export const STATUSBAR_HEIGHT = StatusBar.currentHeight diff --git a/styles/spacing.js b/styles/spacing.js index 50eb0d7..baa3ed5 100644 --- a/styles/spacing.js +++ b/styles/spacing.js @@ -1,10 +1,12 @@ +import { moderateScale } from 'react-native-size-matters' + import { fontRatio } from '../config' export default { - tiny: 4 / fontRatio, - small: 10 / fontRatio, - base: 16 / fontRatio, - large: 20 / fontRatio, + tiny: moderateScale(4 / fontRatio), + small: moderateScale(10 / fontRatio), + base: moderateScale(16 / fontRatio), + large: moderateScale(20 / fontRatio), symptomTileWidth: '48%', textWidth: '70%' -} \ No newline at end of file +} From 388985034fd876edc5a18581b740223eba0adb09 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sun, 29 Aug 2021 18:28:00 +0200 Subject: [PATCH 03/18] Update symptom box styling --- components/cycle-day/symptom-box.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js index af9e514..1df272f 100644 --- a/components/cycle-day/symptom-box.js +++ b/components/cycle-day/symptom-box.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { StyleSheet, View, TouchableOpacity } from 'react-native' +import { moderateScale, scale, verticalScale } from 'react-native-size-matters' import AppText from '../common/app-text' import DripIcon from '../../assets/drip-icons' @@ -86,7 +87,7 @@ class SymptomBox extends Component { color={iconColor} isActive={!isSymptomDisabled} name={iconName} - size={40} + size={Sizes.icon} /> @@ -111,9 +112,9 @@ const hint = { const main = { fontSize: Sizes.base, - height: Sizes.base * 2, + height: Sizes.icon, lineHeight: Sizes.base, - marginBottom: (-1) * Sizes.tiny, + marginBottom: (-1) * Sizes.title, textAlignVertical: 'center' } @@ -121,13 +122,13 @@ const styles = StyleSheet.create({ container: { alignItems: 'center', backgroundColor: 'white', - borderRadius: 10, + borderRadius: moderateScale(10), elevation: 4, flexDirection: 'row', - height: 110, - marginBottom: Spacing.base, - paddingHorizontal: Spacing.small, - paddingVertical: Spacing.base, + height: verticalScale(110), + marginBottom: verticalScale(Spacing.base), + paddingHorizontal: scale(Spacing.small), + paddingVertical: verticalScale(Spacing.base), width: Spacing.symptomTileWidth }, symptomName: { From 9fb08fb66f31533bab61c3d1171803b294e743b8 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sun, 29 Aug 2021 19:49:41 +0200 Subject: [PATCH 04/18] Fix linter errors --- components/stats.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/stats.js b/components/stats.js index 8c8ee63..713367f 100644 --- a/components/stats.js +++ b/components/stats.js @@ -1,5 +1,5 @@ import React from 'react' -import { Dimensions, ImageBackground, View } from 'react-native' +import { ImageBackground, View } from 'react-native' import { ScaledSheet } from 'react-native-size-matters' import AppPage from './common/app-page' @@ -12,10 +12,8 @@ import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length' import {stats as labels} from '../i18n/en/labels' import { Sizes, Spacing, Typography } from '../styles' -import { fontRatio } from '../config' const image = require('../assets/cycle-icon.png') -const screen = Dimensions.get('screen') const Stats = () => { const cycleLengths = cycleModule().getAllCycleLengths() From 7cab47665f7111bd79e7dca29f7a90b6ce854823 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sun, 28 Nov 2021 14:51:09 +0100 Subject: [PATCH 05/18] Fix today day styling in calendar --- components/helpers/calendar.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/helpers/calendar.js b/components/helpers/calendar.js index fdedfa8..1ae762b 100644 --- a/components/helpers/calendar.js +++ b/components/helpers/calendar.js @@ -62,8 +62,9 @@ export const todayToCalFormat = () => { const styles = { calendarToday: { - fontFamily: Fonts.bold, - color: Colors.purple, + fontFamily: 'Jost-Bold', + fontWeight: 'bold', + color: Colors.purple }, } @@ -73,6 +74,7 @@ export const calendarTheme = { monthTextColor: Colors.purple, textDayFontFamily: Fonts.main, textMonthFontFamily: Fonts.bold, + textMonthFontWeight: 'bold', textDayHeaderFontFamily: Fonts.bold, textDayFontSize: Sizes.small, textMonthFontSize: Sizes.subtitle, From cfef9254144d8f398132ba372a378f4f6d7dd7c1 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sun, 23 Jan 2022 19:03:42 +0100 Subject: [PATCH 06/18] Fix styling --- components/cycle-day/symptom-box.js | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js index 1df272f..51b28fa 100644 --- a/components/cycle-day/symptom-box.js +++ b/components/cycle-day/symptom-box.js @@ -105,19 +105,6 @@ class SymptomBox extends Component { } } -const hint = { - fontSize: Sizes.small, - fontStyle: 'italic' -} - -const main = { - fontSize: Sizes.base, - height: Sizes.icon, - lineHeight: Sizes.base, - marginBottom: (-1) * Sizes.title, - textAlignVertical: 'center' -} - const styles = StyleSheet.create({ container: { alignItems: 'center', @@ -133,7 +120,8 @@ const styles = StyleSheet.create({ }, symptomName: { color: Colors.purple, - ...main + fontSize: Sizes.base, + lineHeight: Sizes.base }, symptomNameDisabled: { color: Colors.grey @@ -143,11 +131,14 @@ const styles = StyleSheet.create({ }, textContainer: { flexDirection: 'column', + justifyContent: 'center', marginLeft: Spacing.small, maxWidth: Spacing.textWidth }, text: { - ...hint + fontSize: Sizes.small, + fontStyle: 'italic', + lineHeight: 14 }, textDisabled: { color: Colors.greyLight From 10fdcecf61083c4a21784e8e0ff58e5f985115bc Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sat, 5 Feb 2022 19:02:53 +0100 Subject: [PATCH 07/18] Fix buttons on simptom edit view for small screens --- components/common/button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/common/button.js b/components/common/button.js index 4047449..4bd0e6c 100644 --- a/components/common/button.js +++ b/components/common/button.js @@ -61,7 +61,7 @@ const button = { alignItems: 'center', flexDirection: 'row', justifyContent: 'center', - margin: Spacing.base, + marginVertical: Spacing.base, minWidth: '15%' } From 953e080032d7120978870c9c9f84ed48823ccefd Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sat, 5 Feb 2022 19:47:10 +0100 Subject: [PATCH 08/18] Fix symptom-box text overflow --- components/cycle-day/symptom-box.js | 6 +++--- styles/spacing.js | 10 +++++----- styles/typography.js | 22 ++++++++++++---------- 3 files changed, 20 insertions(+), 18 deletions(-) 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 = { From f4ef00d4ea87e3f82034bcfe8ca8fca7cdbcd257 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sat, 5 Feb 2022 20:11:35 +0100 Subject: [PATCH 09/18] Fix adding images to final build --- ios/Podfile | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/ios/Podfile b/ios/Podfile index 0786e40..5d7f8da 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -41,4 +41,22 @@ target 'drip' do use_native_modules! use_frameworks! + + post_install do |installer| + find_and_replace("../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m", + "_currentFrame.CGImage;","_currentFrame.CGImage ;} else { [super displayLayer:layer];") + end + + def find_and_replace(dir, findstr, replacestr) + Dir[dir].each do |name| + text = File.read(name) + replace = text.gsub(findstr,replacestr) + if text != replace + puts "Fix: " + name + File.open(name, "w") { |file| file.puts replace } + STDOUT.flush + end + end + Dir[dir + '*/'].each(&method(:find_and_replace)) + end end From 2bbcadcf53cd5f7be6bb0aa66683a2a0f8d84557 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sat, 5 Feb 2022 20:33:39 +0100 Subject: [PATCH 10/18] Elipsise date on day overview --- components/cycle-day/symptom-page-title.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/cycle-day/symptom-page-title.js b/components/cycle-day/symptom-page-title.js index 6203c1c..41885ee 100644 --- a/components/cycle-day/symptom-page-title.js +++ b/components/cycle-day/symptom-page-title.js @@ -24,6 +24,9 @@ const SymptomPageTitle = ({ reloadSymptomData(nextDay) setDate(nextDay) } + const formattedTitle = title.length > 21 + ? title.substring(0, 18) + '...' + : title return ( @@ -31,7 +34,7 @@ const SymptomPageTitle = ({ - {title} + {formattedTitle} {subtitle && {subtitle}} navigate(true)} hitSlop={HIT_SLOP}> From c5aaf1b29b73a9fa750a6007bb9566cc60d761e5 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sat, 5 Feb 2022 21:11:05 +0100 Subject: [PATCH 11/18] Add note to remove images fix after RN update --- ios/Podfile | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ios/Podfile b/ios/Podfile index 5d7f8da..a7092f2 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -41,7 +41,8 @@ target 'drip' do use_native_modules! use_frameworks! - + # This is fix to make ios build see images, should be removed after upgrade to rn 0.63.2 + # https://stackoverflow.com/questions/63949851/react-native-ios-not-showing-images-pods-issue post_install do |installer| find_and_replace("../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m", "_currentFrame.CGImage;","_currentFrame.CGImage ;} else { [super displayLayer:layer];") From 272b1f387de1d7164a063778056649d8fb7139f3 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sat, 5 Feb 2022 21:11:33 +0100 Subject: [PATCH 12/18] Font size fine-tuning --- styles/typography.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/typography.js b/styles/typography.js index 9c6aa86..ce13ebf 100644 --- a/styles/typography.js +++ b/styles/typography.js @@ -16,7 +16,7 @@ export const sizes = { tiny: scale(7 / fontRatio), footnote: scale(10 / fontRatio), small: scale(13 / fontRatio), - base: scale(18 / fontRatio), + base: scale(16 / fontRatio), subtitle: scale(22 / fontRatio), title: scale(24 / fontRatio), huge: scale(32 / fontRatio), From 3c02dd77bb4ad22457cf6f9717a2c38a43853f34 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sun, 6 Feb 2022 11:19:08 +0100 Subject: [PATCH 13/18] Update buttons styling to make them not that horizontally big --- components/common/button.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/common/button.js b/components/common/button.js index 4bd0e6c..6c35043 100644 --- a/components/common/button.js +++ b/components/common/button.js @@ -58,10 +58,11 @@ const textSmall = { } const button = { - alignItems: 'center', + alignSelf: 'center', flexDirection: 'row', justifyContent: 'center', - marginVertical: Spacing.base, + marginTop: Spacing.base, + paddingHorizontal: Spacing.base, minWidth: '15%' } From 7faa18bd6054a1fa2096a6f47e5531c9d6c85424 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sun, 6 Feb 2022 11:24:53 +0100 Subject: [PATCH 14/18] Remove fontratio (I think we don't need it any more) --- config.js | 1 - styles/spacing.js | 10 ++++------ styles/typography.js | 21 +++++++++------------ 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/config.js b/config.js index 5542093..a085920 100644 --- a/config.js +++ b/config.js @@ -17,7 +17,6 @@ export const SYMPTOMS = [ 'note', ] -export const fontRatio = PixelRatio.getFontScale() export const CHART_COLUMN_WIDTH = 32 export const CHART_COLUMN_MIDDLE = CHART_COLUMN_WIDTH / 2 export const CHART_DOT_RADIUS = moderateScale(6) diff --git a/styles/spacing.js b/styles/spacing.js index aa4124b..9c54ca9 100644 --- a/styles/spacing.js +++ b/styles/spacing.js @@ -1,12 +1,10 @@ import { scale } from 'react-native-size-matters' -import { fontRatio } from '../config' - export default { - tiny: scale(4 / fontRatio), - small: scale(10 / fontRatio), - base: scale(16 / fontRatio), - large: scale(20 / fontRatio), + tiny: scale(4), + small: scale(10), + base: scale(16), + large: scale(20), symptomTileWidth: '48%', textWidth: '70%' } diff --git a/styles/typography.js b/styles/typography.js index ce13ebf..726b08b 100644 --- a/styles/typography.js +++ b/styles/typography.js @@ -1,9 +1,6 @@ import { Platform } from 'react-native' import { scale } from 'react-native-size-matters' - -import { fontRatio } from '../config' - import Colors from './colors' import Spacing from './spacing' @@ -13,14 +10,14 @@ export const fonts = { } export const sizes = { - tiny: scale(7 / fontRatio), - footnote: scale(10 / fontRatio), - small: scale(13 / fontRatio), - base: scale(16 / fontRatio), - subtitle: scale(22 / fontRatio), - title: scale(24 / fontRatio), - huge: scale(32 / fontRatio), - icon: scale(40 / fontRatio), + tiny: scale(7), + footnote: scale(10), + small: scale(13), + base: scale(16), + subtitle: scale(22), + title: scale(24), + huge: scale(32), + icon: scale(40), } const accentText = { @@ -31,7 +28,7 @@ const accentText = { const accentTextBig = { ...accentText, - fontSize: scale(30 / fontRatio), + fontSize: scale(30), } const accentTextGiant = { From 37e1d54358db3261312bf2acecbf4e67ddea8748 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sun, 6 Feb 2022 11:58:51 +0100 Subject: [PATCH 15/18] More fine-tuning of calendar and symptom box --- components/cycle-day/symptom-box.js | 14 +++++++------- components/helpers/calendar.js | 3 ++- config.js | 10 +++++----- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js index 27d84cb..c77945d 100644 --- a/components/cycle-day/symptom-box.js +++ b/components/cycle-day/symptom-box.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { StyleSheet, View, TouchableOpacity } from 'react-native' -import { moderateScale, scale, verticalScale } from 'react-native-size-matters' +import { scale } from 'react-native-size-matters' import AppText from '../common/app-text' import DripIcon from '../../assets/drip-icons' @@ -109,13 +109,13 @@ const styles = StyleSheet.create({ container: { alignItems: 'center', backgroundColor: 'white', - borderRadius: moderateScale(10), + borderRadius: scale(10), elevation: 4, flexDirection: 'row', - height: verticalScale(110), - marginBottom: verticalScale(Spacing.base), - paddingHorizontal: scale(Spacing.small), - paddingVertical: verticalScale(Spacing.base), + height: scale(110), + marginBottom: Spacing.base, + paddingHorizontal: Spacing.small, + paddingVertical: Spacing.base, width: Spacing.symptomTileWidth }, symptomName: { @@ -138,7 +138,7 @@ const styles = StyleSheet.create({ text: { fontSize: Sizes.small, fontStyle: 'italic', - lineHeight: scale(14) + lineHeight: Sizes.small }, textDisabled: { color: Colors.greyLight diff --git a/components/helpers/calendar.js b/components/helpers/calendar.js index 1ae762b..49c3776 100644 --- a/components/helpers/calendar.js +++ b/components/helpers/calendar.js @@ -1,4 +1,5 @@ import { LocalDate } from 'js-joda' +import { verticalScale } from 'react-native-size-matters' import { Colors, Fonts, Sizes } from '../../styles' @@ -12,7 +13,7 @@ export const toCalFormat = (bleedingDaysSortedByDate) => { customStyles: { container: { backgroundColor: shades[day.bleeding.value], - paddingTop: 2, + paddingTop: verticalScale(2), }, text: { color: Colors.turquoiseLight, diff --git a/config.js b/config.js index a085920..7b4fa8e 100644 --- a/config.js +++ b/config.js @@ -1,5 +1,5 @@ import { PixelRatio, StatusBar } from 'react-native' -import { scale, verticalScale, moderateScale } from 'react-native-size-matters' +import { scale, verticalScale } from 'react-native-size-matters' export const ACTION_DELETE = 'delete' export const ACTION_EXPORT = 'export' @@ -19,13 +19,13 @@ export const SYMPTOMS = [ export const CHART_COLUMN_WIDTH = 32 export const CHART_COLUMN_MIDDLE = CHART_COLUMN_WIDTH / 2 -export const CHART_DOT_RADIUS = moderateScale(6) +export const CHART_DOT_RADIUS = scale(6) export const CHART_GRID_LINE_HORIZONTAL_WIDTH = PixelRatio.roundToNearestPixel(0.3) -export const CHART_ICON_SIZE = moderateScale(20) +export const CHART_ICON_SIZE = scale(20) export const CHART_STROKE_WIDTH = scale(3) -export const CHART_SYMPTOM_HEIGHT_RATIO = verticalScale(0.08) -export const CHART_XAXIS_HEIGHT_RATIO = verticalScale(0.1) +export const CHART_SYMPTOM_HEIGHT_RATIO = scale(0.08) +export const CHART_XAXIS_HEIGHT_RATIO = scale(0.1) export const CHART_YAXIS_WIDTH = scale(32) export const CHART_TICK_WIDTH = scale(44) From f34df0233ce35ca9d2c9460b40ed02d76425ba65 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sun, 6 Feb 2022 12:06:11 +0100 Subject: [PATCH 16/18] Increase box size and change back number of lines to display to 4 --- components/cycle-day/symptom-box.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js index c77945d..a4bb10d 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} } @@ -112,7 +112,7 @@ const styles = StyleSheet.create({ borderRadius: scale(10), elevation: 4, flexDirection: 'row', - height: scale(110), + height: scale(120), marginBottom: Spacing.base, paddingHorizontal: Spacing.small, paddingVertical: Spacing.base, From eb53b8b87e7b32b3373cec08f254f08f23b0c541 Mon Sep 17 00:00:00 2001 From: MariaZ Date: Sun, 6 Feb 2022 12:06:39 +0100 Subject: [PATCH 17/18] Return some button styling to fix button display on simptom edit --- components/common/button.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/common/button.js b/components/common/button.js index 6c35043..737a483 100644 --- a/components/common/button.js +++ b/components/common/button.js @@ -58,11 +58,12 @@ const textSmall = { } const button = { + alignItems: 'center', alignSelf: 'center', flexDirection: 'row', justifyContent: 'center', marginTop: Spacing.base, - paddingHorizontal: Spacing.base, + paddingHorizontal: Spacing.tiny, minWidth: '15%' } From 6aef594b29793b4ae7ff587ec393ac6f4e5cc9a6 Mon Sep 17 00:00:00 2001 From: bl00dymarie Date: Mon, 14 Feb 2022 23:40:42 +0100 Subject: [PATCH 18/18] Adding paddingTop to title of symptom box --- components/cycle-day/symptom-box.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js index a4bb10d..bb20435 100644 --- a/components/cycle-day/symptom-box.js +++ b/components/cycle-day/symptom-box.js @@ -119,6 +119,7 @@ const styles = StyleSheet.create({ width: Spacing.symptomTileWidth }, symptomName: { + paddingTop: Sizes.tiny, color: Colors.purple, fontSize: Sizes.base, lineHeight: Sizes.base