Enhance icons UI consistency

src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx

@@ -6,7 +6,7 @@ import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
@@ -132,14 +132,12 @@ function PaymentCardChangeCurrencyForm({changeBillingCurrency, isSecurityCodeReq
         <View style={[styles.mh5, styles.flexGrow1]}>
             <SelectionList
                 data={currencyOptions}
-                ListItem={RadioListItem}
+                ListItem={SingleSelectListItem}
                 onSelectRow={(option) => {
                     selectCurrency(option.value);
                 }}
                 style={{containerStyle: styles.mhn5}}
-                initiallyFocusedItemKey={currency}
                 customListHeader={<PaymentCardCurrencyHeader isSectionList />}
-                shouldStopPropagation
             />
         </View>
     );

src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx

@@ -4,7 +4,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -67,11 +67,10 @@ function PaymentCardCurrencyModal({isVisible, currencies, currentCurrency = CONS
                 />
                 <SelectionList
                     data={currencyOptions}
-                    ListItem={RadioListItem}
+                    ListItem={SingleSelectListItem}
                     onSelectRow={(option) => {
                         onCurrencyChange(option.value);
                     }}
-                    initiallyFocusedItemKey={currentCurrency}
                     showScrollIndicator
                 />
             </ScreenWrapper>

src/components/AddPlaidBankAccount.tsx

@@ -251,9 +251,11 @@ function AddPlaidBankAccount({
 
     return (
         <FullPageOfflineBlockingView>
-            <Text style={[styles.mb3, styles.textHeadlineLineHeightXXL]}>{translate(isDisplayedInWalletFlow ? 'walletPage.chooseYourBankAccount' : 'bankAccount.chooseAnAccount')}</Text>
-            {!!text && <Text style={[styles.mb6, styles.textSupporting]}>{text}</Text>}
-            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb6]}>
+            <Text style={[styles.mh5, styles.mb3, styles.textHeadlineLineHeightXXL]}>
+                {translate(isDisplayedInWalletFlow ? 'walletPage.chooseYourBankAccount' : 'bankAccount.chooseAnAccount')}
+            </Text>
+            {!!text && <Text style={[styles.mh5, styles.mb6, styles.textSupporting]}>{text}</Text>}
+            <View style={[styles.mh5, styles.flexRow, styles.alignItemsCenter, styles.mb6]}>
                 <Icon
                     src={icon}
                     height={iconSize}
@@ -267,12 +269,12 @@ function AddPlaidBankAccount({
                     )}
                 </View>
             </View>
-            <Text style={[styles.textLabelSupporting]}>{`${translate('bankAccount.chooseAnAccountBelow')}:`}</Text>
+            <Text style={[styles.textLabelSupporting, styles.mh5]}>{`${translate('bankAccount.chooseAnAccountBelow')}:`}</Text>
             <RadioButtons
                 items={options}
                 defaultCheckedValue={defaultSelectedPlaidAccountID}
                 onPress={handleSelectingPlaidAccount}
-                radioButtonStyle={[styles.mb6]}
+                radioButtonStyle={[styles.optionRowCompact, styles.ph5]}
             />
             <FormHelpMessage message={errorText} />
         </FullPageOfflineBlockingView>

src/components/ApproverSelectionList.tsx

@@ -168,6 +168,7 @@ function ApproverSelectionList({
                     shouldUpdateFocusedIndex={shouldUpdateFocusedIndex}
                     showScrollIndicator
                     isRowMultilineSupported
+                    shouldShowRadioButton
                 />
             </FullPageNotFoundView>
         </ScreenWrapper>

src/components/BaseVacationDelegateSelectionComponent.tsx

@@ -187,6 +187,7 @@ function BaseVacationDelegateSelectionComponent({
                         onEndReached={onListEndReached}
                         shouldSingleExecuteRowSelect
                         shouldShowTextInput
+                        shouldShowRadioButton
                     />
                 </View>
             )}

src/components/CategoryPicker.tsx

@@ -11,7 +11,7 @@ import {getHeaderMessageForNonUserList} from '@libs/OptionsListUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import RadioListItem from './SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from './SelectionList/ListItem/SingleSelectListItem';
 import SelectionListWithSections from './SelectionList/SelectionListWithSections';
 import type {ListItem} from './SelectionList/types';
 
@@ -80,7 +80,7 @@ function CategoryPicker({selectedCategory, policyID, onSubmit, addBottomSafeArea
         <SelectionListWithSections
             sections={sections}
             onSelectRow={onSubmit}
-            ListItem={RadioListItem}
+            ListItem={SingleSelectListItem}
             shouldShowTextInput={categoriesCount >= CONST.STANDARD_LIST_ITEM_LIMIT}
             textInputOptions={textInputOptions}
             initiallyFocusedItemKey={selectedOptionKey}

src/components/CountryPicker/CountrySelectorModal.tsx

@@ -3,7 +3,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -90,7 +90,7 @@ function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onC
                     data={searchResults}
                     textInputOptions={textInputOptions}
                     onSelectRow={onCountrySelected}
-                    ListItem={RadioListItem}
+                    ListItem={SingleSelectListItem}
                     initiallyFocusedItemKey={currentCountry}
                     shouldSingleExecuteRowSelect
                     shouldStopPropagation

src/components/CurrencySelectionList/index.tsx

@@ -1,9 +1,10 @@
 import {Str} from 'expensify-common';
 import React, {useState} from 'react';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
 import {useCurrencyListActions, useCurrencyListState} from '@hooks/useCurrencyList';
 import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import getMatchScore from '@libs/getMatchScore';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {CurrencyListItem, CurrencySelectionListProps} from './types';
@@ -22,6 +23,7 @@ function CurrencySelectionList({
     const {getCurrencySymbol} = useCurrencyListActions();
     const [searchValue, setSearchValue] = useState('');
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
     const getUnselectedOptions = (options: CurrencyListItem[]) => options.filter((option) => !option.isSelected);
 
     const currencyOptions: CurrencyListItem[] = Object.entries(currencyList).reduce((acc, [currencyCode, currencyInfo]) => {
@@ -101,8 +103,11 @@ function CurrencySelectionList({
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...restProps}
             sections={sections}
-            ListItem={RadioListItem}
+            ListItem={SingleSelectListItem}
             onSelectRow={onSelect}
+            style={{
+                listItemWrapperStyle: styles.optionRow,
+            }}
             textInputOptions={textInputOptions}
             shouldShowTextInput={!!searchInputLabel}
             shouldSingleExecuteRowSelect

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -4,7 +4,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -81,7 +81,7 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
                 />
                 <SelectionList
                     data={data}
-                    ListItem={RadioListItem}
+                    ListItem={SingleSelectListItem}
                     onSelectRow={(option) => {
                         Keyboard.dismiss();
                         onYearChange?.(option.value);

src/components/DestinationPicker.tsx

@@ -10,7 +10,7 @@ import type {Destination} from '@libs/PerDiemRequestUtils';
 import {getPerDiemCustomUnit} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import RadioListItem from './SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from './SelectionList/ListItem/SingleSelectListItem';
 import SelectionListWithSections from './SelectionList/SelectionListWithSections';
 import type {ListItem, SelectionListWithSectionsHandle} from './SelectionList/types';
 
@@ -80,7 +80,7 @@ function DestinationPicker({selectedDestination, policyID, onSubmit, ref}: Desti
             shouldShowTextInput={shouldShowTextInput}
             textInputOptions={textInputOptions}
             onSelectRow={onSubmit}
-            ListItem={RadioListItem}
+            ListItem={SingleSelectListItem}
             initiallyFocusedItemKey={selectedOptionKey}
             shouldHideKeyboardOnScroll={false}
             shouldUpdateFocusedIndex

src/components/FeedbackSurvey.tsx

@@ -108,19 +108,21 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
             isSubmitButtonVisible={false}
             enabledWhenOffline={enabledWhenOffline}
         >
-            <View style={styles.mh5}>
-                <Text style={styles.textHeadline}>{title}</Text>
-                <Text style={[styles.mt1, styles.mb3, styles.textNormalThemeText]}>{description}</Text>
+            <View>
+                <View style={styles.mh5}>
+                    <Text style={styles.textHeadline}>{title}</Text>
+                    <Text style={[styles.mt1, styles.textNormalThemeText]}>{description}</Text>
+                </View>
                 <InputWrapper
                     InputComponent={RadioButtons}
                     inputID={INPUT_IDS.REASON}
                     items={options}
-                    radioButtonStyle={[styles.mb7, optionRowStyles]}
+                    radioButtonStyle={[styles.optionRowCompact, styles.ph5, optionRowStyles]}
                     onPress={handleOptionSelect}
                     shouldSaveDraft
                 />
                 {!!reason && (
-                    <>
+                    <View style={[styles.mh5, styles.mt4]}>
                         <Text style={[styles.textNormalThemeText, styles.mb3]}>{translate('feedbackSurvey.additionalInfoTitle')}</Text>
                         <InputWrapper
                             InputComponent={TextInput}
@@ -131,7 +133,7 @@ function FeedbackSurvey({title, description, onSubmit, optionRowStyles, footerTe
                             onChangeText={handleSetNote}
                             shouldSaveDraft
                         />
-                    </>
+                    </View>
                 )}
             </View>
             <FixedFooter style={styles.pb0}>

src/components/MoneyRequestConfirmationList.tsx

@@ -77,7 +77,7 @@
 import MoneyRequestConfirmationListFooter from './MoneyRequestConfirmationListFooter';
 import {PressableWithFeedback} from './Pressable';
 import {useProductTrainingContext} from './ProductTrainingContext';
-import UserListItem from './SelectionList/ListItem/UserListItem';
+import NewChatListItem from './Search/NewChatListItem';
 import SelectionListWithSections from './SelectionList/SelectionListWithSections';
 import type {Section} from './SelectionList/SelectionListWithSections/types';
 import SettlementButton from './SettlementButton';
@@ -1148,7 +1148,7 @@
             iouType,
             policy,
             policyTagLists,
             selectedParticipants,
             isEditingSplitBill,
             isMerchantRequired,
             isMerchantEmpty,
@@ -1392,7 +1392,7 @@
         <MouseProvider>
             <SelectionListWithSections<MoneyRequestConfirmationListItem>
                 sections={sections}
-                ListItem={UserListItem}
+                ListItem={NewChatListItem}
                 onSelectRow={navigateToParticipantPage}
                 shouldSingleExecuteRowSelect
                 shouldPreventDefaultFocusOnSelectRow

src/components/OptionsPicker/OptionItem.tsx

@@ -3,7 +3,7 @@ import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
 import {PressableWithFeedback} from '@components/Pressable';
-import SelectCircle from '@components/SelectCircle';
+import SelectionCheckbox from '@components/SelectionList/components/SelectionCheckbox';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -55,9 +55,15 @@ function OptionItem({title, icon, onPress, isSelected = false, isDisabled, style
                         />
                         {(isSelected || !isDisabled) && (
                             <View>
-                                <SelectCircle
-                                    isChecked={isSelected}
-                                    selectCircleStyles={styles.sectionSelectCircle}
+                                <SelectionCheckbox
+                                    item={{
+                                        isSelected,
+                                        text: translate(title),
+                                        keyForList: title,
+                                    }}
+                                    isCircular
+                                    onSelectRow={() => onPress?.()}
+                                    accessibilityLabel={translate(title)}
                                 />
                             </View>
                         )}

src/components/PushRowWithModal/PushRowModal.tsx

@@ -3,7 +3,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import searchOptions from '@libs/searchOptions';
@@ -99,7 +99,7 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
                 />
                 <SelectionList
                     data={searchResults}
-                    ListItem={RadioListItem}
+                    ListItem={SingleSelectListItem}
                     onSelectRow={handleSelectRow}
                     textInputOptions={textInputOptions}
                     initiallyFocusedItemKey={selectedOption}

src/components/RadioButtons.tsx

@@ -54,7 +54,7 @@ function RadioButtons({items, onPress, defaultCheckedValue = '', radioButtonStyl
                     <RadioButtonWithLabel
                         key={item.value}
                         isChecked={item.value === checkedValue}
-                        style={[styles.mb4, radioButtonStyle]}
+                        style={[radioButtonStyle]}
                         onPress={() => {
                             setLocalValue(item.value);
                             onInputChange(item.value);

src/components/Search/FilterComponents/DatePresetFilterBase.tsx

@@ -189,7 +189,7 @@ function DatePresetFilterBase({
                     }}
                     onSelectRow={() => setDateValue(CONST.SEARCH.DATE_MODIFIERS.ON, preset)}
                     keyForList={preset}
-                    wrapperStyle={styles.flexReset}
+                    wrapperStyle={(styles.flexReset, styles.optionRowCompact)}
                 />
             ))}
             {shouldShowHorizontalRule && (