diff --git a/android/app/src/main/assets/fonts/Prompt-Light.ttf b/android/app/src/main/assets/fonts/Prompt-Light.ttf new file mode 100644 index 0000000..e00a747 Binary files /dev/null and b/android/app/src/main/assets/fonts/Prompt-Light.ttf differ diff --git a/android/app/src/main/assets/fonts/Prompt-Thin.ttf b/android/app/src/main/assets/fonts/Prompt-Thin.ttf new file mode 100644 index 0000000..2767999 Binary files /dev/null and b/android/app/src/main/assets/fonts/Prompt-Thin.ttf differ diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml index 2f5e5f8..6f1943f 100644 --- a/android/app/src/main/res/values/colors.xml +++ b/android/app/src/main/res/values/colors.xml @@ -1,12 +1,12 @@ - #ff7e5f + #000D19 - #c74e34 + #000D19 - #351c4d + #4FAFA7 \ No newline at end of file diff --git a/assets/fonts/Prompt-Light.ttf b/assets/fonts/Prompt-Light.ttf new file mode 100644 index 0000000..e00a747 Binary files /dev/null and b/assets/fonts/Prompt-Light.ttf differ diff --git a/assets/fonts/Prompt-Thin.ttf b/assets/fonts/Prompt-Thin.ttf new file mode 100644 index 0000000..2767999 Binary files /dev/null and b/assets/fonts/Prompt-Thin.ttf differ diff --git a/components/app.js b/components/app.js index ba58437..7cd7d05 100644 --- a/components/app.js +++ b/components/app.js @@ -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 ( - {this.state.currentPage != 'CycleDay' &&
} + {this.state.currentPage != 'CycleDay' && +
} {React.createElement(page, { navigate: this.navigate, @@ -64,7 +76,10 @@ export default class App extends Component { })} {!isSymptomView(this.state.currentPage) && - + } ) diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js index dac39a6..35360ba 100644 --- a/components/cycle-day/symptoms/action-button-footer.js +++ b/components/cycle-day/symptoms/action-button-footer.js @@ -45,7 +45,8 @@ export default class ActionButtonFooter extends Component { return ( {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 diff --git a/components/header.js b/components/header.js index a4d3414..b99ed15 100644 --- a/components/header.js +++ b/components/header.js @@ -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 ? + : - + + {this.props.title} diff --git a/components/labels.js b/components/labels.js index 5a04427..e728bd5 100644 --- a/components/labels.js +++ b/components/labels.js @@ -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.', diff --git a/components/menu.js b/components/menu.js index 737203b..8bdbb43 100644 --- a/components/menu.js +++ b/components/menu.js @@ -28,14 +28,15 @@ export default class Menu extends Component { } render() { + const t = this.props.titles return ( {[ - { 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)} ) diff --git a/ios/drip.xcodeproj/project.pbxproj b/ios/drip.xcodeproj/project.pbxproj index c6a9665..ff698e3 100644 --- a/ios/drip.xcodeproj/project.pbxproj +++ b/ios/drip.xcodeproj/project.pbxproj @@ -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 = ( diff --git a/styles/index.js b/styles/index.js index 28b6ff0..c2b18b5 100644 --- a/styles/index.js +++ b/styles/index.js @@ -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,