Merge pull request #28785 from BhuvaneshPatil/27703-align-checkboxes

fix: align checkbox with input levels

Author: deetergp

src/components/Checkbox.js

@@ -91,7 +91,7 @@ function Checkbox(props) {
             onPress={firePressHandlerOnClick}
             onMouseDown={props.onMouseDown}
             ref={props.forwardedRef}
-            style={[props.style, StyleUtils.getCheckboxPressableStyle(props.containerBorderRadius + 2)]} // to align outline on focus, border-radius of pressable should be 2px more than Checkbox
+            style={[StyleUtils.getCheckboxPressableStyle(props.containerBorderRadius + 2), props.style]} // 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}}

src/components/CheckboxWithLabel.js

@@ -102,6 +102,7 @@ function CheckboxWithLabel(props) {
                     isChecked={isChecked}
                     onPress={toggleCheckbox}
                     label={props.label}
+                    style={[styles.checkboxWithLabelCheckboxStyle]}
                     hasError={Boolean(props.errorText)}
                     forwardedRef={props.forwardedRef}
                     accessibilityLabel={props.accessibilityLabel || props.label}

src/styles/styles.js

@@ -3718,6 +3718,10 @@ const styles = (theme) => ({
     receiptDropHeaderGap: {
         backgroundColor: theme.receiptDropUIBG,
     },
+
+    checkboxWithLabelCheckboxStyle: {
+        marginLeft: -2,
+    },
 });
 
 // For now we need to export the styles function that takes the theme as an argument