From 0fec405fef723c4aa3ec30c3e25dafc07d43eede Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 7 Nov 2023 13:35:26 +0000 Subject: [PATCH 1/4] Color Updates --- .../src/components/Titlebar.tsx | 2 +- .../src/components/accounts/Account.js | 2 +- .../autocomplete/AccountAutocomplete.js | 4 +- .../components/autocomplete/Autocomplete.tsx | 2 +- .../autocomplete/CategoryAutocomplete.tsx | 6 +- .../autocomplete/PayeeAutocomplete.js | 6 +- .../autocomplete/SavedFilterAutocomplete.js | 2 +- .../src/components/budget/BudgetCategories.js | 4 +- .../src/components/budget/ExpenseGroup.js | 2 +- .../src/components/budget/IncomeGroup.tsx | 5 +- .../components/budget/MobileBudgetTable.js | 4 +- .../src/components/budget/SidebarGroup.tsx | 2 +- .../budget/rollover/BudgetSummary.tsx | 4 +- .../budget/rollover/rollover-components.tsx | 14 +- .../src/components/budget/util.ts | 4 +- .../src/components/common/Menu.tsx | 2 +- .../src/components/common/Search.tsx | 2 +- .../src/components/filters/FiltersMenu.js | 2 +- .../src/components/modals/EditField.js | 6 +- .../src/components/modals/LoadBackup.js | 2 +- .../src/components/reports/Overview.js | 4 +- .../src/components/reports/Tooltip.js | 8 +- .../reports/graphs/NetWorthGraph.tsx | 4 +- .../components/schedules/DiscoverSchedules.js | 4 +- .../src/components/schedules/StatusBadge.tsx | 12 +- .../transactions/MobileTransaction.js | 10 +- .../transactions/TransactionsTable.js | 4 +- .../desktop-client/src/style/themes/dark.ts | 27 +--- .../src/style/themes/development.ts | 121 ++++++++---------- .../desktop-client/src/style/themes/light.ts | 28 +--- 30 files changed, 132 insertions(+), 167 deletions(-) diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx index 587b3c2f2a0..b3183963495 100644 --- a/packages/desktop-client/src/components/Titlebar.tsx +++ b/packages/desktop-client/src/components/Titlebar.tsx @@ -171,7 +171,7 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) { : syncState === 'disabled' || syncState === 'offline' || syncState === 'local' - ? theme.altTableText + ? theme.tableTextLight : 'inherit'; const activeStyle = isMobile diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js index 8785669fcdd..6f0cb90e84b 100644 --- a/packages/desktop-client/src/components/accounts/Account.js +++ b/packages/desktop-client/src/components/accounts/Account.js @@ -71,7 +71,7 @@ function EmptyMessage({ onAdd }) { In the future, you can add accounts from the sidebar. diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js index 44799d7145f..b1e0c50ae0c 100644 --- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js +++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js @@ -48,7 +48,7 @@ function AccountList({
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx index 05641edfa81..267b657ca1a 100644 --- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx @@ -77,7 +77,7 @@ function CategoryList({ style={{ backgroundColor: highlightedIndex === idx - ? theme.alt2MenuItemBackgroundHover + ? theme.menuAutoCompleteBackgroundHover : 'transparent', borderRadius: embedded ? 4 : 0, flexShrink: 0, @@ -108,7 +108,7 @@ function CategoryList({ {showGroup && (
+ {dragState && !dragState.preview && dragState.type === 'group' && ( diff --git a/packages/desktop-client/src/components/budget/IncomeGroup.tsx b/packages/desktop-client/src/components/budget/IncomeGroup.tsx index 8ee4faa73b7..e3bd787f83e 100644 --- a/packages/desktop-client/src/components/budget/IncomeGroup.tsx +++ b/packages/desktop-client/src/components/budget/IncomeGroup.tsx @@ -38,7 +38,10 @@ function IncomeGroup({ return ( 0 ? 1 : 0, @@ -1357,7 +1357,7 @@ function IncomeGroup({ : rolloverBudget.groupSumAmount(group.id) } style={{ - backgroundColor: theme.altTableBackground, + backgroundColor: theme.tableRowHeaderBackground, }} onAddCategory={onAddCategory} onSave={onSave} diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx index e9586d5ebc4..afb8090def4 100644 --- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx +++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx @@ -148,7 +148,7 @@ function SidebarGroup({ style={{ ...style, width: 200, - backgroundColor: theme.altTableBackground, + backgroundColor: theme.tableRowHeaderBackground, '& button': { display: 'none' }, '&:hover button': { display: 'flex', color: theme.tableTextHover }, ...(dragPreview && { diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx index 9959da029f5..dde6177cc07 100644 --- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx +++ b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx @@ -332,7 +332,7 @@ export function BudgetSummary({ width={13} height={13} // The margin is to make it the exact same size as the dots button - style={{ color: theme.altTableText, margin: 1 }} + style={{ color: theme.tableTextLight, margin: 1 }} /> @@ -367,7 +367,7 @@ export function BudgetSummary({ width={15} height={15} tooltipPosition="bottom-right" - defaultColor={theme.altTableText} + defaultColor={theme.tableTextLight} /> diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx index 8d1f2c3610d..e829d030d22 100644 --- a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx +++ b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx @@ -41,30 +41,30 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() { }} > - Budgeted + Budgeted { return format(-parseFloat(value || '0'), 'financial'); }} /> - Spent + Spent - Balance + Balance @@ -75,7 +75,7 @@ export function IncomeHeaderMonth() { return ( dispatch({ type: 'close' })} data-testid="filters-menu-tooltip" diff --git a/packages/desktop-client/src/components/modals/EditField.js b/packages/desktop-client/src/components/modals/EditField.js index 1e9f09af25e..7cf99000416 100644 --- a/packages/desktop-client/src/components/modals/EditField.js +++ b/packages/desktop-client/src/components/modals/EditField.js @@ -86,7 +86,7 @@ export default function EditField({ modalProps, name, onSubmit }) { groupHeaderStyle={ isNarrowWidth ? { - color: theme.altTableText, + color: theme.tableTextLight, } : undefined } @@ -118,7 +118,7 @@ export default function EditField({ modalProps, name, onSubmit }) { groupHeaderStyle={ isNarrowWidth ? { - color: theme.altTableText, + color: theme.tableTextLight, } : undefined } @@ -155,7 +155,7 @@ export default function EditField({ modalProps, name, onSubmit }) { groupHeaderStyle={ isNarrowWidth ? { - color: theme.altTableText, + color: theme.tableTextLight, } : undefined } diff --git a/packages/desktop-client/src/components/modals/LoadBackup.js b/packages/desktop-client/src/components/modals/LoadBackup.js index 92b12199c5c..6e0f3d98e66 100644 --- a/packages/desktop-client/src/components/modals/LoadBackup.js +++ b/packages/desktop-client/src/components/modals/LoadBackup.js @@ -119,7 +119,7 @@ function LoadBackup({ )} {previousBackups.length === 0 ? ( - + No backups available ) : ( diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js index dbe0f6ba36c..10e6aad5edc 100644 --- a/packages/desktop-client/src/components/reports/Overview.js +++ b/packages/desktop-client/src/components/reports/Overview.js @@ -125,7 +125,7 @@ function NetWorthCard({ accounts }) { @@ -184,7 +184,7 @@ function CashFlowCard() { diff --git a/packages/desktop-client/src/components/reports/Tooltip.js b/packages/desktop-client/src/components/reports/Tooltip.js index 4ee6b07e744..090be01f71f 100644 --- a/packages/desktop-client/src/components/reports/Tooltip.js +++ b/packages/desktop-client/src/components/reports/Tooltip.js @@ -57,8 +57,10 @@ class Tooltip extends Component { borderRadius: 2, boxShadow: light ? 'none' : '0 1px 6px rgba(0, 0, 0, .20)', // TODO: Transparent background - backgroundColor: light ? 'transparent' : theme.alt2MenuBackground, - color: light ? 'inherit' : theme.alt2MenuItemText, + backgroundColor: light + ? 'transparent' + : theme.menuAutoCompleteBackground, + color: light ? 'inherit' : theme.menuAutoCompleteText, padding: 10, }, !light && @@ -68,7 +70,7 @@ class Tooltip extends Component { borderTop: '7px solid transparent', borderBottom: '7px solid transparent', [position === 'right' ? 'borderRight' : 'borderLeft']: - '7px solid ' + theme.alt2MenuBackground, + '7px solid ' + theme.menuAutoCompleteBackground, [position === 'right' ? 'left' : 'right']: -6, top: 'calc(50% - 7px)', // eslint-disable-next-line rulesdir/typography diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx index 5ef62d35914..724f9f325ed 100644 --- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx @@ -85,8 +85,8 @@ function NetWorthGraph({ pointerEvents: 'none', borderRadius: 2, boxShadow: '0 1px 6px rgba(0, 0, 0, .20)', - backgroundColor: theme.alt2MenuBackground, - color: theme.alt2MenuItemText, + backgroundColor: theme.menuAutoCompleteBackground, + color: theme.menuAutoCompleteText, padding: 10, }, style, diff --git a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js b/packages/desktop-client/src/components/schedules/DiscoverSchedules.js index ebc3568418a..e145776a57d 100644 --- a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js +++ b/packages/desktop-client/src/components/schedules/DiscoverSchedules.js @@ -40,9 +40,7 @@ function DiscoverSchedulesTable({ schedules, loading }) { dispatchSelected({ type: 'select', id: item.id, event: e }); }} style={{ - borderColor: selected - ? theme.alttableBorderSelected - : theme.tableBorder, + borderColor: selected ? theme.tableBorderSelected : theme.tableBorder, cursor: 'pointer', color: selected ? theme.tableRowBackgroundHighlightText diff --git a/packages/desktop-client/src/components/schedules/StatusBadge.tsx b/packages/desktop-client/src/components/schedules/StatusBadge.tsx index 16a514d0b8f..e7c91568f67 100644 --- a/packages/desktop-client/src/components/schedules/StatusBadge.tsx +++ b/packages/desktop-client/src/components/schedules/StatusBadge.tsx @@ -44,8 +44,8 @@ export function getStatusProps(status: StatusTypes) { }; case 'completed': return { - color: theme.alt2TableText, - backgroundColor: theme.altTableBackground, + color: theme.tableHeaderText, + backgroundColor: theme.tableRowHeaderBackground, Icon: FavoriteStar, }; case 'pending': @@ -56,20 +56,20 @@ export function getStatusProps(status: StatusTypes) { }; case 'scheduled': return { - color: theme.menuItemText, - backgroundColor: theme.altTableBackground, + color: theme.tableRowHeaderText, + backgroundColor: theme.tableRowHeaderBackground, Icon: CalendarIcon, }; case 'cleared': return { color: theme.noticeTextLight, - backgroundColor: theme.altTableBackground, + backgroundColor: theme.tableRowHeaderBackground, Icon: CheckCircle1, }; default: return { color: theme.buttonNormalDisabledText, - backgroundColor: theme.altTableBackground, + backgroundColor: theme.tableRowHeaderBackground, Icon: CheckCircleHollow, }; } diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js index 322678f6bae..6880a6d9e77 100644 --- a/packages/desktop-client/src/components/transactions/MobileTransaction.js +++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js @@ -144,7 +144,7 @@ export function DateHeader({ date }) { }} > {monthUtils.format(date, 'MMMM dd, yyyy')} @@ -163,7 +163,7 @@ function Status({ status }) { color = theme.warningText; break; case 'upcoming': - color = theme.alt2TableText; + color = theme.tableHeaderText; break; default: } @@ -987,7 +987,7 @@ class Transaction extends PureComponent { fontSize: 14, fontWeight: added ? '600' : '400', ...(prettyDescription === '' && { - color: theme.altTableText, + color: theme.tableTextLight, fontStyle: 'italic', }), }} @@ -1023,7 +1023,7 @@ class Transaction extends PureComponent { fontWeight: '400', color: prettyCategory ? theme.tableTextSelected - : theme.altMenuItemTextSelected, + : theme.menuItemTextSelected, fontStyle: prettyCategory ? null : 'italic', textAlign: 'left', }} @@ -1218,7 +1218,7 @@ function ListBoxSection({ section, state }) { backgroundColor: theme.mobileDateBackground, borderBottom: `1px solid ${theme.tableBorder}`, borderTop: `1px solid ${theme.tableBorder}`, - color: theme.alt2TableText, + color: theme.tableHeaderText, display: 'flex', justifyContent: 'center', paddingBottom: 4, diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js index 472fdd389d9..82fd4725d3f 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.js +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js @@ -1048,7 +1048,7 @@ const Transaction = memo(function Transaction(props) { ? theme.warningText : selected ? theme.formLabelText - : theme.altTableText, + : theme.tableTextLight, backgroundColor: notes === 'missed' ? theme.errorBackground @@ -1056,7 +1056,7 @@ const Transaction = memo(function Transaction(props) { ? theme.warningBackground : selected ? theme.formLabelBackground - : theme.alt2TableBackground, + : theme.pageBackground, margin: '0 5px', padding: '3px 7px', borderRadius: 4, diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts index 7e8cc8b2649..68e475657ab 100644 --- a/packages/desktop-client/src/style/themes/dark.ts +++ b/packages/desktop-client/src/style/themes/dark.ts @@ -20,23 +20,19 @@ export const cardBorder = colorPalette.purple400; export const cardShadow = colorPalette.navy700; export const tableBackground = colorPalette.navy800; -export const altTableBackground = colorPalette.navy700; -export const alt2TableBackground = tableBackground; export const tableRowBackgroundHover = colorPalette.navy700; export const tableText = colorPalette.navy150; -export const altTableText = tableText; -export const alt2TableText = tableText; +export const tableTextLight = tableText; +export const tableTextSubdued = colorPalette.navy150; export const tableTextSelected = colorPalette.navy150; export const tableTextHover = colorPalette.navy400; export const tableTextEditing = colorPalette.black; -export const altTableTextEditing = tableTextEditing; export const tableTextEditingBackground = colorPalette.purple400; export const tableTextInactive = colorPalette.navy500; export const tableHeaderText = colorPalette.navy300; export const tableHeaderBackground = colorPalette.navy700; export const tableBorder = colorPalette.navy600; export const tableBorderSelected = colorPalette.purple400; -export const alttableBorderSelected = tableBorderSelected; export const tableBorderHover = colorPalette.purple300; export const tableBorderSeparator = colorPalette.navy400; export const tableRowBackgroundHighlight = colorPalette.purple800; @@ -62,26 +58,15 @@ export const menuItemBackground = colorPalette.navy600; export const menuItemBackgroundHover = colorPalette.navy500; export const menuItemText = colorPalette.navy100; export const menuItemTextHover = colorPalette.navy50; -export const menuItemTextSelected = colorPalette.navy200; -export const menuItemTextHeader = colorPalette.purple300; +export const menuItemTextSelected = colorPalette.purple400; +export const menuItemTextHeader = colorPalette.purple500; export const menuBorder = colorPalette.navy800; export const menuBorderHover = colorPalette.purple400; export const menuKeybindingText = colorPalette.navy500; -export const altMenuBackground = colorPalette.navy700; -export const alt2MenuBackground = altMenuBackground; -export const altMenuItemBackground = colorPalette.navy700; -export const altMenuItemBackgroundHover = colorPalette.navy600; -export const alt2MenuItemBackgroundHover = colorPalette.navy300; -export const altMenuItemText = colorPalette.navy150; -export const alt2MenuItemText = altMenuItemText; -export const altMenuItemTextHover = colorPalette.navy150; -export const altMenuItemTextSelected = colorPalette.purple400; -export const altMenuItemTextHeader = colorPalette.purple500; -export const alt2MenuItemTextHeader = altMenuItemTextHeader; -export const altMenuBorder = colorPalette.navy200; -export const altMenuBorderHover = colorPalette.purple400; export const menuAutoCompleteBackground = colorPalette.navy400; +export const menuAutoCompleteBackgroundHover = colorPalette.navy300; export const menuAutoCompleteText = colorPalette.navy900; +export const menuAutoCompleteTextHeader = menuItemTextHeader; export const modalBackground = colorPalette.gray800; export const modalBorder = colorPalette.navy600; diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts index 7d84e5ee7d0..463f7abf060 100644 --- a/packages/desktop-client/src/style/themes/development.ts +++ b/packages/desktop-client/src/style/themes/development.ts @@ -1,16 +1,17 @@ import * as colorPalette from '../palette'; -export const pageBackground = colorPalette.blue600; -export const pageBackgroundModalActive = colorPalette.blue700; -export const pageBackgroundTopLeft = colorPalette.green300; -export const pageBackgroundBottomRight = colorPalette.red600; -export const pageBackgroundLineTop = colorPalette.navy50; -export const pageBackgroundLineMid = colorPalette.green500; -export const pageBackgroundLineBottom = colorPalette.orange200; -export const pageText = colorPalette.blue300; +export const pageBackground = colorPalette.navy100; +export const pageBackgroundModalActive = colorPalette.navy200; +export const pageBackgroundTopLeft = colorPalette.navy100; +export const pageBackgroundBottomRight = colorPalette.blue150; +export const pageBackgroundLineTop = colorPalette.white; +export const pageBackgroundLineMid = colorPalette.navy100; +export const pageBackgroundLineBottom = colorPalette.blue150; +export const pageText = '#272630'; export const pageTextLight = colorPalette.navy500; -export const pageTextSubdued = colorPalette.blue500; -export const pageTextPositive = colorPalette.blue50; +export const pageTextSubdued = colorPalette.navy300; +export const pageTextDark = colorPalette.navy800; +export const pageTextPositive = colorPalette.purple600; export const pageTextLink = colorPalette.blue600; export const pageTextLinkLight = colorPalette.blue300; @@ -18,66 +19,54 @@ export const cardBackground = colorPalette.purple700; export const cardBorder = colorPalette.purple400; export const cardShadow = colorPalette.purple100; -export const tableBackground = colorPalette.red900; -export const altTableBackground = tableBackground; -export const alt2TableBackground = tableBackground; -export const tableRowBackgroundHover = colorPalette.red800; -export const tableText = colorPalette.red200; -export const altTableText = colorPalette.navy400; -export const alt2TableText = altTableText; -export const tableTextSelected = colorPalette.red150; -export const tableTextHover = colorPalette.red400; -export const tableTextEditing = colorPalette.black; -export const altTableTextEditing = tableTextEditing; -export const tableTextEditingBackground = colorPalette.red200; -export const tableTextInactive = colorPalette.red500; -export const tableHeaderText = colorPalette.red700; -export const tableHeaderBackground = colorPalette.red300; -export const tableBorder = colorPalette.red200; -export const tableBorderSelected = colorPalette.purple400; -export const tableBorderHover = colorPalette.purple300; +export const tableBackground = colorPalette.white; +export const tableRowBackgroundHover = colorPalette.navy50; +export const tableText = pageText; +export const tableTextLight = colorPalette.navy400; +export const tableTextSubdued = colorPalette.navy100; +export const tableTextSelected = colorPalette.navy700; +export const tableTextHover = colorPalette.navy900; +export const tableTextEditing = colorPalette.navy50; +export const tableTextEditingBackground = colorPalette.blue500; +export const tableTextInactive = colorPalette.navy500; +export const tableHeaderText = colorPalette.navy600; +export const tableHeaderBackground = colorPalette.white; +export const tableBorder = colorPalette.navy100; +export const tableBorderSelected = colorPalette.purple500; +export const tableBorderHover = colorPalette.purple400; export const tableBorderSeparator = colorPalette.navy400; -export const tableRowBackgroundHighlight = colorPalette.red700; -export const tableRowBackgroundHighlightText = colorPalette.red200; -export const tableRowHeaderBackground = colorPalette.red100; -export const tableRowHeaderText = colorPalette.red700; - -export const sidebarBackground = colorPalette.orange800; -export const sidebarItemBackground = colorPalette.orange700; -export const sidebarItemBackgroundSelected = colorPalette.orange900; -export const sidebarItemBackgroundHover = colorPalette.orange500; -export const sidebarItemAccent = colorPalette.orange200; -export const sidebarItemAccentSelected = colorPalette.orange400; -export const sidebarItemAccentHover = colorPalette.orange200; -export const sidebarItemText = colorPalette.orange200; -export const sidebarItemTextSelected = colorPalette.orange400; -export const sidebarItemTextHover = colorPalette.orange150; - -export const menuBackground = colorPalette.green800; -export const menuItemBackground = colorPalette.green700; -export const menuItemBackgroundHover = colorPalette.green500; -export const menuItemText = colorPalette.green200; -export const menuItemTextHover = colorPalette.green50; -export const menuItemTextSelected = colorPalette.green500; -export const menuItemTextHeader = colorPalette.green300; -export const menuBorder = colorPalette.green500; -export const menuBorderHover = colorPalette.green900; +export const tableRowBackgroundHighlight = colorPalette.blue150; +export const tableRowBackgroundHighlightText = colorPalette.navy700; +export const tableRowHeaderBackground = colorPalette.navy50; +export const tableRowHeaderText = colorPalette.navy800; + +export const sidebarBackground = colorPalette.navy900; +export const sidebarItemBackground = colorPalette.blue800; +export const sidebarItemBackgroundPositive = colorPalette.green500; +export const sidebarItemBackgroundFailed = colorPalette.red300; +export const sidebarItemBackgroundSelected = colorPalette.purple200; +export const sidebarItemBackgroundHover = colorPalette.navy800; +export const sidebarItemAccent = colorPalette.blue800; +export const sidebarItemAccentSelected = colorPalette.purple200; +export const sidebarItemAccentHover = colorPalette.blue700; +export const sidebarItemText = colorPalette.navy150; +export const sidebarItemTextSelected = colorPalette.purple200; +export const sidebarItemTextHover = colorPalette.navy50; + +export const menuBackground = colorPalette.white; +export const menuItemBackground = colorPalette.navy50; +export const menuItemBackgroundHover = colorPalette.navy100; +export const menuItemText = colorPalette.navy900; +export const menuItemTextHover = menuItemText; +export const menuItemTextSelected = colorPalette.purple300; +export const menuItemTextHeader = colorPalette.navy400; +export const menuBorder = colorPalette.navy100; +export const menuBorderHover = colorPalette.purple100; export const menuKeybindingText = colorPalette.navy400; -export const altMenuBackground = colorPalette.navy700; -export const alt2MenuBackground = altMenuBackground; -export const altMenuItemBackground = colorPalette.navy700; -export const altMenuItemBackgroundHover = colorPalette.navy600; -export const alt2MenuItemBackgroundHover = colorPalette.navy600; -export const altMenuItemText = colorPalette.navy150; -export const alt2MenuItemText = altMenuItemText; -export const altMenuItemTextHover = colorPalette.navy150; -export const altMenuItemTextSelected = colorPalette.navy150; -export const altMenuItemTextHeader = colorPalette.purple500; -export const alt2MenuItemTextHeader = colorPalette.orange150; -export const altMenuBorder = colorPalette.navy200; -export const altMenuBorderHover = colorPalette.purple400; export const menuAutoCompleteBackground = colorPalette.navy900; +export const menuAutoCompleteBackgroundHover = colorPalette.navy600; export const menuAutoCompleteText = colorPalette.white; +export const menuAutoCompleteTextHeader = colorPalette.orange150; export const modalBackground = colorPalette.navy900; export const modalBorder = colorPalette.navy200; diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts index 26b4a1825db..e4392062e66 100644 --- a/packages/desktop-client/src/style/themes/light.ts +++ b/packages/desktop-client/src/style/themes/light.ts @@ -20,29 +20,26 @@ export const cardBorder = colorPalette.purple700; export const cardShadow = colorPalette.navy700; export const tableBackground = colorPalette.white; -export const altTableBackground = colorPalette.navy50; -export const alt2TableBackground = colorPalette.navy100; export const tableRowBackgroundHover = colorPalette.navy50; export const tableText = pageText; -export const altTableText = colorPalette.navy400; -export const alt2TableText = colorPalette.navy600; +export const tableTextLight = colorPalette.navy400; +export const tableTextSubdued = colorPalette.navy100; export const tableTextSelected = colorPalette.navy700; export const tableTextHover = colorPalette.navy900; export const tableTextEditing = colorPalette.navy50; -export const altTableTextEditing = colorPalette.purple50; export const tableTextEditingBackground = colorPalette.blue500; export const tableTextInactive = colorPalette.navy500; export const tableHeaderText = colorPalette.navy600; export const tableHeaderBackground = colorPalette.white; export const tableBorder = colorPalette.navy100; export const tableBorderSelected = colorPalette.purple500; -export const alttableBorderSelected = colorPalette.blue200; export const tableBorderHover = colorPalette.purple400; export const tableBorderSeparator = colorPalette.navy400; export const tableRowBackgroundHighlight = colorPalette.blue150; export const tableRowBackgroundHighlightText = colorPalette.navy700; export const tableRowHeaderBackground = colorPalette.navy50; export const tableRowHeaderText = colorPalette.navy800; + export const sidebarBackground = colorPalette.navy900; export const sidebarItemBackground = colorPalette.blue800; export const sidebarItemBackgroundPositive = colorPalette.green500; @@ -61,26 +58,15 @@ export const menuItemBackground = colorPalette.navy50; export const menuItemBackgroundHover = colorPalette.navy100; export const menuItemText = colorPalette.navy900; export const menuItemTextHover = menuItemText; -export const menuItemTextSelected = menuItemText; -export const menuItemTextHeader = colorPalette.purple600; +export const menuItemTextSelected = colorPalette.purple300; +export const menuItemTextHeader = colorPalette.navy400; export const menuBorder = colorPalette.navy100; export const menuBorderHover = colorPalette.purple100; export const menuKeybindingText = colorPalette.navy400; -export const altMenuBackground = colorPalette.blue800; -export const alt2MenuBackground = colorPalette.navy900; -export const altMenuItemBackground = colorPalette.blue800; -export const altMenuItemBackgroundHover = colorPalette.blue700; -export const alt2MenuItemBackgroundHover = colorPalette.navy600; -export const altMenuItemText = colorPalette.navy100; -export const alt2MenuItemText = colorPalette.white; -export const altMenuItemTextHover = colorPalette.navy50; -export const altMenuItemTextSelected = colorPalette.purple300; -export const altMenuItemTextHeader = colorPalette.navy400; -export const alt2MenuItemTextHeader = colorPalette.orange150; -export const altMenuBorder = colorPalette.blue700; -export const altMenuBorderHover = colorPalette.purple300; export const menuAutoCompleteBackground = colorPalette.navy900; +export const menuAutoCompleteBackgroundHover = colorPalette.navy600; export const menuAutoCompleteText = colorPalette.white; +export const menuAutoCompleteTextHeader = colorPalette.orange150; export const modalBackground = colorPalette.white; export const modalBorder = colorPalette.white; From f934472609d1e959fdccd09f6572a02130d24667 Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 7 Nov 2023 14:14:08 +0000 Subject: [PATCH 2/4] color change --- packages/desktop-client/src/components/filters/FiltersMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.js b/packages/desktop-client/src/components/filters/FiltersMenu.js index c6216f8ccdf..62502302961 100644 --- a/packages/desktop-client/src/components/filters/FiltersMenu.js +++ b/packages/desktop-client/src/components/filters/FiltersMenu.js @@ -174,7 +174,7 @@ function ConfigureField({ return ( dispatch({ type: 'close' })} data-testid="filters-menu-tooltip" From b30b615662a040a4230bd9e527ffb672e10f1165 Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 7 Nov 2023 14:31:02 +0000 Subject: [PATCH 3/4] notes --- upcoming-release-notes/1871.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 upcoming-release-notes/1871.md diff --git a/upcoming-release-notes/1871.md b/upcoming-release-notes/1871.md new file mode 100644 index 00000000000..d6c13cbb3cd --- /dev/null +++ b/upcoming-release-notes/1871.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [carkom] +--- + +Consolidating colors so they are more consistent across the app from one page to the next. \ No newline at end of file From c0c1625108cfdf3f2e4cb2f676cdf771117cb6b9 Mon Sep 17 00:00:00 2001 From: carkom Date: Tue, 7 Nov 2023 16:19:13 +0000 Subject: [PATCH 4/4] fix preview background --- .../src/components/transactions/TransactionsTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js index 82fd4725d3f..ee49899adc8 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.js +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js @@ -843,7 +843,7 @@ const Transaction = memo(function Transaction(props) { ...style, ...(isPreview && { color: theme.tableTextInactive, - backgroundColor: !selected ? '#fcfcfc' : undefined, + backgroundColor: !selected ? theme.tableBackground : undefined, fontStyle: 'italic', }), ...(_unmatched && { opacity: 0.5 }),