♻️ (common) migrating to specific common component import paths pt3 (#…

…1420)

Part 3 of the migration.

Part 2 here: #1419

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);

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';

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;
 

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';
 

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' };

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;

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();

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';

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,

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';

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';
 

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';
 

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,

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';
 

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';
 

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';
 

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';

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';

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;
 

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';
 

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,

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';

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,

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;

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';

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';

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';

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() {

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();

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';

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';

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';
 

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) {

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';
 

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

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;

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) {

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() {

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;