Merge pull request #53941 from FitseTLT/fix-billable-text-fading-bug

Fix - Billable-Billable and "members must categorize all expense" on toggle off text color behavior
Expensify · Dec 12, 2024 · 7bde2de · 7bde2de
2 parents 2c2704f + 766f664
commit 7bde2de
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 51 deletions.
diff --git a/src/components/MoneyRequestConfirmationListFooter.tsx b/src/components/MoneyRequestConfirmationListFooter.tsx
@@ -8,7 +8,6 @@ import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
@@ -216,7 +215,6 @@ function MoneyRequestConfirmationListFooter({
     unit,
 }: MoneyRequestConfirmationListFooterProps) {
     const styles = useThemeStyles();
-    const theme = useTheme();
     const {translate, toLocaleDigit} = useLocalize();
     const {isOffline} = useNetwork();
     const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
@@ -536,7 +534,6 @@ function MoneyRequestConfirmationListFooter({
                         onToggle={(isOn) => onToggleBillable?.(isOn)}
                         isActive={iouIsBillable}
                         disabled={isReadOnly}
-                        titleStyle={!iouIsBillable && {color: theme.textSupporting}}
                         wrapperStyle={styles.flex1}
                     />
                 </View>

diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -15,7 +15,6 @@ import ViolationMessages from '@components/ViolationMessages';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useViolations from '@hooks/useViolations';
 import type {ViolationField} from '@hooks/useViolations';
@@ -79,7 +78,6 @@ const getTransactionID = (report: OnyxEntry<OnyxTypes.Report>, parentReportActio
 };
 
 function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = false, updatedTransaction, isFromReviewDuplicates = false}: MoneyRequestViewProps) {
-    const theme = useTheme();
     const styles = useThemeStyles();
     const session = useSession();
     const {isOffline} = useNetwork();
@@ -729,7 +727,7 @@ function MoneyRequestView({report, shouldShowAnimatedBackground, readonly = fals
                 {shouldShowBillable && (
                     <View style={[styles.flexRow, styles.optionRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8]}>
                         <View>
-                            <Text color={!transactionBillable ? theme.textSupporting : undefined}>{translate('common.billable')}</Text>
+                            <Text>{translate('common.billable')}</Text>
                             {!!getErrorForField('billable') && (
                                 <ViolationMessages
                                     violations={getViolationsForField('billable')}

diff --git a/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesSettingsPage.tsx
@@ -4,6 +4,7 @@ import {useOnyx} from 'react-native-onyx';
 import CategorySelectorModal from '@components/CategorySelector/CategorySelectorModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
 import SelectionList from '@components/SelectionList';
 import type {ListItem} from '@components/SelectionList/types';
 import Text from '@components/Text';
@@ -99,52 +100,54 @@ function WorkspaceCategoriesSettingsPage({policy, route}: WorkspaceCategoriesSet
                     title={translate('common.settings')}
                     onBackButtonPress={() => Navigation.goBack(isQuickSettingsFlow ? ROUTES.SETTINGS_CATEGORIES_ROOT.getRoute(policyID, backTo) : undefined)}
                 />
-                <ToggleSettingOptionRow
-                    title={translate('workspace.categories.requiresCategory')}
-                    subtitle={toggleSubtitle}
-                    switchAccessibilityLabel={translate('workspace.categories.requiresCategory')}
-                    isActive={policy?.requiresCategory ?? false}
-                    onToggle={updateWorkspaceRequiresCategory}
-                    pendingAction={policy?.pendingFields?.requiresCategory}
-                    disabled={isToggleDisabled}
-                    wrapperStyle={[styles.pv2, styles.mh5]}
-                    errors={policy?.errorFields?.requiresCategory ?? undefined}
-                    onCloseError={() => Policy.clearPolicyErrorField(policy?.id ?? '-1', 'requiresCategory')}
-                    shouldPlaceSubtitleBelowSwitch
-                />
-                <View style={[styles.sectionDividerLine]} />
-                <View style={[styles.containerWithSpaceBetween]}>
-                    {!!currentPolicy && (sections.at(0)?.data?.length ?? 0) > 0 && (
-                        <SelectionList
-                            headerContent={
-                                <View style={[styles.mh5, styles.mt2, styles.mb1]}>
-                                    <Text style={[styles.headerText]}>{translate('workspace.categories.defaultSpendCategories')}</Text>
-                                    <Text style={[styles.mt1, styles.lh20]}>{translate('workspace.categories.spendCategoriesDescription')}</Text>
-                                </View>
-                            }
-                            sections={sections}
-                            ListItem={SpendCategorySelectorListItem}
-                            onSelectRow={(item) => {
-                                if (!item.groupID || !item.categoryID) {
-                                    return;
+                <ScrollView contentContainerStyle={[styles.flexGrow1]}>
+                    <ToggleSettingOptionRow
+                        title={translate('workspace.categories.requiresCategory')}
+                        subtitle={toggleSubtitle}
+                        switchAccessibilityLabel={translate('workspace.categories.requiresCategory')}
+                        isActive={policy?.requiresCategory ?? false}
+                        onToggle={updateWorkspaceRequiresCategory}
+                        pendingAction={policy?.pendingFields?.requiresCategory}
+                        disabled={isToggleDisabled}
+                        wrapperStyle={[styles.pv2, styles.mh5]}
+                        errors={policy?.errorFields?.requiresCategory ?? undefined}
+                        onCloseError={() => Policy.clearPolicyErrorField(policy?.id ?? '-1', 'requiresCategory')}
+                        shouldPlaceSubtitleBelowSwitch
+                    />
+                    <View style={[styles.sectionDividerLine]} />
+                    <View style={[styles.containerWithSpaceBetween]}>
+                        {!!currentPolicy && (sections.at(0)?.data?.length ?? 0) > 0 && (
+                            <SelectionList
+                                headerContent={
+                                    <View style={[styles.mh5, styles.mt2, styles.mb1]}>
+                                        <Text style={[styles.headerText]}>{translate('workspace.categories.defaultSpendCategories')}</Text>
+                                        <Text style={[styles.mt1, styles.lh20]}>{translate('workspace.categories.spendCategoriesDescription')}</Text>
+                                    </View>
                                 }
-                                setIsSelectorModalVisible(true);
-                                setCategoryID(item.categoryID);
-                                setGroupID(item.groupID);
-                            }}
-                        />
-                    )}
-                    {!!categoryID && !!groupID && (
-                        <CategorySelectorModal
-                            policyID={policyID}
-                            isVisible={isSelectorModalVisible}
-                            currentCategory={categoryID}
-                            onClose={() => setIsSelectorModalVisible(false)}
-                            onCategorySelected={setNewCategory}
-                            label={groupID[0].toUpperCase() + groupID.slice(1)}
-                        />
-                    )}
-                </View>
+                                sections={sections}
+                                ListItem={SpendCategorySelectorListItem}
+                                onSelectRow={(item) => {
+                                    if (!item.groupID || !item.categoryID) {
+                                        return;
+                                    }
+                                    setIsSelectorModalVisible(true);
+                                    setCategoryID(item.categoryID);
+                                    setGroupID(item.groupID);
+                                }}
+                            />
+                        )}
+                    </View>
+                </ScrollView>
+                {!!categoryID && !!groupID && (
+                    <CategorySelectorModal
+                        policyID={policyID}
+                        isVisible={isSelectorModalVisible}
+                        currentCategory={categoryID}
+                        onClose={() => setIsSelectorModalVisible(false)}
+                        onCategorySelected={setNewCategory}
+                        label={groupID[0].toUpperCase() + groupID.slice(1)}
+                    />
+                )}
             </ScreenWrapper>
         </AccessOrNotFoundWrapper>
     );