♻️ (imports) Update all styles imports to the component lib

packages/desktop-client/src/components/App.tsx

@@ -11,6 +11,7 @@ import { HotkeysProvider } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter } from 'react-router-dom';
 
+import { styles } from '@actual-app/components/styles';
 import { View } from '@actual-app/components/view';
 
 import {
@@ -29,7 +30,7 @@ import { handleGlobalEvents } from '../global-events';
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { installPolyfills } from '../polyfills';
 import { useDispatch, useSelector, useStore } from '../redux';
-import { styles, hasHiddenScrollbars, ThemeStyle, useTheme } from '../style';
+import { hasHiddenScrollbars, ThemeStyle, useTheme } from '../style';
 import { ExposeNavigate } from '../util/router-tools';
 
 import { AppBackground } from './AppBackground';

packages/desktop-client/src/components/BankSyncStatus.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import { Trans } from 'react-i18next';
 import { useTransition, animated } from 'react-spring';
 
+import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { View } from '@actual-app/components/view';
 
 import { useSelector } from '../redux';
-import { theme, styles } from '../style';
+import { theme } from '../style';
 
 import { AnimatedRefresh } from './AnimatedRefresh';
 

packages/desktop-client/src/components/LoggedInUser.tsx

@@ -5,6 +5,7 @@ import { useLocation } from 'react-router-dom';
 import { Button } from '@actual-app/components/button';
 import { Menu } from '@actual-app/components/menu';
 import { Popover } from '@actual-app/components/popover';
+import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { View } from '@actual-app/components/view';
 
@@ -18,7 +19,7 @@ import { Permissions } from '../auth/types';
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { useNavigate } from '../hooks/useNavigate';
 import { useSelector, useDispatch } from '../redux';
-import { theme, styles } from '../style';
+import { theme } from '../style';
 
 import { PrivacyFilter } from './PrivacyFilter';
 import { useMultiuserEnabled, useServerURL } from './ServerContext';

packages/desktop-client/src/components/Notifications.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Button, ButtonWithLoading } from '@actual-app/components/button';
 import { Stack } from '@actual-app/components/stack';
+import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
@@ -20,7 +21,7 @@ import type { NotificationWithId } from 'loot-core/client/state-types/notificati
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete } from '../icons/v0';
 import { useSelector, useDispatch } from '../redux';
-import { styles, theme } from '../style';
+import { theme } from '../style';
 
 import { Link } from './common/Link';
 import { useResponsive } from './responsive/ResponsiveProvider';

packages/desktop-client/src/components/Page.tsx

@@ -1,9 +1,10 @@
 import React, { type ReactNode, type CSSProperties } from 'react';
 
+import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { View } from '@actual-app/components/view';
 
-import { theme, styles } from '../style';
+import { theme } from '../style';
 
 import { useResponsive } from './responsive/ResponsiveProvider';
 

packages/desktop-client/src/components/Titlebar.tsx

@@ -5,6 +5,7 @@ import { Routes, Route, useLocation } from 'react-router-dom';
 
 import { Button } from '@actual-app/components/button';
 import { SpaceBetween } from '@actual-app/components/space-between';
+import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
@@ -30,7 +31,7 @@ import {
   SvgViewShow,
 } from '../icons/v2';
 import { useDispatch } from '../redux';
-import { theme, styles, type CSSProperties } from '../style';
+import { theme, type CSSProperties } from '../style';
 
 import { AccountSyncCheck } from './accounts/AccountSyncCheck';
 import { AnimatedRefresh } from './AnimatedRefresh';

packages/desktop-client/src/components/accounts/Account.tsx

@@ -10,6 +10,7 @@ import { Trans } from 'react-i18next';
 import { Navigate, useParams, useLocation } from 'react-router-dom';
 
 import { Button } from '@actual-app/components/button';
+import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { View } from '@actual-app/components/view';
 import { debounce } from 'debounce';
@@ -86,7 +87,7 @@ import {
 import { useSyncedPref } from '../../hooks/useSyncedPref';
 import { useTransactionBatchActions } from '../../hooks/useTransactionBatchActions';
 import { useSelector, useDispatch } from '../../redux';
-import { styles, theme } from '../../style';
+import { theme } from '../../style';
 import { type SavedFilter } from '../filters/SavedFilterMenuButton';
 import { TransactionList } from '../transactions/TransactionList';
 import { validateAccountName } from '../util/accountValidation';

packages/desktop-client/src/components/accounts/Header.tsx

@@ -13,6 +13,7 @@ import { InitialFocus } from '@actual-app/components/initial-focus';
 import { Menu } from '@actual-app/components/menu';
 import { Popover } from '@actual-app/components/popover';
 import { Stack } from '@actual-app/components/stack';
+import { styles } from '@actual-app/components/styles';
 import { View } from '@actual-app/components/view';
 
 import {
@@ -34,7 +35,7 @@ import {
   SvgLockClosed,
   SvgPencil1,
 } from '../../icons/v2';
-import { theme, styles } from '../../style';
+import { theme } from '../../style';
 import { AnimatedRefresh } from '../AnimatedRefresh';
 import { Input } from '../common/Input';
 import { MenuButton } from '../common/MenuButton';

packages/desktop-client/src/components/accounts/Reconcile.tsx

@@ -3,6 +3,7 @@ import { Trans } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
 import { InitialFocus } from '@actual-app/components/initial-focus';
+import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { View } from '@actual-app/components/view';
 
@@ -13,7 +14,7 @@ import { type AccountEntity } from 'loot-core/types/models';
 import { type TransObjectLiteral } from 'loot-core/types/util';
 
 import { SvgCheckCircle1 } from '../../icons/v2';
-import { styles, theme } from '../../style';
+import { theme } from '../../style';
 import { Input } from '../common/Input';
 import { useFormat } from '../spreadsheet/useFormat';
 import { useSheetValue } from '../spreadsheet/useSheetValue';

packages/desktop-client/src/components/alerts.tsx

@@ -5,11 +5,12 @@ import React, {
   type CSSProperties,
 } from 'react';
 
+import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { View } from '@actual-app/components/view';
 
 import { SvgExclamationOutline, SvgInformationOutline } from '../icons/v1';
-import { styles, theme } from '../style';
+import { theme } from '../style';
 
 type AlertProps = {
   icon?: ComponentType<{ width?: number; style?: CSSProperties }>;

packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx

@@ -8,14 +8,15 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { styles } from '@actual-app/components/styles';
 import { TextOneLine } from '@actual-app/components/text-one-line';
 import { View } from '@actual-app/components/view';
 import { css, cx } from '@emotion/css';
 
 import { type AccountEntity } from 'loot-core/types/models';
 
 import { useAccounts } from '../../hooks/useAccounts';
-import { theme, styles } from '../../style';
+import { theme } from '../../style';
 import { useResponsive } from '../responsive/ResponsiveProvider';
 
 import { Autocomplete } from './Autocomplete';

packages/desktop-client/src/components/autocomplete/Autocomplete.tsx

@@ -12,14 +12,14 @@ import React, {
 } from 'react';
 
 import { Popover } from '@actual-app/components/popover';
+import { styles } from '@actual-app/components/styles';
 import { View } from '@actual-app/components/view';
 import { css, cx } from '@emotion/css';
 import Downshift, { type StateChangeTypes } from 'downshift';
 
 import { getNormalisedString } from 'loot-core/shared/normalisation';
 
 import { SvgRemove } from '../../icons/v2';
-import { styles, theme } from '../../style';
 import { Button } from '../common/Button';
 import { Input } from '../common/Input';
 import { useResponsive } from '../responsive/ResponsiveProvider';

packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx

@@ -12,6 +12,7 @@ import React, {
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { TextOneLine } from '@actual-app/components/text-one-line';
 import { View } from '@actual-app/components/view';
@@ -28,7 +29,7 @@ import {
 import { useCategories } from '../../hooks/useCategories';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
 import { SvgSplit } from '../../icons/v0';
-import { theme, styles } from '../../style';
+import { theme } from '../../style';
 import { useEnvelopeSheetValue } from '../budget/envelope/EnvelopeBudgetComponents';
 import { makeAmountFullStyle } from '../budget/util';
 import { useResponsive } from '../responsive/ResponsiveProvider';

packages/desktop-client/src/components/autocomplete/ItemHeader.tsx

@@ -1,6 +1,8 @@
 import React, { type CSSProperties } from 'react';
 
-import { styles, theme } from '../../style';
+import { styles } from '@actual-app/components/styles';
+
+import { theme } from '../../style';
 import { useResponsive } from '../responsive/ResponsiveProvider';
 
 type ItemHeaderProps = {

packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx

@@ -13,6 +13,7 @@ import React, {
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import { styles } from '@actual-app/components/styles';
 import { TextOneLine } from '@actual-app/components/text-one-line';
 import { View } from '@actual-app/components/view';
 import { css, cx } from '@emotion/css';
@@ -28,7 +29,7 @@ import { useAccounts } from '../../hooks/useAccounts';
 import { useCommonPayees, usePayees } from '../../hooks/usePayees';
 import { SvgAdd, SvgBookmark } from '../../icons/v1';
 import { useDispatch } from '../../redux';
-import { theme, styles } from '../../style';
+import { theme } from '../../style';
 import { Button } from '../common/Button';
 import { useResponsive } from '../responsive/ResponsiveProvider';
 

packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
+import { styles } from '@actual-app/components/styles';
 import { Tooltip } from '@actual-app/components/tooltip';
 import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
@@ -15,7 +16,7 @@ import { type TransObjectLiteral } from 'loot-core/types/util';
 
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgArrowThinRight } from '../../icons/v1';
-import { theme, styles } from '../../style';
+import { theme } from '../../style';
 import { useResponsive } from '../responsive/ResponsiveProvider';
 import { type Binding } from '../spreadsheet';
 import { CellValue, CellValueText } from '../spreadsheet/CellValue';

packages/desktop-client/src/components/budget/BudgetCategories.jsx

@@ -1,9 +1,10 @@
 import React, { memo, useState, useMemo } from 'react';
 
+import { styles } from '@actual-app/components/styles';
 import { View } from '@actual-app/components/view';
 
 import { useLocalPref } from '../../hooks/useLocalPref';
-import { theme, styles } from '../../style';
+import { theme } from '../../style';
 import { DropHighlightPosContext } from '../sort';
 import { Row } from '../table';
 

packages/desktop-client/src/components/budget/BudgetTable.tsx

@@ -4,6 +4,7 @@ import React, {
   useState,
 } from 'react';
 
+import { styles } from '@actual-app/components/styles';
 import { View } from '@actual-app/components/view';
 
 import {
@@ -13,7 +14,7 @@ import {
 
 import { useCategories } from '../../hooks/useCategories';
 import { useLocalPref } from '../../hooks/useLocalPref';
-import { theme, styles } from '../../style';
+import { theme } from '../../style';
 import { type DropPosition } from '../sort';
 
 import { BudgetCategories } from './BudgetCategories';

packages/desktop-client/src/components/budget/BudgetTotals.tsx

@@ -4,10 +4,11 @@ import { useTranslation, Trans } from 'react-i18next';
 import { Button } from '@actual-app/components/button';
 import { Menu } from '@actual-app/components/menu';
 import { Popover } from '@actual-app/components/popover';
+import { styles } from '@actual-app/components/styles';
 import { View } from '@actual-app/components/view';
 
 import { SvgDotsHorizontalTriple } from '../../icons/v1';
-import { theme, styles } from '../../style';
+import { theme } from '../../style';
 
 import { RenderMonths } from './RenderMonths';
 import { getScrollbarWidth } from './util';

packages/desktop-client/src/components/budget/MonthPicker.tsx

@@ -2,13 +2,14 @@
 import React, { type CSSProperties, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { styles } from '@actual-app/components/styles';
 import { View } from '@actual-app/components/view';
 
 import * as monthUtils from 'loot-core/shared/months';
 
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { SvgCalendar } from '../../icons/v2';
-import { styles, theme } from '../../style';
+import { theme } from '../../style';
 import { Link } from '../common/Link';
 
 import { type MonthBounds } from './MonthsContext';

packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx

@@ -8,6 +8,7 @@ import { useTranslation, Trans } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
 import { Popover } from '@actual-app/components/popover';
+import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
@@ -20,7 +21,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/shared/util';
 import { useContextMenu } from '../../../hooks/useContextMenu';
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
-import { styles, theme } from '../../../style';
+import { theme } from '../../../style';
 import { type Binding, type SheetFields } from '../../spreadsheet';
 import { CellValue, CellValueText } from '../../spreadsheet/CellValue';
 import { useSheetName } from '../../spreadsheet/useSheetName';

packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
 import { Popover } from '@actual-app/components/popover';
+import { styles } from '@actual-app/components/styles';
 import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
 
@@ -11,7 +12,7 @@ import * as monthUtils from 'loot-core/shared/months';
 import { useUndo } from '../../../../hooks/useUndo';
 import { SvgDotsHorizontalTriple } from '../../../../icons/v1';
 import { SvgArrowButtonDown1, SvgArrowButtonUp1 } from '../../../../icons/v2';
-import { theme, styles } from '../../../../style';
+import { theme } from '../../../../style';
 import { NotesButton } from '../../../NotesButton';
 import { NamespaceContext } from '../../../spreadsheet/NamespaceContext';
 import { useEnvelopeBudget } from '../EnvelopeBudgetContext';

packages/desktop-client/src/components/budget/index.tsx

@@ -2,6 +2,7 @@
 import React, { memo, useMemo, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { styles } from '@actual-app/components/styles';
 import { View } from '@actual-app/components/view';
 
 import { addNotification, pushModal } from 'loot-core/client/actions';
@@ -27,7 +28,6 @@ import { useLocalPref } from '../../hooks/useLocalPref';
 import { useNavigate } from '../../hooks/useNavigate';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
 import { useDispatch } from '../../redux';
-import { styles } from '../../style';
 import { NamespaceContext } from '../spreadsheet/NamespaceContext';
 
 import { DynamicBudgetTable } from './DynamicBudgetTable';

packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx

@@ -10,6 +10,7 @@ import { Trans } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
 import { Popover } from '@actual-app/components/popover';
+import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
@@ -21,7 +22,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/shared/util';
 
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
-import { styles, theme } from '../../../style';
+import { theme } from '../../../style';
 import { type Binding, type SheetFields } from '../../spreadsheet';
 import { CellValue, CellValueText } from '../../spreadsheet/CellValue';
 import { useSheetValue } from '../../spreadsheet/useSheetValue';

packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Button } from '@actual-app/components/button';
 import { Popover } from '@actual-app/components/popover';
 import { Stack } from '@actual-app/components/stack';
+import { styles } from '@actual-app/components/styles';
 import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
 
@@ -13,7 +14,7 @@ import * as monthUtils from 'loot-core/shared/months';
 import { useUndo } from '../../../../hooks/useUndo';
 import { SvgDotsHorizontalTriple } from '../../../../icons/v1';
 import { SvgArrowButtonDown1, SvgArrowButtonUp1 } from '../../../../icons/v2';
-import { theme, styles } from '../../../../style';
+import { theme } from '../../../../style';
 import { NotesButton } from '../../../NotesButton';
 import { NamespaceContext } from '../../../spreadsheet/NamespaceContext';
 import { useTrackingBudget } from '../TrackingBudgetContext';