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

Merge branch '209-change-basic-colors-and-font-to-new-design' into 'master'

Browse Source 
Resolve "change basic colors and font to new design"

Closes #209

See merge request bloodyhealth/drip!89
This commit is contained in:
Julia Friesel
2018-09-28 12:03:36 +00:00
parent 7f680296d3 feb6c18abf
commit 68f3faaf7c
12 changed files with 81 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
android/app/src/main/assets/fonts/Prompt-Light.ttf
BIN
View File
Binary file not shown.
android/app/src/main/assets/fonts/Prompt-Thin.ttf
BIN
View File
Binary file not shown.
android/app/src/main/res/values/colors.xml
+3 -3
View File
@@ -1,12 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- color for the app bar and other primary UI elements -->
<color name="colorPrimary">#ff7e5f</color>
<color name="colorPrimary">#000D19</color>
<!-- a darker variant of the primary color, used for
the status bar (on Android 5.0+) and contextual app bars -->
<color name="colorPrimaryDark">#c74e34</color>
<color name="colorPrimaryDark">#000D19</color>
<!-- a secondary color for controls like checkboxes and text fields -->
<color name="colorAccent">#351c4d</color>
<color name="colorAccent">#4FAFA7</color>
</resources>
assets/fonts/Prompt-Light.ttf
BIN
View File
Binary file not shown.
assets/fonts/Prompt-Thin.ttf
BIN
View File
Binary file not shown.
components/app.js
+18 -3
View File
@@ -9,9 +9,20 @@ import symptomViews from './cycle-day/symptoms'
import Chart from './chart/chart'
import Settings from './settings'
import Stats from './stats'
import {headerTitles as titles} from './labels'
import {headerTitles, menuTitles} from './labels'
import setupNotifications from '../lib/notifications'
// design wants everyhting lowercased, but we don't
// have CSS pseudo properties
const headerTitlesLowerCase = Object.keys(headerTitles).reduce((acc, curr) => {
acc[curr] = headerTitles[curr].toLowerCase()
return acc
}, {})
const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
acc[curr] = menuTitles[curr].toLowerCase()
return acc
}, {})
const isSymptomView = name => Object.keys(symptomViews).indexOf(name) > -1
export default class App extends Component {
@@ -56,7 +67,8 @@ export default class App extends Component {
return (
<View style={{flex: 1}}>
{this.state.currentPage != 'CycleDay' && <Header title={titles[this.state.currentPage]} />}
{this.state.currentPage != 'CycleDay' &&
<Header title={headerTitlesLowerCase[this.state.currentPage]}/>}
{React.createElement(page, {
navigate: this.navigate,
@@ -64,7 +76,10 @@ export default class App extends Component {
})}
{!isSymptomView(this.state.currentPage) &&
<Menu navigate={this.navigate} />
<Menu
navigate={this.navigate}
titles={menuTitlesLowerCase}
/>
}
</View>
)
components/cycle-day/symptoms/action-button-footer.js
+2 -1
View File
@@ -45,7 +45,8 @@ export default class ActionButtonFooter extends Component {
return (
<View style={styles.menu}>
{buttons.map(({ title, action, disabledCondition, icon }, i) => {
const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText
const textStyle = [styles.menuText]
if (disabledCondition) textStyle.push(styles.menuTextInActive)
const iconStyle = disabledCondition ?
Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
iconStyles.menuIcon
components/header.js
+6 -2
View File
@@ -1,7 +1,8 @@
import React, { Component } from 'react'
import {
View,
Text
Text,
Dimensions
} from 'react-native'
import styles, { iconStyles } from '../styles'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -9,9 +10,11 @@ import { formatDateForViewHeader } from '../components/cycle-day/labels/format'
export default class Header extends Component {
render() {
const middle = Dimensions.get('window').width / 2
return (
this.props.isCycleDayOverView ?
<View style={[styles.header, styles.headerCycleDay]}>
<View style={styles.accentCircle} left={middle - styles.accentCircle.width / 2}/>
<Icon
name='arrow-left-drop-circle'
{...iconStyles.navigationArrow}
@@ -34,7 +37,8 @@ export default class Header extends Component {
</View >
:
<View style={styles.header}>
<Text style={styles.dateHeader}>
<View style={styles.accentCircle} />
<Text style={styles.headerText}>
{this.props.title}
</Text>
</View >
components/labels.js
+8
View File
@@ -94,6 +94,14 @@ export const headerTitles = {
PainEditView: 'Pain'
}
export const menuTitles = {
Home: 'Home',
Calendar: 'Calendar',
Chart: 'Chart',
Stats: 'Stats',
Settings: 'Settings',
}
export const stats = {
cycleLengthTitle: 'Cycle length',
cycleLengthExplainer: 'Basic statistics about the length of your cycles.',
components/menu.js
+6 -5
View File
@@ -28,14 +28,15 @@ export default class Menu extends Component {
}
render() {
const t = this.props.titles
return (
<View style={styles.menu}>
{[
{ title: 'Home', icon: 'home', onPress: () => this.goTo('Home') },
{ title: 'Calendar', icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
{ title: 'Chart', icon: 'chart-line', onPress: () => this.goTo('Chart') },
{ title: 'Stats', icon: 'chart-pie', onPress: () => this.goTo('Stats') },
{ title: 'Settings', icon: 'settings', onPress: () => this.goTo('Settings') },
{ title: t.Home, icon: 'home', onPress: () => this.goTo('Home') },
{ title: t.Calendar, icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
{ title: t.Chart, icon: 'chart-line', onPress: () => this.goTo('Chart') },
{ title: t.Stats, icon: 'chart-pie', onPress: () => this.goTo('Stats') },
{ title: t.Settings, icon: 'settings', onPress: () => this.goTo('Settings') },
].map(this.makeMenuItem)}
</View >
)
ios/drip.xcodeproj/project.pbxproj
+6 -6
View File
@@ -747,9 +747,9 @@
13B07F8E1A680F5B00A75B9A /* Resources */,
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
2B572382D4504B8FB4B9D251 /* Embed Frameworks */,
7DDFD19623084447885928A6 /* Build NodeJS Mobile Native Modules */,
554E2494DF2646B083F4BD1D /* Sign NodeJS Mobile Native Modules */,
8F5D6E75B7D344BD80BC6EC0 /* Remove NodeJS Mobile Framework Simulator Strips */,
2916172A40DD44AE85EB76AF /* Build NodeJS Mobile Native Modules */,
E93078AE736B464D9A7409A4 /* Sign NodeJS Mobile Native Modules */,
E95128D078C34495AFAAA808 /* Remove NodeJS Mobile Framework Simulator Strips */,
);
buildRules = (
);
@@ -1232,7 +1232,7 @@
shellPath = /bin/sh;
shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
};
7DDFD19623084447885928A6 /* Build NodeJS Mobile Native Modules */ = {
2916172A40DD44AE85EB76AF /* Build NodeJS Mobile Native Modules */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
@@ -1300,7 +1300,7 @@ fi
popd
";
};
554E2494DF2646B083F4BD1D /* Sign NodeJS Mobile Native Modules */ = {
E93078AE736B464D9A7409A4 /* Sign NodeJS Mobile Native Modules */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
@@ -1360,7 +1360,7 @@ find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -del
find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete
";
};
8F5D6E75B7D344BD80BC6EC0 /* Remove NodeJS Mobile Framework Simulator Strips */ = {
E95128D078C34495AFAAA808 /* Remove NodeJS Mobile Framework Simulator Strips */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
styles/index.js
+32 -10
View File
@@ -1,7 +1,7 @@
import { StyleSheet } from 'react-native'
export const primaryColor = '#ff7e5f'
export const secondaryColor = '#351c4d'
export const primaryColor = '#000D19'
export const secondaryColor = '#4FAFA7'
export const secondaryColorLight = '#91749d'
export const fontOnPrimaryColor = 'white'
export const shadesOfRed = [
@@ -11,13 +11,20 @@ export const shadesOfRed = [
'#c3000d'
] // light to dark
const fontRegular = 'Prompt-Light'
const fontLight = 'Prompt-Thin'
const regularSize = 16
const defaultBottomMargin = 5
const defaultIndentation = 10
const defaultTopMargin = 10
export default StyleSheet.create({
appText: {
color: 'black'
color: 'black',
fontFamily: fontRegular,
fontSize: regularSize
},
paragraph: {
marginBottom: defaultBottomMargin
@@ -36,21 +43,36 @@ export default StyleSheet.create({
},
welcome: {
fontSize: 20,
fontFamily: 'serif',
margin: 30,
textAlign: 'center',
textAlignVertical: 'center'
},
dateHeader: {
fontSize: 22,
fontWeight: 'bold',
fontSize: 20,
fontFamily: fontLight,
color: fontOnPrimaryColor,
textAlign: 'center',
},
headerText: {
fontSize: 30,
fontFamily: fontLight,
color: fontOnPrimaryColor,
textAlign: 'center',
},
accentCircle: {
borderColor: secondaryColor,
borderWidth: 0.5,
width: 40,
height: 40,
borderRadius: 100,
position: 'absolute'
},
cycleDayNumber: {
fontSize: 15,
color: fontOnPrimaryColor,
textAlign: 'center',
marginLeft: 15
fontFamily: fontLight
},
symptomViewHeading: {
fontSize: 20,
@@ -112,14 +134,14 @@ export default StyleSheet.create({
paddingHorizontal: 15,
alignItems: 'center',
justifyContent: 'center',
height: '10%'
height: 80
},
menu: {
backgroundColor: primaryColor,
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
height: '12%'
height: 60
},
menuItem: {
alignItems: 'center',
@@ -127,7 +149,8 @@ export default StyleSheet.create({
paddingVertical: 15
},
menuText: {
color: fontOnPrimaryColor
color: fontOnPrimaryColor,
fontFamily: fontLight
},
menuTextInActive: {
color: 'lightgrey'
@@ -135,7 +158,6 @@ export default StyleSheet.create({
headerCycleDay: {
flexDirection: 'row',
justifyContent: 'space-between',
height: '15%'
},
navigationArrow: {
fontSize: 60,