From ff5723caba03b40d609c0d70dee2a48b3462214f Mon Sep 17 00:00:00 2001
From: puneet <puneet.here121@gmail.com>
Date: Mon, 24 Oct 2022 21:51:57 -0700
Subject: [PATCH 1/2] use blue border when composer gets focused

---
 src/pages/home/report/ReportActionItemMessageEdit.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 49723f4e0a29..b678252b6465 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -81,6 +81,7 @@ class ReportActionItemMessageEdit extends React.Component {
                 start: draftMessage.length,
                 end: draftMessage.length,
             },
+            isFocused: false,
         };
     }
 
@@ -198,7 +199,12 @@ class ReportActionItemMessageEdit extends React.Component {
         const hasExceededMaxCommentLength = this.state.draft.length > CONST.MAX_COMMENT_LENGTH;
         return (
             <View style={styles.chatItemMessage}>
-                <View style={[styles.chatItemComposeBox, styles.flexRow, styles.chatItemComposeBoxColor, hasExceededMaxCommentLength && styles.borderColorDanger]}>
+                <View style={[
+                    styles.chatItemComposeBox,
+                    styles.flexRow,
+                    this.state.isFocused ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
+                    hasExceededMaxCommentLength && styles.borderColorDanger]}
+                >
                     <Composer
                         multiline
                         ref={(el) => {
@@ -211,6 +217,7 @@ class ReportActionItemMessageEdit extends React.Component {
                         maxLines={16} // This is the same that slack has
                         style={[styles.textInputCompose, styles.flex4, styles.editInputComposeSpacing]}
                         onFocus={() => {
+                            this.setState({isFocused: true});
                             ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);
                             toggleReportActionComposeView(false, VirtualKeyboard.shouldAssumeIsOpen());
                         }}
@@ -219,7 +226,7 @@ class ReportActionItemMessageEdit extends React.Component {
                             if (_.contains([this.saveButtonID, this.cancelButtonID], lodashGet(event, 'nativeEvent.relatedTarget.id'))) {
                                 return;
                             }
-
+                            this.setState({isFocused: false});
                             toggleReportActionComposeView(true, VirtualKeyboard.shouldAssumeIsOpen());
                         }}
                         selection={this.state.selection}

From b2d2de7d89dc170592c5ba4cc63a21c2cd638c3a Mon Sep 17 00:00:00 2001
From: Puneet <puneet.here121@gmail.com>
Date: Tue, 25 Oct 2022 00:58:12 +0530
Subject: [PATCH 2/2] code style change

Co-authored-by: Rajat Parashar <parasharrajat@users.noreply.github.com>
---
 src/pages/home/report/ReportActionItemMessageEdit.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index b678252b6465..6d1960c7ad57 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -199,11 +199,13 @@ class ReportActionItemMessageEdit extends React.Component {
         const hasExceededMaxCommentLength = this.state.draft.length > CONST.MAX_COMMENT_LENGTH;
         return (
             <View style={styles.chatItemMessage}>
-                <View style={[
-                    styles.chatItemComposeBox,
-                    styles.flexRow,
-                    this.state.isFocused ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
-                    hasExceededMaxCommentLength && styles.borderColorDanger]}
+                <View
+                    style={[
+                        styles.chatItemComposeBox,
+                        styles.flexRow,
+                        this.state.isFocused ? styles.chatItemComposeBoxFocusedColor : styles.chatItemComposeBoxColor,
+                        hasExceededMaxCommentLength && styles.borderColorDanger,
+                    ]}
                 >
                     <Composer
                         multiline