From 01159ea4d4a51cf6710f2d349b763128ed19e772 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Wed, 11 Dec 2024 01:09:32 +0300
Subject: [PATCH 1/3] made billable text color consistent

---
 .../MoneyRequestConfirmationListFooter.tsx    |  1 -
 .../ReportActionItem/MoneyRequestView.tsx     |  2 +-
 .../WorkspaceCategoriesSettingsPage.tsx       | 93 ++++++++++---------
 3 files changed, 49 insertions(+), 47 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationListFooter.tsx b/src/components/MoneyRequestConfirmationListFooter.tsx
index 01756e11aadf..5c846762e7f3 100644
--- a/src/components/MoneyRequestConfirmationListFooter.tsx
+++ b/src/components/MoneyRequestConfirmationListFooter.tsx
@@ -529,7 +529,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
index ca50e93e536f..f87237524284 100644
--- a/src/components/ReportActionItem/MoneyRequestView.tsx
+++ b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -730,7 +730,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
index 98c4e93d8d4c..bd5edaa43779 100644
--- 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>
     );

From dd1060b82f18e8451fb4c5988d5784b7156bee15 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Wed, 11 Dec 2024 18:32:57 +0300
Subject: [PATCH 2/3] minor fix

---
 src/components/MoneyRequestConfirmationListFooter.tsx | 1 -
 src/components/ReportActionItem/MoneyRequestView.tsx  | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationListFooter.tsx b/src/components/MoneyRequestConfirmationListFooter.tsx
index 5c846762e7f3..5bcc90621ff8 100644
--- a/src/components/MoneyRequestConfirmationListFooter.tsx
+++ b/src/components/MoneyRequestConfirmationListFooter.tsx
@@ -216,7 +216,6 @@ function MoneyRequestConfirmationListFooter({
     unit,
 }: MoneyRequestConfirmationListFooterProps) {
     const styles = useThemeStyles();
-    const theme = useTheme();
     const {translate, toLocaleDigit} = useLocalize();
     const {isOffline} = useNetwork();
     const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
index f87237524284..34c2ab7b615e 100644
--- a/src/components/ReportActionItem/MoneyRequestView.tsx
+++ b/src/components/ReportActionItem/MoneyRequestView.tsx
@@ -79,7 +79,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();

From 766f66409ac4fb283045eec33d9e4d1c8111ed23 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Wed, 11 Dec 2024 18:36:45 +0300
Subject: [PATCH 3/3] minor fix

---
 src/components/MoneyRequestConfirmationListFooter.tsx | 1 -
 src/components/ReportActionItem/MoneyRequestView.tsx  | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/MoneyRequestConfirmationListFooter.tsx b/src/components/MoneyRequestConfirmationListFooter.tsx
index 5bcc90621ff8..6c5cc9ae10cc 100644
--- 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';
diff --git a/src/components/ReportActionItem/MoneyRequestView.tsx b/src/components/ReportActionItem/MoneyRequestView.tsx
index 34c2ab7b615e..d300bb3bbdc7 100644
--- 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';