lori/drip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Chore/update styling

See merge request bloodyhealth/drip!374
This commit is contained in:
bl00dymarie
2022-03-26 12:15:59 +00:00
parent a624b5c015 6aef594b29
commit 2a49e43065
11 changed files with 91 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/common/button.js
+3 -1
View File
@@ -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
+13 -20
View File
@@ -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,14 +87,14 @@ class SymptomBox extends Component {
color={iconColor}
isActive={!isSymptomDisabled}
name={iconName}
size={40}
size={Sizes.icon}
/>
<View style={styles.textContainer}>
<AppText style={symptomNameStyle}>
{symptomTitles[symptom].toLowerCase()}
</AppText>
{symptomDataToDisplay &&
<AppText style={textStyle} numberOfLines={4}>
<AppText style={textStyle} numberOfLines={4} >
{symptomDataToDisplay}
</AppText>
}
@@ -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
+4 -1
View File
@@ -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
+6 -3
View File
@@ -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,
color: Colors.purple,
fontFamily: 'Jost-Bold',
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
+8 -11
View File
@@ -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
+15 -12
View File
@@ -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_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 = scale(20)
export const CHART_STROKE_WIDTH = scale(3)
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)
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
+19
View File
@@ -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
Generated
+5
View File
@@ -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
+1
View File
@@ -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
+6 -6
View File
@@ -1,10 +1,10 @@
import { fontRatio } from '../config'
import { scale } from 'react-native-size-matters'
export default {
tiny: 4 / fontRatio,
small: 10 / fontRatio,
base: 16 / fontRatio,
large: 20 / fontRatio,
tiny: scale(4),
small: scale(10),
base: scale(16),
large: scale(20),
symptomTileWidth: '48%',
textWidth: '70%'
}
}
styles/typography.js
+11 -12
View File
@@ -1,6 +1,5 @@
import { Platform } from 'react-native'
import { fontRatio } from '../config'
import { scale } from 'react-native-size-matters'
import Colors from './colors'
import Spacing from './spacing'
@@ -11,14 +10,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),
footnote: scale(10),
small: scale(13),
base: scale(16),
subtitle: scale(22),
title: scale(24),
huge: scale(32),
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 = {