From e86d9c8bad0934a93bcaf927b770345ca455b8e9 Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Sat, 26 Aug 2023 18:44:48 +0530
Subject: [PATCH 01/12] fix: added cursor disabled and removed border bottom
 when input is not editable

---
 src/components/TextInput/BaseTextInput.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index c3f1cec4ef1a..29c719aabf5f 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -264,6 +264,8 @@ function BaseTextInput(props) {
 
                             // When autoGrow is on and minWidth is not supplied, add a minWidth to allow the input to be focusable.
                             props.autoGrow && !textInputContainerStyles.minWidth && styles.mnw2,
+                            // Remove border bottom when field is not editable.
+                            !isEditable && styles.borderNone,
                         ]}
                     >
                         {hasLabel ? (
@@ -331,6 +333,8 @@ function BaseTextInput(props) {
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
                                     props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
+                                    // Disable cursor when the field is not editable.
+                                    !isEditable && styles.cursorDisabled,
                                 ]}
                                 multiline={isMultiline}
                                 maxLength={props.maxLength}

From 72f4dc4c8b85712f8349682516021e27ec6841c5 Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Mon, 28 Aug 2023 17:05:33 +0530
Subject: [PATCH 02/12] fix: removed the disabled cursor

---
 src/components/TextInput/BaseTextInput.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 29c719aabf5f..3d04450932f7 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -333,8 +333,6 @@ function BaseTextInput(props) {
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
                                     props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
-                                    // Disable cursor when the field is not editable.
-                                    !isEditable && styles.cursorDisabled,
                                 ]}
                                 multiline={isMultiline}
                                 maxLength={props.maxLength}

From 89c08a854c96514e8ca79de83d1808ec55090006 Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Wed, 30 Aug 2023 03:34:25 +0530
Subject: [PATCH 03/12] fix: avoid datepicker and update style of disabled
 input

---
 src/components/TextInput/BaseTextInput.js | 5 +++--
 src/styles/styles.js                      | 7 ++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 3d04450932f7..1c1098b6287a 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -241,6 +241,7 @@ function BaseTextInput(props) {
         props.autoGrowHeight && {scrollPaddingTop: 2 * maxHeight},
     ]);
     const isMultiline = props.multiline || props.autoGrowHeight;
+    const isDatePicker = props.icon !== Expensicons.Calendar;
 
     return (
         <>
@@ -265,7 +266,7 @@ function BaseTextInput(props) {
                             // When autoGrow is on and minWidth is not supplied, add a minWidth to allow the input to be focusable.
                             props.autoGrow && !textInputContainerStyles.minWidth && styles.mnw2,
                             // Remove border bottom when field is not editable.
-                            !isEditable && styles.borderNone,
+                            !isEditable && isDatePicker && styles.textInputDisabled,
                         ]}
                     >
                         {hasLabel ? (
@@ -333,7 +334,7 @@ function BaseTextInput(props) {
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
                                     props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
-                                ]}
+                                                                    ]}
                                 multiline={isMultiline}
                                 maxLength={props.maxLength}
                                 onFocus={onFocus}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 79c58c12db6d..55eef0186b1c 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -777,6 +777,11 @@ const styles = {
         borderColor: themeColors.danger,
     },
 
+    textInputDisabled: {
+        backgroundColor: themeColors.overlay,
+        borderColor: themeColors.borderLighter,
+    },
+
     uploadReceiptView: (isSmallScreenWidth) => ({
         borderRadius: variables.componentBorderRadiusLarge,
         borderWidth: isSmallScreenWidth ? 0 : 2,
@@ -3876,6 +3881,6 @@ const styles = {
         fontSize: variables.fontSizeNormal,
         marginRight: 4,
     },
-};
+    };
 
 export default styles;

From 4f3ee72e1db7be10f3e01e574b492b38cbb10d43 Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Wed, 30 Aug 2023 03:46:33 +0530
Subject: [PATCH 04/12] using props.disabled instead of isEditable

---
 src/components/TextInput/BaseTextInput.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 1c1098b6287a..b14e8887b83a 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -241,8 +241,7 @@ function BaseTextInput(props) {
         props.autoGrowHeight && {scrollPaddingTop: 2 * maxHeight},
     ]);
     const isMultiline = props.multiline || props.autoGrowHeight;
-    const isDatePicker = props.icon !== Expensicons.Calendar;
-
+    
     return (
         <>
             <View style={styles.pointerEventsNone}>
@@ -266,7 +265,7 @@ function BaseTextInput(props) {
                             // When autoGrow is on and minWidth is not supplied, add a minWidth to allow the input to be focusable.
                             props.autoGrow && !textInputContainerStyles.minWidth && styles.mnw2,
                             // Remove border bottom when field is not editable.
-                            !isEditable && isDatePicker && styles.textInputDisabled,
+                            props.disabled && styles.textInputDisabled,
                         ]}
                     >
                         {hasLabel ? (

From 154a6557ade71f97d1bb18583c81d6fca121572d Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Thu, 31 Aug 2023 01:17:47 +0530
Subject: [PATCH 05/12] removed whitespace diff

---
 src/components/TextInput/BaseTextInput.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index b14e8887b83a..b3cede251130 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -241,7 +241,7 @@ function BaseTextInput(props) {
         props.autoGrowHeight && {scrollPaddingTop: 2 * maxHeight},
     ]);
     const isMultiline = props.multiline || props.autoGrowHeight;
-    
+
     return (
         <>
             <View style={styles.pointerEventsNone}>
@@ -333,7 +333,7 @@ function BaseTextInput(props) {
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
                                     props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
-                                                                    ]}
+                                ]}
                                 multiline={isMultiline}
                                 maxLength={props.maxLength}
                                 onFocus={onFocus}

From 3687cf9f19f045c850ffbf385dcd2ddff6448c35 Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Thu, 31 Aug 2023 01:24:05 +0530
Subject: [PATCH 06/12] fixed text supporting color for disabled input

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

diff --git a/src/styles/styles.js b/src/styles/styles.js
index f17099741c7b..4086bd7c9db7 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -780,6 +780,7 @@ const styles = {
     textInputDisabled: {
         backgroundColor: themeColors.overlay,
         borderColor: themeColors.borderLighter,
+        color: themeColors.textSupporting,
     },
 
     uploadReceiptView: (isSmallScreenWidth) => ({

From 6234eeb809f741fdb567902e415bcd40910abb59 Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Thu, 31 Aug 2023 02:40:13 +0530
Subject: [PATCH 07/12] fix: text color was not applying

---
 src/components/TextInput/BaseTextInput.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index b3cede251130..5362665330dd 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -264,8 +264,6 @@ function BaseTextInput(props) {
 
                             // When autoGrow is on and minWidth is not supplied, add a minWidth to allow the input to be focusable.
                             props.autoGrow && !textInputContainerStyles.minWidth && styles.mnw2,
-                            // Remove border bottom when field is not editable.
-                            props.disabled && styles.textInputDisabled,
                         ]}
                     >
                         {hasLabel ? (
@@ -333,6 +331,8 @@ function BaseTextInput(props) {
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
                                     props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
+                                    // Remove border bottom when field is not editable.
+                                    props.disabled && styles.textInputDisabled,
                                 ]}
                                 multiline={isMultiline}
                                 maxLength={props.maxLength}

From 4d15409fab4f26df1f35cb0f99d8454db45a9267 Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Wed, 6 Sep 2023 00:04:50 +0530
Subject: [PATCH 08/12] ios color fix

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

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 4086bd7c9db7..e740e1b5b0d3 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -780,7 +780,7 @@ const styles = {
     textInputDisabled: {
         backgroundColor: themeColors.overlay,
         borderColor: themeColors.borderLighter,
-        color: themeColors.textSupporting,
+        WebkitTextFillColor: themeColors.textSupporting,
     },
 
     uploadReceiptView: (isSmallScreenWidth) => ({

From da10e26ea03d302e19f507b9b512b95132ef8513 Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Wed, 6 Sep 2023 00:40:04 +0530
Subject: [PATCH 09/12] fix text color in iOS mobile

---
 src/styles/styles.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index e740e1b5b0d3..d6483ea00e1d 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -781,6 +781,8 @@ const styles = {
         backgroundColor: themeColors.overlay,
         borderColor: themeColors.borderLighter,
         WebkitTextFillColor: themeColors.textSupporting,
+        WebkitOpacity: 1,
+        color: themeColors.textSupporting,
     },
 
     uploadReceiptView: (isSmallScreenWidth) => ({

From 2b0d1a2717ce531fad085bfa57cf33d1b904396f Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Fri, 8 Sep 2023 15:28:43 +0530
Subject: [PATCH 10/12] comments and console warning fix

---
 src/components/TextInput/BaseTextInput.js |  2 +-
 src/styles/styles.js                      | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 5362665330dd..d4471b1a6c38 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -331,7 +331,7 @@ function BaseTextInput(props) {
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
                                     props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
-                                    // Remove border bottom when field is not editable.
+                                    // Add disabled color theme when field is not editable.
                                     props.disabled && styles.textInputDisabled,
                                 ]}
                                 multiline={isMultiline}
diff --git a/src/styles/styles.js b/src/styles/styles.js
index d6483ea00e1d..756f149871c3 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -778,10 +778,17 @@ const styles = {
     },
 
     textInputDisabled: {
+        // Adding disabled color theme to indicate user that the field is not editable.
         backgroundColor: themeColors.overlay,
         borderColor: themeColors.borderLighter,
-        WebkitTextFillColor: themeColors.textSupporting,
-        WebkitOpacity: 1,
+        // Adding browser specefic style to bring consistency between Safari and other platforms.
+        // Applying the Webkit styles only to browsers as it is not available in native.
+        ...(Browser.getBrowser()
+            ? {
+                  WebkitTextFillColor: themeColors.textSupporting,
+                  WebkitOpacity: 1,
+              }
+            : {}),
         color: themeColors.textSupporting,
     },
 

From 21cc2935959b75f4373d9988db72262ffcb9ed3c Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Mon, 11 Sep 2023 18:10:35 +0530
Subject: [PATCH 11/12] border bottom width added

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

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 756f149871c3..757e0dad34a0 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -780,6 +780,7 @@ const styles = {
     textInputDisabled: {
         // Adding disabled color theme to indicate user that the field is not editable.
         backgroundColor: themeColors.overlay,
+        borderBottomWidth: 2,
         borderColor: themeColors.borderLighter,
         // Adding browser specefic style to bring consistency between Safari and other platforms.
         // Applying the Webkit styles only to browsers as it is not available in native.

From 981c40837ad2a46e9a911309cd33650e8ea92dab Mon Sep 17 00:00:00 2001
From: Himanshu Ragi <111270565+himanshuragi456@users.noreply.github.com>
Date: Mon, 11 Sep 2023 20:18:26 +0530
Subject: [PATCH 12/12] changed bg color variable

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

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 757e0dad34a0..9ac4587b7117 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -779,7 +779,7 @@ const styles = {
 
     textInputDisabled: {
         // Adding disabled color theme to indicate user that the field is not editable.
-        backgroundColor: themeColors.overlay,
+        backgroundColor: themeColors.highlightBG,
         borderBottomWidth: 2,
         borderColor: themeColors.borderLighter,
         // Adding browser specefic style to bring consistency between Safari and other platforms.