From abd7cf090a7f2cc2d5718746358322c0a1095868 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Sun, 30 Jul 2023 16:13:17 +0100
Subject: [PATCH] :recycle: (common) migrating to specific common component
import paths pt3 (#1420)
Part 3 of the migration.
Part 2 here: https://github.com/actualbudget/actual/pull/1419
---
.../desktop-client/src/components/BankSyncStatus.js | 3 ++-
.../desktop-client/src/components/FinancesApp.tsx | 2 +-
.../desktop-client/src/components/FixedSizeList.js | 2 +-
.../src/components/FloatableSidebar.js | 2 +-
.../src/components/MobileWebMessage.js | 4 +++-
.../desktop-client/src/components/PrivacyFilter.tsx | 2 +-
.../desktop-client/src/components/ThemeSelector.tsx | 2 +-
packages/desktop-client/src/components/Titlebar.js | 12 ++++--------
.../src/components/accounts/Account.js | 4 +++-
.../src/components/accounts/Balance.js | 4 +++-
.../components/autocomplete/AccountAutocomplete.js | 2 +-
.../src/components/autocomplete/CategorySelect.tsx | 3 ++-
.../src/components/autocomplete/PayeeAutocomplete.js | 3 ++-
.../autocomplete/SavedFilterAutocomplete.js | 2 +-
.../src/components/budget/BalanceWithCarryover.tsx | 2 +-
.../src/components/budget/BudgetSummaries.js | 2 +-
.../src/components/budget/DynamicBudgetTable.js | 2 +-
.../src/components/budget/MobileBudget.js | 2 +-
.../src/components/budget/MobileTable.js | 2 +-
.../src/components/budget/MonthCountSelector.js | 2 +-
.../src/components/budget/MonthPicker.js | 2 +-
.../desktop-client/src/components/budget/index.js | 2 +-
packages/desktop-client/src/components/common.tsx | 7 -------
packages/desktop-client/src/components/forms.tsx | 3 ++-
.../src/components/manager/ConfigServer.js | 4 +++-
.../src/components/manager/ManagementApp.js | 3 ++-
.../desktop-client/src/components/manager/Modals.js | 2 +-
.../src/components/manager/ServerURL.js | 4 +++-
.../src/components/manager/WelcomeScreen.js | 5 ++++-
.../src/components/manager/subscribe/Bootstrap.tsx | 5 ++++-
.../components/manager/subscribe/ChangePassword.tsx | 4 +++-
.../manager/subscribe/ConfirmPasswordForm.tsx | 3 ++-
.../src/components/manager/subscribe/Error.tsx | 4 +++-
.../src/components/manager/subscribe/Login.tsx | 4 +++-
.../src/components/manager/subscribe/common.tsx | 2 +-
.../src/components/reports/Container.tsx | 2 +-
.../desktop-client/src/components/reports/Header.js | 5 ++++-
.../desktop-client/src/components/reports/index.tsx | 2 +-
.../src/components/schedules/StatusBadge.js | 3 ++-
.../src/components/settings/Encryption.tsx | 4 +++-
.../src/components/settings/Export.tsx | 3 ++-
.../src/components/settings/FixSplits.tsx | 4 +++-
.../src/components/settings/Format.tsx | 5 ++++-
.../src/components/settings/Global.tsx | 4 +++-
.../desktop-client/src/components/settings/Reset.tsx | 3 ++-
.../src/components/settings/Themes.tsx | 4 +++-
.../desktop-client/src/components/settings/index.tsx | 6 +++++-
packages/desktop-client/src/components/sort.js | 2 +-
.../desktop-client/src/components/util/DisplayId.js | 2 +-
.../src/components/util/GenericInput.js | 3 ++-
upcoming-release-notes/1418.md | 2 +-
upcoming-release-notes/1420.md | 6 ++++++
52 files changed, 109 insertions(+), 64 deletions(-)
create mode 100644 upcoming-release-notes/1420.md
diff --git a/packages/desktop-client/src/components/BankSyncStatus.js b/packages/desktop-client/src/components/BankSyncStatus.js
index 9cbe32bee..01db3850f 100644
--- a/packages/desktop-client/src/components/BankSyncStatus.js
+++ b/packages/desktop-client/src/components/BankSyncStatus.js
@@ -5,7 +5,8 @@ import { useTransition, animated } from 'react-spring';
import { colors, styles } from '../style';
import AnimatedRefresh from './AnimatedRefresh';
-import { View, Text } from './common';
+import Text from './common/Text';
+import View from './common/View';
export default function BankSyncStatus() {
let accountsSyncing = useSelector(state => state.account.accountsSyncing);
diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx
index 305281fa2..21523e9db 100644
--- a/packages/desktop-client/src/components/FinancesApp.tsx
+++ b/packages/desktop-client/src/components/FinancesApp.tsx
@@ -31,7 +31,7 @@ import { getIsOutdated, getLatestVersion } from '../util/versions';
import BankSyncStatus from './BankSyncStatus';
import { BudgetMonthCountProvider } from './budget/BudgetMonthCountContext';
-import { View } from './common';
+import View from './common/View';
import FloatableSidebar, { SidebarProvider } from './FloatableSidebar';
import GlobalKeys from './GlobalKeys';
import { ManageRulesPage } from './ManageRulesPage';
diff --git a/packages/desktop-client/src/components/FixedSizeList.js b/packages/desktop-client/src/components/FixedSizeList.js
index 62ad8b81e..faaaabbf9 100644
--- a/packages/desktop-client/src/components/FixedSizeList.js
+++ b/packages/desktop-client/src/components/FixedSizeList.js
@@ -4,7 +4,7 @@ import memoizeOne from 'memoize-one';
import useResizeObserver from '../hooks/useResizeObserver';
-import { View } from './common';
+import View from './common/View';
const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
diff --git a/packages/desktop-client/src/components/FloatableSidebar.js b/packages/desktop-client/src/components/FloatableSidebar.js
index d329d8b94..f36c2c99a 100644
--- a/packages/desktop-client/src/components/FloatableSidebar.js
+++ b/packages/desktop-client/src/components/FloatableSidebar.js
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
import { useResponsive } from '../ResponsiveProvider';
-import { View } from './common';
+import View from './common/View';
import { SIDEBAR_WIDTH } from './sidebar';
import SidebarWithData from './SidebarWithData';
diff --git a/packages/desktop-client/src/components/MobileWebMessage.js b/packages/desktop-client/src/components/MobileWebMessage.js
index 71296e4df..d8ce0cd51 100644
--- a/packages/desktop-client/src/components/MobileWebMessage.js
+++ b/packages/desktop-client/src/components/MobileWebMessage.js
@@ -6,7 +6,9 @@ import { savePrefs } from 'loot-core/src/client/actions';
import { useResponsive } from '../ResponsiveProvider';
import { colors, styles } from '../style';
-import { View, Text, Button } from './common';
+import Button from './common/Button';
+import Text from './common/Text';
+import View from './common/View';
import { Checkbox } from './forms';
let buttonStyle = { border: 0, fontSize: 15, padding: '10px 13px' };
diff --git a/packages/desktop-client/src/components/PrivacyFilter.tsx b/packages/desktop-client/src/components/PrivacyFilter.tsx
index e9dd9e5cb..d840cbc12 100644
--- a/packages/desktop-client/src/components/PrivacyFilter.tsx
+++ b/packages/desktop-client/src/components/PrivacyFilter.tsx
@@ -11,7 +11,7 @@ import usePrivacyMode from 'loot-core/src/client/privacy';
import useFeatureFlag from '../hooks/useFeatureFlag';
import { useResponsive } from '../ResponsiveProvider';
-import { View } from './common';
+import View from './common/View';
export type ConditionalPrivacyFilterProps = {
children: ReactNode;
diff --git a/packages/desktop-client/src/components/ThemeSelector.tsx b/packages/desktop-client/src/components/ThemeSelector.tsx
index cfc18c444..6725e0237 100644
--- a/packages/desktop-client/src/components/ThemeSelector.tsx
+++ b/packages/desktop-client/src/components/ThemeSelector.tsx
@@ -6,7 +6,7 @@ import Sun from '../icons/v2/Sun';
import { useResponsive } from '../ResponsiveProvider';
import { useTheme } from '../style';
-import { Button } from './common';
+import Button from './common/Button';
export function ThemeSelector() {
let theme = useTheme();
diff --git a/packages/desktop-client/src/components/Titlebar.js b/packages/desktop-client/src/components/Titlebar.js
index df0a73319..34e0f1074 100644
--- a/packages/desktop-client/src/components/Titlebar.js
+++ b/packages/desktop-client/src/components/Titlebar.js
@@ -28,15 +28,11 @@ import tokens from '../tokens';
import AccountSyncCheck from './accounts/AccountSyncCheck';
import AnimatedRefresh from './AnimatedRefresh';
import { MonthCountSelector } from './budget/MonthCountSelector';
-import {
- View,
- Text,
- ButtonLink,
- Button,
- ButtonWithLoading,
- ExternalLink,
-} from './common';
+import { ButtonLink, ExternalLink } from './common';
+import Button, { ButtonWithLoading } from './common/Button';
import Paragraph from './common/Paragraph';
+import Text from './common/Text';
+import View from './common/View';
import { useSidebar } from './FloatableSidebar';
import LoggedInUser from './LoggedInUser';
import { useServerURL } from './ServerContext';
diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index 3d646d658..7332c4cfd 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@@ -28,7 +28,9 @@ import { authorizeBank } from '../../gocardless';
import { SelectedProviderWithItems } from '../../hooks/useSelected';
import { styles, colors } from '../../style';
import { useActiveLocation } from '../ActiveLocation';
-import { View, Text, Button } from '../common';
+import Button from '../common/Button';
+import Text from '../common/Text';
+import View from '../common/View';
import TransactionList from '../transactions/TransactionList';
import {
SplitsExpandedProvider,
diff --git a/packages/desktop-client/src/components/accounts/Balance.js b/packages/desktop-client/src/components/accounts/Balance.js
index aee068dfd..8a2b7dde7 100644
--- a/packages/desktop-client/src/components/accounts/Balance.js
+++ b/packages/desktop-client/src/components/accounts/Balance.js
@@ -6,7 +6,9 @@ import q from 'loot-core/src/client/query-helpers';
import { useSelectedItems } from '../../hooks/useSelected';
import ArrowButtonRight1 from '../../icons/v2/ArrowButtonRight1';
import { colors } from '../../style';
-import { View, Text, Button } from '../common';
+import Button from '../common/Button';
+import Text from '../common/Text';
+import View from '../common/View';
import PrivacyFilter from '../PrivacyFilter';
import CellValue from '../spreadsheet/CellValue';
import format from '../spreadsheet/format';
diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js
index ade0abc8f..a0c693fc3 100644
--- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js
+++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js
@@ -3,7 +3,7 @@ import React from 'react';
import { useCachedAccounts } from 'loot-core/src/client/data-hooks/accounts';
import { colors } from '../../style';
-import { View } from '../common';
+import View from '../common/View';
import Autocomplete from './Autocomplete';
diff --git a/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx b/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx
index d6f0bcd93..858d6f55e 100644
--- a/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx
+++ b/packages/desktop-client/src/components/autocomplete/CategorySelect.tsx
@@ -7,7 +7,8 @@ import React, {
import Split from '../../icons/v0/Split';
import { colors } from '../../style';
-import { View, Text } from '../common';
+import Text from '../common/Text';
+import View from '../common/View';
import Autocomplete, { defaultFilterSuggestion } from './Autocomplete';
diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
index f5d3700b2..11b73bb41 100644
--- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
+++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
@@ -8,7 +8,8 @@ import { getActivePayees } from 'loot-core/src/client/reducers/queries';
import Add from '../../icons/v1/Add';
import { colors } from '../../style';
-import { View, Button } from '../common';
+import Button from '../common/Button';
+import View from '../common/View';
import Autocomplete, {
defaultFilterSuggestion,
diff --git a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js b/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js
index 4b944a9ef..46293a00b 100644
--- a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js
+++ b/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js
@@ -3,7 +3,7 @@ import React from 'react';
import { useFilters } from 'loot-core/src/client/data-hooks/filters';
import { colors } from '../../style';
-import { View } from '../common';
+import View from '../common/View';
import Autocomplete from './Autocomplete';
diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
index 6edd3cbdf..1fda3f1cd 100644
--- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
+++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -1,7 +1,7 @@
import React, { type ComponentProps } from 'react';
import ArrowThinRight from '../../icons/v1/ArrowThinRight';
-import { View } from '../common';
+import View from '../common/View';
import CellValue from '../spreadsheet/CellValue';
import useSheetValue from '../spreadsheet/useSheetValue';
diff --git a/packages/desktop-client/src/components/budget/BudgetSummaries.js b/packages/desktop-client/src/components/budget/BudgetSummaries.js
index ddb247061..8242d3210 100644
--- a/packages/desktop-client/src/components/budget/BudgetSummaries.js
+++ b/packages/desktop-client/src/components/budget/BudgetSummaries.js
@@ -12,7 +12,7 @@ import { css } from 'glamor';
import * as monthUtils from 'loot-core/src/shared/months';
import useResizeObserver from '../../hooks/useResizeObserver';
-import { View } from '../common';
+import View from '../common/View';
import { MonthsContext } from './MonthsContext';
diff --git a/packages/desktop-client/src/components/budget/DynamicBudgetTable.js b/packages/desktop-client/src/components/budget/DynamicBudgetTable.js
index 3388ead1c..bb0fc99f0 100644
--- a/packages/desktop-client/src/components/budget/DynamicBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/DynamicBudgetTable.js
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
import AutoSizer from 'react-virtualized-auto-sizer';
import { useActions } from '../../hooks/useActions';
-import { View } from '../common';
+import View from '../common/View';
import { useBudgetMonthCount } from './BudgetMonthCountContext';
import { BudgetPageHeader, BudgetTable } from './misc';
diff --git a/packages/desktop-client/src/components/budget/MobileBudget.js b/packages/desktop-client/src/components/budget/MobileBudget.js
index 0591308f4..a5b654211 100644
--- a/packages/desktop-client/src/components/budget/MobileBudget.js
+++ b/packages/desktop-client/src/components/budget/MobileBudget.js
@@ -14,7 +14,7 @@ import { useActions } from '../../hooks/useActions';
import { useSetThemeColor } from '../../hooks/useSetThemeColor';
import AnimatedLoading from '../../icons/AnimatedLoading';
import { colors } from '../../style';
-import { View } from '../common';
+import View from '../common/View';
import SyncRefresh from '../SyncRefresh';
import { BudgetTable } from './MobileBudgetTable';
diff --git a/packages/desktop-client/src/components/budget/MobileTable.js b/packages/desktop-client/src/components/budget/MobileTable.js
index d4c131e1a..2123cfe15 100644
--- a/packages/desktop-client/src/components/budget/MobileTable.js
+++ b/packages/desktop-client/src/components/budget/MobileTable.js
@@ -1,7 +1,7 @@
import React from 'react';
import { colors } from '../../style';
-import { View } from '../common';
+import View from '../common/View';
export const ROW_HEIGHT = 50;
diff --git a/packages/desktop-client/src/components/budget/MonthCountSelector.js b/packages/desktop-client/src/components/budget/MonthCountSelector.js
index 43595e90b..d34dbf7a7 100644
--- a/packages/desktop-client/src/components/budget/MonthCountSelector.js
+++ b/packages/desktop-client/src/components/budget/MonthCountSelector.js
@@ -2,7 +2,7 @@ import React from 'react';
import CalendarIcon from '../../icons/v2/Calendar';
import { colors } from '../../style';
-import { View } from '../common';
+import View from '../common/View';
import { useBudgetMonthCount } from './BudgetMonthCountContext';
diff --git a/packages/desktop-client/src/components/budget/MonthPicker.js b/packages/desktop-client/src/components/budget/MonthPicker.js
index 086869b67..c9520fadb 100644
--- a/packages/desktop-client/src/components/budget/MonthPicker.js
+++ b/packages/desktop-client/src/components/budget/MonthPicker.js
@@ -4,7 +4,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
import useResizeObserver from '../../hooks/useResizeObserver';
import { styles, colors } from '../../style';
-import { View } from '../common';
+import View from '../common/View';
export const MonthPicker = ({
startMonth,
diff --git a/packages/desktop-client/src/components/budget/index.js b/packages/desktop-client/src/components/budget/index.js
index f41948e24..e33ca8632 100644
--- a/packages/desktop-client/src/components/budget/index.js
+++ b/packages/desktop-client/src/components/budget/index.js
@@ -19,7 +19,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
import { useActions } from '../../hooks/useActions';
import useFeatureFlag from '../../hooks/useFeatureFlag';
import { styles } from '../../style';
-import { View } from '../common';
+import View from '../common/View';
import { TitlebarContext } from '../Titlebar';
import DynamicBudgetTable from './DynamicBudgetTable';
diff --git a/packages/desktop-client/src/components/common.tsx b/packages/desktop-client/src/components/common.tsx
index 832518d21..a74afd246 100644
--- a/packages/desktop-client/src/components/common.tsx
+++ b/packages/desktop-client/src/components/common.tsx
@@ -7,13 +7,6 @@ import { colors } from '../style';
import Button from './common/Button';
-export { default as AnchorLink } from './common/AnchorLink';
-export { default as Button, ButtonWithLoading } from './common/Button';
-export { default as Select } from './common/Select';
-export { default as Input } from './common/Input';
-export { default as Text } from './common/Text';
-export { default as View } from './common/View';
-
let externalLinkColors = {
purple: colors.p4,
blue: colors.b4,
diff --git a/packages/desktop-client/src/components/forms.tsx b/packages/desktop-client/src/components/forms.tsx
index d99a92620..e60252b5f 100644
--- a/packages/desktop-client/src/components/forms.tsx
+++ b/packages/desktop-client/src/components/forms.tsx
@@ -4,7 +4,8 @@ import { css, type CSSProperties } from 'glamor';
import { colors } from '../style';
-import { View, Text } from './common';
+import Text from './common/Text';
+import View from './common/View';
type SectionLabelProps = {
title?: string;
diff --git a/packages/desktop-client/src/components/manager/ConfigServer.js b/packages/desktop-client/src/components/manager/ConfigServer.js
index 9e83ebb2f..0c7d7f759 100644
--- a/packages/desktop-client/src/components/manager/ConfigServer.js
+++ b/packages/desktop-client/src/components/manager/ConfigServer.js
@@ -11,7 +11,9 @@ import {
import { useSetThemeColor } from '../../hooks/useSetThemeColor';
import { colors } from '../../style';
-import { View, Text, Button, ButtonWithLoading } from '../common';
+import Button, { ButtonWithLoading } from '../common/Button';
+import Text from '../common/Text';
+import View from '../common/View';
import { useServerURL, useSetServerURL } from '../ServerContext';
import { Title, Input } from './subscribe/common';
diff --git a/packages/desktop-client/src/components/manager/ManagementApp.js b/packages/desktop-client/src/components/manager/ManagementApp.js
index b80ca31e5..3e61c09b7 100644
--- a/packages/desktop-client/src/components/manager/ManagementApp.js
+++ b/packages/desktop-client/src/components/manager/ManagementApp.js
@@ -6,7 +6,8 @@ import { useActions } from '../../hooks/useActions';
import { theme } from '../../style';
import tokens from '../../tokens';
import { ExposeNavigate } from '../../util/router-tools';
-import { View, Text } from '../common';
+import Text from '../common/Text';
+import View from '../common/View';
import LoggedInUser from '../LoggedInUser';
import Notifications from '../Notifications';
import { useServerVersion } from '../ServerContext';
diff --git a/packages/desktop-client/src/components/manager/Modals.js b/packages/desktop-client/src/components/manager/Modals.js
index f090c0b6d..2980749df 100644
--- a/packages/desktop-client/src/components/manager/Modals.js
+++ b/packages/desktop-client/src/components/manager/Modals.js
@@ -2,7 +2,7 @@ import React from 'react';
import { useSelector } from 'react-redux';
import { useActions } from '../../hooks/useActions';
-import { View } from '../common';
+import View from '../common/View';
import CreateEncryptionKey from '../modals/CreateEncryptionKey';
import FixEncryptionKey from '../modals/FixEncryptionKey';
import LoadBackup from '../modals/LoadBackup';
diff --git a/packages/desktop-client/src/components/manager/ServerURL.js b/packages/desktop-client/src/components/manager/ServerURL.js
index e3c42702b..e90873a9c 100644
--- a/packages/desktop-client/src/components/manager/ServerURL.js
+++ b/packages/desktop-client/src/components/manager/ServerURL.js
@@ -1,6 +1,8 @@
import React from 'react';
-import { View, Text, AnchorLink } from '../common';
+import AnchorLink from '../common/AnchorLink';
+import Text from '../common/Text';
+import View from '../common/View';
import { useServerURL } from '../ServerContext';
export default function ServerURL() {
diff --git a/packages/desktop-client/src/components/manager/WelcomeScreen.js b/packages/desktop-client/src/components/manager/WelcomeScreen.js
index d2b1927c5..6276a641b 100644
--- a/packages/desktop-client/src/components/manager/WelcomeScreen.js
+++ b/packages/desktop-client/src/components/manager/WelcomeScreen.js
@@ -2,8 +2,11 @@ import React from 'react';
import { useActions } from '../../hooks/useActions';
import { colors, styles } from '../../style';
-import { View, Button, Text, ExternalLink } from '../common';
+import { ExternalLink } from '../common';
+import Button from '../common/Button';
import Paragraph from '../common/Paragraph';
+import Text from '../common/Text';
+import View from '../common/View';
export default function WelcomeScreen() {
let { createBudget, pushModal } = useActions();
diff --git a/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx b/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx
index c39f2f39e..3d6e792e5 100644
--- a/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx
+++ b/packages/desktop-client/src/components/manager/subscribe/Bootstrap.tsx
@@ -6,8 +6,11 @@ import { loggedIn } from 'loot-core/src/client/actions/user';
import { send } from 'loot-core/src/platform/client/fetch';
import { colors } from '../../../style';
-import { View, Text, Button, ExternalLink } from '../../common';
+import { ExternalLink } from '../../common';
+import Button from '../../common/Button';
import Paragraph from '../../common/Paragraph';
+import Text from '../../common/Text';
+import View from '../../common/View';
import { useBootstrapped, Title } from './common';
import { ConfirmPasswordForm } from './ConfirmPasswordForm';
diff --git a/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx b/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx
index 843616ea4..bf0f97bcf 100644
--- a/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx
+++ b/packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx
@@ -4,7 +4,9 @@ import { useNavigate } from 'react-router-dom';
import { send } from 'loot-core/src/platform/client/fetch';
import { colors } from '../../../style';
-import { View, Text, Button } from '../../common';
+import Button from '../../common/Button';
+import Text from '../../common/Text';
+import View from '../../common/View';
import { Title } from './common';
import { ConfirmPasswordForm } from './ConfirmPasswordForm';
diff --git a/packages/desktop-client/src/components/manager/subscribe/ConfirmPasswordForm.tsx b/packages/desktop-client/src/components/manager/subscribe/ConfirmPasswordForm.tsx
index 1d7d36a5f..645c73e44 100644
--- a/packages/desktop-client/src/components/manager/subscribe/ConfirmPasswordForm.tsx
+++ b/packages/desktop-client/src/components/manager/subscribe/ConfirmPasswordForm.tsx
@@ -1,6 +1,7 @@
import React, { type ChangeEvent, useState } from 'react';
-import { View, ButtonWithLoading } from '../../common';
+import { ButtonWithLoading } from '../../common/Button';
+import View from '../../common/View';
import { Input } from './common';
diff --git a/packages/desktop-client/src/components/manager/subscribe/Error.tsx b/packages/desktop-client/src/components/manager/subscribe/Error.tsx
index 6a4ff3b05..a0f6244c3 100644
--- a/packages/desktop-client/src/components/manager/subscribe/Error.tsx
+++ b/packages/desktop-client/src/components/manager/subscribe/Error.tsx
@@ -2,7 +2,9 @@ import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { colors } from '../../../style';
-import { View, Text, Button } from '../../common';
+import Button from '../../common/Button';
+import Text from '../../common/Text';
+import View from '../../common/View';
function getErrorMessage(reason) {
switch (reason) {
diff --git a/packages/desktop-client/src/components/manager/subscribe/Login.tsx b/packages/desktop-client/src/components/manager/subscribe/Login.tsx
index e13e29fbb..6303627e5 100644
--- a/packages/desktop-client/src/components/manager/subscribe/Login.tsx
+++ b/packages/desktop-client/src/components/manager/subscribe/Login.tsx
@@ -6,7 +6,9 @@ import { loggedIn } from 'loot-core/src/client/actions/user';
import { send } from 'loot-core/src/platform/client/fetch';
import { colors } from '../../../style';
-import { View, Text, Button, ButtonWithLoading } from '../../common';
+import Button, { ButtonWithLoading } from '../../common/Button';
+import Text from '../../common/Text';
+import View from '../../common/View';
import { useBootstrapped, Title, Input } from './common';
diff --git a/packages/desktop-client/src/components/manager/subscribe/common.tsx b/packages/desktop-client/src/components/manager/subscribe/common.tsx
index f7fbc44f1..8a993c84e 100644
--- a/packages/desktop-client/src/components/manager/subscribe/common.tsx
+++ b/packages/desktop-client/src/components/manager/subscribe/common.tsx
@@ -9,7 +9,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
import { send } from 'loot-core/src/platform/client/fetch';
import { colors, styles } from '../../../style';
-import { Input as BaseInput } from '../../common';
+import BaseInput from '../../common/Input';
import { useSetServerURL } from '../../ServerContext';
// There are two URLs that dance with each other: `/login` and
diff --git a/packages/desktop-client/src/components/reports/Container.tsx b/packages/desktop-client/src/components/reports/Container.tsx
index d8d54c9ad..772586b05 100644
--- a/packages/desktop-client/src/components/reports/Container.tsx
+++ b/packages/desktop-client/src/components/reports/Container.tsx
@@ -3,7 +3,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
import { type CSSProperties } from 'glamor';
-import { View } from '../common';
+import View from '../common/View';
type ContainerProps = {
style?: CSSProperties;
diff --git a/packages/desktop-client/src/components/reports/Header.js b/packages/desktop-client/src/components/reports/Header.js
index c83d21d47..2f1849796 100644
--- a/packages/desktop-client/src/components/reports/Header.js
+++ b/packages/desktop-client/src/components/reports/Header.js
@@ -2,7 +2,10 @@ import * as monthUtils from 'loot-core/src/shared/months';
import ArrowLeft from '../../icons/v1/ArrowLeft';
import { styles } from '../../style';
-import { View, Button, ButtonLink, Select } from '../common';
+import { ButtonLink } from '../common';
+import Button from '../common/Button';
+import Select from '../common/Select';
+import View from '../common/View';
import { FilterButton, AppliedFilters } from '../filters/FiltersMenu';
function validateStart(allMonths, start, end) {
diff --git a/packages/desktop-client/src/components/reports/index.tsx b/packages/desktop-client/src/components/reports/index.tsx
index 7d3a886f2..b57d41854 100644
--- a/packages/desktop-client/src/components/reports/index.tsx
+++ b/packages/desktop-client/src/components/reports/index.tsx
@@ -1,4 +1,4 @@
-import { View } from '../common';
+import View from '../common/View';
import { LoadComponent } from '../util/LoadComponent';
export default function Reports() {
diff --git a/packages/desktop-client/src/components/schedules/StatusBadge.js b/packages/desktop-client/src/components/schedules/StatusBadge.js
index 37c4ff02c..5b9d67cd4 100644
--- a/packages/desktop-client/src/components/schedules/StatusBadge.js
+++ b/packages/desktop-client/src/components/schedules/StatusBadge.js
@@ -10,7 +10,8 @@ import EditSkull1 from '../../icons/v2/EditSkull1';
import FavoriteStar from '../../icons/v2/FavoriteStar';
import ValidationCheck from '../../icons/v2/ValidationCheck';
import { colors } from '../../style';
-import { View, Text } from '../common';
+import Text from '../common/Text';
+import View from '../common/View';
export function getStatusProps(status) {
let color, backgroundColor, Icon;
diff --git a/packages/desktop-client/src/components/settings/Encryption.tsx b/packages/desktop-client/src/components/settings/Encryption.tsx
index 4f419ee5c..0b0908509 100644
--- a/packages/desktop-client/src/components/settings/Encryption.tsx
+++ b/packages/desktop-client/src/components/settings/Encryption.tsx
@@ -3,7 +3,9 @@ import { useSelector } from 'react-redux';
import { useActions } from '../../hooks/useActions';
import { colors } from '../../style';
-import { Text, Button, ExternalLink } from '../common';
+import { ExternalLink } from '../common';
+import Button from '../common/Button';
+import Text from '../common/Text';
import { useServerURL } from '../ServerContext';
import { Setting } from './UI';
diff --git a/packages/desktop-client/src/components/settings/Export.tsx b/packages/desktop-client/src/components/settings/Export.tsx
index bc966988c..6ddb667bf 100644
--- a/packages/desktop-client/src/components/settings/Export.tsx
+++ b/packages/desktop-client/src/components/settings/Export.tsx
@@ -5,7 +5,8 @@ import { format } from 'date-fns';
import { send } from 'loot-core/src/platform/client/fetch';
-import { Text, Button } from '../common';
+import Button from '../common/Button';
+import Text from '../common/Text';
import { Setting } from './UI';
diff --git a/packages/desktop-client/src/components/settings/FixSplits.tsx b/packages/desktop-client/src/components/settings/FixSplits.tsx
index 28892095f..936ded3f7 100644
--- a/packages/desktop-client/src/components/settings/FixSplits.tsx
+++ b/packages/desktop-client/src/components/settings/FixSplits.tsx
@@ -4,8 +4,10 @@ import { send } from 'loot-core/src/platform/client/fetch';
import { type Handlers } from 'loot-core/src/types/handlers';
import { colors } from '../../style';
-import { View, Text, ButtonWithLoading } from '../common';
+import { ButtonWithLoading } from '../common/Button';
import Paragraph from '../common/Paragraph';
+import Text from '../common/Text';
+import View from '../common/View';
import { Setting } from './UI';
diff --git a/packages/desktop-client/src/components/settings/Format.tsx b/packages/desktop-client/src/components/settings/Format.tsx
index 666e330c9..a2c539b97 100644
--- a/packages/desktop-client/src/components/settings/Format.tsx
+++ b/packages/desktop-client/src/components/settings/Format.tsx
@@ -6,7 +6,10 @@ import { type LocalPrefs } from 'loot-core/src/types/prefs';
import { useActions } from '../../hooks/useActions';
import tokens from '../../tokens';
-import { Button, Select, Text, View } from '../common';
+import Button from '../common/Button';
+import Select from '../common/Select';
+import Text from '../common/Text';
+import View from '../common/View';
import { useSidebar } from '../FloatableSidebar';
import { Checkbox } from '../forms';
diff --git a/packages/desktop-client/src/components/settings/Global.tsx b/packages/desktop-client/src/components/settings/Global.tsx
index 1ea218976..189ecf241 100644
--- a/packages/desktop-client/src/components/settings/Global.tsx
+++ b/packages/desktop-client/src/components/settings/Global.tsx
@@ -4,7 +4,9 @@ import { useSelector } from 'react-redux';
import { useActions } from '../../hooks/useActions';
import { colors } from '../../style';
import { Information } from '../alerts';
-import { View, Text, Button } from '../common';
+import Button from '../common/Button';
+import Text from '../common/Text';
+import View from '../common/View';
import { Setting } from './UI';
diff --git a/packages/desktop-client/src/components/settings/Reset.tsx b/packages/desktop-client/src/components/settings/Reset.tsx
index d7afc7f86..d2fc9b763 100644
--- a/packages/desktop-client/src/components/settings/Reset.tsx
+++ b/packages/desktop-client/src/components/settings/Reset.tsx
@@ -4,7 +4,8 @@ import { useSelector } from 'react-redux';
import { send } from 'loot-core/src/platform/client/fetch';
import { useActions } from '../../hooks/useActions';
-import { Text, ButtonWithLoading } from '../common';
+import { ButtonWithLoading } from '../common/Button';
+import Text from '../common/Text';
import { Setting } from './UI';
diff --git a/packages/desktop-client/src/components/settings/Themes.tsx b/packages/desktop-client/src/components/settings/Themes.tsx
index 1322776b9..485a54e5b 100644
--- a/packages/desktop-client/src/components/settings/Themes.tsx
+++ b/packages/desktop-client/src/components/settings/Themes.tsx
@@ -2,7 +2,9 @@ import React from 'react';
import { useActions } from '../../hooks/useActions';
import { themeNames, useTheme } from '../../style';
-import { Button, Select, Text } from '../common';
+import Button from '../common/Button';
+import Select from '../common/Select';
+import Text from '../common/Text';
import { Setting } from './UI';
diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
index def408102..375835c99 100644
--- a/packages/desktop-client/src/components/settings/index.tsx
+++ b/packages/desktop-client/src/components/settings/index.tsx
@@ -13,7 +13,11 @@ import { useSetThemeColor } from '../../hooks/useSetThemeColor';
import { useResponsive } from '../../ResponsiveProvider';
import { colors } from '../../style';
import tokens from '../../tokens';
-import { View, Text, Button, Input, ExternalLink } from '../common';
+import { ExternalLink } from '../common';
+import Button from '../common/Button';
+import Input from '../common/Input';
+import Text from '../common/Text';
+import View from '../common/View';
import { FormField, FormLabel } from '../forms';
import { Page } from '../Page';
import { useServerVersion } from '../ServerContext';
diff --git a/packages/desktop-client/src/components/sort.js b/packages/desktop-client/src/components/sort.js
index c886be8c9..be4fa3d24 100644
--- a/packages/desktop-client/src/components/sort.js
+++ b/packages/desktop-client/src/components/sort.js
@@ -11,7 +11,7 @@ import { useDrag, useDrop } from 'react-dnd';
import { colors } from '../style';
-import { View } from './common';
+import View from './common/View';
function useMergedRefs(ref1, ref2) {
return useMemo(() => {
diff --git a/packages/desktop-client/src/components/util/DisplayId.js b/packages/desktop-client/src/components/util/DisplayId.js
index 08741f5c8..3faf67e43 100644
--- a/packages/desktop-client/src/components/util/DisplayId.js
+++ b/packages/desktop-client/src/components/util/DisplayId.js
@@ -4,7 +4,7 @@ import { CachedAccounts } from 'loot-core/src/client/data-hooks/accounts';
import { CachedPayees } from 'loot-core/src/client/data-hooks/payees';
import { colors } from '../../style';
-import { Text } from '../common';
+import Text from '../common/Text';
export default function DisplayId({ type, id, noneColor = colors.n8 }) {
let DataComponent;
diff --git a/packages/desktop-client/src/components/util/GenericInput.js b/packages/desktop-client/src/components/util/GenericInput.js
index f5fd15985..8409a3faa 100644
--- a/packages/desktop-client/src/components/util/GenericInput.js
+++ b/packages/desktop-client/src/components/util/GenericInput.js
@@ -8,7 +8,8 @@ import Autocomplete from '../autocomplete/Autocomplete';
import CategoryAutocomplete from '../autocomplete/CategorySelect';
import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
import SavedFilterAutocomplete from '../autocomplete/SavedFilterAutocomplete';
-import { View, Input } from '../common';
+import Input from '../common/Input';
+import View from '../common/View';
import { Checkbox } from '../forms';
import DateSelect from '../select/DateSelect';
import RecurringSchedulePicker from '../select/RecurringSchedulePicker';
diff --git a/upcoming-release-notes/1418.md b/upcoming-release-notes/1418.md
index ddccbde45..3d36494e0 100644
--- a/upcoming-release-notes/1418.md
+++ b/upcoming-release-notes/1418.md
@@ -3,4 +3,4 @@ category: Maintenance
authors: [MatissJanis]
---
-Moving away from barell `common` imports to more specific per-component imports (part 1)
+Moving away from barrel `common` imports to more specific per-component imports (part 1)
diff --git a/upcoming-release-notes/1420.md b/upcoming-release-notes/1420.md
new file mode 100644
index 000000000..1fdff4f3a
--- /dev/null
+++ b/upcoming-release-notes/1420.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Moving away from barrel `common` imports to more specific per-component imports (part 3)
--
GitLab