From a6e5acbcac7ee804e40f7e20f23a4bc21a096fd7 Mon Sep 17 00:00:00 2001
From: Andre Fonseca <afonseca@expensify.com>
Date: Tue, 22 Sep 2020 17:30:55 +0100
Subject: [PATCH 1/8] adding composer stye change

---
 src/page/home/report/ReportActionCompose.js | 10 +++++++++-
 src/style/StyleSheet.js                     |  8 ++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/page/home/report/ReportActionCompose.js b/src/page/home/report/ReportActionCompose.js
index cf1650647d197..d7f5990a82f19 100644
--- a/src/page/home/report/ReportActionCompose.js
+++ b/src/page/home/report/ReportActionCompose.js
@@ -36,7 +36,9 @@ class ReportActionCompose extends React.Component {
         this.triggerSubmitShortcut = this.triggerSubmitShortcut.bind(this);
         this.submitForm = this.submitForm.bind(this);
         this.showAttachmentPicker = this.showAttachmentPicker.bind(this);
+        this.focusTextInput = this.focusTextInput.bind(this);
         this.comment = '';
+        this.state = {isFocused: false};
     }
 
     componentDidUpdate(prevProps) {
@@ -47,6 +49,10 @@ class ReportActionCompose extends React.Component {
         }
     }
 
+    focusTextInput(shouldHighlight) {
+        this.setState({isFocused: shouldHighlight});
+    }
+
     /**
      * Save our report comment in Ion. We debounce this method in the constructor so that it's not called too often
      * to update Ion and re-render this component.
@@ -138,7 +144,7 @@ class ReportActionCompose extends React.Component {
     render() {
         return (
             <View style={[styles.chatItemCompose]}>
-                <View style={[styles.chatItemComposeBox, styles.flexRow]}>
+                <View style={[this.state.isFocused ? styles.chatItemComposeBoxFocused : styles.chatItemComposeBox, styles.flexRow]}>
                     <TouchableOpacity
                         onPress={this.showAttachmentPicker}
                         style={[styles.chatItemAttachButton]}
@@ -161,6 +167,8 @@ class ReportActionCompose extends React.Component {
                         style={[styles.textInput, styles.textInputCompose, styles.flex4]}
                         defaultValue={this.props.comment || ''}
                         maxLines={16} // This is the same that slack has
+                        onFocus={() => this.focusTextInput(true)}
+                        onBlur={() => this.focusTextInput(false)}
                     />
                     <TouchableOpacity
                         style={[styles.chatItemSubmitButton, styles.buttonSuccess]}
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index b2c2c22111ed1..695160c1393bf 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -544,6 +544,14 @@ const styles = {
         minHeight: 40,
     },
 
+    chatItemComposeBoxFocused: {
+        backgroundColor: colors.componentBG,
+        borderWidth: 1,
+        borderColor: colors.blue,
+        borderRadius: 8,
+        minHeight: 40,
+    },
+
     textInputCompose: {
         borderWidth: 0,
         borderRadius: 0,

From eacb4bd3371277a6961e0628043bee286abf14a5 Mon Sep 17 00:00:00 2001
From: Andre Fonseca <afonseca@expensify.com>
Date: Tue, 22 Sep 2020 17:38:58 +0100
Subject: [PATCH 2/8] separating the styles to have different colours

---
 src/components/TextInputFocusable/index.js  |  2 --
 src/page/home/report/ReportActionCompose.js |  7 ++++++-
 src/style/StyleSheet.js                     | 13 ++++++-------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/TextInputFocusable/index.js b/src/components/TextInputFocusable/index.js
index 4d6b53df4d9c3..bf0dfebb8ddd9 100644
--- a/src/components/TextInputFocusable/index.js
+++ b/src/components/TextInputFocusable/index.js
@@ -43,8 +43,6 @@ class TextInputFocusable extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        this.focusInput();
-
         if (prevProps.defaultValue !== this.props.defaultValue) {
             this.updateNumberOfLines();
         }
diff --git a/src/page/home/report/ReportActionCompose.js b/src/page/home/report/ReportActionCompose.js
index d7f5990a82f19..a7cbad9ae7ed4 100644
--- a/src/page/home/report/ReportActionCompose.js
+++ b/src/page/home/report/ReportActionCompose.js
@@ -144,7 +144,12 @@ class ReportActionCompose extends React.Component {
     render() {
         return (
             <View style={[styles.chatItemCompose]}>
-                <View style={[this.state.isFocused ? styles.chatItemComposeBoxFocused : styles.chatItemComposeBox, styles.flexRow]}>
+                <View style={[
+                    this.state.isFocused ? styles.chatItemComposeBoxFocusedColour : styles.chatItemComposeBoxColour,
+                    styles.chatItemComposeBox,
+                    styles.flexRow
+                ]}
+                >
                     <TouchableOpacity
                         onPress={this.showAttachmentPicker}
                         style={[styles.chatItemAttachButton]}
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 695160c1393bf..857a15e59fd3e 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -536,18 +536,17 @@ const styles = {
         display: 'flex',
     },
 
-    chatItemComposeBox: {
-        backgroundColor: colors.componentBG,
-        borderWidth: 1,
+    chatItemComposeBoxColour: {
         borderColor: colors.border,
-        borderRadius: 8,
-        minHeight: 40,
     },
 
-    chatItemComposeBoxFocused: {
+    chatItemComposeBoxFocusedColour: {
+        borderColor: colors.blue,
+    },
+
+    chatItemComposeBox: {
         backgroundColor: colors.componentBG,
         borderWidth: 1,
-        borderColor: colors.blue,
         borderRadius: 8,
         minHeight: 40,
     },

From 1287854abc158b09759efe4315d4ccb4a982ddb4 Mon Sep 17 00:00:00 2001
From: Andre Fonseca <afonseca@expensify.com>
Date: Tue, 22 Sep 2020 17:56:30 +0100
Subject: [PATCH 3/8] add comment

---
 src/page/home/report/ReportActionCompose.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/page/home/report/ReportActionCompose.js b/src/page/home/report/ReportActionCompose.js
index a7cbad9ae7ed4..41c582c838585 100644
--- a/src/page/home/report/ReportActionCompose.js
+++ b/src/page/home/report/ReportActionCompose.js
@@ -49,6 +49,11 @@ class ReportActionCompose extends React.Component {
         }
     }
 
+    /**
+     * updates the Highlight state of the composer
+     *
+     * @param {boolean} shouldHighlight
+     */
     focusTextInput(shouldHighlight) {
         this.setState({isFocused: shouldHighlight});
     }

From 79d9fcf3283f0fc7a1f59365852fc329c498f9a9 Mon Sep 17 00:00:00 2001
From: Andre Fonseca <afonseca@expensify.com>
Date: Wed, 23 Sep 2020 16:48:20 +0100
Subject: [PATCH 4/8] changing the name of the method

---
 src/page/home/report/ReportActionCompose.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/page/home/report/ReportActionCompose.js b/src/page/home/report/ReportActionCompose.js
index 41c582c838585..da313d4485b01 100644
--- a/src/page/home/report/ReportActionCompose.js
+++ b/src/page/home/report/ReportActionCompose.js
@@ -36,7 +36,7 @@ class ReportActionCompose extends React.Component {
         this.triggerSubmitShortcut = this.triggerSubmitShortcut.bind(this);
         this.submitForm = this.submitForm.bind(this);
         this.showAttachmentPicker = this.showAttachmentPicker.bind(this);
-        this.focusTextInput = this.focusTextInput.bind(this);
+        this.setIsFocused = this.setIsFocused.bind(this);
         this.comment = '';
         this.state = {isFocused: false};
     }
@@ -54,7 +54,7 @@ class ReportActionCompose extends React.Component {
      *
      * @param {boolean} shouldHighlight
      */
-    focusTextInput(shouldHighlight) {
+    setIsFocused(shouldHighlight) {
         this.setState({isFocused: shouldHighlight});
     }
 
@@ -177,8 +177,8 @@ class ReportActionCompose extends React.Component {
                         style={[styles.textInput, styles.textInputCompose, styles.flex4]}
                         defaultValue={this.props.comment || ''}
                         maxLines={16} // This is the same that slack has
-                        onFocus={() => this.focusTextInput(true)}
-                        onBlur={() => this.focusTextInput(false)}
+                        onFocus={() => this.setIsFocused(true)}
+                        onBlur={() => this.setIsFocused(false)}
                     />
                     <TouchableOpacity
                         style={[styles.chatItemSubmitButton, styles.buttonSuccess]}

From 4be4b7b35a06c95f085700f43bd705151fcac1c2 Mon Sep 17 00:00:00 2001
From: Andre Fonseca <afonseca@expensify.com>
Date: Wed, 30 Sep 2020 18:35:10 +0100
Subject: [PATCH 5/8] correcting grammar

---
 src/page/home/report/ReportActionCompose.js | 4 ++--
 src/style/StyleSheet.js                     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/page/home/report/ReportActionCompose.js b/src/page/home/report/ReportActionCompose.js
index da313d4485b01..838103e0c41a2 100644
--- a/src/page/home/report/ReportActionCompose.js
+++ b/src/page/home/report/ReportActionCompose.js
@@ -50,7 +50,7 @@ class ReportActionCompose extends React.Component {
     }
 
     /**
-     * updates the Highlight state of the composer
+     * Updates the Highlight state of the composer
      *
      * @param {boolean} shouldHighlight
      */
@@ -150,7 +150,7 @@ class ReportActionCompose extends React.Component {
         return (
             <View style={[styles.chatItemCompose]}>
                 <View style={[
-                    this.state.isFocused ? styles.chatItemComposeBoxFocusedColour : styles.chatItemComposeBoxColour,
+                    this.state.isFocused ? styles.chatItemComposeBoxFocusedColour : styles.chatItemComposeBoxColor,
                     styles.chatItemComposeBox,
                     styles.flexRow
                 ]}
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 857a15e59fd3e..f9e57c38f8272 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -536,7 +536,7 @@ const styles = {
         display: 'flex',
     },
 
-    chatItemComposeBoxColour: {
+    chatItemComposeBoxColor: {
         borderColor: colors.border,
     },
 
@@ -659,7 +659,7 @@ const styles = {
     chatSwitcherItemText: {
         color: colors.text,
     },
-
+    ReportActionCompose.js
     chatSwitcherItemFocused: {
         backgroundColor: colors.blue,
         borderRadius: 8,

From a9b15961fee4a96189bf9b5db2f9c3137e6512e2 Mon Sep 17 00:00:00 2001
From: Andre Fonseca <afonseca@expensify.com>
Date: Wed, 30 Sep 2020 18:42:23 +0100
Subject: [PATCH 6/8] stupid copy paste....

---
 src/page/home/report/ReportActionCompose.js | 2 +-
 src/style/StyleSheet.js                     | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/page/home/report/ReportActionCompose.js b/src/page/home/report/ReportActionCompose.js
index 838103e0c41a2..d7c76e4fbba51 100644
--- a/src/page/home/report/ReportActionCompose.js
+++ b/src/page/home/report/ReportActionCompose.js
@@ -150,7 +150,7 @@ class ReportActionCompose extends React.Component {
         return (
             <View style={[styles.chatItemCompose]}>
                 <View style={[
-                    this.state.isFocused ? styles.chatItemComposeBoxFocusedColour : styles.chatItemComposeBoxColor,
+                    this.state.isFocused ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
                     styles.chatItemComposeBox,
                     styles.flexRow
                 ]}
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index f9e57c38f8272..4d4e867f0cf02 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -540,7 +540,7 @@ const styles = {
         borderColor: colors.border,
     },
 
-    chatItemComposeBoxFocusedColour: {
+    chatItemComposeBoxFocusedColor: {
         borderColor: colors.blue,
     },
 
@@ -659,7 +659,6 @@ const styles = {
     chatSwitcherItemText: {
         color: colors.text,
     },
-    ReportActionCompose.js
     chatSwitcherItemFocused: {
         backgroundColor: colors.blue,
         borderRadius: 8,

From 049b274cb4933ce82875182b4d3be45512a2a9c4 Mon Sep 17 00:00:00 2001
From: Andre Fonseca <afonseca@expensify.com>
Date: Wed, 30 Sep 2020 18:44:44 +0100
Subject: [PATCH 7/8] space

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

diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 4d4e867f0cf02..55da4b127c969 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -659,6 +659,7 @@ const styles = {
     chatSwitcherItemText: {
         color: colors.text,
     },
+    
     chatSwitcherItemFocused: {
         backgroundColor: colors.blue,
         borderRadius: 8,

From 6fa7b7e1129e6361ab5ec4412e390628cf81c527 Mon Sep 17 00:00:00 2001
From: Andre Fonseca <afonseca@expensify.com>
Date: Wed, 30 Sep 2020 18:48:12 +0100
Subject: [PATCH 8/8] fixed

---
 src/style/StyleSheet.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 55da4b127c969..53e7f8da681e4 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -659,7 +659,7 @@ const styles = {
     chatSwitcherItemText: {
         color: colors.text,
     },
-    
+
     chatSwitcherItemFocused: {
         backgroundColor: colors.blue,
         borderRadius: 8,