From 7173bc67e943e71ed0600cc8aa843fb767652060 Mon Sep 17 00:00:00 2001
From: Nikhil Vats <nikvats5499@gmail.com>
Date: Mon, 19 Jun 2023 03:02:04 +0530
Subject: [PATCH 1/2] Improve TaskPreview UI

---
 src/components/ReportActionItem/TaskPreview.js |  5 +++--
 src/styles/StyleUtils.js                       | 12 ++++++++++++
 src/styles/styles.js                           |  6 +++---
 src/styles/variables.js                        |  1 +
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 182c931ebd16..256f5a8ac729 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -11,6 +11,7 @@ import CONST from '../../CONST';
 import * as Expensicons from '../Icon/Expensicons';
 import Checkbox from '../Checkbox';
 import * as StyleUtils from '../../styles/StyleUtils';
+import variables from '../../styles/variables';
 import getButtonState from '../../libs/getButtonState';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
@@ -68,9 +69,9 @@ function TaskPreview(props) {
             accessibilityRole="button"
             accessibilityLabel={props.translate('newTaskPage.task')}
         >
-            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+            <View style={[styles.flex1, styles.flexRow, styles.alignItemsStart]}>
                 <Checkbox
-                    style={[styles.mr2]}
+                    style={[styles.mr2, StyleUtils.getMarginTop(variables.taskCheckboxTopMargin)]}
                     containerStyle={[styles.taskCheckbox]}
                     isChecked={isTaskCompleted}
                     disabled={TaskUtils.isTaskCanceled(props.taskReport)}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 2feed7b9b8d8..367cbf362c9c 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -751,6 +751,17 @@ function getPaddingLeft(paddingLeft) {
     };
 }
 
+/**
+ * Get variable margin-top as style
+ * @param {Number} marginTop
+ * @returns {Object}
+ */
+function getMarginTop(marginTop) {
+    return {
+        marginTop,
+    };
+}
+
 /**
  * Checks to see if the iOS device has safe areas or not
  *
@@ -1220,6 +1231,7 @@ export {
     parseStyleFromFunction,
     combineStyles,
     getPaddingLeft,
+    getMarginTop,
     hasSafeAreas,
     getHeight,
     getMinimumHeight,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index c42c1a77c07f..a262c0b8b600 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2455,11 +2455,11 @@ const styles = {
 
     checkboxContainer: {
         backgroundColor: themeColors.componentBG,
-        borderRadius: 2,
+        borderRadius: 4,
         height: 20,
         width: 20,
-        borderColor: themeColors.icon,
-        borderWidth: 1,
+        borderColor: themeColors.borderLighter,
+        borderWidth: 2,
         justifyContent: 'center',
         alignItems: 'center',
     },
diff --git a/src/styles/variables.js b/src/styles/variables.js
index 89897b7c1817..51b69b4ff445 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -140,6 +140,7 @@ export default {
     popoverWidth: 375,
     addPaymentPopoverTopSpacing: 8,
     addPaymentPopoverRightSpacing: 13,
+    taskCheckboxTopMargin: 2,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility

From 357a9ea20fc7c614f4082f0efb6bcae26366e9ca Mon Sep 17 00:00:00 2001
From: Nikhil Vats <nikvats5499@gmail.com>
Date: Tue, 20 Jun 2023 18:29:58 +0530
Subject: [PATCH 2/2] Fix checkbox outline

---
 src/components/Checkbox.js                     |  4 +---
 src/components/ReportActionItem/TaskPreview.js |  3 +--
 src/styles/StyleUtils.js                       | 12 ------------
 src/styles/styles.js                           |  7 +++++++
 src/styles/variables.js                        |  1 -
 web/index.html                                 |  3 ---
 6 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
index 5ce90473bbdd..0a023b7b4fb4 100644
--- a/src/components/Checkbox.js
+++ b/src/components/Checkbox.js
@@ -72,7 +72,7 @@ function Checkbox(props) {
             onPress={firePressHandlerOnClick}
             onMouseDown={props.onMouseDown}
             ref={props.forwardedRef}
-            style={props.style}
+            style={[props.style, styles.checkboxPressable]}
             onKeyDown={handleSpaceKey}
             accessibilityRole="checkbox"
             accessibilityState={{checked: props.isChecked}}
@@ -89,8 +89,6 @@ function Checkbox(props) {
                         props.disabled && styles.cursorDisabled,
                         props.isChecked && styles.borderColorFocus,
                     ]}
-                    // Used as CSS selector to customize focus-visible style
-                    dataSet={{checkbox: true}}
                 >
                     {props.isChecked && (
                         <Icon
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 256f5a8ac729..2e47d7ae471e 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -11,7 +11,6 @@ import CONST from '../../CONST';
 import * as Expensicons from '../Icon/Expensicons';
 import Checkbox from '../Checkbox';
 import * as StyleUtils from '../../styles/StyleUtils';
-import variables from '../../styles/variables';
 import getButtonState from '../../libs/getButtonState';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
@@ -71,7 +70,7 @@ function TaskPreview(props) {
         >
             <View style={[styles.flex1, styles.flexRow, styles.alignItemsStart]}>
                 <Checkbox
-                    style={[styles.mr2, StyleUtils.getMarginTop(variables.taskCheckboxTopMargin)]}
+                    style={[styles.mr2]}
                     containerStyle={[styles.taskCheckbox]}
                     isChecked={isTaskCompleted}
                     disabled={TaskUtils.isTaskCanceled(props.taskReport)}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 367cbf362c9c..2feed7b9b8d8 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -751,17 +751,6 @@ function getPaddingLeft(paddingLeft) {
     };
 }
 
-/**
- * Get variable margin-top as style
- * @param {Number} marginTop
- * @returns {Object}
- */
-function getMarginTop(marginTop) {
-    return {
-        marginTop,
-    };
-}
-
 /**
  * Checks to see if the iOS device has safe areas or not
  *
@@ -1231,7 +1220,6 @@ export {
     parseStyleFromFunction,
     combineStyles,
     getPaddingLeft,
-    getMarginTop,
     hasSafeAreas,
     getHeight,
     getMinimumHeight,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index a262c0b8b600..ab775bed72c7 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2453,6 +2453,13 @@ const styles = {
         alignItems: 'center',
     },
 
+    checkboxPressable: {
+        borderRadius: 6,
+        padding: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+
     checkboxContainer: {
         backgroundColor: themeColors.componentBG,
         borderRadius: 4,
diff --git a/src/styles/variables.js b/src/styles/variables.js
index 51b69b4ff445..89897b7c1817 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -140,7 +140,6 @@ export default {
     popoverWidth: 375,
     addPaymentPopoverTopSpacing: 8,
     addPaymentPopoverRightSpacing: 13,
-    taskCheckboxTopMargin: 2,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility
diff --git a/web/index.html b/web/index.html
index 3dfeed27a4d2..90011c87e7a9 100644
--- a/web/index.html
+++ b/web/index.html
@@ -64,9 +64,6 @@
         select:focus-visible, select:focus[data-focusvisible-polyfill]  {
             box-shadow: none;
         }
-        div[role="checkbox"]:focus-visible > div[data-checkbox], div[role="checkbox"]:focus[data-focusvisible-polyfill] > div[data-checkbox] {
-            border-color: #03D47C !important;
-        }
         ::-ms-reveal {
             display: none;
         }