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

Resolve "change basic colors and font to new design"

Closes #209

See merge request bloodyhealth/drip!89

android/app/src/main/res/values/colors.xml

@@ -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>

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 (
       <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

@@ -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

@@ -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

@@ -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

@@ -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: t.Home, icon: 'home', onPress: () => this.goTo('Home') },
-          { title: 'Calendar', icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
+          { title: t.Calendar, icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
-          { title: 'Chart', icon: 'chart-line', onPress: () => this.goTo('Chart') },
+          { title: t.Chart, icon: 'chart-line', onPress: () => this.goTo('Chart') },
-          { title: 'Stats', icon: 'chart-pie', onPress: () => this.goTo('Stats') },
+          { title: t.Stats, icon: 'chart-pie', onPress: () => this.goTo('Stats') },
-          { title: 'Settings', icon: 'settings', onPress: () => this.goTo('Settings') },
+          { title: t.Settings, icon: 'settings', onPress: () => this.goTo('Settings') },
         ].map(this.makeMenuItem)}
       </View >
     )

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 */,
+				2916172A40DD44AE85EB76AF /* Build NodeJS Mobile Native Modules */,
-				554E2494DF2646B083F4BD1D /* Sign NodeJS Mobile Native Modules */,
+				E93078AE736B464D9A7409A4 /* Sign NodeJS Mobile Native Modules */,
-				8F5D6E75B7D344BD80BC6EC0 /* Remove NodeJS Mobile Framework Simulator Strips */,
+				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

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native'
 
-export const primaryColor = '#ff7e5f'
+export const primaryColor = '#000D19'
-export const secondaryColor = '#351c4d'
+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,
+    fontSize: 20,
-    fontWeight: 'bold',
+    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,