From fa1b914f29a3799be5c1b92b55de09ac1bf616c3 Mon Sep 17 00:00:00 2001
From: Tuan Ho <tuan@gobackbone.com>
Date: Tue, 20 Jun 2017 12:44:17 -0700
Subject: [PATCH 1/2] changes battery icon relative to battery level

---
 app/containers/Settings.js | 22 ++++++++++++++++++++--
 app/styles/settings.js     |  9 +++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/containers/Settings.js b/app/containers/Settings.js
index aeed425f..3616feb8 100644
--- a/app/containers/Settings.js
+++ b/app/containers/Settings.js
@@ -12,6 +12,7 @@ import {
 import autobind from 'class-autobind';
 import { connect } from 'react-redux';
 import Icon from 'react-native-vector-icons/MaterialIcons';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
 import appActions from '../actions/app';
 import authActions from '../actions/auth';
 import deviceActions from '../actions/device';
@@ -20,7 +21,6 @@ import Button from '../components/Button';
 import BodyText from '../components/BodyText';
 import SecondaryText from '../components/SecondaryText';
 import arrow from '../images/settings/arrow.png';
-import batteryIcon from '../images/settings/batteryIcon.png';
 import sensorSmall from '../images/settings/sensorSmall.png';
 import styles from '../styles/settings';
 import theme from '../styles/theme';
@@ -38,6 +38,24 @@ const ArrowIcon = () => (
   </View>
 );
 
+const getBatteryIcon = (batteryLevel) => {
+  let batteryIcon;
+  if (batteryLevel >= 90) {
+    batteryIcon = 'battery-full';
+  } else if (batteryLevel >= 75) {
+    batteryIcon = 'battery-three-quarters';
+  } else if (batteryLevel >= 50) {
+    batteryIcon = 'battery-half';
+  } else if (batteryLevel >= 25) {
+    batteryIcon = 'battery-quarter';
+  } else {
+    batteryIcon = 'battery-empty';
+  }
+  return batteryLevel < 25 ?
+    <FontAwesomeIcon name={batteryIcon} style={styles.batteryIconRed} /> :
+      <FontAwesomeIcon name={batteryIcon} style={styles.batteryIconGreen} />;
+};
+
 const SensorSettings = props => (
   <TouchableOpacity
     onPress={() => props.navigator.push(routes.device)}
@@ -56,7 +74,7 @@ const SensorSettings = props => (
           <SecondaryText style={styles._deviceInfoText}>
             Battery Life: { props.device.batteryLevel || '--' }%
           </SecondaryText>
-          <Image source={batteryIcon} style={styles.batteryIcon} />
+          {getBatteryIcon(props.device.batteryLevel)}
         </View>
       }
     </View>
diff --git a/app/styles/settings.js b/app/styles/settings.js
index f21ec8bd..2a8028cf 100644
--- a/app/styles/settings.js
+++ b/app/styles/settings.js
@@ -52,10 +52,11 @@ export default EStyleSheet.create({
     fontSize: fixedResponsiveFontSize(13),
     color: '$primaryFontColor',
   },
-  batteryIcon: {
-    width: applyWidthDifference(24),
-    height: applyWidthDifference(13),
-    resizeMode: 'contain',
+  batteryIconGreen: {
+    color: '#32CD32',
+  },
+  batteryIconRed: {
+    color: '#FF0000',
   },
   settingsHeader: {
     ...bottomBorder,

From 3198ad726503e73079d36e9cfe28540053b87062 Mon Sep 17 00:00:00 2001
From: Tuan Ho <tuan@gobackbone.com>
Date: Tue, 20 Jun 2017 13:04:00 -0700
Subject: [PATCH 2/2] added space between percent and battery icon

---
 app/containers/Settings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/containers/Settings.js b/app/containers/Settings.js
index 3616feb8..c6fdf432 100644
--- a/app/containers/Settings.js
+++ b/app/containers/Settings.js
@@ -72,7 +72,7 @@ const SensorSettings = props => (
       {props.isConnected &&
         <View style={styles.batteryInfo}>
           <SecondaryText style={styles._deviceInfoText}>
-            Battery Life: { props.device.batteryLevel || '--' }%
+            Battery Life: { props.device.batteryLevel || '--' }%{' '}
           </SecondaryText>
           {getBatteryIcon(props.device.batteryLevel)}
         </View>