From 94dbf32376cfbc1b27dabceec41710b25b70b456 Mon Sep 17 00:00:00 2001
From: Carlos Alvarez <carlos@expensify.com>
Date: Wed, 12 Aug 2020 10:22:25 -0700
Subject: [PATCH 1/4] Add utility style for bold

---
 src/style/StyleSheet.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 2ef9cc9a92ad..50f24db6fb56 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -10,6 +10,9 @@ const colors = {
 
 const styles = {
     // Utility classes
+    bold: {
+        fontWeight: 'bold',
+    },
     mr1: {
         marginRight: 10,
     },

From 64ba217275923ac907c45edd2ecd2bc0adedbee7 Mon Sep 17 00:00:00 2001
From: Carlos Alvarez <carlos@expensify.com>
Date: Wed, 12 Aug 2020 10:23:21 -0700
Subject: [PATCH 2/4] Replace unread badge with bold font

---
 src/page/HomePage/SidebarLink.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index f28264dfa8e9..eab304dddf9c 100644
--- a/src/page/HomePage/SidebarLink.js
+++ b/src/page/HomePage/SidebarLink.js
@@ -25,14 +25,12 @@ class SidebarLink extends React.Component {
         const linkWrapperActiveStyle = isReportActive && styles.sidebarLinkWrapperActive;
         const linkActiveStyle = isReportActive ? styles.sidebarLinkActive : styles.sidebarLink;
         const textActiveStyle = isReportActive ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
+        const textActiveUnreadStyle = this.state && this.state.isUnread ? [textActiveStyle, styles.bold] : [textActiveStyle];
         return (
             <View style={[styles.sidebarListItem, linkWrapperActiveStyle]}>
                 <Link to={`/${this.props.reportID}`} style={linkActiveStyle}>
                     <View style={[styles.sidebarLinkInner]}>
-                        <Text style={[textActiveStyle, styles.flex1]}>{this.props.reportName}</Text>
-                        {this.state && this.state.isUnread && (
-                            <View style={styles.unreadBadge} />
-                        )}
+                        <Text style={textActiveUnreadStyle}>{this.props.reportName}</Text>
                     </View>
                 </Link>
             </View>

From 85c5c2ed67fd82aa7c6ff620b39b4a423dc4f1f5 Mon Sep 17 00:00:00 2001
From: Carlos Alvarez <carlos@expensify.com>
Date: Wed, 12 Aug 2020 10:23:33 -0700
Subject: [PATCH 3/4] Lint

---
 src/page/HomePage/Report/ReportHistoryCompose.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/page/HomePage/Report/ReportHistoryCompose.js b/src/page/HomePage/Report/ReportHistoryCompose.js
index 8e51c78069d6..b675714d4324 100644
--- a/src/page/HomePage/Report/ReportHistoryCompose.js
+++ b/src/page/HomePage/Report/ReportHistoryCompose.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View, TextInput, Button} from 'react-native';
+import {View, TextInput} from 'react-native';
 import styles from '../../../style/StyleSheet';
 
 const propTypes = {

From 07b8b456854eeaa7787b2a19c7646e1897d4cf57 Mon Sep 17 00:00:00 2001
From: Carlos Alvarez <carlos@expensify.com>
Date: Wed, 12 Aug 2020 10:43:06 -0700
Subject: [PATCH 4/4] Update style

---
 src/page/HomePage/SidebarLink.js | 2 +-
 src/style/StyleSheet.js          | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/page/HomePage/SidebarLink.js b/src/page/HomePage/SidebarLink.js
index eab304dddf9c..5aeedcff6bea 100644
--- a/src/page/HomePage/SidebarLink.js
+++ b/src/page/HomePage/SidebarLink.js
@@ -25,7 +25,7 @@ class SidebarLink extends React.Component {
         const linkWrapperActiveStyle = isReportActive && styles.sidebarLinkWrapperActive;
         const linkActiveStyle = isReportActive ? styles.sidebarLinkActive : styles.sidebarLink;
         const textActiveStyle = isReportActive ? styles.sidebarLinkActiveText : styles.sidebarLinkText;
-        const textActiveUnreadStyle = this.state && this.state.isUnread ? [textActiveStyle, styles.bold] : [textActiveStyle];
+        const textActiveUnreadStyle = this.state && this.state.isUnread ? [textActiveStyle, styles.sidebarLinkTextUnread] : [textActiveStyle];
         return (
             <View style={[styles.sidebarListItem, linkWrapperActiveStyle]}>
                 <Link to={`/${this.props.reportID}`} style={linkActiveStyle}>
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 50f24db6fb56..b4807d016ad0 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -10,9 +10,6 @@ const colors = {
 
 const styles = {
     // Utility classes
-    bold: {
-        fontWeight: 'bold',
-    },
     mr1: {
         marginRight: 10,
     },
@@ -189,7 +186,10 @@ const styles = {
         paddingLeft: 12,
         textDecoration: 'none',
     },
-
+    sidebarLinkTextUnread: {
+        fontWeight: 'bold',
+        color: '#ECECEC',
+    },
     sidebarLinkActiveText: {
         color: '#ffffff',
         fontSize: 13,