From 5571f6130dfd155c2cfe091469ed857b63eb094b Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 24 Jan 2024 12:51:03 +0800
Subject: [PATCH 1/2] fix select circle focus outline

---
 src/components/OptionRow.tsx                                 | 3 ++-
 .../MoneyTemporaryForRefactorRequestParticipantsSelector.js  | 4 ++--
 src/styles/index.ts                                          | 5 +++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/OptionRow.tsx b/src/components/OptionRow.tsx
index dd8cd115e13f..d9024b1bdca6 100644
--- a/src/components/OptionRow.tsx
+++ b/src/components/OptionRow.tsx
@@ -270,8 +270,9 @@ function OptionRow({
                                                 disabled={isDisabled}
                                                 role={CONST.ROLE.BUTTON}
                                                 accessibilityLabel={CONST.ROLE.BUTTON}
+                                                style={[styles.ml2, styles.optionSelectCircle]}
                                             >
-                                                <SelectCircle isChecked={isSelected} />
+                                                <SelectCircle isChecked={isSelected} selectCircleStyles={styles.ml0} />
                                             </PressableWithFeedback>
                                         )}
                                     </>
diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
index 0949081435c4..34d70444278d 100644
--- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
+++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -303,9 +303,9 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
                         disabled={item.isDisabled}
                         role={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
                         accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
-                        style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
+                        style={[styles.flexRow, styles.alignItemsCenter, styles.ml5, styles.optionSelectCircle]}
                     >
-                        <SelectCircle isChecked={item.isSelected} />
+                        <SelectCircle isChecked={item.isSelected} selectCircleStyles={styles.ml0} />
                     </PressableWithFeedback>
                 );
             }
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 34f69faa89cc..a27c588634d8 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2504,6 +2504,11 @@ const styles = (theme: ThemeColors) =>
             marginLeft: 8,
         },
 
+        optionSelectCircle: {
+            borderRadius: (variables.componentSizeSmall / 2) + 1, 
+            padding: 1,
+        },
+
         unreadIndicatorContainer: {
             position: 'absolute',
             top: -10,

From 664626c3600065c1d8ee407fe5b8dcadf6ec5622 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 24 Jan 2024 12:54:37 +0800
Subject: [PATCH 2/2] prettier

---
 src/components/OptionRow.tsx                                 | 5 ++++-
 .../MoneyTemporaryForRefactorRequestParticipantsSelector.js  | 5 ++++-
 src/styles/index.ts                                          | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/OptionRow.tsx b/src/components/OptionRow.tsx
index d9024b1bdca6..1ac8c27b1a77 100644
--- a/src/components/OptionRow.tsx
+++ b/src/components/OptionRow.tsx
@@ -272,7 +272,10 @@ function OptionRow({
                                                 accessibilityLabel={CONST.ROLE.BUTTON}
                                                 style={[styles.ml2, styles.optionSelectCircle]}
                                             >
-                                                <SelectCircle isChecked={isSelected} selectCircleStyles={styles.ml0} />
+                                                <SelectCircle
+                                                    isChecked={isSelected}
+                                                    selectCircleStyles={styles.ml0}
+                                                />
                                             </PressableWithFeedback>
                                         )}
                                     </>
diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
index 34d70444278d..1aabb4be8cc5 100644
--- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
+++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -305,7 +305,10 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
                         accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
                         style={[styles.flexRow, styles.alignItemsCenter, styles.ml5, styles.optionSelectCircle]}
                     >
-                        <SelectCircle isChecked={item.isSelected} selectCircleStyles={styles.ml0} />
+                        <SelectCircle
+                            isChecked={item.isSelected}
+                            selectCircleStyles={styles.ml0}
+                        />
                     </PressableWithFeedback>
                 );
             }
diff --git a/src/styles/index.ts b/src/styles/index.ts
index a27c588634d8..fd8f520af803 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2505,7 +2505,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         optionSelectCircle: {
-            borderRadius: (variables.componentSizeSmall / 2) + 1, 
+            borderRadius: variables.componentSizeSmall / 2 + 1,
             padding: 1,
         },