diff --git a/.eslintrc.js b/.eslintrc.js index 4a54ca8d79b..b10db2ff9c5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -218,8 +218,6 @@ module.exports = { { //This is temporary. We will remove these as dark theme gets ported files: [ - './packages/desktop-client/public/index.html', - './packages/desktop-client/src/components/BankSyncStatus.*', './packages/desktop-client/src/components/LoggedInUser.*', './packages/desktop-client/src/components/MobileWebMessage.*', './packages/desktop-client/src/components/NotesButton.*', @@ -252,24 +250,7 @@ module.exports = { './packages/desktop-client/src/components/common/Label.*', './packages/desktop-client/src/components/common/View.*', './packages/desktop-client/src/components/common/ExternalLink.*', - './packages/desktop-client/src/components/manager/BudgetList.*', - './packages/desktop-client/src/components/manager/ConfigServer.*', - './packages/desktop-client/src/components/manager/DeleteFile.*', - './packages/desktop-client/src/components/manager/Import.*', - './packages/desktop-client/src/components/manager/ImportActual.*', - './packages/desktop-client/src/components/manager/ImportYNAB4.*', - './packages/desktop-client/src/components/manager/ImportYNAB5.*', - './packages/desktop-client/src/components/manager/WelcomeScreen.*', './packages/desktop-client/src/components/modals/BudgetSummary.*', - './packages/desktop-client/src/components/modals/ConfirmCategoryDelete.*', - './packages/desktop-client/src/components/modals/CreateEncryptionKey.*', - './packages/desktop-client/src/components/modals/EditField.*', - './packages/desktop-client/src/components/modals/FixEncryptionKey.*', - './packages/desktop-client/src/components/modals/GoCardlessExternalMsg.*', - './packages/desktop-client/src/components/modals/ImportTransactions.*', - './packages/desktop-client/src/components/modals/LoadBackup.*', - './packages/desktop-client/src/components/modals/PlaidExternalMsg.*', - './packages/desktop-client/src/components/modals/SelectLinkedAccounts.*', './packages/desktop-client/src/components/payees/index.*', './packages/desktop-client/src/components/reports/CashFlow.*', './packages/desktop-client/src/components/reports/Change.*', @@ -291,8 +272,6 @@ module.exports = { './packages/desktop-client/src/components/transactions/MobileTransaction.*', './packages/desktop-client/src/components/transactions/TransactionsTable.*', './packages/desktop-client/src/components/util/AmountInput.*', - './packages/desktop-client/src/components/util/DisplayId.*', - './packages/desktop-client/src/components/util/LoadComponent.*', './packages/desktop-client/src/style/*', ], rules: { diff --git a/packages/desktop-client/src/components/BankSyncStatus.tsx b/packages/desktop-client/src/components/BankSyncStatus.tsx index 01db3850fdc..8095d406706 100644 --- a/packages/desktop-client/src/components/BankSyncStatus.tsx +++ b/packages/desktop-client/src/components/BankSyncStatus.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useSelector } from 'react-redux'; import { useTransition, animated } from 'react-spring'; -import { colors, styles } from '../style'; +import { theme, styles } from '../style'; import AnimatedRefresh from './AnimatedRefresh'; import Text from './common/Text'; @@ -43,8 +43,8 @@ export default function BankSyncStatus() { Syncing {item} diff --git a/packages/desktop-client/src/components/alerts.tsx b/packages/desktop-client/src/components/alerts.tsx index 3836c154719..f7a67e4f5c1 100644 --- a/packages/desktop-client/src/components/alerts.tsx +++ b/packages/desktop-client/src/components/alerts.tsx @@ -2,7 +2,7 @@ import React, { type ComponentType, type ReactNode } from 'react'; import ExclamationOutline from '../icons/v1/ExclamationOutline'; import InformationOutline from '../icons/v1/InformationOutline'; -import { styles, colors, type CSSProperties } from '../style'; +import { styles, theme, type CSSProperties } from '../style'; import Text from './common/Text'; import View from './common/View'; @@ -33,7 +33,7 @@ const Alert = ({ padding: 10, flexDirection: 'row', '& a, & a:active, & a:visited': { - color: colors.b3, + color: theme.altFormLabelText, }, ...style, }} @@ -63,7 +63,7 @@ export const Information = ({ style, children }: ScopedAlertProps) => { return ( { return ( {children} @@ -93,8 +93,8 @@ export const Error = ({ style, children }: ScopedAlertProps) => { return ( {children} diff --git a/packages/desktop-client/src/components/manager/BudgetList.js b/packages/desktop-client/src/components/manager/BudgetList.js index d127914b671..6725c039f91 100644 --- a/packages/desktop-client/src/components/manager/BudgetList.js +++ b/packages/desktop-client/src/components/manager/BudgetList.js @@ -13,7 +13,7 @@ import FileDouble from '../../icons/v1/FileDouble'; import CloudUnknown from '../../icons/v2/CloudUnknown'; import Key from '../../icons/v2/Key'; import RefreshArrow from '../../icons/v2/RefreshArrow'; -import { styles, colors } from '../../style'; +import { styles, theme } from '../../style'; import tokens from '../../tokens'; import Button from '../common/Button'; import Menu from '../common/Menu'; @@ -96,7 +96,7 @@ function FileState({ file }) { case 'unknown': Icon = CloudUnknown; status = 'Network unavailable'; - color = colors.n7; + color = theme.buttonNormalDisabledText; break; case 'remote': Icon = CloudDownload; @@ -159,12 +159,12 @@ function File({ file, onSelect, onDelete }) { ...styles.shadow, margin: 10, padding: '12px 15px', - backgroundColor: 'white', + backgroundColor: theme.buttonNormalBackground, borderRadius: 6, flexShrink: 0, cursor: 'pointer', ':hover': { - backgroundColor: colors.hover, + backgroundColor: theme.hover, }, }} > @@ -183,7 +183,9 @@ function File({ file, onSelect, onDelete }) { width: 13, height: 13, marginRight: 8, - color: file.hasKey ? colors.b5 : colors.n8, + color: file.hasKey + ? theme.formLabelText + : theme.buttonNormalDisabledText, }} /> )} @@ -320,7 +322,7 @@ export default function BudgetList() { type="bare" style={{ marginLeft: 10, - color: colors.n4, + color: theme.pageTextLight, }} onClick={e => { e.preventDefault(); diff --git a/packages/desktop-client/src/components/manager/ConfigServer.tsx b/packages/desktop-client/src/components/manager/ConfigServer.tsx index e61887a8e21..1331fa5676c 100644 --- a/packages/desktop-client/src/components/manager/ConfigServer.tsx +++ b/packages/desktop-client/src/components/manager/ConfigServer.tsx @@ -8,7 +8,7 @@ import { import { useActions } from '../../hooks/useActions'; import { useSetThemeColor } from '../../hooks/useSetThemeColor'; -import { colors, theme } from '../../style'; +import { theme } from '../../style'; import Button, { ButtonWithLoading } from '../common/Button'; import { BigInput } from '../common/Input'; import Text from '../common/Text'; @@ -95,7 +95,7 @@ export default function ConfigServer() { @@ -117,7 +117,7 @@ export default function ConfigServer() { {currentUrl ? ( - ) : ( @@ -176,7 +180,7 @@ export default function ConfigServer() { diff --git a/packages/desktop-client/src/components/manager/ImportActual.tsx b/packages/desktop-client/src/components/manager/ImportActual.tsx index dbc77423942..0a66be3f6ce 100644 --- a/packages/desktop-client/src/components/manager/ImportActual.tsx +++ b/packages/desktop-client/src/components/manager/ImportActual.tsx @@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'; import { importBudget } from 'loot-core/src/client/actions/budgets'; -import { styles, colors } from '../../style'; +import { styles, theme } from '../../style'; import Block from '../common/Block'; import { ButtonWithLoading } from '../common/Button'; import Modal, { type ModalProps } from '../common/Modal'; @@ -63,7 +63,7 @@ function Import({ modalProps }: ImportProps) { {() => ( {error && ( - + {getErrorMessage(error)} )} diff --git a/packages/desktop-client/src/components/manager/ImportYNAB4.tsx b/packages/desktop-client/src/components/manager/ImportYNAB4.tsx index cefe3db03a9..7e716371484 100644 --- a/packages/desktop-client/src/components/manager/ImportYNAB4.tsx +++ b/packages/desktop-client/src/components/manager/ImportYNAB4.tsx @@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'; import { importBudget } from 'loot-core/src/client/actions/budgets'; -import { styles, colors } from '../../style'; +import { styles, theme } from '../../style'; import Block from '../common/Block'; import { ButtonWithLoading } from '../common/Button'; import Modal, { type ModalProps } from '../common/Modal'; @@ -51,7 +51,7 @@ function Import({ modalProps }: ImportProps) { {() => ( {error && ( - + {getErrorMessage(error)} )} diff --git a/packages/desktop-client/src/components/manager/ImportYNAB5.tsx b/packages/desktop-client/src/components/manager/ImportYNAB5.tsx index 0c1839871d0..3b7a29393a6 100644 --- a/packages/desktop-client/src/components/manager/ImportYNAB5.tsx +++ b/packages/desktop-client/src/components/manager/ImportYNAB5.tsx @@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'; import { importBudget } from 'loot-core/src/client/actions/budgets'; -import { styles, colors } from '../../style'; +import { styles, theme } from '../../style'; import Block from '../common/Block'; import { ButtonWithLoading } from '../common/Button'; import ExternalLink from '../common/ExternalLink'; @@ -54,7 +54,7 @@ function Import({ modalProps }: ImportProps) { {() => ( {error && ( - + {getErrorMessage(error)} )} diff --git a/packages/desktop-client/src/components/manager/WelcomeScreen.js b/packages/desktop-client/src/components/manager/WelcomeScreen.js index 1fc42330d23..53125f8d2f2 100644 --- a/packages/desktop-client/src/components/manager/WelcomeScreen.js +++ b/packages/desktop-client/src/components/manager/WelcomeScreen.js @@ -1,7 +1,7 @@ import React from 'react'; import { useActions } from '../../hooks/useActions'; -import { colors, styles } from '../../style'; +import { styles, theme } from '../../style'; import Button from '../common/Button'; import ExternalLink from '../common/ExternalLink'; import Paragraph from '../common/Paragraph'; @@ -48,7 +48,7 @@ export default function WelcomeScreen() { to help you get your bearings, and check out the rest of the documentation while you’re there to learn more about advanced topics. - + Get started by importing an existing budget file from Actual or another budgeting app, or start fresh with an empty budget. You can always create or import another budget later. diff --git a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js index 141e53b570c..9c209ed7a4b 100644 --- a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js +++ b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { colors } from '../../style'; +import { theme } from '../../style'; import CategoryAutocomplete from '../autocomplete/CategoryAutocomplete'; import Block from '../common/Block'; import Button from '../common/Button'; @@ -29,7 +29,16 @@ export default function ConfirmCategoryDelete({ msg = 'Something bad happened, sorry!'; } - return {msg}; + return ( + + {msg} + + ); }; const isIncome = !!(category || group).is_income; diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js index 0012680877d..9ead88f342e 100644 --- a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js +++ b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js @@ -5,7 +5,7 @@ import { css } from 'glamor'; import { send } from 'loot-core/src/platform/client/fetch'; import { getCreateKeyError } from 'loot-core/src/shared/errors'; -import { colors } from '../../style'; +import { theme } from '../../style'; import { ButtonWithLoading } from '../common/Button'; import ExternalLink from '../common/ExternalLink'; import InitialFocus from '../common/InitialFocus'; @@ -128,7 +128,7 @@ export default function CreateEncryptionKey({ {error && ( {() => ( @@ -202,7 +205,7 @@ export default function EditField({ modalProps, name, onSubmit }) { title={label} style={{ alignSelf: 'center', - color: colors.b10, + color: theme.altMobileModalText, marginBottom: 10, }} /> diff --git a/packages/desktop-client/src/components/modals/FixEncryptionKey.js b/packages/desktop-client/src/components/modals/FixEncryptionKey.js index e8edc6237cb..57e52e37edf 100644 --- a/packages/desktop-client/src/components/modals/FixEncryptionKey.js +++ b/packages/desktop-client/src/components/modals/FixEncryptionKey.js @@ -3,7 +3,7 @@ import React, { useState } from 'react'; import { send } from 'loot-core/src/platform/client/fetch'; import { getTestKeyError } from 'loot-core/src/shared/errors'; -import { colors } from '../../style'; +import { theme } from '../../style'; import Button, { ButtonWithLoading } from '../common/Button'; import ExternalLink from '../common/ExternalLink'; import InitialFocus from '../common/InitialFocus'; @@ -53,7 +53,7 @@ export default function FixEncryptionKey({ style={{ fontSize: 25, fontWeight: 700, - color: colors.n2, + color: theme.pageTextDark, margin: '20px 0', }} > @@ -96,7 +96,7 @@ export default function FixEncryptionKey({ {error && ( set them up {' '} @@ -266,10 +266,10 @@ export default function GoCardlessExternalMsg({ {waiting || isConfigurationLoading ? ( - + {isConfigurationLoading ? 'Checking GoCardless configuration..' : waiting === 'browser' @@ -293,8 +293,8 @@ export default function GoCardlessExternalMsg({ fontSize: 15, fontWeight: 600, marginTop: 10, - backgroundColor: colors.g4, - borderColor: colors.g4, + backgroundColor: theme.alt3NoticeText, + borderColor: theme.alt3NoticeText, }} onClick={onContinue} > @@ -304,7 +304,7 @@ export default function GoCardlessExternalMsg({ renderLinkButton() ) : ( <> - + GoCardless integration has not yet been configured. )}
- + Why not link it in the app?
diff --git a/packages/desktop-client/src/components/util/DisplayId.js b/packages/desktop-client/src/components/util/DisplayId.js index 3faf67e4308..3947f9f1e5d 100644 --- a/packages/desktop-client/src/components/util/DisplayId.js +++ b/packages/desktop-client/src/components/util/DisplayId.js @@ -3,10 +3,14 @@ import React from 'react'; 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 { theme } from '../../style'; import Text from '../common/Text'; -export default function DisplayId({ type, id, noneColor = colors.n8 }) { +export default function DisplayId({ + type, + id, + noneColor = theme.pageTextSubdued, +}) { let DataComponent; switch (type) { diff --git a/packages/desktop-client/src/components/util/LoadComponent.tsx b/packages/desktop-client/src/components/util/LoadComponent.tsx index d8009096fa6..08be27854aa 100644 --- a/packages/desktop-client/src/components/util/LoadComponent.tsx +++ b/packages/desktop-client/src/components/util/LoadComponent.tsx @@ -1,7 +1,7 @@ import { type ComponentType, useEffect, useState } from 'react'; import AnimatedLoading from '../../icons/AnimatedLoading'; -import { colors, styles } from '../../style'; +import { theme, styles } from '../../style'; import Block from '../common/Block'; import View from '../common/View'; @@ -41,7 +41,7 @@ function LoadComponentInner({ {message && ( {message} )} - +
); } diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts index 40a2e829e15..6bb32f067e5 100644 --- a/packages/desktop-client/src/style/themes/dark.ts +++ b/packages/desktop-client/src/style/themes/dark.ts @@ -86,6 +86,9 @@ export const mobileNavItem = colorPalette.navy150; export const mobileNavItemSelected = colorPalette.purple400; export const mobileAccountShadow = cardShadow; export const mobileAccountText = colorPalette.blue800; +export const mobileModalBackground = colorPalette.navy900; +export const mobileModalText = colorPalette.white; +export const altMobileModalText = colorPalette.blue100; // Mobile view themes (for the top bar) export const mobileAccountViewTheme = colorPalette.navy50; diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts index a36e26b0a05..292d61143e7 100644 --- a/packages/desktop-client/src/style/themes/light.ts +++ b/packages/desktop-client/src/style/themes/light.ts @@ -86,6 +86,9 @@ export const mobileNavItem = colorPalette.gray300; export const mobileNavItemSelected = colorPalette.purple500; export const mobileAccountShadow = colorPalette.navy300; export const mobileAccountText = colorPalette.blue800; +export const mobileModalBackground = colorPalette.navy900; +export const mobileModalText = colorPalette.white; +export const altMobileModalText = colorPalette.blue100; // Mobile view themes (for the top bar) export const mobileAccountViewTheme = colorPalette.navy50; diff --git a/upcoming-release-notes/1503.md b/upcoming-release-notes/1503.md new file mode 100644 index 00000000000..0ea6bd904aa --- /dev/null +++ b/upcoming-release-notes/1503.md @@ -0,0 +1,5 @@ +--- +category: Enhancements +authors: [biohzrddd, carkom] +--- +Phase four of dark theme, to include manager/modals \ No newline at end of file