Calendar redesign

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

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'
 

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 }) => {

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 = {

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)

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,

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 }) => {

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 }) => {

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,

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 }) => {

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

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

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 }]

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'
 

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,

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 (

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

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

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,

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 (

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'
 

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

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
   },

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 (

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 {

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 (

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 (

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 {

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

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,

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

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

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 }) => {
 

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(

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

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
+  },
+}

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

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
 

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 = () => {

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)

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' }
 

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'
 

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

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'

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(

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>

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 (

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 {

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

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'
 

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'

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'

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'
 

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