fix the focus outline isn't circle

Expensify · Oct 12, 2024 · d6c5c01 · d6c5c01
1 parent e4969b2
commit d6c5c01
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import {View} from 'react-native';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -36,17 +35,16 @@ function RadioButton({isChecked, onPress, accessibilityLabel, hasError = false,
             pressDimmingValue={1}
             accessibilityLabel={accessibilityLabel}
             role={CONST.ROLE.RADIO}
+            style={[styles.radioButtonContainer, hasError && styles.borderColorDanger, disabled && styles.cursorDisabled]}
         >
-            <View style={[styles.radioButtonContainer, hasError && styles.borderColorDanger, disabled && styles.cursorDisabled]}>
-                {isChecked && (
-                    <Icon
-                        src={Expensicons.Checkmark}
-                        fill={theme.checkBox}
-                        height={14}
-                        width={14}
-                    />
-                )}
-            </View>
+            {isChecked && (
+                <Icon
+                    src={Expensicons.Checkmark}
+                    fill={theme.checkBox}
+                    height={14}
+                    width={14}
+                />
+            )}
         </PressableWithFeedback>
     );
 }

diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx
@@ -259,9 +259,12 @@ function NewChatPage({isGroupChat}: NewChatPageProps) {
                         disabled={item.isDisabled}
                         role={CONST.ROLE.BUTTON}
                         accessibilityLabel={CONST.ROLE.BUTTON}
-                        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>
                 );
             }