From 5a555f59657cbd485fb150478f6142a75ab65107 Mon Sep 17 00:00:00 2001
From: Maria Zadnepryanets <mariya.z@gmail.com>
Date: Sat, 22 Aug 2020 10:57:44 +0000
Subject: [PATCH] Calendar redesign

---
 android/app/src/main/res/values/styles.xml    |  10 +-
 components/calendar.js                        | 126 ++---
 components/chart/chart-legend.js              |   2 +-
 components/chart/chart-line.js                |   2 +-
 components/chart/chart.js                     |   2 +-
 components/chart/cycle-day-label.js           |   2 +-
 components/chart/dot-and-line.js              |   2 +-
 components/chart/horizontal-grid.js           |   2 +-
 components/chart/no-data.js                   |   2 +-
 components/chart/symptom-cell.js              |   2 +-
 components/chart/symptom-icon.js              |   2 +-
 components/chart/tick.js                      |   2 +-
 components/chart/tutorial.js                  |   2 +-
 components/common/app-icon.js                 |   2 +-
 components/common/app-loading.js              |   2 +-
 components/common/app-page.js                 |   2 +-
 components/common/app-switch.js               |   2 +-
 components/common/app-text-input.js           |   2 +-
 components/common/app-text.js                 |   2 +-
 components/common/button.js                   |   2 +-
 components/common/close-icon.js               |   2 +-
 components/common/link.js                     |   2 +-
 components/common/menu-icon.js                |   2 +-
 components/common/segment.js                  |   7 +-
 components/common/table.js                    |   2 +-
 components/cycle-day/cycle-day-overview.js    |   2 +-
 components/cycle-day/select-box-group.js      |   2 +-
 components/cycle-day/select-tab-group.js      |   2 +-
 components/cycle-day/symptom-box.js           |   2 +-
 components/cycle-day/symptom-edit-view.js     |  37 +-
 components/cycle-day/symptom-page-title.js    |   2 +-
 components/cycle-day/temperature.js           |   2 +-
 components/header/hamburger-menu.js           |   2 +-
 components/header/index.js                    |   2 +-
 components/header/logo.js                     |   2 +-
 components/header/menu-item.js                |   2 +-
 components/helpers/calendar.js                |  67 +++
 components/home.js                            |   6 +-
 components/license.js                         |   2 +-
 components/menu/index.js                      |   2 +-
 components/menu/menu-item.js                  |   2 +-
 components/password-prompt.js                 |   2 +-
 .../{shared => common}/alert-error.js         |   0
 .../confirm-with-password.js                  |   2 +-
 .../{shared => common}/password-field.js      |   0
 .../{shared => common}/settings-button.js     |   0
 .../settings/data-management/delete-data.js   |   6 +-
 .../settings/data-management/export-dialog.js |   2 +-
 .../settings/data-management/import-dialog.js |   2 +-
 components/settings/data-management/index.js  |   4 +-
 components/settings/menu-item.js              |   2 +-
 components/settings/nfp-settings/index.js     |   2 +-
 .../settings/nfp-settings/slider-label.js     |   2 +-
 .../nfp-settings/temperature-slider.js        |   4 +-
 components/settings/password/delete.js        |   2 +-
 .../settings/password/enter-new-password.js   |   2 +-
 components/settings/password/update.js        |   2 +-
 components/stats.js                           |   2 +-
 i18n/en/labels.js                             |  36 +-
 styles/index.js                               | 494 +-----------------
 styles/redesign.js                            |   6 -
 61 files changed, 213 insertions(+), 682 deletions(-)
 create mode 100644 components/helpers/calendar.js
 rename components/settings/{shared => common}/alert-error.js (100%)
 rename components/settings/{shared => common}/confirm-with-password.js (97%)
 rename components/settings/{shared => common}/password-field.js (100%)
 rename components/settings/{shared => common}/settings-button.js (100%)
 delete mode 100644 styles/redesign.js

diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index d27d7ee..76199a4 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -11,22 +11,22 @@
     </style>
 
     <style name="AlertDialogTheme" parent="Theme.AppCompat.Dialog.Alert">
-      <item name="android:buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
+      <item name="android:buttonBarButtonStyle">@style/ButtonBarStyle</item>
       <item name="android:buttonBarPositiveButtonStyle">@style/PositiveButtonStyle</item>
       <item name="android:fontFamily">@font/jost_normal</item>
       <item name="android:textColorPrimary">@color/grey</item>
       <item name="android:windowTitleStyle">@style/TitleStyle</item>
     </style>
 
-    <style name="NegativeButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
+    <style name="ButtonBarStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
+      <item name="android:textSize">16sp</item>
       <item name="android:textColor">@color/grey</item>
-      <item name="android:textSize">18sp</item>
     </style>
 
     <style name="PositiveButtonStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
-      <item name="android:textColor">@color/orange</item>
-      <item name="android:textSize">18sp</item>
+      <item name="android:textSize">16sp</item>
       <item name="android:textStyle">bold</item>
+      <item name="android:textColor">@color/orange</item>
     </style>
 
     <style name="TitleStyle" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
diff --git a/components/calendar.js b/components/calendar.js
index 2340168..c5f7c21 100644
--- a/components/calendar.js
+++ b/components/calendar.js
@@ -1,17 +1,22 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { StyleSheet, View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
-import { connect } from 'react-redux'
 
+import { connect } from 'react-redux'
 import { setDate } from '../slices/date'
 import { navigate } from '../slices/navigation'
 
-import { LocalDate } from 'js-joda'
 import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
-import { shadesOfRed, calendarTheme } from '../styles/index'
-import styles from '../styles/index'
 import nothingChanged from '../db/db-unchanged'
+import {
+  predictionToCalFormat,
+  toCalFormat,
+  todayToCalFormat
+} from './helpers/calendar'
+
+import { Colors, Fonts, Sizes } from '../../styles'
 
 class CalendarView extends Component {
   static propTypes = {
@@ -52,26 +57,50 @@ class CalendarView extends Component {
   }
 
   render() {
+    const {
+      todayInCalFormat,
+      bleedingDaysInCalFormat,
+      predictedBleedingDaysInCalFormat
+    } = this.state
+    const markedDates = Object.assign(
+      {},
+      todayInCalFormat,
+      bleedingDaysInCalFormat,
+      predictedBleedingDaysInCalFormat
+    )
+
     return (
-      <CalendarList
-        onDayPress={this.passDateToDayView.bind(this)}
-        markedDates={
-          Object.assign(
-            {},
-            this.state.todayInCalFormat,
-            this.state.bleedingDaysInCalFormat,
-            this.state.predictedBleedingDaysInCalFormat
-          )
-        }
-        markingType={'custom'}
-        // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
-        firstDay={1}
-        theme={calendarTheme}
-      />
+      <View style={styles.container}>
+        <CalendarList
+          // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
+          firstDay={1}
+          onDayPress={this.passDateToDayView.bind(this)}
+          markedDates={markedDates}
+          markingType={'custom'}
+          theme={calendarTheme}
+        />
+      </View>
     )
   }
 }
 
+const styles = StyleSheet.create({
+  container: { flex: 1 }
+})
+
+const calendarTheme = StyleSheet.create({
+  calendarBackground: Colors.tourquiseLight,
+  dayTextColor: Colors.greyDark,
+  monthTextColor: Colors.purple,
+  textDayFontFamily: Fonts.main,
+  textMonthFontFamily: Fonts.bold,
+  textDayHeaderFontFamily: Fonts.bold,
+  textDayFontSize: Sizes.small,
+  textMonthFontSize: Sizes.subtitle,
+  textDayHeaderFontSize: Sizes.small,
+  textSectionTitleColor: Colors.orange,
+})
+
 const mapDispatchToProps = (dispatch) => {
   return({
     setDate: (date) => dispatch(setDate(date)),
@@ -83,62 +112,3 @@ export default connect(
   null,
   mapDispatchToProps,
 )(CalendarView)
-
-
-function toCalFormat(bleedingDaysSortedByDate) {
-  const todayDateString = LocalDate.now().toString()
-  return bleedingDaysSortedByDate.reduce((acc, day) => {
-    acc[day.date] = {
-      customStyles: {
-        container: {
-          backgroundColor: shadesOfRed[day.bleeding.value],
-        }
-      }
-    }
-    if (day.date === todayDateString) {
-      acc[day.date].customStyles.text = styles.calendarToday
-    }
-    return acc
-  }, {})
-}
-
-function predictionToCalFormat(predictedDays) {
-  if (!predictedDays.length) return {}
-  const todayDateString = LocalDate.now().toString()
-  const middleIndex = (predictedDays[0].length - 1) / 2
-  return predictedDays.reduce((acc, setOfDays) => {
-    setOfDays.reduce((accSet, day, i) => {
-      accSet[day] = {
-        customStyles: {
-          container: {
-            borderColor: (i === middleIndex) ? shadesOfRed[3] : shadesOfRed[2],
-            borderWidth: 3,
-          },
-          text: {
-            marginTop: 1,
-          }
-        }
-      }
-      if (day === todayDateString) {
-        accSet[day].customStyles.text = Object.assign(
-          {},
-          styles.calendarToday,
-          {marginTop: -2}
-        )
-      }
-      return accSet
-    }, acc)
-    return acc
-  }, {})
-}
-
-function todayToCalFormat() {
-  const todayDateString = LocalDate.now().toString()
-  const todayFormated = {}
-  todayFormated[todayDateString] = {
-    customStyles: {
-      text: styles.calendarToday
-    }
-  }
-  return todayFormated
-}
\ No newline at end of file
diff --git a/components/chart/chart-legend.js b/components/chart/chart-legend.js
index 1339a57..6739161 100644
--- a/components/chart/chart-legend.js
+++ b/components/chart/chart-legend.js
@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from '../common/app-text'
 
-import { Typography } from '../../styles/redesign'
+import { Typography } from '../../styles'
 import { CHART_YAXIS_WIDTH } from '../../config'
 import { shared as labels } from '../../i18n/en/labels'
 
diff --git a/components/chart/chart-line.js b/components/chart/chart-line.js
index c74d0a1..53af2cc 100644
--- a/components/chart/chart-line.js
+++ b/components/chart/chart-line.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { Shape } from 'react-native/Libraries/ART/ReactNativeART'
 
-import { Colors } from '../../styles/redesign'
+import { Colors } from '../../styles'
 import { CHART_STROKE_WIDTH, CHART_GRID_LINE_HORIZONTAL_WIDTH } from '../../config'
 
 const ChartLine = ({ path, isNfpLine }) => {
diff --git a/components/chart/chart.js b/components/chart/chart.js
index 525682f..bdfa6f7 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -27,7 +27,7 @@ import {
   CHART_XAXIS_HEIGHT_RATIO
 } from '../../config'
 import { shared } from '../../i18n/en/labels'
-import { Colors, Spacing } from '../../styles/redesign'
+import { Colors, Spacing } from '../../styles'
 
 class CycleChart extends Component {
   static propTypes = {
diff --git a/components/chart/cycle-day-label.js b/components/chart/cycle-day-label.js
index 7378f92..aec35d5 100644
--- a/components/chart/cycle-day-label.js
+++ b/components/chart/cycle-day-label.js
@@ -8,7 +8,7 @@ import AppText from '../common/app-text'
 
 import cycleModule from '../../lib/cycle'
 import { dateEnding } from '../helpers/home'
-import { Containers, Typography } from '../../styles/redesign'
+import { Containers, Typography } from '../../styles'
 
 const CycleDayLabel = ({ height, date }) => {
   const dayDate = LocalDate.parse(date)
diff --git a/components/chart/dot-and-line.js b/components/chart/dot-and-line.js
index f7da601..e3be7aa 100644
--- a/components/chart/dot-and-line.js
+++ b/components/chart/dot-and-line.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
 
-import { Colors } from '../../styles/redesign'
+import { Colors } from '../../styles'
 
 import {
   CHART_COLUMN_WIDTH,
diff --git a/components/chart/horizontal-grid.js b/components/chart/horizontal-grid.js
index ddbbe53..9550248 100644
--- a/components/chart/horizontal-grid.js
+++ b/components/chart/horizontal-grid.js
@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native'
 
 import { getTickPositions } from '../helpers/chart'
 
-import { Colors } from '../../styles/redesign'
+import { Colors } from '../../styles'
 import { CHART_GRID_LINE_HORIZONTAL_WIDTH, CHART_YAXIS_WIDTH } from '../../config'
 
 const HorizontalGrid = ({ height }) => {
diff --git a/components/chart/no-data.js b/components/chart/no-data.js
index 5044b18..154ca51 100644
--- a/components/chart/no-data.js
+++ b/components/chart/no-data.js
@@ -8,7 +8,7 @@ import Button from '../common/button'
 import { connect } from 'react-redux'
 import { navigate } from '../../slices/navigation'
 
-import { Containers } from '../../styles/redesign'
+import { Containers } from '../../styles'
 import { shared } from '../../i18n/en/labels'
 
 const NoData = ({ navigate }) => {
diff --git a/components/chart/symptom-cell.js b/components/chart/symptom-cell.js
index 23d1667..445df49 100644
--- a/components/chart/symptom-cell.js
+++ b/components/chart/symptom-cell.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View } from 'react-native'
 
-import { Colors, Containers } from '../../styles/redesign'
+import { Colors, Containers } from '../../styles'
 import {
   CHART_COLUMN_WIDTH,
   CHART_DOT_RADIUS,
diff --git a/components/chart/symptom-icon.js b/components/chart/symptom-icon.js
index 849283d..1bd5c6c 100644
--- a/components/chart/symptom-icon.js
+++ b/components/chart/symptom-icon.js
@@ -4,7 +4,7 @@ import { StyleSheet , View } from 'react-native'
 
 import DripIcon from '../../assets/drip-icons'
 
-import { Colors, Containers } from '../../styles/redesign'
+import { Colors, Containers } from '../../styles'
 import { CHART_YAXIS_WIDTH, CHART_ICON_SIZE } from '../../config'
 
 const SymptomIcon = ({ symptom, height }) => {
diff --git a/components/chart/tick.js b/components/chart/tick.js
index 01b260d..e626644 100644
--- a/components/chart/tick.js
+++ b/components/chart/tick.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 import AppText from '../common/app-text'
 
-import { Sizes } from '../../styles/redesign'
+import { Sizes } from '../../styles'
 
 const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
   const top = yPosition - height / 2
diff --git a/components/chart/tutorial.js b/components/chart/tutorial.js
index 4a0de53..fefe287 100644
--- a/components/chart/tutorial.js
+++ b/components/chart/tutorial.js
@@ -5,7 +5,7 @@ import { Image, StyleSheet, View } from 'react-native'
 import AppText from '../common/app-text'
 import CloseIcon from '../common/close-icon'
 
-import { Containers, Spacing } from '../../styles/redesign'
+import { Containers, Spacing } from '../../styles'
 import { chart } from '../../i18n/en/labels'
 
 const image = require('../../assets/swipe.png')
diff --git a/components/common/app-icon.js b/components/common/app-icon.js
index f0e4e04..717c1e0 100644
--- a/components/common/app-icon.js
+++ b/components/common/app-icon.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { StyleSheet } from 'react-native'
 import Icon from 'react-native-vector-icons/Entypo'
 
-import { Sizes } from '../../styles/redesign'
+import { Sizes } from '../../styles'
 
 const AppIcon = ({ color, name, style, ...props }) => {
   const iconStyle = [styles.icon, style, { color }]
diff --git a/components/common/app-loading.js b/components/common/app-loading.js
index 87612bb..115d2dc 100644
--- a/components/common/app-loading.js
+++ b/components/common/app-loading.js
@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from './app-text'
 
-import { Containers } from '../../styles/redesign'
+import { Containers } from '../../styles'
 
 import { shared } from '../../i18n/en/labels'
 
diff --git a/components/common/app-page.js b/components/common/app-page.js
index 87910dd..6181700 100644
--- a/components/common/app-page.js
+++ b/components/common/app-page.js
@@ -4,7 +4,7 @@ import { ScrollView, StyleSheet, View } from 'react-native'
 
 import AppText from '../common/app-text'
 
-import { Colors, Typography } from '../../styles/redesign'
+import { Colors, Typography } from '../../styles'
 
 const AppPage = ({
   children,
diff --git a/components/common/app-switch.js b/components/common/app-switch.js
index 2717535..c059253 100644
--- a/components/common/app-switch.js
+++ b/components/common/app-switch.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 import AppText from './app-text'
 
-import { Containers } from '../../styles/redesign'
+import { Containers } from '../../styles'
 
 const AppSwitch = ({ onToggle, text, value }) => {
   return (
diff --git a/components/common/app-text-input.js b/components/common/app-text-input.js
index 3b55071..8439266 100644
--- a/components/common/app-text-input.js
+++ b/components/common/app-text-input.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, TextInput } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { Colors, Spacing, Typography } from '../../styles/redesign'
+import { Colors, Spacing, Typography } from '../../styles'
 
 const AppTextInput = ({ style, ...props }) => {
   return <TextInput style={[styles.input, style]} {...props} />
diff --git a/components/common/app-text.js b/components/common/app-text.js
index 329cf28..5d696f3 100644
--- a/components/common/app-text.js
+++ b/components/common/app-text.js
@@ -4,7 +4,7 @@ import { StyleSheet, Text } from 'react-native'
 
 import Link from './link'
 
-import { Colors, Typography } from '../../styles/redesign'
+import { Colors, Typography } from '../../styles'
 
 const AppText = ({ children, linkStyle, style, ...props }) => {
   // we parse for links in case the text contains any
diff --git a/components/common/button.js b/components/common/button.js
index 28d0036..79e17d8 100644
--- a/components/common/button.js
+++ b/components/common/button.js
@@ -5,7 +5,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 import AppIcon from './app-icon'
 import AppText from './app-text'
 
-import { Colors, Fonts, Spacing } from '../../styles/redesign'
+import { Colors, Fonts, Spacing } from '../../styles'
 
 const Button = ({
   children,
diff --git a/components/common/close-icon.js b/components/common/close-icon.js
index 1930fb3..862fc73 100644
--- a/components/common/close-icon.js
+++ b/components/common/close-icon.js
@@ -4,7 +4,7 @@ import { StyleSheet, TouchableOpacity } from 'react-native'
 
 import AppIcon from './app-icon'
 
-import { Colors, Sizes } from '../../styles/redesign'
+import { Colors, Sizes } from '../../styles'
 
 const CloseIcon = ({ onClose, ...props }) => {
   return (
diff --git a/components/common/link.js b/components/common/link.js
index c221361..aec7bfc 100644
--- a/components/common/link.js
+++ b/components/common/link.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Hyperlink from 'react-native-hyperlink'
 import { StyleSheet } from 'react-native'
 
-import { Colors, Typography } from '../../styles/redesign'
+import { Colors, Typography } from '../../styles'
 
 import links from '../../i18n/en/links'
 
diff --git a/components/common/menu-icon.js b/components/common/menu-icon.js
index abe7f83..cd1fa0f 100644
--- a/components/common/menu-icon.js
+++ b/components/common/menu-icon.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons'
 import iconConfig from '../../selection.json'
 
-import { Colors, Sizes } from '../../styles/redesign'
+import { Colors, Sizes } from '../../styles'
 
 const Icon = createIconSetFromIcoMoon(iconConfig, '', 'Menu')
 
diff --git a/components/common/segment.js b/components/common/segment.js
index 004562a..b0baca1 100644
--- a/components/common/segment.js
+++ b/components/common/segment.js
@@ -4,13 +4,14 @@ import { StyleSheet, View } from 'react-native'
 
 import AppText from './app-text'
 
-import { Colors, Spacing, Typography } from '../../styles/redesign'
+import { Colors, Spacing, Typography } from '../../styles'
 
 const Segment = ({ children, last, title }) => {
   const containerStyle = last ? styles.containerLast : styles.container
+  const commonStyle = Object.assign({}, containerStyle)
 
   return (
-    <View style={containerStyle}>
+    <View style={commonStyle}>
       {title && <AppText style={styles.title}>{title}</AppText>}
       {children}
     </View>
@@ -33,7 +34,7 @@ const styles = StyleSheet.create({
   container: {
     borderStyle: 'solid',
     borderBottomWidth: 2,
-    borderBottomColor: Colors.greyLight,
+    borderBottomColor: Colors.grey,
     paddingBottom: Spacing.base,
     ...segmentContainer
   },
diff --git a/components/common/table.js b/components/common/table.js
index f1e024f..c319c05 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/redesign'
+import { Spacing, Typography } from '../../styles'
 
 const Table = ({ tableContent }) => {
   return (
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 427b63a..d26ad97 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -16,7 +16,7 @@ import { getCycleDay } from '../../db'
 import { getData } from '../helpers/cycle-day'
 
 import { general as labels} from '../../i18n/en/cycle-day'
-import { Spacing } from '../../styles/redesign'
+import { Spacing } from '../../styles'
 import { SYMPTOMS } from '../../config'
 
 class CycleDayOverView extends Component {
diff --git a/components/cycle-day/select-box-group.js b/components/cycle-day/select-box-group.js
index d8c5808..773ef5e 100644
--- a/components/cycle-day/select-box-group.js
+++ b/components/cycle-day/select-box-group.js
@@ -4,7 +4,7 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
 import AppText from '../common/app-text'
 
-import { Colors, Containers } from '../../styles/redesign'
+import { Colors, Containers } from '../../styles'
 
 const SelectBoxGroup = ({ labels, optionsState, onSelect }) => {
   return (
diff --git a/components/cycle-day/select-tab-group.js b/components/cycle-day/select-tab-group.js
index 8caea5a..29c2e2f 100644
--- a/components/cycle-day/select-tab-group.js
+++ b/components/cycle-day/select-tab-group.js
@@ -4,7 +4,7 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
 import AppText from '../common/app-text'
 
-import { Colors, Containers } from '../../styles/redesign'
+import { Colors, Containers } from '../../styles'
 
 export default function SelectTabGroup({ activeButton, buttons, onSelect }) {
   return (
diff --git a/components/cycle-day/symptom-box.js b/components/cycle-day/symptom-box.js
index 82f9fe7..b9aeac1 100644
--- a/components/cycle-day/symptom-box.js
+++ b/components/cycle-day/symptom-box.js
@@ -10,7 +10,7 @@ import { connect } from 'react-redux'
 import { getDate } from '../../slices/date'
 import { isDateInFuture } from '../helpers/cycle-day'
 
-import { Colors, Sizes, Spacing } from '../../styles/redesign'
+import { Colors, Sizes, Spacing } from '../../styles'
 import { headerTitles as symptomTitles } from '../../i18n/en/labels'
 
 class SymptomBox extends Component {
diff --git a/components/cycle-day/symptom-edit-view.js b/components/cycle-day/symptom-edit-view.js
index eb50e29..500c07e 100644
--- a/components/cycle-day/symptom-edit-view.js
+++ b/components/cycle-day/symptom-edit-view.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { ScrollView, StyleSheet, View } from 'react-native'
+import { Dimensions, ScrollView, StyleSheet, View } from 'react-native'
 
 import AppModal from '../common/app-modal'
 import AppSwitch from '../common/app-switch'
@@ -19,7 +19,7 @@ import { blank, save, shouldShow, symtomPage } from '../helpers/cycle-day'
 
 import { shared as sharedLabels } from '../../i18n/en/labels'
 import info from '../../i18n/en/symptom-info'
-import { Containers, Sizes } from '../../styles/redesign'
+import { Colors, Containers, Sizes, Spacing } from '../../styles'
 
 class SymptomEditView extends Component {
 
@@ -151,7 +151,6 @@ class SymptomEditView extends Component {
       <AppModal onClose={onClose}>
         <ScrollView
           contentContainerStyle={styles.modalContainer}
-          pagingEnabled={true}
           style={styles.modalWindow}
         >
           <View style={styles.headerContainer}>
@@ -165,7 +164,7 @@ class SymptomEditView extends Component {
           }
           {shouldTabGroup && symtomPage[symptom].selectTabGroups.map(group => {
             return (
-              <Segment key={group.key}>
+              <Segment key={group.key} style={styles.segmentBorder}>
                 <AppText style={styles.title}>{group.title}</AppText>
                 <SelectTabGroup
                   activeButton={data[group.key]}
@@ -183,7 +182,7 @@ class SymptomEditView extends Component {
               && Object.keys(group.options).includes('other')
 
             return (
-              <Segment key={group.key}>
+              <Segment key={group.key} style={styles.segmentBorder} >
                 <AppText style={styles.title}>{group.title}</AppText>
                 <SelectBoxGroup
                   labels={group.options}
@@ -203,7 +202,7 @@ class SymptomEditView extends Component {
           })
           }
           {shouldShowExclude &&
-            <Segment>
+            <Segment style={styles.segmentBorder} >
               <AppSwitch
                 onToggle={this.onExcludeToggle}
                 text={symtomPage[symptom].excludeText}
@@ -212,7 +211,7 @@ class SymptomEditView extends Component {
             </Segment>
           }
           {shouldShowNote &&
-            <Segment>
+            <Segment style={styles.segmentBorder} >
               <AppText>{symtomPage[symptom].note}</AppText>
               <AppTextInput
                 multiline={true}
@@ -225,15 +224,17 @@ class SymptomEditView extends Component {
           }
           <View style={styles.buttonsContainer}>
             <Button iconName={iconName} isSmall onPress={this.onPressLearnMore}>
-              learn more
+              {sharedLabels.learnMore}
             </Button>
             <Button isSmall onPress={this.onRemove}>
-              remove
+              {sharedLabels.remove}
+            </Button>
+            <Button isCTA isSmall onPress={this.onSave}>
+              {sharedLabels.save}
             </Button>
-            <Button isCTA isSmall onPress={this.onSave}>save</Button>
           </View>
           {shouldShowInfo &&
-            <Segment last>
+            <Segment last style={styles.segmentBorder} >
               <AppText>{info[symptom].text}</AppText>
             </Segment>
           }
@@ -250,19 +251,23 @@ const styles = StyleSheet.create({
   headerContainer: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
-    paddingVertical: Sizes.tiny,
+    paddingVertical: Spacing.tiny,
   },
   modalContainer: {
-    flexGrow: 1,
-    padding: Sizes.small
+    flex: 1,
+    padding: Spacing.small,
+    paddingBottom: Spacing.base
   },
   modalWindow: {
     backgroundColor: 'white',
     borderRadius: 10,
     marginVertical: Sizes.huge * 2,
+    position: 'absolute',
     minHeight: '40%',
-    height: '70%',
-    position: 'absolute'
+    maxHeight: Dimensions.get('window').height * 0.7
+  },
+  segmentBorder: {
+    borderBottomColor: Colors.greyLight
   },
   title: {
     fontSize: Sizes.subtitle
diff --git a/components/cycle-day/symptom-page-title.js b/components/cycle-day/symptom-page-title.js
index 3b84869..3ef0967 100644
--- a/components/cycle-day/symptom-page-title.js
+++ b/components/cycle-day/symptom-page-title.js
@@ -14,7 +14,7 @@ import {
   isTomorrowInFuture,
   isYesterdayInFuture
 } from '../helpers/cycle-day'
-import { Colors, Containers, Spacing, Typography } from '../../styles/redesign'
+import { Colors, Containers, Spacing, Typography } from '../../styles'
 
 const SymptomPageTitle = ({
   date,
diff --git a/components/cycle-day/temperature.js b/components/cycle-day/temperature.js
index 7a8b7d1..653133a 100644
--- a/components/cycle-day/temperature.js
+++ b/components/cycle-day/temperature.js
@@ -15,7 +15,7 @@ import { isTemperatureOutOfRange, isPreviousTemperature } from '../helpers/cycle
 
 import { temperature as labels } from '../../i18n/en/cycle-day'
 
-import { Colors, Containers, Sizes, Spacing } from '../../styles/redesign'
+import { Colors, Containers, Sizes, Spacing } from '../../styles'
 
 const formatTemperature = value => value === null
   ? value
diff --git a/components/header/hamburger-menu.js b/components/header/hamburger-menu.js
index f93dc68..8b59b27 100644
--- a/components/header/hamburger-menu.js
+++ b/components/header/hamburger-menu.js
@@ -4,7 +4,7 @@ import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
 import AppIcon from '../common/app-icon'
 import MenuItem from './menu-item'
 
-import { Colors, Sizes } from '../../styles/redesign'
+import { Colors, Sizes } from '../../styles'
 import settingsLabels from '../../i18n/en/settings'
 
 const { menuItems } = settingsLabels
diff --git a/components/header/index.js b/components/header/index.js
index 9280d90..1184506 100644
--- a/components/header/index.js
+++ b/components/header/index.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import Logo from './logo'
 import HamburgerMenu from './hamburger-menu'
 
-import { Colors, Containers, Sizes } from '../../styles/redesign'
+import { Colors, Containers, Sizes } from '../../styles'
 
 const Header = ({ isSideMenuEnabled }) => {
 
diff --git a/components/header/logo.js b/components/header/logo.js
index b05080a..4bd63fe 100644
--- a/components/header/logo.js
+++ b/components/header/logo.js
@@ -7,7 +7,7 @@ import AppText from '../common/app-text'
 import { connect } from 'react-redux'
 import { navigate } from '../../slices/navigation'
 
-import { Colors, Fonts, Sizes } from '../../styles/redesign'
+import { Colors, Fonts, Sizes } from '../../styles'
 
 const Logo = ({ navigate }) => {
   return(
diff --git a/components/header/menu-item.js b/components/header/menu-item.js
index d848059..d7b1a46 100644
--- a/components/header/menu-item.js
+++ b/components/header/menu-item.js
@@ -7,7 +7,7 @@ import AppText from '../common/app-text'
 import { connect } from 'react-redux'
 import { navigate } from '../../slices/navigation'
 
-import { Typography } from '../../styles/redesign'
+import { Typography } from '../../styles'
 
 const MenuItem = ({ item, navigate, closeMenu }) => {
   const { component, name } = item
diff --git a/components/helpers/calendar.js b/components/helpers/calendar.js
new file mode 100644
index 0000000..c29318b
--- /dev/null
+++ b/components/helpers/calendar.js
@@ -0,0 +1,67 @@
+import { LocalDate } from 'js-joda'
+
+import { Colors, Fonts } from '../../styles'
+
+const { shades } = Colors.iconColors.bleeding
+
+export const toCalFormat = (bleedingDaysSortedByDate) => {
+  const todayDateString = LocalDate.now().toString()
+
+  return bleedingDaysSortedByDate.reduce((acc, day) => {
+    acc[day.date] = {
+      customStyles: {
+        container: {
+          backgroundColor: shades[day.bleeding.value],
+        }
+      }
+    }
+    if (day.date === todayDateString) {
+      acc[day.date].customStyles.text = styles.calendarToday
+    }
+    return acc
+  }, {})
+}
+
+export const predictionToCalFormat = (predictedDays) => {
+  if (!predictedDays.length) return {}
+  const todayDateString = LocalDate.now().toString()
+  const middleIndex = (predictedDays[0].length - 1) / 2
+  return predictedDays.reduce((acc, setOfDays) => {
+    setOfDays.reduce((accSet, day, i) => {
+      accSet[day] = {
+        customStyles: {
+          container: {
+            borderColor: (i === middleIndex) ? shades[3] : shades[0],
+            borderStyle: (i === middleIndex) ? 'solid' : 'dashed',
+            borderWidth: 1,
+          },
+
+        }
+      }
+      if (day === todayDateString) {
+        accSet[day].customStyles.text = styles.calendarToday
+      }
+
+      return accSet
+    }, acc)
+    return acc
+  }, {})
+}
+
+export const todayToCalFormat = () => {
+  const todayDateString = LocalDate.now().toString()
+  const todayFormated = {}
+  todayFormated[todayDateString] = {
+    customStyles: {
+      text: styles.calendarToday
+    }
+  }
+  return todayFormated
+}
+
+const styles = {
+  calendarToday: {
+    fontFamily: Fonts.bold,
+    color: Colors.purple
+  },
+}
\ No newline at end of file
diff --git a/components/home.js b/components/home.js
index bff1c4c..888f289 100644
--- a/components/home.js
+++ b/components/home.js
@@ -15,8 +15,8 @@ import cycleModule from '../lib/cycle'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
 import { determinePredictionText, dateEnding } from './helpers/home'
 
-import { Colors, Fonts, Sizes, Spacing } from '../styles/redesign'
-import { homeRedesign as labels, home as cycle } from '../i18n/en/labels'
+import { Colors, Fonts, Sizes, Spacing } from '../styles'
+import { home as labels } from '../i18n/en/labels'
 
 class Home extends Component {
 
@@ -36,7 +36,7 @@ class Home extends Component {
       getFertilityStatusForDay(this.todayDateString)
     const prediction = getPredictedMenses()
 
-    this.cycleDayText = !this.cycleDayNumber ? cycle.cycleDayNotEnoughInfo
+    this.cycleDayText = !this.cycleDayNumber ? labels.cycleDayNotEnoughInfo
       : `${this.cycleDayNumber}${dateEnding[this.cycleDayNumber] || dateEnding['default']}`
     this.phase = phase
     this.phaseText = !phase ? statusText
diff --git a/components/license.js b/components/license.js
index 08384e9..8c1bab7 100644
--- a/components/license.js
+++ b/components/license.js
@@ -11,7 +11,7 @@ import { saveLicenseFlag } from '../local-storage'
 
 import { shared } from '../i18n/en/labels'
 import settingsLabels from '../i18n/en/settings'
-import { Containers } from '../styles/redesign'
+import { Containers } from '../styles'
 
 const labels = settingsLabels.license
 
diff --git a/components/menu/index.js b/components/menu/index.js
index ab7c3c9..2d329d0 100644
--- a/components/menu/index.js
+++ b/components/menu/index.js
@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native'
 
 import MenuItem from './menu-item'
 
-import { Containers } from '../../styles/redesign'
+import { Containers } from '../../styles'
 import { pages } from '../pages'
 
 const Menu = () => {
diff --git a/components/menu/menu-item.js b/components/menu/menu-item.js
index fc26212..fc1c1f8 100644
--- a/components/menu/menu-item.js
+++ b/components/menu/menu-item.js
@@ -7,7 +7,7 @@ import Icon from '../common/menu-icon'
 import { connect } from 'react-redux'
 import { getNavigation, navigate } from '../../slices/navigation'
 
-import { Colors, Containers, Fonts, Sizes, Spacing } from '../../styles/redesign'
+import { Colors, Containers, Fonts, Sizes, Spacing } from '../../styles'
 
 const MenuItem = ({ component, icon, label, navigate, navigation }) => {
   const isActive = (component === navigation.currentPage)
diff --git a/components/password-prompt.js b/components/password-prompt.js
index 0b9b908..14203df 100644
--- a/components/password-prompt.js
+++ b/components/password-prompt.js
@@ -11,7 +11,7 @@ import Header from './header'
 import { saveEncryptionFlag } from '../local-storage'
 import { requestHash, deleteDbAndOpenNew, openDb } from '../db'
 import { passwordPrompt as labels, shared } from '../i18n/en/labels'
-import { Containers, Spacing } from '../styles/redesign'
+import { Containers, Spacing } from '../styles'
 
 const cancelButton = { text: shared.cancel, style: 'cancel' }
 
diff --git a/components/settings/shared/alert-error.js b/components/settings/common/alert-error.js
similarity index 100%
rename from components/settings/shared/alert-error.js
rename to components/settings/common/alert-error.js
diff --git a/components/settings/shared/confirm-with-password.js b/components/settings/common/confirm-with-password.js
similarity index 97%
rename from components/settings/shared/confirm-with-password.js
rename to components/settings/common/confirm-with-password.js
index ad58313..f96978a 100644
--- a/components/settings/shared/confirm-with-password.js
+++ b/components/settings/common/confirm-with-password.js
@@ -7,7 +7,7 @@ import AppTextInput from '../../common/app-text-input'
 import Button from '../../common/button'
 
 import { requestHash, openDb } from '../../../db'
-import { Containers } from '../../../styles/redesign'
+import { Containers } from '../../../styles'
 import settings from '../../../i18n/en/settings'
 import { shared } from '../../../i18n/en/labels'
 
diff --git a/components/settings/shared/password-field.js b/components/settings/common/password-field.js
similarity index 100%
rename from components/settings/shared/password-field.js
rename to components/settings/common/password-field.js
diff --git a/components/settings/shared/settings-button.js b/components/settings/common/settings-button.js
similarity index 100%
rename from components/settings/shared/settings-button.js
rename to components/settings/common/settings-button.js
diff --git a/components/settings/data-management/delete-data.js b/components/settings/data-management/delete-data.js
index 87f094d..83c70d3 100644
--- a/components/settings/data-management/delete-data.js
+++ b/components/settings/data-management/delete-data.js
@@ -5,8 +5,8 @@ import PropTypes from 'prop-types'
 
 import Button from '../../common/button'
 
-import ConfirmWithPassword from '../shared/confirm-with-password'
-import alertError from '../shared/alert-error'
+import ConfirmWithPassword from '../common/confirm-with-password'
+import alertError from '../common/alert-error'
 
 import { clearDb, isDbEmpty } from '../../../db'
 import { hasEncryptionObservable } from '../../../local-storage'
@@ -94,7 +94,7 @@ export default class DeleteData extends Component {
     }
 
     return (
-      <Button isCTA isSmall={false} onPress={this.alertBeforeDeletion}>
+      <Button isCTA onPress={this.alertBeforeDeletion}>
         {settings.deleteSegment.title}
       </Button>
     )
diff --git a/components/settings/data-management/export-dialog.js b/components/settings/data-management/export-dialog.js
index 4b47c2c..8200b68 100644
--- a/components/settings/data-management/export-dialog.js
+++ b/components/settings/data-management/export-dialog.js
@@ -2,7 +2,7 @@ import Share from 'react-native-share'
 
 import { getCycleDaysSortedByDate } from '../../../db'
 import getDataAsCsvDataUri from '../../../lib/import-export/export-to-csv'
-import alertError from '../shared/alert-error'
+import alertError from '../common/alert-error'
 import settings from '../../../i18n/en/settings'
 import { EXPORT_FILE_NAME } from './constants'
 import RNFS from 'react-native-fs'
diff --git a/components/settings/data-management/import-dialog.js b/components/settings/data-management/import-dialog.js
index 23899a1..9197524 100644
--- a/components/settings/data-management/import-dialog.js
+++ b/components/settings/data-management/import-dialog.js
@@ -4,7 +4,7 @@ import rnfs from 'react-native-fs'
 import importCsv from '../../../lib/import-export/import-from-csv'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
 import labels from '../../../i18n/en/settings'
-import alertError from '../shared/alert-error'
+import alertError from '../common/alert-error'
 
 export function openImportDialog(onImportData) {
   Alert.alert(
diff --git a/components/settings/data-management/index.js b/components/settings/data-management/index.js
index 239d3f0..40b81d0 100644
--- a/components/settings/data-management/index.js
+++ b/components/settings/data-management/index.js
@@ -66,13 +66,13 @@ export default class DataManagement extends Component {
           <AppPage>
             <Segment title={labels.export.button}>
               <AppText>{labels.export.segmentExplainer}</AppText>
-              <Button isCTA isSmall={false} onPress={this.startExport}>
+              <Button isCTA onPress={this.startExport}>
                 {labels.export.button}
               </Button>
             </Segment>
             <Segment title={labels.import.button}>
               <AppText>{labels.import.segmentExplainer}</AppText>
-              <Button isCTA isSmall={false} onPress={this.startImport}>
+              <Button isCTA onPress={this.startImport}>
                 {labels.import.button}
               </Button>
             </Segment>
diff --git a/components/settings/menu-item.js b/components/settings/menu-item.js
index 7739b06..8348962 100644
--- a/components/settings/menu-item.js
+++ b/components/settings/menu-item.js
@@ -9,7 +9,7 @@ import Segment from '../common/segment'
 import { connect } from 'react-redux'
 import { navigate } from '../../slices/navigation'
 
-import { Colors, Containers, Sizes } from '../../styles/redesign'
+import { Colors, Containers, Sizes } from '../../styles'
 
 const MenuItem = ({ item, last, navigate }) => {
   return (
diff --git a/components/settings/nfp-settings/index.js b/components/settings/nfp-settings/index.js
index 8e19573..378e6f4 100644
--- a/components/settings/nfp-settings/index.js
+++ b/components/settings/nfp-settings/index.js
@@ -9,7 +9,7 @@ import TemperatureSlider from './temperature-slider'
 import Segment from '../../common/segment'
 
 import { useCervixObservable, saveUseCervix } from '../../../local-storage'
-import { Colors, Spacing, Typography } from '../../../styles/redesign'
+import { Colors, Spacing, Typography } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 
 export default class Settings extends Component {
diff --git a/components/settings/nfp-settings/slider-label.js b/components/settings/nfp-settings/slider-label.js
index d251003..4fbda08 100644
--- a/components/settings/nfp-settings/slider-label.js
+++ b/components/settings/nfp-settings/slider-label.js
@@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native'
 
 import AppText from '../../common/app-text'
 
-import { Fonts, Sizes } from '../../../styles/redesign'
+import { Fonts, Sizes } from '../../../styles'
 
 const sliderRadius = 5
 const width = 50
diff --git a/components/settings/nfp-settings/temperature-slider.js b/components/settings/nfp-settings/temperature-slider.js
index 14adf12..01cfdb0 100644
--- a/components/settings/nfp-settings/temperature-slider.js
+++ b/components/settings/nfp-settings/temperature-slider.js
@@ -2,11 +2,11 @@ import React, { Component } from 'react'
 import { StyleSheet, View } from 'react-native'
 import Slider from '@ptomasroos/react-native-multi-slider'
 
-import alertError from '../shared/alert-error'
+import alertError from '../common/alert-error'
 import SliderLabel from './slider-label'
 
 import { scaleObservable, saveTempScale } from '../../../local-storage'
-import { Colors, Sizes } from '../../../styles/redesign'
+import { Colors, Sizes } from '../../../styles'
 import labels from '../../../i18n/en/settings'
 import { TEMP_MIN, TEMP_MAX, TEMP_SLIDER_STEP } from '../../../config'
 
diff --git a/components/settings/password/delete.js b/components/settings/password/delete.js
index e08d133..8f078d7 100644
--- a/components/settings/password/delete.js
+++ b/components/settings/password/delete.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 import Button from '../../common/button'
-import ConfirmWithPassword from '../shared/confirm-with-password'
+import ConfirmWithPassword from '../common/confirm-with-password'
 
 import { changeEncryptionAndRestartApp } from '../../../db'
 import labels from '../../../i18n/en/settings'
diff --git a/components/settings/password/enter-new-password.js b/components/settings/password/enter-new-password.js
index 0c8617f..5fc8d71 100644
--- a/components/settings/password/enter-new-password.js
+++ b/components/settings/password/enter-new-password.js
@@ -7,7 +7,7 @@ import AppTextInput from '../../common/app-text-input'
 import Button from '../../common/button'
 
 import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
-import { Colors, Spacing } from '../../../styles/redesign'
+import { Colors, Spacing } from '../../../styles'
 import settings from '../../../i18n/en/settings'
 
 const LISTENER_TYPE = 'create-or-change-pw'
diff --git a/components/settings/password/update.js b/components/settings/password/update.js
index da3c5d4..a711262 100644
--- a/components/settings/password/update.js
+++ b/components/settings/password/update.js
@@ -5,7 +5,7 @@ import Button from '../../common/button'
 
 import EnterNewPassword from './enter-new-password'
 import showBackUpReminder from './show-backup-reminder'
-import ConfirmWithPassword from '../shared/confirm-with-password'
+import ConfirmWithPassword from '../common/confirm-with-password'
 
 import settings from '../../../i18n/en/settings'
 
diff --git a/components/stats.js b/components/stats.js
index daf1e05..fd1af89 100644
--- a/components/stats.js
+++ b/components/stats.js
@@ -10,7 +10,7 @@ import cycleModule from '../lib/cycle'
 import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
 import {stats as labels} from '../i18n/en/labels'
 
-import { Sizes, Spacing, Typography } from '../styles/redesign'
+import { Sizes, Spacing, Typography } from '../styles'
 
 const image = require('../assets/cycle-icon.png')
 
diff --git a/i18n/en/labels.js b/i18n/en/labels.js
index 5f6adf5..ce66229 100644
--- a/i18n/en/labels.js
+++ b/i18n/en/labels.js
@@ -1,7 +1,10 @@
 import labels from './settings'
 const settingsTitles = labels.menuItems
 
-export const homeRedesign = {
+export const home = {
+  cycleDayNotEnoughInfo: "We don't have enough information to know what your current cycle day is.",
+  unknown: '?',
+  phase: n => `${['1st', '2nd', '3rd'][n - 1]} cycle phase`,
   cycleDay: ' day of your cycle',
   cyclePhase: ' cycle phase - ',
   addData: 'add data for today'
@@ -23,12 +26,13 @@ export const shared = {
   ok: 'OK',
   confirmToProceed: 'Confirm to proceed',
   date: 'Date',
-  cycleDayWithLinebreak: 'Cycle\nday',
   loading: 'Loading ...',
   noDataWarning: 'You haven\'t entered any data yet.',
   noTemperatureWarning: 'You haven\'t entered any temperature data yet.',
   noDataButtonText: 'Start entering data now',
   enter: 'Enter',
+  remove: 'Remove',
+  learnMore: 'Learn more'
 }
 
 export const headerTitles = {
@@ -51,17 +55,7 @@ export const headerTitles = {
   desire: 'Desire',
   sex: 'Sex',
   pain: 'Pain',
-  mood: 'Mood',
-  InfoSymptom: 'Info'
-}
-
-export const menuTitles = {
-  Home: 'Home',
-  Calendar: 'Calendar',
-  Chart: 'Chart',
-  Stats: 'Stats',
-  Settings: 'Settings',
-  PasswordPrompt: 'Drip'
+  mood: 'Mood'
 }
 
 export const stats = {
@@ -96,22 +90,6 @@ export const passwordPrompt = {
   reallyDeleteData: 'Yes, I am sure'
 }
 
-export const home = {
-  editToday: 'add data for today',
-  cycleDayNotEnoughInfo: "We don't have enough information to know what your current cycle day is.",
-  unknown: '?',
-  cycleDayKnown: d => `Your last period started ${getDaysDescriptor(d)}.`,
-  trackPeriod: 'track your period',
-  checkFertility: 'check your fertility',
-  phase: n => `${['1st', '2nd', '3rd'][n - 1]} cycle phase`,
-}
-
-const getDaysDescriptor = cycleDayNumber => {
-  if (cycleDayNumber === 1) return 'today'
-  if (cycleDayNumber === 2) return 'yesterday'
-  return `${cycleDayNumber - 1} days ago`
-}
-
 export const fertilityStatus = {
   fertile: 'fertile',
   infertile: 'infertile',
diff --git a/styles/index.js b/styles/index.js
index 787171e..080add1 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -1,490 +1,6 @@
-import { StyleSheet } from 'react-native'
+import Colors from './colors'
+import Containers from './containers'
+import Spacing from './spacing'
+import Typography, { fonts as Fonts, sizes as Sizes } from './typography'
 
-export const primaryColor = '#000D19'
-export const secondaryColor = '#4FAFA7'
-export const secondaryColorLight = '#91749d'
-export const fontOnPrimaryColor = 'white'
-export const shadesOfRed = [
-  '#e7999e',
-  '#db666d',
-  '#cf323d',
-  '#c3000d'
-] // light to dark
-export const cycleDayColor = '#29287f'
-export const periodColor = '#802249'
-
-const headerFont = 'Prompt-ExtraLight'
-
-const textFont = 'Jost-400-Book'
-const textFontBold = 'Jost-700-Bold'
-const textFontItalic = 'OpenSans-LightItalic'
-
-const regularSize = 16
-const hintSize = 14
-
-const defaultBottomMargin = 5
-const defaultIndentation = 10
-const defaultTopMargin = 10
-const colorInActive = '#666666'
-
-export const calendarTheme = {
-  textDayFontFamily: textFont,
-  textMonthFontFamily: textFontBold,
-  textDayHeaderFontFamily: textFont,
-  textDayFontSize: regularSize,
-  textMonthFontSize: regularSize,
-  textDayHeaderFontSize: hintSize,
-  textSectionTitleColor: 'grey'
-}
-
-export default StyleSheet.create({
-  appText: {
-    color: 'black',
-    fontFamily: textFont,
-    fontSize: regularSize,
-    letterSpacing: 0.5
-  },
-  hint: {
-    fontFamily: textFontItalic,
-    fontSize: hintSize,
-  },
-  paragraph: {
-    marginBottom: defaultBottomMargin
-  },
-  emphasis: {
-    fontWeight: 'bold',
-    fontFamily: textFontBold,
-    color: secondaryColor,
-  },
-  link: {
-    color: cycleDayColor,
-    textDecorationLine: 'underline'
-  },
-  title: {
-    fontSize: 18,
-    color: 'black',
-    marginBottom: defaultBottomMargin,
-  },
-  textWrappingView: {
-    marginHorizontal: defaultIndentation,
-    marginTop: defaultTopMargin
-  },
-  welcome: {
-    fontSize: 20,
-    fontFamily: 'serif',
-    margin: 30,
-    textAlign: 'center',
-    textAlignVertical: 'center'
-  },
-  dateHeader: {
-    fontSize: 20,
-    fontFamily: headerFont,
-    color: fontOnPrimaryColor,
-    textAlign: 'center',
-  },
-  headerText: {
-    fontSize: 30,
-    fontFamily: headerFont,
-    color: fontOnPrimaryColor,
-    textAlign: 'center',
-    paddingBottom: 4
-  },
-  accentCircle: {
-    borderColor: secondaryColor,
-    borderWidth: 1,
-    width: 40,
-    height: 40,
-    borderRadius: 100,
-    position: 'absolute',
-    alignSelf: 'center',
-  },
-  errorMessage: {
-    color: shadesOfRed[2],
-    marginLeft: 10,
-    marginTop: 6
-  },
-  button: {
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderRadius: 5,
-    alignItems: 'center',
-  },
-  homeButton: {
-    width: 200,
-    marginTop: 5
-  },
-  homeButtonText: {
-    color: fontOnPrimaryColor
-  },
-  homeView: {
-    alignItems: 'center',
-    marginVertical: 40
-  },
-  homeDescriptionText: {
-    width: 200,
-    marginBottom: defaultBottomMargin,
-  },
-  homeElement: {
-    marginBottom: 30,
-    flexDirection: 'row',
-  },
-  homeIconTextWrapper: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 80,
-    position: 'absolute',
-  },
-  homeIconAndText: {
-    justifyContent: 'center'
-  },
-  homeCircle: {
-    borderRadius: 100,
-    borderWidth: 2.3,
-    width: 80,
-    height: 80,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderColor: secondaryColor,
-  },
-  iconText: {
-    fontSize: 25
-  },
-  cycleDayNumber: {
-    fontSize: 15,
-    color: fontOnPrimaryColor,
-    textAlign: 'center',
-    fontFamily: headerFont
-  },
-  symptomViewHeading: {
-    fontWeight: 'bold',
-    fontFamily: textFontBold,
-    flex: 1
-  },
-  symptomSection: {
-    marginBottom: 10
-  },
-  symptomBoxImage: {
-    width: 50,
-    height: 50
-  },
-  symptomBoxesView: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-evenly'
-  },
-  symptomBox: {
-    borderColor: secondaryColor,
-    borderStyle: 'solid',
-    borderWidth: 1,
-    borderTopLeftRadius: 10,
-    borderTopRightRadius: 10,
-    alignItems: 'center',
-    marginTop: '10%',
-    paddingVertical: '6%',
-    marginHorizontal: 1,
-    width: 110,
-    height: 80,
-  },
-  symptomBoxActive: {
-    backgroundColor: secondaryColor,
-  },
-  symptomTextActive: {
-    color: fontOnPrimaryColor
-  },
-  symptomInFuture: {
-    borderColor: 'lightgrey',
-    color: 'lightgrey'
-  },
-  symptomDataBox: {
-    borderColor: secondaryColor,
-    borderStyle: 'solid',
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    borderBottomWidth: 1,
-    borderBottomLeftRadius: 10,
-    borderBottomRightRadius: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '3%',
-    marginHorizontal: 1,
-    width: 110,
-    height: 50,
-  },
-  symptomDataText: {
-    fontSize: 12
-  },
-  header: {
-    backgroundColor: primaryColor,
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 80
-  },
-  navigationArrow: {
-    padding: 20,
-    position: 'absolute'
-  },
-  navigationArrowLeft: { left: 0 },
-  navigationArrowRight: { right: 0 },
-  menu: {
-    backgroundColor: primaryColor,
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    flexDirection: 'row',
-    height: 60
-  },
-  menuItem: {
-    alignItems: 'center',
-    flex: 1,
-    paddingVertical: 15
-  },
-  menuText: {
-    color: fontOnPrimaryColor,
-    fontFamily: headerFont
-  },
-  menuTextInActive: {
-    color: colorInActive,
-    fontFamily: headerFont
-  },
-  temperatureTextInput: {
-    fontSize: 20,
-    color: 'black',
-    textAlign: 'center',
-    width: '30%'
-  },
-  temperatureTextInputSuggestion: {
-    color: '#939393'
-  },
-  symptomEditButton: {
-    width: 130
-  },
-  framedSegment: {
-    borderColor: secondaryColor,
-    borderStyle: 'solid',
-    borderWidth: 1,
-    borderRadius: 10,
-    marginTop: defaultTopMargin,
-    marginHorizontal: defaultIndentation,
-    padding: 7,
-    fontFamily: textFont
-  },
-  framedSegmentLast: {
-    marginBottom: defaultTopMargin,
-  },
-  framedSegmentTitle: {
-    fontWeight: 'bold',
-    fontFamily: textFontBold
-  },
-  framedSegmentInlineChildren: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  infoPopUpWrapper: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%'
-  },
-  infoPopUp: {
-    backgroundColor: 'white',
-    padding: 15,
-    marginHorizontal: 20,
-    marginTop: 20,
-    maxHeight: '92%'
-  },
-  dimmed: {
-    position: 'absolute',
-    backgroundColor: 'black',
-    opacity: 0.5,
-    width: '100%',
-    height: '100%'
-  },
-  infoSymptomClose: {
-    alignItems: 'flex-end'
-  },
-  infoSymptomText: {
-    marginTop: 10
-  },
-  settingsButton: {
-    padding: 10,
-    alignItems: 'center',
-    margin: 10,
-    borderRadius: 5,
-  },
-  settingsButtonAccent: {
-    backgroundColor: secondaryColor
-  },
-  settingsButtonDisabled: {
-    backgroundColor: colorInActive
-  },
-  settingsButtonText: {
-    color: fontOnPrimaryColor
-  },
-  settingsButtonSecondaryText: {
-    color: secondaryColor
-
-  },
-  statsRow: {
-    flexDirection: 'row',
-    flexWrap: 'wrap'
-  },
-  menuLabel: {
-    fontSize: 15,
-    color: fontOnPrimaryColor
-  },
-  selectBox: {
-    backgroundColor: 'lightgrey',
-    marginRight: 7,
-    marginVertical: 5,
-    paddingHorizontal: 15,
-    paddingVertical: 10,
-    borderRadius: 10
-  },
-  selectBoxActive: {
-    backgroundColor: secondaryColor,
-    color: fontOnPrimaryColor
-  },
-  selectBoxTextActive: {
-    color: fontOnPrimaryColor
-  },
-  selectBoxSection: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginTop: 7,
-  },
-  selectTabGroup: {
-    marginTop: 7,
-    flexDirection: 'row'
-  },
-  selectTab: {
-    backgroundColor: 'lightgrey',
-    borderStyle: 'solid',
-    borderLeftWidth: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 15,
-    borderColor: 'white',
-    marginBottom: 3,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  selectTabActive: {
-    backgroundColor: secondaryColor,
-    color: fontOnPrimaryColor
-  },
-  selectTabLast: {
-    borderTopRightRadius: 10,
-    borderBottomRightRadius: 10,
-  },
-  selectTabFirst: {
-    borderTopLeftRadius: 10,
-    borderBottomLeftRadius: 10,
-    borderLeftWidth: null
-  },
-  page: {
-    marginHorizontal: 10,
-    marginTop: 20,
-  },
-  calendarToday: {
-    fontWeight: 'bold',
-    fontSize: 20,
-    color: secondaryColor,
-    marginTop: 1
-  },
-  passwordField: {
-    marginHorizontal: 10,
-    marginTop: 10
-  },
-  textInputField: {
-    padding: 10,
-    marginVertical: 10,
-    backgroundColor: 'white',
-    borderColor: secondaryColor,
-    borderStyle: 'solid',
-    borderWidth: 1,
-  },
-  passwordPromptPage: {
-    padding: 30,
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  passwordPromptField: {
-    padding: 10,
-    marginTop: 10,
-    marginHorizontal: 10,
-    borderBottomWidth: 3,
-    borderBottomColor: primaryColor,
-    width: '100%',
-    fontSize: 20,
-    marginVertical: 20
-  },
-  passwordPromptButton: {
-    backgroundColor: secondaryColor,
-    padding: 10,
-    alignItems: 'center',
-    margin: 10,
-    width: '100%',
-    borderRadius: 10
-  },
-  passwordPromptButtonText: {
-    color: fontOnPrimaryColor,
-    fontSize: 20
-  },
-  passwordPromptForgotPasswordText: {
-    marginTop: 20,
-    color: 'grey'
-  },
-  headerDeleteButton: {
-    paddingHorizontal: 20,
-    paddingVertical: 20,
-    position: 'absolute',
-    right: 0
-  },
-  infoButtonSymptomView: {
-    position: 'absolute',
-    padding: 15,
-    right: 0
-  },
-  licensePage: {
-    paddingVertical: 20,
-    paddingHorizontal: 10
-  },
-  licenseButtons: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    marginTop: 40
-  },
-  licenseButton: {
-    marginLeft: 30,
-    width: 100
-  }
-})
-
-export const iconStyles = {
-  navigationArrow: {
-    size: 20,
-    color: fontOnPrimaryColor
-  },
-  symptomHeaderIcons: {
-    size: 20,
-    color: fontOnPrimaryColor
-  },
-  symptomBox: {
-    size: 40
-  },
-  symptomBoxActive: {
-    color: fontOnPrimaryColor
-  },
-  info: {
-    color: secondaryColor,
-    fontSize: 25
-  },
-  menuIcon: {
-    size: 20,
-    color: fontOnPrimaryColor
-  },
-  menuIconInactive: {
-    color: colorInActive,
-  },
-  infoPopUpClose: {
-    size: 25
-  }
-}
+export { Colors, Containers, Fonts, Spacing, Sizes, Typography }
diff --git a/styles/redesign.js b/styles/redesign.js
deleted file mode 100644
index 080add1..0000000
--- a/styles/redesign.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Colors from './colors'
-import Containers from './containers'
-import Spacing from './spacing'
-import Typography, { fonts as Fonts, sizes as Sizes } from './typography'
-
-export { Colors, Containers, Fonts, Spacing, Sizes, Typography }