Use icon font for home icons

assets/drip-home-icons.js

@@ -0,0 +1,4 @@
+import { createIconSetFromFontello } from 'react-native-vector-icons'
+import fontelloConfig from './fonts/config-drip-home-icons.json'
+
+export default createIconSetFromFontello(fontelloConfig)

assets/drip-icons.js

@@ -1,4 +1,4 @@
 import { createIconSetFromFontello } from 'react-native-vector-icons'
-import fontelloConfig from './fonts/config.json'
+import fontelloConfig from './fonts/config-drip-icon-font.json'
 
 export default createIconSetFromFontello(fontelloConfig)

assets/fonts/config-drip-home-icons.json

@@ -0,0 +1,38 @@
+{
+  "name": "drip-home-icons",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "3b01a0a3395a3845dd3194e1a7ad96ff",
+      "css": "drop",
+      "code": 59393,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M438.7 21.6L432.4 26.2C419.8 35.5 406.3 43.6 394.5 54.4 366.3 80.3 338.7 106.7 311.8 133.8 245.3 200.8 184.2 272.4 129.6 349.5 98.6 393.2 69.3 438.1 47.8 487.9 33.4 521.1 22.7 555.5 20.7 592.3 18.1 640.4 25.6 687 40.6 732.5 66.6 811.5 113.1 875.4 184.7 919.4H184.7C257.5 964 337.2 982.1 422.1 977.4 472.7 974.6 521.1 962.2 566.4 939.3H566.4C666.3 888.9 731.2 808.4 763.4 701.8V701.7C776.9 657 780.7 611.3 772.8 565V565C765.3 521.1 748.6 480.9 726.4 443H726.4C697.3 393.4 660.4 350 623.3 307.2 587.2 265.5 551 224.1 516.3 181.5 489.9 149.1 468 113.9 454.2 74.5V74.5C449.3 60.4 445.7 45.6 440.9 29.1ZM435.6 29.9C440.4 46.3 444.1 61.2 449.1 75.6 463.2 115.7 485.4 151.5 512.1 184.2 546.9 226.9 583.1 268.3 619.2 310 656.3 352.8 692.9 395.9 721.7 445 743.7 482.5 760.1 522 767.4 565.2 775.2 610.7 771.5 655.4 758.2 699.5 726.4 804.9 662.7 884 564 933.8 519.3 956.3 471.7 968.5 421.8 971.3 337.9 975.9 259.4 958.1 187.5 914 117 870.8 71.4 808.1 45.7 730.1 31 685.2 23.6 639.2 26.2 591.9 28 555.9 38.5 522.2 52.7 489.3 74 440.1 103.1 395.5 134 351.9 188.5 275.1 249.3 203.7 315.6 137 342.5 109.9 370.1 83.5 398.2 57.7 409.4 47.3 422.7 39.3 435.6 29.9Z",
+        "width": 798
+      },
+      "search": [
+        "drop2px"
+      ]
+    },
+    {
+      "uid": "ce239ac4aab54b2846603081216e0e84",
+      "css": "circle",
+      "code": 59392,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M271.2 13.4C284.9 14 294.1 18 300.4 24.3 306.6 30.6 310.5 40 310.8 53.8 311.3 70.7 311 87.8 310.9 105.1H310.6V115.3C310.6 136.2 310.7 157 310.5 177.9V177.9 177.9C310.5 181.3 309.6 182.3 309.1 182.7 308.6 183.1 307.8 183.7 304.9 183H304.8L304.8 182.9C303.1 182.5 302.7 182.1 302.6 182 302.6 181.9 302.4 182 302.4 180.7V180.6 180.6C302.6 148.3 303.1 116.1 303.5 83.7V83.7 83.7C303.5 75.9 304 67.5 303.7 58.7L303.7 58.7V58.7C303.3 48.2 300.6 38.7 294 31.8 287.4 24.8 277.9 21.7 267.3 21H267.3C254 20.1 241.1 20.8 228.8 20.9 201.1 21.2 173.5 21.6 145.9 21.7H145.9C142.8 21.7 141.8 21 141.4 20.7 141.1 20.4 140.6 20 140.6 17.6 140.5 15.2 141.1 14.6 141.4 14.3 141.6 14 142.1 13.5 144.5 13.5H144.5 144.6C174.1 13.4 203.5 13.4 233.1 13.4 246.2 13.4 258.9 12.9 271.2 13.4ZM742.5 56.6C743.2 56.5 745 56.4 747.9 58.1L747.9 58.1H747.9C834.2 107.1 900.3 175.2 946.7 262.8 976.6 319.3 995 379.2 1001.3 442.6 1012.7 556.6 987.8 661.9 925.8 758.2 851.7 873.1 748.8 947.6 614.9 974.9H614.9C444.5 1009.7 294.6 969.3 167.2 849.5 87.6 774.6 39.5 682.3 21.1 574.3V574.3C16.6 547.8 15.1 520.6 13.2 502.8 16.2 355.8 64.4 240.3 159 142.8 183.4 117.7 210.5 96 239.6 76.1 243 73.8 244.9 73.8 245.7 73.9 246.5 74 246.8 74.3 247.3 75 248.6 77 248.6 77.8 248.3 78.8 248 79.8 247 81.6 243.9 83.7 148.8 147.5 82.9 234.5 46.5 342.9V342.9C27 401.4 19 461.9 23.2 523.4V523.4C31.2 640.8 76.8 742.9 157.6 828 231.5 905.8 322.1 955.6 428.4 971.8 584.4 995.4 724.4 954.8 841.1 847.3H841.1C922.7 772.1 972.8 677.6 989.5 568V568C1013.4 410.6 967.3 272.1 859.7 155.8 826 119.4 786.8 89.8 744 65.6L744 65.6 744 65.5C740.6 63.7 739.6 62.1 739.5 61.6 739.3 61.1 739 60.9 740.2 58.7L740.2 58.7 740.2 58.7C741.2 56.9 741.7 56.8 742.5 56.6Z",
+        "width": 1017
+      },
+      "search": [
+        "circle2px"
+      ]
+    }
+  ]
+}

assets/home-circle.js

@@ -1,15 +0,0 @@
-import React from 'react'
-import { Group as G, Shape, Transform } from 'react-native/Libraries/ART/ReactNativeART'
-
-const circle = "m 43,12 c -27.59196,17.168 -43.07131,51.34003 -37.74253,83.40217 4.65932,33.15379 31.20731,61.73087 63.90256,68.88417 30.61528,7.42782 64.74574,-4.34916 84.21519,-29.12633 21.61526,-26.12878 24.59233,-65.67005 7.10091,-94.73675 -7.6702,-13.15691 -18.99314,-24.14869 -32.37613,-31.41826"
-const pointyPart = "m 43,32 c -0.0509,-6.38363 0.10148,-12.77739 -0.0757,-19.15472 -1.02117,-5.71918 -7.64221,-3.72111 -11.7681,-4.08628 -3.79908,0 -7.59816,0 -11.39724,0"
-const color = "#1E0B7A"
-
-export default function CycleDayIcon(props) {
-  return (
-    <G transform={new Transform().scale(props.scale)}>
-      <Shape stroke={color} strokeWidth={props.strokeWidth} d={circle}/>
-      <Shape stroke={color} strokeWidth={props.strokeWidth} d={pointyPart}/>
-    </G>
-  )
-}

assets/home-drop.js

@@ -1,14 +0,0 @@
-import React from 'react'
-import { Surface, Group as G, Shape, Transform } from 'react-native/Libraries/ART/ReactNativeART'
-
-export default function HomeDropIcon(props) {
-  return (
-    <Surface width={83} height={103.56}>
-      <G transform={new Transform().scale(props.scale).translate(-345, -330)}>
-        <Shape stroke="#89113E" strokeWidth="2" d="M492.723,455.44
- c-5.531,39.136-41.74,66.377-80.876,60.847C372.712,510.757,351,483.64,351,444.115c0-37.555,79.739-114.673,80.391-105.969
- C434.248,376.247,499.843,405.058,492.723,455.44z"/>
-      </G>
-    </Surface>
-  )
-}

components/chart/chart.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import { View, FlatList, ActivityIndicator } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
-import { Surface } from 'react-native/Libraries/ART/ReactNativeART'
 import { makeYAxisLabels, makeHorizontalGrid } from './y-axis'
 import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
@@ -13,7 +12,7 @@ import config from '../../config'
 import AppText from '../app-text'
 import { shared as labels } from '../../i18n/en/labels'
 import DripIcon from '../../assets/drip-icons'
-import CycleDayIcon from '../../assets/home-circle'
+import DripHomeIcon from '../../assets/drip-home-icons'
 import nothingChanged from '../../db/db-unchanged'
 
 const symptomIcons = {
@@ -163,15 +162,11 @@ export default class CycleChart extends Component {
               {makeYAxisLabels(this.columnHeight)}
             </View>
             <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
-              <Surface
+              <DripHomeIcon
-                width={styles.yAxis.width * 0.8}
+                name="circle"
-                height={styles.yAxis.width * 0.8}
+                size={styles.yAxis.width - 7}
-              >
+                color={styles.cycleDayColor}
-                <CycleDayIcon
+              />
-                  strokeWidth={10}
-                  scale={0.12}
-                />
-              </Surface>
               <AppText style={[
                 styles.column.label.date,
                 styles.yAxisLabels.dateLabel

components/home.js

@@ -2,17 +2,15 @@ import React, { Component } from 'react'
 import { ScrollView, View, TouchableOpacity, TouchableHighlight, Dimensions } from 'react-native'
 import { LocalDate, ChronoUnit } from 'js-joda'
 import Icon from 'react-native-vector-icons/Entypo'
-import { Surface } from 'react-native/Libraries/ART/ReactNativeART'
 import { secondaryColor, cycleDayColor, periodColor } from '../styles'
 import { home as labels, bleedingPrediction as predictLabels, shared } from '../i18n/en/labels'
-import CycleDayIcon from '../assets/home-circle'
-import Drop from '../assets/home-drop'
 import cycleModule from '../lib/cycle'
 import { getCycleDaysSortedByDate } from '../db'
 import { getFertilityStatusForDay } from '../lib/sympto-adapter'
 import styles from '../styles'
 import AppText, { AppTextLight } from './app-text'
 import nothingChanged from '../db/db-unchanged'
+import DripHomeIcon from '../assets/drip-home-icons'
 
 export default class Home extends Component {
   constructor(props) {
@@ -73,15 +71,7 @@ export default class Home extends Component {
               style={styles.homeIconElement}
             >
               <View position='absolute'>
-                <Surface
+                <DripHomeIcon name="circle" size={80} color={cycleDayColor}/>
-                  width={80}
-                  height={80}
-                >
-                  <CycleDayIcon
-                    strokeWidth={2}
-                    scale={0.46}
-                  />
-                </Surface>
               </View>
               <View style={[styles.homeIconTextWrapper, styles.wrapperCycle]}>
                 <AppTextLight style={styles.iconText}>
@@ -107,7 +97,7 @@ export default class Home extends Component {
               style={styles.homeIconElement}
             >
               <View position='absolute'>
-                <Drop scale={0.55}/>
+                <DripHomeIcon name="drop" size={105} color={periodColor} />
               </View>
               <View style={[styles.homeIconTextWrapper, styles.wrapperDrop]}>
                 <AppTextLight style={styles.iconText}>

ios/drip.xcodeproj/project.pbxproj

@@ -69,6 +69,8 @@
 		F165D5E4692041AD900573C8 /* Prompt-Thin.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CB2405AD4098483C85C1A261 /* Prompt-Thin.ttf */; };
 		BF3587E45FCA48DEA13183A1 /* fontello.ttf in Resources */ = {isa = PBXBuildFile; fileRef = BB0CB875BB2749F4A46AA5F1 /* fontello.ttf */; };
 		BBD61F152BE74DD7AED99DFB /* drip-icon-font.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 05154E9AE0EA4BE19F3D9E0B /* drip-icon-font.ttf */; };
+		DAA390B1EE7442D88A768596 /* drip-home-icon-font.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 94973D7B7BBA4B0FBE713A0E /* drip-home-icon-font.ttf */; };
+		BA7CE1E95B7843D7B0CF85FF /* drip-home-icons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 887F1D52A4684A5280CB79AA /* drip-home-icons.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -412,6 +414,8 @@
 		CB2405AD4098483C85C1A261 /* Prompt-Thin.ttf */ = {isa = PBXFileReference; name = "Prompt-Thin.ttf"; path = "../assets/fonts/Prompt-Thin.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 		BB0CB875BB2749F4A46AA5F1 /* fontello.ttf */ = {isa = PBXFileReference; name = "fontello.ttf"; path = "../assets/fonts/fontello.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 		05154E9AE0EA4BE19F3D9E0B /* drip-icon-font.ttf */ = {isa = PBXFileReference; name = "drip-icon-font.ttf"; path = "../assets/fonts/drip-icon-font.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		94973D7B7BBA4B0FBE713A0E /* drip-home-icon-font.ttf */ = {isa = PBXFileReference; name = "drip-home-icon-font.ttf"; path = "../assets/fonts/drip-home-icon-font.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		887F1D52A4684A5280CB79AA /* drip-home-icons.ttf */ = {isa = PBXFileReference; name = "drip-home-icons.ttf"; path = "../assets/fonts/drip-home-icons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -720,6 +724,8 @@
 				CB2405AD4098483C85C1A261 /* Prompt-Thin.ttf */,
 				BB0CB875BB2749F4A46AA5F1 /* fontello.ttf */,
 				05154E9AE0EA4BE19F3D9E0B /* drip-icon-font.ttf */,
+				94973D7B7BBA4B0FBE713A0E /* drip-home-icon-font.ttf */,
+				887F1D52A4684A5280CB79AA /* drip-home-icons.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -755,9 +761,9 @@
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				2B572382D4504B8FB4B9D251 /* Embed Frameworks */,
-				F64994825D454BDD8D73467F /* Build NodeJS Mobile Native Modules */,
+				0909337B049F4ECB933412B2 /* Build NodeJS Mobile Native Modules */,
-				E01FA74D87244C06A5D9B389 /* Sign NodeJS Mobile Native Modules */,
+				B6AAD324BDBA4E92AB5627B3 /* Sign NodeJS Mobile Native Modules */,
-				28C4AB8094CC4A7E8DE0E83B /* Remove NodeJS Mobile Framework Simulator Strips */,
+				3DE3CFA1BEC54E9D9B5B9D47 /* Remove NodeJS Mobile Framework Simulator Strips */,
 			);
 			buildRules = (
 			);
@@ -1196,6 +1202,8 @@
 				F165D5E4692041AD900573C8 /* Prompt-Thin.ttf in Resources */,
 				BF3587E45FCA48DEA13183A1 /* fontello.ttf in Resources */,
 				BBD61F152BE74DD7AED99DFB /* drip-icon-font.ttf in Resources */,
+				DAA390B1EE7442D88A768596 /* drip-home-icon-font.ttf in Resources */,
+				BA7CE1E95B7843D7B0CF85FF /* drip-home-icons.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -1245,7 +1253,7 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
-		F64994825D454BDD8D73467F /* Build NodeJS Mobile Native Modules */ = {
+		0909337B049F4ECB933412B2 /* Build NodeJS Mobile Native Modules */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -1313,7 +1321,7 @@ fi
 popd
 ";
 		};
-		E01FA74D87244C06A5D9B389 /* Sign NodeJS Mobile Native Modules */ = {
+		B6AAD324BDBA4E92AB5627B3 /* Sign NodeJS Mobile Native Modules */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -1373,7 +1381,7 @@ find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -path \"*/*.framework/*\" -del
 find \"$CODESIGNING_FOLDER_PATH/nodejs-project/\" -name \"*.framework\" -type d -delete
 ";
 		};
-		28C4AB8094CC4A7E8DE0E83B /* Remove NodeJS Mobile Framework Simulator Strips */ = {
+		3DE3CFA1BEC54E9D9B5B9D47 /* Remove NodeJS Mobile Framework Simulator Strips */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (

ios/drip/Info.plist

@@ -72,6 +72,8 @@
 		<string>Prompt-Thin.ttf</string>
 		<string>fontello.ttf</string>
 		<string>drip-icon-font.ttf</string>
+		<string>drip-home-icon-font.ttf</string>
+		<string>drip-home-icons.ttf</string>
 	</array>
 </dict>
 </plist>

styles/index.js

@@ -110,7 +110,7 @@ export default StyleSheet.create({
   },
   homeCircle: {
     borderRadius: 100,
-    borderWidth: 1,
+    borderWidth: 0.7,
     width: 80,
     height: 80,
     alignItems: 'center',