From a001271d341b6b197c8656a9ec81b62dcf240393 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Thu, 12 Sep 2024 02:15:55 -0700 Subject: [PATCH 01/25] Migrate to @emotion/css --- packages/desktop-client/package.json | 2 +- .../src/components/AnimatedRefresh.tsx | 2 +- .../src/components/AppBackground.tsx | 6 +- .../desktop-client/src/components/Notes.tsx | 8 +- .../autocomplete/AccountAutocomplete.tsx | 11 +- .../components/autocomplete/Autocomplete.tsx | 10 +- .../autocomplete/CategoryAutocomplete.tsx | 19 +- .../autocomplete/PayeeAutocomplete.tsx | 11 +- .../src/components/budget/BudgetSummaries.tsx | 6 +- .../envelope/budgetsummary/BudgetSummary.tsx | 6 +- .../envelope/budgetsummary/ToBudgetAmount.tsx | 6 +- .../tracking/budgetsummary/BudgetSummary.tsx | 18 +- .../budget/tracking/budgetsummary/Saved.tsx | 20 +- .../src/components/common/Block.tsx | 8 +- .../src/components/common/Button.tsx | 5 +- .../src/components/common/Button2.tsx | 2 +- .../src/components/common/InlineField.tsx | 6 +- .../src/components/common/Input.tsx | 33 +- .../src/components/common/Link.tsx | 6 +- .../src/components/common/Modal.tsx | 4 +- .../src/components/common/Paragraph.tsx | 12 +- .../src/components/common/Popover.tsx | 6 +- .../src/components/common/Text.tsx | 4 +- .../src/components/common/Toggle.tsx | 6 +- .../src/components/common/View.tsx | 4 +- .../src/components/filters/OpButton.tsx | 22 +- .../desktop-client/src/components/forms.tsx | 12 +- .../src/components/mobile/MobileForms.tsx | 2 +- .../src/components/mobile/PullToRefresh.tsx | 20 +- .../transactions/FocusableAmountInput.tsx | 7 +- .../mobile/transactions/ListBoxSection.jsx | 6 +- .../modals/CreateEncryptionKeyModal.tsx | 6 +- .../src/components/reports/ModeButton.tsx | 30 +- .../components/reports/graphs/AreaGraph.tsx | 6 +- .../components/reports/graphs/BarGraph.tsx | 6 +- .../reports/graphs/BarLineGraph.tsx | 6 +- .../reports/graphs/CashFlowGraph.tsx | 6 +- .../components/reports/graphs/LineGraph.tsx | 6 +- .../reports/graphs/NetWorthGraph.tsx | 6 +- .../reports/graphs/SpendingGraph.tsx | 6 +- .../reports/graphs/StackedBarGraph.tsx | 6 +- .../reports/reports/MarkdownCard.tsx | 2 +- .../src/components/settings/UI.tsx | 14 +- .../src/components/settings/index.tsx | 18 +- .../src/components/sidebar/Account.tsx | 33 +- .../src/icons/AnimatedLoading.tsx | 6 +- packages/desktop-client/src/style/styles.ts | 2 +- packages/desktop-client/src/style/types.ts | 6 +- yarn.lock | 423 ++++++++++++------ 49 files changed, 517 insertions(+), 361 deletions(-) diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json index 0c487c4c95c..607c2b8697a 100644 --- a/packages/desktop-client/package.json +++ b/packages/desktop-client/package.json @@ -7,6 +7,7 @@ ], "devDependencies": { "@fontsource/redacted-script": "^5.0.21", + "@emotion/css": "^11.13.0", "@juggle/resize-observer": "^3.4.0", "@playwright/test": "1.41.1", "@rollup/plugin-inject": "^5.0.5", @@ -36,7 +37,6 @@ "debounce": "^1.2.1", "downshift": "7.6.2", "focus-visible": "^4.1.5", - "glamor": "^2.20.40", "i18next": "^23.11.5", "i18next-parser": "^9.0.0", "i18next-resources-to-backend": "^1.2.1", diff --git a/packages/desktop-client/src/components/AnimatedRefresh.tsx b/packages/desktop-client/src/components/AnimatedRefresh.tsx index e94e3a319b1..c74c8173db2 100644 --- a/packages/desktop-client/src/components/AnimatedRefresh.tsx +++ b/packages/desktop-client/src/components/AnimatedRefresh.tsx @@ -1,7 +1,7 @@ // @ts-strict-ignore import React from 'react'; -import { keyframes } from 'glamor'; +import { keyframes } from '@emotion/css'; import { SvgRefresh } from '../icons/v1'; import { type CSSProperties } from '../style'; diff --git a/packages/desktop-client/src/components/AppBackground.tsx b/packages/desktop-client/src/components/AppBackground.tsx index 0a1bfc0ac3a..9d57bafdde8 100644 --- a/packages/desktop-client/src/components/AppBackground.tsx +++ b/packages/desktop-client/src/components/AppBackground.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { useTransition, animated } from 'react-spring'; -import { css } from 'glamor'; +import { css } from '@emotion/css'; import { AnimatedLoading } from '../icons/AnimatedLoading'; import { theme } from '../style'; @@ -33,7 +33,7 @@ export function AppBackground({ isLoading }: AppBackgroundProps) { transitions((style, item) => ( {loadingText} diff --git a/packages/desktop-client/src/components/Notes.tsx b/packages/desktop-client/src/components/Notes.tsx index 06dd4c5ff31..3ca5283f38a 100644 --- a/packages/desktop-client/src/components/Notes.tsx +++ b/packages/desktop-client/src/components/Notes.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react'; import ReactMarkdown from 'react-markdown'; -import { css } from 'glamor'; +import { css } from '@emotion/css'; import remarkGfm from 'remark-gfm'; import { useResponsive } from '../ResponsiveProvider'; @@ -110,7 +110,7 @@ export function Notes({ return editable ? (