Merge branch 'chore/update-styling' into 'master'

Chore/update styling

See merge request bloodyhealth/drip!374

components/common/button.js

@@ -59,9 +59,11 @@ const textSmall = {
 
 const button = {
   alignItems: 'center',
+  alignSelf: 'center',
   flexDirection: 'row',
   justifyContent: 'center',
-  margin: Spacing.base,
+  marginTop: Spacing.base,
+  paddingHorizontal: Spacing.tiny,
   minWidth: '15%'
 }
 

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 { scale } 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}
           />
           <View style={styles.textContainer}>
             <AppText style={symptomNameStyle}>
@@ -104,35 +105,24 @@ class SymptomBox extends Component {
   }
 }
 
-const hint = {
-  fontSize: Sizes.small,
-  fontStyle: 'italic'
-}
-
-const main = {
-  fontSize: Sizes.base,
-  height: Sizes.base * 2,
-  lineHeight: Sizes.base,
-  marginBottom: (-1) * Sizes.tiny,
-  textAlignVertical: 'center'
-}
-
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     backgroundColor: 'white',
-    borderRadius: 10,
+    borderRadius: scale(10),
     elevation: 4,
     flexDirection: 'row',
-    height: 110,
+    height: scale(120),
     marginBottom: Spacing.base,
     paddingHorizontal: Spacing.small,
     paddingVertical: Spacing.base,
     width: Spacing.symptomTileWidth
   },
   symptomName: {
+    paddingTop: Sizes.tiny,
     color: Colors.purple,
-    ...main
+    fontSize: Sizes.base,
+    lineHeight: Sizes.base
   },
   symptomNameDisabled: {
     color: Colors.grey
@@ -142,11 +132,14 @@ const styles = StyleSheet.create({
   },
   textContainer: {
     flexDirection: 'column',
-    marginLeft: Spacing.small,
+    justifyContent: 'center',
+    marginLeft: Spacing.tiny,
     maxWidth: Spacing.textWidth
   },
   text: {
-    ...hint
+    fontSize: Sizes.small,
+    fontStyle: 'italic',
+    lineHeight: Sizes.small
   },
   textDisabled: {
     color: Colors.greyLight

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 (
     <View style={styles.container}>
@@ -31,7 +34,7 @@ const SymptomPageTitle = ({
         <AppIcon name='chevron-left' color={Colors.orange}/>
       </TouchableOpacity>
       <View style={styles.textContainer}>
-        <AppText style={styles.title}>{title}</AppText>
+        <AppText style={styles.title}>{formattedTitle}</AppText>
         {subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>}
       </View>
       <TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}>

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,
@@ -62,8 +63,9 @@ export const todayToCalFormat = () => {
 
 const styles = {
   calendarToday: {
-    fontFamily: Fonts.bold,
+    fontFamily: 'Jost-Bold',
-    color: Colors.purple,
+    fontWeight: 'bold',
+    color: Colors.purple
   },
 }
 
@@ -73,6 +75,7 @@ export const calendarTheme = {
   monthTextColor: Colors.purple,
   textDayFontFamily: Fonts.main,
   textMonthFontFamily: Fonts.bold,
+  textMonthFontWeight: 'bold',
   textDayHeaderFontFamily: Fonts.bold,
   textDayFontSize: Sizes.small,
   textMonthFontSize: Sizes.subtitle,

components/stats.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Dimensions, ImageBackground, StyleSheet, View } from 'react-native'
+import { ImageBackground, View } from 'react-native'
+import { ScaledSheet } from 'react-native-size-matters'
 
 import AppPage from './common/app-page'
 import AppText from './common/app-text'
@@ -11,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()
@@ -28,8 +27,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 (
     <AppPage contentContainerStyle={styles.pageContainer}>
@@ -42,12 +39,12 @@ const Stats = () => {
               <ImageBackground
                 source={image}
                 imageStyle={styles.image}
-                style={[styles.imageContainter, { height }]}
+                style={styles.imageContainter}
               >
                 <AppText
                   numberOfLines={1}
                   ellipsizeMode="clip"
-                  style={[styles.accentPurpleGiant, { marginTop }]}
+                  style={styles.accentPurpleGiant}
                 >
                   {cycleData.mean}
                 </AppText>
@@ -73,13 +70,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 +87,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    paddingTop: Spacing.base,
+    paddingTop: Spacing.base
   },
   columnLeft: {
     ...column,
@@ -102,10 +100,9 @@ const styles = StyleSheet.create({
   },
   image: {
     resizeMode: 'contain',
-
   },
   imageContainter: {
-    paddingTop: Spacing.large * 2,
+    paddingTop: Spacing.large * 2.5,
     marginBottom: Spacing.large,
   },
   pageContainer: {

config.js

@@ -1,4 +1,5 @@
-import { Dimensions, PixelRatio, Platform, StatusBar } from 'react-native'
+import { PixelRatio, StatusBar } from 'react-native'
+import { scale, verticalScale } from 'react-native-size-matters'
 
 export const ACTION_DELETE = 'delete'
 export const ACTION_EXPORT = 'export'
@@ -16,20 +17,17 @@ 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 CHART_COLUMN_WIDTH = 32
 export const CHART_COLUMN_MIDDLE = CHART_COLUMN_WIDTH / 2
-export const CHART_DOT_RADIUS = 6
+export const CHART_DOT_RADIUS = scale(6)
 export const CHART_GRID_LINE_HORIZONTAL_WIDTH =
   PixelRatio.roundToNearestPixel(0.3)
-export const CHART_ICON_SIZE = 20
+export const CHART_ICON_SIZE = scale(20)
-export const CHART_STROKE_WIDTH = 3
+export const CHART_STROKE_WIDTH = scale(3)
-export const CHART_SYMPTOM_HEIGHT_RATIO = 0.08
+export const CHART_SYMPTOM_HEIGHT_RATIO = scale(0.08)
-export const CHART_XAXIS_HEIGHT_RATIO = 0.1
+export const CHART_XAXIS_HEIGHT_RATIO = scale(0.1)
-export const CHART_YAXIS_WIDTH = 32
+export const CHART_YAXIS_WIDTH = scale(32)
-export const CHART_TICK_WIDTH = 44
+export const CHART_TICK_WIDTH = scale(44)
 
 export const TEMP_SCALE_MAX = 37.5
 export const TEMP_SCALE_MIN = 35.5
@@ -38,6 +36,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

ios/Podfile

@@ -41,4 +41,23 @@ 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];")
+  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

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",

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",

styles/spacing.js

@@ -1,10 +1,10 @@
-import { fontRatio } from '../config'
+import { scale } from 'react-native-size-matters'
 
 export default {
-  tiny: 4 / fontRatio,
+  tiny: scale(4),
-  small: 10 / fontRatio,
+  small: scale(10),
-  base: 16 / fontRatio,
+  base: scale(16),
-  large: 20 / fontRatio,
+  large: scale(20),
   symptomTileWidth: '48%',
   textWidth: '70%'
 }

styles/typography.js

@@ -1,6 +1,5 @@
 import { Platform } from 'react-native'
-
+import { scale } from 'react-native-size-matters'
-import { fontRatio } from '../config'
 
 import Colors from './colors'
 import Spacing from './spacing'
@@ -11,14 +10,14 @@ export const fonts = {
 }
 
 export const sizes = {
-  tiny: 7 / fontRatio,
+  tiny: scale(7),
-  footnote: 10 / fontRatio,
+  footnote: scale(10),
-  small: 13 / fontRatio,
+  small: scale(13),
-  base: 18 / fontRatio,
+  base: scale(16),
-  subtitle: 22 / fontRatio,
+  subtitle: scale(22),
-  title: 24 / fontRatio,
+  title: scale(24),
-  huge: 32 / fontRatio,
+  huge: scale(32),
-  icon: 40 / fontRatio,
+  icon: scale(40),
 }
 
 const accentText = {
@@ -29,12 +28,12 @@ const accentText = {
 
 const accentTextBig = {
   ...accentText,
-  fontSize: 30 / fontRatio,
+  fontSize: scale(30),
 }
 
 const accentTextGiant = {
   ...accentText,
-  fontSize: sizes.icon / fontRatio,
+  fontSize: sizes.icon,
 }
 
 const accentTextHuge = {