Fix styles issue

components/calendar.js

@@ -11,13 +11,12 @@ import { getBleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
 import nothingChanged from '../db/db-unchanged'
 import {
+  calendarTheme,
   predictionToCalFormat,
   toCalFormat,
   todayToCalFormat
 } from './helpers/calendar'
 
-import { Colors, Fonts, Sizes } from '../../styles'
-
 class CalendarView extends Component {
   static propTypes = {
     setDate: PropTypes.func.isRequired,
@@ -88,19 +87,6 @@ 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)),

components/helpers/calendar.js

@@ -1,6 +1,6 @@
 import { LocalDate } from 'js-joda'
 
-import { Colors, Fonts } from '../../styles'
+import { Colors, Fonts, Sizes } from '../../styles'
 
 const { shades } = Colors.iconColors.bleeding
 
@@ -64,4 +64,17 @@ const styles = {
     fontFamily: Fonts.bold,
     color: Colors.purple
   },
-}
+}
+
+const calendarTheme = {
+  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,
+}