Make header and menu labels lowercase

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/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 >
     )