DarkTheme Schedules/Payees (actualbudget#1487)

.eslintrc.js

@@ -225,7 +225,6 @@ module.exports = {
         './packages/desktop-client/src/components/NotesButton.*',
         './packages/desktop-client/src/components/Notifications.*',
         './packages/desktop-client/src/components/Page.*',
-        './packages/desktop-client/src/components/SidebarWithData.*',
         './packages/desktop-client/src/components/Titlebar.*',
         './packages/desktop-client/src/components/UpdateNotification.*',
         './packages/desktop-client/src/components/accounts/Header.*',
@@ -261,11 +260,6 @@ module.exports = {
         './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/manager/subscribe/Bootstrap.*',
-        './packages/desktop-client/src/components/manager/subscribe/ChangePassword.*',
-        './packages/desktop-client/src/components/manager/subscribe/Error.*',
-        './packages/desktop-client/src/components/manager/subscribe/Login.*',
-        './packages/desktop-client/src/components/manager/subscribe/common.*',
         './packages/desktop-client/src/components/modals/BudgetSummary.*',
         './packages/desktop-client/src/components/modals/ConfirmCategoryDelete.*',
         './packages/desktop-client/src/components/modals/CreateEncryptionKey.*',
@@ -274,8 +268,8 @@ module.exports = {
         './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/MergeUnusedPayees.*',
         './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.*',
@@ -287,23 +281,13 @@ module.exports = {
         './packages/desktop-client/src/components/reports/chart-theme.*',
         './packages/desktop-client/src/components/reports/graphs/CashFlowGraph.*',
         './packages/desktop-client/src/components/reports/graphs/NetWorthGraph.*',
-        './packages/desktop-client/src/components/schedules/DiscoverSchedules.*',
-        './packages/desktop-client/src/components/schedules/EditSchedule.*',
-        './packages/desktop-client/src/components/schedules/LinkSchedule.*',
-        './packages/desktop-client/src/components/schedules/PostsOfflineNotification.*',
-        './packages/desktop-client/src/components/schedules/SchedulesTable.*',
-        './packages/desktop-client/src/components/schedules/StatusBadge.*',
-        './packages/desktop-client/src/components/schedules/index.*',
-        './packages/desktop-client/src/components/select/DateSelect.*',
-        './packages/desktop-client/src/components/select/RecurringSchedulePicker.*',
         './packages/desktop-client/src/components/settings/Encryption.*',
         './packages/desktop-client/src/components/settings/Experimental.*',
         './packages/desktop-client/src/components/settings/FixSplits.*',
         './packages/desktop-client/src/components/settings/Format.*',
         './packages/desktop-client/src/components/settings/Global.*',
         './packages/desktop-client/src/components/settings/UI.*',
         './packages/desktop-client/src/components/settings/index.*',
-        './packages/desktop-client/src/components/sidebar.*',
         './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/manager/subscribe/Bootstrap.tsx

@@ -5,7 +5,7 @@ import { createBudget } from 'loot-core/src/client/actions/budgets';
 import { loggedIn } from 'loot-core/src/client/actions/user';
 import { send } from 'loot-core/src/platform/client/fetch';
 
-import { colors } from '../../../style';
+import { theme } from '../../../style';
 import Button from '../../common/Button';
 import ExternalLink from '../../common/ExternalLink';
 import Paragraph from '../../common/Paragraph';
@@ -56,12 +56,12 @@ export default function Bootstrap() {
   return (
     <View style={{ maxWidth: 450, marginTop: -30 }}>
       <Title text="Welcome to Actual!" />
-      <Paragraph style={{ fontSize: 16, color: colors.n2 }}>
+      <Paragraph style={{ fontSize: 16, color: theme.pageTextDark }}>
         Actual is a super fast privacy-focused app for managing your finances.
         To secure your data, you’ll need to set a password for your server.
       </Paragraph>
 
-      <Paragraph isLast style={{ fontSize: 16, color: colors.n2 }}>
+      <Paragraph isLast style={{ fontSize: 16, color: theme.pageTextDark }}>
         Consider opening{' '}
         <ExternalLink to="https://actualbudget.org/docs/tour/">
           our tour
@@ -74,7 +74,7 @@ export default function Bootstrap() {
         <Text
           style={{
             marginTop: 20,
-            color: colors.r4,
+            color: theme.errorText,
             borderRadius: 4,
             fontSize: 15,
           }}
@@ -87,7 +87,7 @@ export default function Bootstrap() {
         buttons={
           <Button
             type="bare"
-            style={{ fontSize: 15, color: colors.b4, marginRight: 15 }}
+            style={{ fontSize: 15, color: theme.pageTextLink, marginRight: 15 }}
             onClick={onDemo}
           >
             Try Demo

packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { send } from 'loot-core/src/platform/client/fetch';
 
-import { colors } from '../../../style';
+import { theme } from '../../../style';
 import Button from '../../common/Button';
 import Text from '../../common/Text';
 import View from '../../common/View';
@@ -48,7 +48,7 @@ export default function ChangePassword() {
       <Text
         style={{
           fontSize: 16,
-          color: colors.n2,
+          color: theme.pageTextDark,
           lineHeight: 1.4,
         }}
       >
@@ -60,7 +60,7 @@ export default function ChangePassword() {
         <Text
           style={{
             marginTop: 20,
-            color: colors.r4,
+            color: theme.errorText,
             borderRadius: 4,
             fontSize: 15,
           }}
@@ -73,7 +73,7 @@ export default function ChangePassword() {
         <Text
           style={{
             marginTop: 20,
-            color: colors.g4,
+            color: theme.noticeText,
             borderRadius: 4,
             fontSize: 15,
           }}

packages/desktop-client/src/components/manager/subscribe/Error.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
-import { colors } from '../../../style';
+import { theme } from '../../../style';
 import Button from '../../common/Button';
 import Text from '../../common/Text';
 import View from '../../common/View';
@@ -25,11 +25,11 @@ export default function Error() {
   }
 
   return (
-    <View style={{ alignItems: 'center' }}>
+    <View style={{ alignItems: 'center', color: theme.pageText }}>
       <Text
         style={{
           fontSize: 16,
-          color: colors.n2,
+          color: theme.pageTextDark,
           lineHeight: 1.4,
         }}
       >

packages/desktop-client/src/components/manager/subscribe/Login.tsx

@@ -5,7 +5,7 @@ import { createBudget } from 'loot-core/src/client/actions/budgets';
 import { loggedIn } from 'loot-core/src/client/actions/user';
 import { send } from 'loot-core/src/platform/client/fetch';
 
-import { colors } from '../../../style';
+import { theme } from '../../../style';
 import Button, { ButtonWithLoading } from '../../common/Button';
 import { BigInput } from '../../common/Input';
 import Text from '../../common/Text';
@@ -59,12 +59,12 @@ export default function Login() {
   }
 
   return (
-    <View style={{ maxWidth: 450, marginTop: -30 }}>
+    <View style={{ maxWidth: 450, marginTop: -30, color: theme.pageText }}>
       <Title text="Sign in to this Actual instance" />
       <Text
         style={{
           fontSize: 16,
-          color: colors.n2,
+          color: theme.pageTextDark,
           lineHeight: 1.4,
         }}
       >
@@ -76,7 +76,7 @@ export default function Login() {
         <Text
           style={{
             marginTop: 20,
-            color: colors.r4,
+            color: theme.errorText,
             borderRadius: 4,
             fontSize: 15,
           }}
@@ -115,7 +115,7 @@ export default function Login() {
       >
         <Button
           type="bare"
-          style={{ fontSize: 15, color: colors.b4, marginLeft: 10 }}
+          style={{ fontSize: 15, color: theme.pageTextLink, marginLeft: 10 }}
           onClick={onDemo}
         >
           Try Demo &rarr;

packages/desktop-client/src/components/manager/subscribe/common.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 
 import { send } from 'loot-core/src/platform/client/fetch';
 
-import { colors } from '../../../style';
+import { theme } from '../../../style';
 import { useSetServerURL } from '../../ServerContext';
 
 // There are two URLs that dance with each other: `/login` and
@@ -78,7 +78,7 @@ export function Title({ text }: TitleProps) {
       style={{
         fontSize: 40,
         fontWeight: 700,
-        color: colors.p3,
+        color: theme.pageTextPositive,
         marginBottom: 20,
       }}
     >

packages/desktop-client/src/components/modals/MergeUnusedPayees.js

@@ -4,15 +4,15 @@ import { useDispatch, useSelector } from 'react-redux';
 import { replaceModal } from 'loot-core/src/client/actions/modals';
 import { send } from 'loot-core/src/platform/client/fetch';
 
-import { colors } from '../../style';
+import { theme } from '../../style';
 import { Information } from '../alerts';
 import Button from '../common/Button';
 import Modal, { ModalButtons } from '../common/Modal';
 import Paragraph from '../common/Paragraph';
 import Text from '../common/Text';
 import View from '../common/View';
 
-let highlightStyle = { color: colors.p5 };
+let highlightStyle = { color: theme.pageTextPositive };
 
 export default function MergeUnusedPayees({
   modalProps,
@@ -141,7 +141,7 @@ export default function MergeUnusedPayees({
                 style={{
                   fontSize: 13,
                   marginTop: 10,
-                  color: colors.n4,
+                  color: theme.pageTextLight,
                   userSelect: 'none',
                   display: 'flex',
                   alignItems: 'center',

packages/desktop-client/src/components/payees/index.js

@@ -24,7 +24,7 @@ import Delete from '../../icons/v0/Delete';
 import ExpandArrow from '../../icons/v0/ExpandArrow';
 import Merge from '../../icons/v0/Merge';
 import ArrowThinRight from '../../icons/v1/ArrowThinRight';
-import { colors } from '../../style';
+import { theme } from '../../style';
 import Button from '../common/Button';
 import Menu from '../common/Menu';
 import Search from '../common/Search';
@@ -61,9 +61,9 @@ function RuleButton({ ruleCount, focused, onEdit, onClick }) {
         style={{
           borderRadius: 4,
           padding: '3px 6px',
-          backgroundColor: colors.g9,
-          border: '1px solid ' + colors.g9,
-          color: colors.g1,
+          backgroundColor: theme.noticeBackground,
+          border: '1px solid ' + theme.noticeBackground,
+          color: theme.altNoticeText,
           fontSize: 12,
         }}
         onEdit={onEdit}
@@ -102,7 +102,7 @@ let Payee = memo(
   }) => {
     let { id } = payee;
     let dispatchSelected = useSelectedDispatch();
-    let borderColor = selected ? colors.b8 : colors.border;
+    let borderColor = selected ? theme.tableBorderSelected : theme.tableBorder;
     let backgroundFocus = hovered || focusedField === 'select';
 
     return (
@@ -112,14 +112,14 @@ let Payee = memo(
           ...style,
           borderColor,
           backgroundColor: hovered
-            ? colors.hover
+            ? theme.tableRowBackgroundHover
             : selected
-            ? colors.b9
+            ? theme.tableRowBackgroundHighlight
             : backgroundFocus
-            ? colors.hover
-            : 'white',
+            ? theme.tableRowBackgroundHover
+            : theme.tableBackground,
           ...(selected && {
-            backgroundColor: colors.b9,
+            backgroundColor: theme.tableRowBackgroundHighlight,
             zIndex: 100,
           }),
         }}
@@ -138,7 +138,9 @@ let Payee = memo(
         />
         <InputCell
           value={(payee.transfer_acct ? 'Transfer: ' : '') + payee.name}
-          valueStyle={!selected && payee.transfer_acct && { color: colors.n7 }}
+          valueStyle={
+            !selected && payee.transfer_acct && { color: theme.pageTextSubdued }
+          }
           exposed={focusedField === 'name'}
           width="flex"
           onUpdate={value =>
@@ -220,7 +222,7 @@ const PayeeTable = forwardRef(
 );
 
 function PayeeTableHeader() {
-  let borderColor = colors.border;
+  let borderColor = theme.tableborder;
   let dispatchSelected = useSelectedDispatch();
   let selectedItems = useSelectedItems();
 
@@ -229,13 +231,12 @@ function PayeeTableHeader() {
       <TableHeader
         style={{
           borderColor,
-          backgroundColor: 'white',
-          color: colors.n4,
+          backgroundColor: theme.tableBackground,
+          color: theme.pageTextLight,
           zIndex: 200,
           userSelect: 'none',
         }}
         collapsed={true}
-        version="v2"
       >
         <SelectCell
           exposed={true}
@@ -254,7 +255,7 @@ function EmptyMessage({ text, style }) {
     <View
       style={{
         textAlign: 'center',
-        color: colors.n7,
+        color: theme.pageTextSubdued,
         fontStyle: 'italic',
         fontSize: 13,
         marginTop: 5,
@@ -298,7 +299,7 @@ function PayeeMenu({ payeesById, selectedPayees, onDelete, onMerge, onClose }) {
               padding: 3,
               fontSize: 11,
               fontStyle: 'italic',
-              color: colors.n7,
+              color: theme.pageTextSubdued,
             }}
           >
             {[...selectedPayees]
@@ -529,6 +530,7 @@ export const ManagePayees = forwardRef(
           </View>
           <View style={{ flex: 1 }} />
           <Search
+            id="filter-input"
             placeholder="Filter payees..."
             value={filter}
             onChange={applyFilter}
@@ -539,7 +541,7 @@ export const ManagePayees = forwardRef(
           <View
             style={{
               flex: 1,
-              border: '1px solid ' + colors.border,
+              border: '1px solid ' + theme.tableBorder,
               borderTopLeftRadius: 4,
               borderTopRightRadius: 4,
               overflow: 'hidden',