merges master into branch

styles/index.js

@@ -1,18 +1,31 @@
 import { StyleSheet } from 'react-native'
 
-export const primaryColor = '#ff7e5f'
-export const secondaryColor = '#351c4d'
+export const primaryColor = '#000D19'
+export const secondaryColor = '#4FAFA7'
 export const secondaryColorLight = '#91749d'
 export const fontOnPrimaryColor = 'white'
-export const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light to dark
+export const shadesOfRed = [
+  '#e7999e',
+  '#db666d',
+  '#cf323d',
+  '#c3000d'
+] // light to dark
+
+const fontRegular = 'Prompt-Light'
+const fontLight = 'Prompt-Thin'
+
+const regularSize = 16
 
 const defaultBottomMargin = 5
 const defaultIndentation = 10
 const defaultTopMargin = 10
+const colorInActive = '#666666'
 
 export default StyleSheet.create({
   appText: {
-    color: 'black'
+    color: 'black',
+    fontFamily: fontRegular,
+    fontSize: regularSize
   },
   paragraph: {
     marginBottom: defaultBottomMargin
@@ -31,21 +44,36 @@ export default StyleSheet.create({
   },
   welcome: {
     fontSize: 20,
+    fontFamily: 'serif',
     margin: 30,
     textAlign: 'center',
     textAlignVertical: 'center'
   },
   dateHeader: {
-    fontSize: 22,
-    fontWeight: 'bold',
+    fontSize: 20,
+    fontFamily: fontLight,
     color: fontOnPrimaryColor,
     textAlign: 'center',
   },
+  headerText: {
+    fontSize: 30,
+    fontFamily: fontLight,
+    color: fontOnPrimaryColor,
+    textAlign: 'center',
+  },
+  accentCircle: {
+    borderColor: secondaryColor,
+    borderWidth: 0.5,
+    width: 40,
+    height: 40,
+    borderRadius: 100,
+    position: 'absolute'
+  },
   cycleDayNumber: {
     fontSize: 15,
     color: fontOnPrimaryColor,
     textAlign: 'center',
-    marginLeft: 15
+    fontFamily: fontLight
   },
   symptomViewHeading: {
     fontSize: 20,
@@ -107,14 +135,14 @@ export default StyleSheet.create({
     paddingHorizontal: 15,
     alignItems: 'center',
     justifyContent: 'center',
-    height: '10%'
+    height: 80
   },
   menu: {
     backgroundColor: primaryColor,
     alignItems: 'center',
     justifyContent: 'space-between',
     flexDirection: 'row',
-    height: '12%'
+    height: 60
   },
   menuItem: {
     alignItems: 'center',
@@ -122,20 +150,19 @@ export default StyleSheet.create({
     paddingVertical: 15
   },
   menuText: {
-    color: fontOnPrimaryColor
+    color: fontOnPrimaryColor,
+    fontFamily: fontLight
   },
   menuTextInActive: {
-    color: 'lightgrey'
+    color: colorInActive
   },
   headerCycleDay: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    height: '15%'
   },
   headerSymptom: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    height: '12%'
   },
   navigationArrow: {
     fontSize: 60,
@@ -299,7 +326,7 @@ export const iconStyles = {
     color: fontOnPrimaryColor
   },
   symptomHeaderIcons: {
-    size: 30,
+    size: 20,
     color: fontOnPrimaryColor
   },
   symptomBox: {
@@ -313,6 +340,6 @@ export const iconStyles = {
     color: fontOnPrimaryColor
   },
   menuIconInactive: {
-    color: 'lightgrey',
+    color: colorInActive,
   },
 }