Visual goals (#40)

* 🔥 removing privacyMode feature flag (actualbudget#1688) * 🎨 fix multiline label in schedules modal (actualbudget#1687) * Update Visual Regression README File (actualbudget#1689) * Fix typo in GoCardlessLink.js (actualbudget#1684) happend -> happened * queried cleared balance for tooltip (actualbudget#1678) * Dark Theme Reports/Settings (actualbudget#1512) * 🐛 Mobile account transaction list: Fix sticky date section headers (actualbudget#1698) * 👷 do not cancel github ci jobs on master branch (actualbudget#1692) * Sidebar Account Fix (actualbudget#1703) * Dark Theme Final (actualbudget#1513) * Category autocomplete should only search selectable categories (actualbudget#1681) * set colors based on a goal value * extra comment --------- Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv> Co-authored-by: Crazypkr1099 <nicholas.lacasse430@gmail.com> Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com> Co-authored-by: Shaan Khosla <35707672+shaankhosla@users.noreply.github.com> Co-authored-by: Neil <55785687+carkom@users.noreply.github.com> Co-authored-by: Trevor Farlow <trevdor@users.noreply.github.com>
shall0pass · Sep 16, 2023 · c55797b · c55797b
1 parent 2c9d33f
commit c55797b
Show file tree

Hide file tree

Showing 82 changed files with 590 additions and 432 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -216,63 +216,9 @@ module.exports = {
       rules: { 'import/no-unused-modules': 'off' },
     },
     {
-      //This is temporary. We will remove these as dark theme gets ported
       files: [
-        './packages/desktop-client/src/components/LoggedInUser.*',
-        './packages/desktop-client/src/components/MobileWebMessage.*',
-        './packages/desktop-client/src/components/NotesButton.*',
-        './packages/desktop-client/src/components/Notifications.*',
-        './packages/desktop-client/src/components/Page.*',
-        './packages/desktop-client/src/components/Titlebar.*',
-        './packages/desktop-client/src/components/UpdateNotification.*',
-        './packages/desktop-client/src/components/accounts/Header.*',
-        './packages/desktop-client/src/components/alerts.*',
-        './packages/desktop-client/src/components/budget/BudgetCategories.*',
-        './packages/desktop-client/src/components/budget/BudgetTotals.*',
-        './packages/desktop-client/src/components/budget/ExpenseGroup.*',
-        './packages/desktop-client/src/components/budget/IncomeGroup.*',
-        './packages/desktop-client/src/components/budget/MobileBudget.*',
-        './packages/desktop-client/src/components/budget/MobileBudgetTable.*',
-        './packages/desktop-client/src/components/budget/MobileTable.*',
-        './packages/desktop-client/src/components/budget/MonthCountSelector.*',
-        './packages/desktop-client/src/components/budget/MonthPicker.*',
-        './packages/desktop-client/src/components/budget/RenderMonths.*',
-        './packages/desktop-client/src/components/budget/SidebarCategory.*',
-        './packages/desktop-client/src/components/budget/SidebarGroup.*',
-        './packages/desktop-client/src/components/budget/constants.*',
-        './packages/desktop-client/src/components/budget/report/BudgetSummary.*',
-        './packages/desktop-client/src/components/budget/report/components.*',
-        './packages/desktop-client/src/components/budget/rollover/BudgetSummary.*',
-        './packages/desktop-client/src/components/budget/rollover/rollover-components.*',
-        './packages/desktop-client/src/components/budget/util.*',
-        './packages/desktop-client/src/components/common.*',
-        './packages/desktop-client/src/components/common/Card.*',
-        './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/modals/BudgetSummary.*',
-        './packages/desktop-client/src/components/payees/index.*',
-        './packages/desktop-client/src/components/reports/CashFlow.*',
-        './packages/desktop-client/src/components/reports/Change.*',
-        './packages/desktop-client/src/components/reports/DateRange.*',
-        './packages/desktop-client/src/components/reports/Header.*',
-        './packages/desktop-client/src/components/reports/NetWorth.*',
-        './packages/desktop-client/src/components/reports/Overview.*',
-        './packages/desktop-client/src/components/reports/Tooltip.*',
-        './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/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/transactions/MobileTransaction.*',
-        './packages/desktop-client/src/components/transactions/TransactionsTable.*',
-        './packages/desktop-client/src/components/util/AmountInput.*',
-        './packages/desktop-client/src/style/*',
+        './packages/desktop-client/src/style/index.*',
+        './packages/desktop-client/src/style/palette.*',
       ],
       rules: {
         'no-restricted-imports': ['off', { patterns: restrictedImportColors }],

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -15,7 +15,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   api:

diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
@@ -8,7 +8,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   lint:

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
@@ -9,7 +9,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   analyze:

diff --git a/.github/workflows/electron.yml b/.github/workflows/electron.yml
@@ -15,7 +15,7 @@ on:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  cancel-in-progress: ${{ github.ref != 'refs/heads/master' }}
 
 jobs:
   build:

diff --git a/packages/desktop-client/README.md b/packages/desktop-client/README.md
@@ -37,15 +37,20 @@ First start the dev server:
 ```sh
 HTTPS=true yarn start
 ```
-
-Next, run the standartised docker container and launch the visual regression tests from within it.
+Next, navigate to the root of your project folder, run the standartised docker container, and launch the visual regression tests from within it.
 
 ```sh
 # Run docker container
 docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.37.0-jammy /bin/bash
 
+    # If you recieve an error such as "docker: invalid reference format", please instead use the following command:
+    docker run --rm --network host -v ${pwd}:/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.37.0-jammy /bin/bash
+
 # Run the VRT tests: important - they MUST be ran against a HTTPS server
 E2E_START_URL=https://192.168.0.178:3001 yarn vrt
+
+    # To update snapshots, use the following command:
+    E2E_START_URL=https://192.168.0.178:3001 yarn vrt --update-snapshots
 ```
 
 #### Running against a remote server

diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import { useActions } from '../hooks/useActions';
-import { colors, styles, type CSSProperties } from '../style';
+import { theme, styles, type CSSProperties } from '../style';
 
 import Button from './common/Button';
 import Menu from './common/Menu';
@@ -78,7 +78,7 @@ export default function LoggedInUser({
     return (
       <Text
         style={{
-          color: colors.n5,
+          color: theme.altpageTextSubdued,
           fontStyle: 'italic',
           ...styles.delayedFadeIn,
           ...style,

diff --git a/packages/desktop-client/src/components/MobileWebMessage.tsx b/packages/desktop-client/src/components/MobileWebMessage.tsx
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { savePrefs } from 'loot-core/src/client/actions';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { colors, styles } from '../style';
+import { theme, styles } from '../style';
 
 import Button from './common/Button';
 import Text from './common/Text';
@@ -55,8 +55,8 @@ export default function MobileWebMessage() {
         bottom: 0,
         left: 0,
         right: 0,
-        backgroundColor: colors.n1,
-        color: 'white',
+        backgroundColor: theme.mobileModalBackground,
+        color: theme.mobileModalText,
         padding: 10,
         margin: 10,
         borderRadius: 6,

diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
@@ -9,7 +9,7 @@ import { useLiveQuery } from 'loot-core/src/client/query-hooks';
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import CustomNotesPaper from '../icons/v2/CustomNotesPaper';
-import { type CSSProperties, colors } from '../style';
+import { type CSSProperties, theme } from '../style';
 import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown';
 
 import Button from './common/Button';
@@ -43,23 +43,23 @@ const markdownStyles = css({
   },
   '& blockquote': {
     paddingLeft: '0.75rem',
-    borderLeft: '3px solid ' + colors.p6,
+    borderLeft: '3px solid ' + theme.markdownDark,
     margin: 0,
   },
   '& hr': {
     borderTop: 'none',
     borderLeft: 'none',
     borderRight: 'none',
-    borderBottom: '1px solid ' + colors.p9,
+    borderBottom: '1px solid ' + theme.markdownNormal,
   },
   '& code': {
-    backgroundColor: colors.p10,
+    backgroundColor: theme.markdownLight,
     padding: '0.1rem 0.5rem',
     borderRadius: '0.25rem',
   },
   '& pre': {
     padding: '0.5rem',
-    backgroundColor: colors.p10,
+    backgroundColor: theme.markdownLight,
     borderRadius: '0.5rem',
     margin: 0,
     ':not(:first-child)': {
@@ -72,7 +72,7 @@ const markdownStyles = css({
     },
   },
   '& table, & th, & td': {
-    border: '1px solid ' + colors.p9,
+    border: '1px solid ' + theme.markdownNormal,
   },
   '& table': {
     borderCollapse: 'collapse',
@@ -110,7 +110,7 @@ function NotesTooltip({
         <textarea
           ref={inputRef}
           className={`${css({
-            border: '1px solid ' + colors.border,
+            border: '1px solid ' + theme.buttonNormalBorder,
             padding: 7,
             minWidth: 350,
             minHeight: 120,
@@ -145,7 +145,7 @@ export default function NotesButton({
   id,
   width = 12,
   height = 12,
-  defaultColor = colors.n8,
+  defaultColor = theme.pageBackgroundModalActive,
   tooltipPosition,
   style,
 }: NotesButtonProps) {
@@ -191,7 +191,7 @@ export default function NotesButton({
           color: defaultColor,
           ...style,
           ...(hasNotes && { display: 'flex !important' }),
-          ...(tooltipOpen && { color: colors.n1 }),
+          ...(tooltipOpen && { color: theme.buttonNormalText }),
         }}
         {...tooltip.getOpenEvents()}
       >

diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
@@ -11,7 +11,7 @@ import type { NotificationWithId } from 'loot-core/src/client/state-types/notifi
 import { useActions } from '../hooks/useActions';
 import AnimatedLoading from '../icons/AnimatedLoading';
 import Delete from '../icons/v0/Delete';
-import { styles, colors, type CSSProperties } from '../style';
+import { styles, theme, type CSSProperties } from '../style';
 
 import Button, { ButtonWithLoading } from './common/Button';
 import ExternalLink from './common/ExternalLink';
@@ -107,7 +107,11 @@ function Notification({
     <View
       style={{
         marginTop: 10,
-        color: positive ? colors.g3 : error ? colors.r3 : colors.y2,
+        color: positive
+          ? theme.alt4NoticeText
+          : error
+          ? theme.alt3ErrorText
+          : theme.alt4WarningText,
       }}
     >
       <Stack
@@ -117,12 +121,16 @@ function Notification({
           padding: '14px 14px',
           fontSize: 14,
           backgroundColor: positive
-            ? colors.g11
+            ? theme.alt2NoticeBackground
             : error
-            ? colors.r11
-            : colors.y10,
+            ? theme.errorBackground
+            : theme.alt2WarningBackground,
           borderTop: `3px solid ${
-            positive ? colors.g5 : error ? colors.r5 : colors.y4
+            positive
+              ? theme.altNoticeAccent
+              : error
+              ? theme.altErrorAccent
+              : theme.altWarningAccent
           }`,
           ...styles.shadowLarge,
           maxWidth: 550,
@@ -164,17 +172,21 @@ function Notification({
               style={{
                 backgroundColor: 'transparent',
                 border: `1px solid ${
-                  positive ? colors.g5 : error ? colors.r4 : colors.y3
+                  positive
+                    ? theme.altNoticeAccent
+                    : error
+                    ? theme.altErrorAccent
+                    : theme.altWarningAccent
                 }`,
                 color: 'currentColor',
                 fontSize: 14,
                 flexShrink: 0,
                 '&:hover, &:active': {
                   backgroundColor: positive
-                    ? colors.g9
+                    ? theme.noticeBackground
                     : error
-                    ? colors.r10
-                    : colors.y9,
+                    ? theme.altErrorBackground
+                    : theme.altWarningBackground,
                 },
               }}
             >
@@ -200,7 +212,7 @@ function Notification({
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: 'rgba(250, 250, 250, .75)',
+            backgroundColor: theme.tableBackground,
             alignItems: 'center',
             justifyContent: 'center',
           }}

diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
@@ -1,7 +1,7 @@
 import React, { type ReactNode } from 'react';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { colors, styles, type CSSProperties } from '../style';
+import { theme, styles, type CSSProperties } from '../style';
 
 import Text from './common/Text';
 import View from './common/View';
@@ -20,8 +20,8 @@ function PageTitle({
       <View
         style={{
           alignItems: 'center',
-          backgroundColor: colors.b2,
-          color: 'white',
+          backgroundColor: theme.sidebarItemBackground,
+          color: theme.mobileModalText,
           flexDirection: 'row',
           flex: '1 0 auto',
           fontSize: 18,

diff --git a/packages/desktop-client/src/components/PrivacyFilter.tsx b/packages/desktop-client/src/components/PrivacyFilter.tsx
@@ -8,7 +8,6 @@ import React, {
 
 import usePrivacyMode from 'loot-core/src/client/privacy';
 
-import useFeatureFlag from '../hooks/useFeatureFlag';
 import { useResponsive } from '../ResponsiveProvider';
 
 import View from './common/View';
@@ -53,7 +52,6 @@ export default function PrivacyFilter({
   children,
   ...props
 }: PrivacyFilterProps) {
-  let privacyModeFeatureFlag = useFeatureFlag('privacyMode');
   let privacyMode = usePrivacyMode();
   // Limit mobile support for now.
   let { isNarrowWidth } = useResponsive();
@@ -67,7 +65,7 @@ export default function PrivacyFilter({
 
   let blurAmount = blurIntensity != null ? `${blurIntensity}px` : '3px';
 
-  return !privacyModeFeatureFlag || !activate ? (
+  return !activate ? (
     <>{Children.toArray(children)}</>
   ) : (
     <BlurredOverlay blurIntensity={blurAmount} {...props}>