[CP Staging] Revert "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 SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
@@ -132,12 +132,14 @@ function PaymentCardChangeCurrencyForm({changeBillingCurrency, isSecurityCodeReq
         <View style={[styles.mh5, styles.flexGrow1]}>
             <SelectionList
                 data={currencyOptions}
-                ListItem={SingleSelectListItem}
+                ListItem={RadioListItem}
                 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 SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -67,10 +67,11 @@ function PaymentCardCurrencyModal({isVisible, currencies, currentCurrency = CONS
                 />
                 <SelectionList
                     data={currencyOptions}
-                    ListItem={SingleSelectListItem}
+                    ListItem={RadioListItem}
                     onSelectRow={(option) => {
                         onCurrencyChange(option.value);
                     }}
+                    initiallyFocusedItemKey={currentCurrency}
                     showScrollIndicator
                 />
             </ScreenWrapper>

src/components/AddPlaidBankAccount.tsx

@@ -251,11 +251,9 @@ function AddPlaidBankAccount({
 
     return (
         <FullPageOfflineBlockingView>
-            <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]}>
+            <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]}>
                 <Icon
                     src={icon}
                     height={iconSize}
@@ -269,12 +267,12 @@ function AddPlaidBankAccount({
                     )}
                 </View>
             </View>
-            <Text style={[styles.textLabelSupporting, styles.mh5]}>{`${translate('bankAccount.chooseAnAccountBelow')}:`}</Text>
+            <Text style={[styles.textLabelSupporting]}>{`${translate('bankAccount.chooseAnAccountBelow')}:`}</Text>
             <RadioButtons
                 items={options}
                 defaultCheckedValue={defaultSelectedPlaidAccountID}
                 onPress={handleSelectingPlaidAccount}
-                radioButtonStyle={[styles.optionRowCompact, styles.ph5]}
+                radioButtonStyle={[styles.mb6]}
             />
             <FormHelpMessage message={errorText} />
         </FullPageOfflineBlockingView>

src/components/ApproverSelectionList.tsx

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

src/components/BaseVacationDelegateSelectionComponent.tsx

@@ -187,7 +187,6 @@ 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 SingleSelectListItem from './SelectionList/ListItem/SingleSelectListItem';
+import RadioListItem from './SelectionList/ListItem/RadioListItem';
 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={SingleSelectListItem}
+            ListItem={RadioListItem}
             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 SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 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={SingleSelectListItem}
+                    ListItem={RadioListItem}
                     initiallyFocusedItemKey={currentCountry}
                     shouldSingleExecuteRowSelect
                     shouldStopPropagation

src/components/CurrencySelectionList/index.tsx

@@ -1,10 +1,9 @@
 import {Str} from 'expensify-common';
 import React, {useState} from 'react';
-import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 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';
@@ -23,7 +22,6 @@ 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]) => {
@@ -103,11 +101,8 @@ function CurrencySelectionList({
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...restProps}
             sections={sections}
-            ListItem={SingleSelectListItem}
+            ListItem={RadioListItem}
             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 SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 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={SingleSelectListItem}
+                    ListItem={RadioListItem}
                     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 SingleSelectListItem from './SelectionList/ListItem/SingleSelectListItem';
+import RadioListItem from './SelectionList/ListItem/RadioListItem';
 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={SingleSelectListItem}
+            ListItem={RadioListItem}
             initiallyFocusedItemKey={selectedOptionKey}
             shouldHideKeyboardOnScroll={false}
             shouldUpdateFocusedIndex

src/components/FeedbackSurvey.tsx

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

src/components/MoneyRequestConfirmationList.tsx

@@ -78,7 +78,7 @@
 import MoneyRequestConfirmationListFooter from './MoneyRequestConfirmationListFooter';
 import {PressableWithFeedback} from './Pressable';
 import {useProductTrainingContext} from './ProductTrainingContext';
-import NewChatListItem from './Search/NewChatListItem';
+import UserListItem from './SelectionList/ListItem/UserListItem';
 import SelectionListWithSections from './SelectionList/SelectionListWithSections';
 import type {Section} from './SelectionList/SelectionListWithSections/types';
 import SettlementButton from './SettlementButton';
@@ -1148,7 +1148,7 @@
                 onSendMoney?.(paymentMethod);
             }
         },
         [
             routeError,
             transactionID,
             iouType,
@@ -1398,7 +1398,7 @@
         <MouseProvider>
             <SelectionListWithSections<MoneyRequestConfirmationListItem>
                 sections={sections}
-                ListItem={NewChatListItem}
+                ListItem={UserListItem}
                 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 SelectionCheckbox from '@components/SelectionList/components/SelectionCheckbox';
+import SelectCircle from '@components/SelectCircle';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -55,15 +55,9 @@ function OptionItem({title, icon, onPress, isSelected = false, isDisabled, style
                         />
                         {(isSelected || !isDisabled) && (
                             <View>
-                                <SelectionCheckbox
-                                    item={{
-                                        isSelected,
-                                        text: translate(title),
-                                        keyForList: title,
-                                    }}
-                                    isCircular
-                                    onSelectRow={() => onPress?.()}
-                                    accessibilityLabel={translate(title)}
+                                <SelectCircle
+                                    isChecked={isSelected}
+                                    selectCircleStyles={styles.sectionSelectCircle}
                                 />
                             </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 SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 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={SingleSelectListItem}
+                    ListItem={RadioListItem}
                     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={[radioButtonStyle]}
+                        style={[styles.mb4, 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, styles.optionRowCompact)}
+                    wrapperStyle={styles.flexReset}
                 />
             ))}
             {shouldShowHorizontalRule && (