From 25c9a6a5b3c50d42c98c45bb6b668a569f6ff0c1 Mon Sep 17 00:00:00 2001
From: Nikhil Vats <nikvats5499@gmail.com>
Date: Sat, 30 Sep 2023 23:15:56 +0530
Subject: [PATCH 1/2] Fix checkbox outline in TaskView

---
 src/components/Checkbox.js                   |  2 +-
 src/components/SelectionList/UserListItem.js |  4 ++--
 src/styles/StyleUtils.ts                     | 16 +++++++++++++++-
 src/styles/styles.js                         |  7 -------
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
index 1bb5824f612a..394e73951c09 100644
--- a/src/components/Checkbox.js
+++ b/src/components/Checkbox.js
@@ -91,7 +91,7 @@ function Checkbox(props) {
             onPress={firePressHandlerOnClick}
             onMouseDown={props.onMouseDown}
             ref={props.forwardedRef}
-            style={[props.style, styles.checkboxPressable]}
+            style={[props.style, StyleUtils.getCheckboxPressableStyle(props.containerBorderRadius + 2)]} // to align outline on focus, border-radius of pressable should be 2px more than Checkbox
             onKeyDown={handleSpaceKey}
             accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
             accessibilityState={{checked: props.isChecked}}
diff --git a/src/components/SelectionList/UserListItem.js b/src/components/SelectionList/UserListItem.js
index 0d37162a7995..847269f656ea 100644
--- a/src/components/SelectionList/UserListItem.js
+++ b/src/components/SelectionList/UserListItem.js
@@ -65,10 +65,10 @@ function UserListItem({item, isFocused = false, showTooltip, onSelectRow, onDism
                 hoverStyle={styles.hoveredComponentBG}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             >
-                <View style={styles.checkboxPressable}>
+                <View style={StyleUtils.getCheckboxPressableStyle()}>
                     <View
                         style={[
-                            StyleUtils.getCheckboxContainerStyle(20, 4),
+                            StyleUtils.getCheckboxContainerStyle(20),
                             item.isSelected && styles.checkedContainer,
                             item.isSelected && styles.borderColorFocus,
                             item.isDisabled && styles.cursorDisabled,
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index ad1b59ec2253..e2b32bc3aff5 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -1147,10 +1147,23 @@ function getDisabledLinkStyles(isDisabled = false): ViewStyle | CSSProperties {
     };
 }
 
+/**
+ * Returns the checkbox pressable style
+ */
+function getCheckboxPressableStyle(borderRadius = 6): ViewStyle | CSSProperties {
+    return {
+        padding: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        // eslint-disable-next-line object-shorthand
+        borderRadius: borderRadius,
+    };
+}
+
 /**
  * Returns the checkbox container style
  */
-function getCheckboxContainerStyle(size: number, borderRadius: number): ViewStyle | CSSProperties {
+function getCheckboxContainerStyle(size: number, borderRadius = 4): ViewStyle | CSSProperties {
     return {
         backgroundColor: themeColors.componentBG,
         height: size,
@@ -1287,6 +1300,7 @@ export {
     getWrappingStyle,
     getMenuItemTextContainerStyle,
     getDisabledLinkStyles,
+    getCheckboxPressableStyle,
     getCheckboxContainerStyle,
     getDropDownButtonHeight,
     getAmountFontSizeAndLineHeight,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index cef87c531972..38e3c69e39ba 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2448,13 +2448,6 @@ const styles = (theme) => ({
         alignItems: 'center',
     },
 
-    checkboxPressable: {
-        borderRadius: 6,
-        padding: 2,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-
     checkedContainer: {
         backgroundColor: theme.checkBox,
     },

From 451218ac72e1aa2fc6cbc7ec97332d9c95f77ed2 Mon Sep 17 00:00:00 2001
From: Nikhil Vats <nikvats5499@gmail.com>
Date: Mon, 2 Oct 2023 23:18:39 +0530
Subject: [PATCH 2/2] Fix outdated code after merging

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

diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index d198979fdf8e..8a42c84ffc67 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -44,10 +44,10 @@ function BaseListItem({item, isFocused = false, isDisabled = false, showTooltip,
                     ]}
                 >
                     {canSelectMultiple && (
-                        <View style={styles.checkboxPressable}>
+                        <View style={StyleUtils.getCheckboxPressableStyle()}>
                             <View
                                 style={[
-                                    StyleUtils.getCheckboxContainerStyle(20, 4),
+                                    StyleUtils.getCheckboxContainerStyle(20),
                                     styles.mr3,
                                     item.isSelected && styles.checkedContainer,
                                     item.isSelected && styles.borderColorFocus,