From d25af176d3a4a93faf2328015614a3caa99c6716 Mon Sep 17 00:00:00 2001
From: Maria Zadnepryanets <mariya.z@gmail.com>
Date: Sun, 20 Dec 2020 19:11:03 +0000
Subject: [PATCH] Resolve "Stats"
---
components/common/menu-icon.js | 2 +-
components/common/table.js | 6 +++---
components/home.js | 5 ++++-
components/stats.js | 30 ++++++++++++++++--------------
styles/typography.js | 3 ++-
5 files changed, 26 insertions(+), 20 deletions(-)
diff --git a/components/common/menu-icon.js b/components/common/menu-icon.js
index cd1fa0fb..8ef9b9a0 100644
--- a/components/common/menu-icon.js
+++ b/components/common/menu-icon.js
@@ -10,7 +10,7 @@ const Icon = createIconSetFromIcoMoon(iconConfig, '', 'Menu')
const MenuIcon = ({ isActive, name }) => {
const color = isActive ? Colors.greyDark : Colors.grey
- return <Icon name={name} size={Sizes.huge} color={color} />
+ return <Icon name={name} size={Sizes.icon} color={color} />
}
MenuIcon.propTypes = {
diff --git a/components/common/table.js b/components/common/table.js
index c6529966..bb84f271 100644
--- a/components/common/table.js
+++ b/components/common/table.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
import AppText from './app-text'
-import { Spacing, Typography } from '../../styles'
+import { Sizes, Spacing, Typography } from '../../styles'
const Table = ({ tableContent }) => {
return (
@@ -56,11 +56,11 @@ Cell.propTypes = {
const styles = StyleSheet.create({
accentOrange: {
...Typography.accentOrange,
- fontSize: 18,
+ fontSize: Sizes.small,
},
accentPurpleBig: {
...Typography.accentPurpleBig,
- marginRight: Spacing.base,
+ marginRight: Spacing.small,
},
cellLeft: {
alignItems: 'flex-end',
diff --git a/components/home.js b/components/home.js
index 3db35079..ad2ff53e 100644
--- a/components/home.js
+++ b/components/home.js
@@ -99,7 +99,7 @@ class Home extends Component {
{phase && (
<View style={styles.line}>
<Asterisk />
- <AppText linkStyle={styles.whiteText}>
+ <AppText linkStyle={styles.whiteText} style={styles.greyText}>
{statusText}
</AppText>
</View>
@@ -147,6 +147,9 @@ const styles = StyleSheet.create({
},
whiteText: {
color: 'white',
+ },
+ greyText: {
+ color: Colors.greyLight,
}
})
diff --git a/components/stats.js b/components/stats.js
index d43a74d3..1cdcf1bf 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { ImageBackground, StyleSheet, View } from 'react-native'
+import { Dimensions, ImageBackground, StyleSheet, View } from 'react-native'
import AppPage from './common/app-page'
import AppText from './common/app-text'
@@ -10,9 +10,11 @@ import cycleModule from '../lib/cycle'
import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
import {stats as labels} from '../i18n/en/labels'
-import { Spacing, Typography } from '../styles'
+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()
@@ -20,13 +22,15 @@ const Stats = () => {
const hasAtLeastOneCycle = numberOfCycles >= 1
const cycleData = hasAtLeastOneCycle ? getCycleInfo(cycleLengths)
: { minimum: '—', maximum: '—', stdDeviation: '—' }
-
const statsData = [
[cycleData.minimum, labels.minLabel],
[cycleData.maximum, labels.maxLabel],
[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}>
<Segment last style={styles.pageContainer}>
@@ -38,12 +42,12 @@ const Stats = () => {
<ImageBackground
source={image}
imageStyle={styles.image}
- style={styles.imageContainter}
+ style={[styles.imageContainter, { height }]}
>
<AppText
numberOfLines={1}
ellipsizeMode="clip"
- style={styles.accentPurpleGiant}
+ style={[styles.accentPurpleGiant, { marginTop }]}
>
{cycleData.mean}
</AppText>
@@ -72,15 +76,14 @@ const column = {
const styles = StyleSheet.create({
accentOrange: {
...Typography.accentOrange,
- fontSize: 20,
+ fontSize: Sizes.small,
},
accentPurpleGiant: {
...Typography.accentPurpleGiant,
},
accentPurpleHuge: {
...Typography.accentPurpleHuge,
- marginRight: Spacing.base,
- marginTop: -15,
+ marginTop: Spacing.base * (-1),
},
container: {
alignItems: 'center',
@@ -97,15 +100,14 @@ const styles = StyleSheet.create({
paddingTop: Spacing.small,
},
image: {
- height: 120,
- marginLeft: 20,
- marginTop: 20,
+ marginLeft: Spacing.large,
+ marginTop: Spacing.large,
resizeMode: 'contain',
- width: 120,
+
},
imageContainter: {
- paddingTop: 40,
- marginBottom: 20,
+ paddingTop: Spacing.large * 2,
+ marginBottom: Spacing.large,
},
pageContainer: {
marginVertical: Spacing.base,
diff --git a/styles/typography.js b/styles/typography.js
index 2ea043db..3df807b7 100644
--- a/styles/typography.js
+++ b/styles/typography.js
@@ -16,6 +16,7 @@ export const sizes = {
subtitle: 22 / fontRatio,
title: 24 / fontRatio,
huge: 32 / fontRatio,
+ icon: 40 / fontRatio,
}
const accentText = {
@@ -31,7 +32,7 @@ const accentTextBig = {
const accentTextGiant = {
...accentText,
- fontSize: 50 / fontRatio,
+ fontSize: sizes.icon / fontRatio,
}
const accentTextHuge = {
--
GitLab