Dark Theme Manager and Modals

.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: {

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() {
               <View
                 style={{
                   borderRadius: 4,
-                  backgroundColor: colors.b9,
-                  color: colors.b1,
+                  backgroundColor: theme.pillBackgroundSelected,
+                  color: theme.pillTextSelected,
                   padding: '5px 13px',
                   flexDirection: 'row',
                   alignItems: 'center',
@@ -53,7 +53,7 @@ export default function BankSyncStatus() {
               >
                 <AnimatedRefresh
                   animating={true}
-                  iconStyle={{ color: colors.b1 }}
+                  iconStyle={{ color: theme.pillTextSelected }}
                 />
                 <Text>Syncing {item}</Text>
               </View>

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 (
     <Alert
       icon={InformationOutline}
-      color={colors.n4}
+      color={theme.pageTextLight}
       backgroundColor="transparent"
       style={{
         ...style,
@@ -80,8 +80,8 @@ export const Warning = ({ style, children }: ScopedAlertProps) => {
   return (
     <Alert
       icon={ExclamationOutline}
-      color={colors.y2}
-      backgroundColor={colors.y10}
+      color={theme.warningText}
+      backgroundColor={theme.warningBackground}
       style={style}
     >
       {children}
@@ -93,8 +93,8 @@ export const Error = ({ style, children }: ScopedAlertProps) => {
   return (
     <Alert
       icon={ExclamationOutline}
-      color={colors.r2}
-      backgroundColor={colors.r10}
+      color={theme.altErrorText}
+      backgroundColor={theme.altErrorBackground}
       style={style}
     >
       {children}

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

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() {
       <Text
         style={{
           fontSize: 16,
-          color: colors.n2,
+          color: theme.tableRowHeaderText,
           lineHeight: 1.5,
         }}
       >
@@ -117,7 +117,7 @@ export default function ConfigServer() {
         <Text
           style={{
             marginTop: 20,
-            color: colors.r4,
+            color: theme.errorText,
             borderRadius: 4,
             fontSize: 15,
           }}
@@ -167,7 +167,11 @@ export default function ConfigServer() {
         }}
       >
         {currentUrl ? (
-          <Button type="bare" style={{ color: colors.n4 }} onClick={onSkip}>
+          <Button
+            type="bare"
+            style={{ color: theme.pageTextLight }}
+            onClick={onSkip}
+          >
             Stop using a server
           </Button>
         ) : (
@@ -176,7 +180,7 @@ export default function ConfigServer() {
               <Button
                 type="bare"
                 style={{
-                  color: colors.n4,
+                  color: theme.pageTextLight,
                   margin: 5,
                   marginRight: 15,
                 }}
@@ -187,7 +191,7 @@ export default function ConfigServer() {
             )}
             <Button
               type="bare"
-              style={{ color: colors.n4, margin: 5 }}
+              style={{ color: theme.pageTextLight, margin: 5 }}
               onClick={onSkip}
             >
               Don’t use a server

packages/desktop-client/src/components/manager/DeleteFile.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import { ButtonWithLoading } from '../common/Button';
 import Modal from '../common/Modal';
 import Text from '../common/Text';
@@ -62,7 +62,7 @@ export default function DeleteMenu({ modalProps, actions, file }) {
                 type="primary"
                 loading={loadingState === 'cloud'}
                 style={{
-                  backgroundColor: colors.r4,
+                  backgroundColor: theme.errorText,
                   alignSelf: 'center',
                   border: 0,
                   padding: '10px 30px',
@@ -110,12 +110,12 @@ export default function DeleteMenu({ modalProps, actions, file }) {
                   fontSize: 14,
                   ...(isRemote
                     ? {
-                        color: colors.r4,
-                        borderColor: colors.r4,
+                        color: theme.errorText,
+                        borderColor: theme.errorText,
                       }
                     : {
                         border: 0,
-                        backgroundColor: colors.r4,
+                        backgroundColor: theme.errorText,
                       }),
                 }}
                 onClick={onDeleteLocal}

packages/desktop-client/src/components/manager/Import.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { styles, colors } from '../../style';
+import { styles, theme } from '../../style';
 import Block from '../common/Block';
 import Button from '../common/Button';
 import Modal from '../common/Modal';
@@ -36,7 +36,7 @@ function Import({ modalProps, actions }) {
 
   let itemStyle = {
     padding: 10,
-    border: '1px solid ' + colors.border,
+    border: '1px solid ' + theme.tableBorder,
     borderRadius: 6,
     marginBottom: 10,
     display: 'block',
@@ -47,7 +47,7 @@ function Import({ modalProps, actions }) {
       {() => (
         <View style={{ ...styles.smallText, lineHeight: 1.5 }}>
           {error && (
-            <Block style={{ color: colors.r4, marginBottom: 15 }}>
+            <Block style={{ color: theme.errorText, marginBottom: 15 }}>
               {getErrorMessage(error)}
             </Block>
           )}
@@ -59,19 +59,19 @@ function Import({ modalProps, actions }) {
 
           <Button style={itemStyle} onClick={() => onSelectType('ynab4')}>
             <span style={{ fontWeight: 700 }}>YNAB4</span>
-            <View style={{ color: colors.n5 }}>
+            <View style={{ color: theme.alt2PillText }}>
               The old unsupported desktop app
             </View>
           </Button>
           <Button style={itemStyle} onClick={() => onSelectType('ynab5')}>
             <span style={{ fontWeight: 700 }}>nYNAB</span>
-            <View style={{ color: colors.n5 }}>
+            <View style={{ color: theme.alt2PillText }}>
               <div>The newer web app</div>
             </View>
           </Button>
           <Button style={itemStyle} onClick={() => onSelectType('actual')}>
             <span style={{ fontWeight: 700 }}>Actual</span>
-            <View style={{ color: colors.n5 }}>
+            <View style={{ color: theme.alt2PillText }}>
               <div>Import a file exported from Actual</div>
             </View>
           </Button>

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) {
       {() => (
         <View style={{ ...styles.smallText, lineHeight: 1.5, marginTop: 20 }}>
           {error && (
-            <Block style={{ color: colors.r4, marginBottom: 15 }}>
+            <Block style={{ color: theme.errorText, marginBottom: 15 }}>
               {getErrorMessage(error)}
             </Block>
           )}

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) {
       {() => (
         <View style={{ ...styles.smallText, lineHeight: 1.5, marginTop: 20 }}>
           {error && (
-            <Block style={{ color: colors.r4, marginBottom: 15 }}>
+            <Block style={{ color: theme.errorText, marginBottom: 15 }}>
               {getErrorMessage(error)}
             </Block>
           )}

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) {
       {() => (
         <View style={{ ...styles.smallText, lineHeight: 1.5, marginTop: 20 }}>
           {error && (
-            <Block style={{ color: colors.r4, marginBottom: 15 }}>
+            <Block style={{ color: theme.errorText, marginBottom: 15 }}>
               {getErrorMessage(error)}
             </Block>
           )}

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.
         </Paragraph>
-        <Paragraph style={{ color: colors.n5 }}>
+        <Paragraph style={{ color: theme.altpageTextSubdued }}>
           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.