diff --git a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx index 312a764c573..ebf6d1c782c 100644 --- a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx +++ b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx @@ -100,7 +100,7 @@ function IncomeProgress({ current, target }: IncomeProgressProps) { ); @@ -133,7 +133,7 @@ function ExpenseProgress({ current, target }: ExpenseProgressProps) { ); @@ -280,10 +280,10 @@ function Saved({ projected, style }: SavedProps) { { fontSize: 25, color: projected - ? theme.warningText + ? theme.alt2WarningText : isNegative - ? theme.errorText - : theme.pageTextPositive, + ? theme.alt2ErrorText + : theme.altUpcomingText, }, ])}`} > diff --git a/packages/desktop-client/src/components/settings/UI.tsx b/packages/desktop-client/src/components/settings/UI.tsx index 528935cc2b9..1a402de8f82 100644 --- a/packages/desktop-client/src/components/settings/UI.tsx +++ b/packages/desktop-client/src/components/settings/UI.tsx @@ -24,7 +24,7 @@ export const Setting = ({ primaryAction, style, children }: SettingProps) => { alignItems: 'flex-start', padding: 15, borderRadius: 4, - border: '1px solid ' + theme.pillBorder, + border: '1px solid ' + theme.altPillBorder, width: '100%', }, style, diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts index 7d16ac9e374..9da893a4f10 100644 --- a/packages/desktop-client/src/style/themes/dark.ts +++ b/packages/desktop-client/src/style/themes/dark.ts @@ -158,15 +158,19 @@ export const warningBackground = colorPalette.orange800; export const altWarningBackground = warningBackground; export const warningText = colorPalette.orange200; export const altWarningText = warningText; +export const alt2WarningText = warningText; export const warningAccent = colorPalette.orange500; export const errorBackground = colorPalette.red800; export const altErrorBackground = errorBackground; export const errorText = colorPalette.red200; export const altErrorText = errorText; +export const alt2ErrorText = errorText; export const errorAccent = colorPalette.red500; export const upcomingBackground = tableBackground; export const upcomingText = tableTextInactive; +export const altUpcomingText = upcomingText; export const upcomingAccent = tableBorder; + export const formLabelText = colorPalette.purple150; export const altFormLabelText = formLabelText; export const formInputBackground = colorPalette.navy800; @@ -189,6 +193,7 @@ export const pillBackground = colorPalette.navy600; export const pillText = colorPalette.navy200; export const pillTextHighlighted = colorPalette.purple500; export const pillBorder = colorPalette.navy700; +export const altPillBorder = pillBorder; export const pillBackgroundSelected = colorPalette.purple600; export const pillTextSelected = colorPalette.navy150; export const pillBorderSelected = colorPalette.purple400; diff --git a/packages/desktop-client/src/style/themes/development.ts b/packages/desktop-client/src/style/themes/development.ts index 3322f9bfab5..9db0ea23902 100644 --- a/packages/desktop-client/src/style/themes/development.ts +++ b/packages/desktop-client/src/style/themes/development.ts @@ -148,12 +148,18 @@ export const warningBackground = colorPalette.orange800; export const altWarningBackground = warningBackground; export const warningText = colorPalette.orange200; export const altWarningText = warningText; +export const alt2WarningText = warningText; export const warningAccent = colorPalette.orange500; export const errorBackground = colorPalette.red800; export const altErrorBackground = errorBackground; export const errorText = colorPalette.red200; export const altErrorText = errorText; +export const alt2ErrorText = errorText; export const errorAccent = colorPalette.red500; +export const upcomingBackground = colorPalette.purple100; +export const upcomingText = colorPalette.purple900; +export const altUpcomingText = colorPalette.purple500; +export const upcomingAccent = colorPalette.purple100; export const formLabelText = colorPalette.purple200; export const altFormLabelText = formLabelText; @@ -177,6 +183,7 @@ export const pillBackground = colorPalette.green800; export const pillText = colorPalette.green600; export const pillTextHighlighted = colorPalette.purple600; export const pillBorder = colorPalette.green200; +export const altPillBorder = pillBorder; export const pillBackgroundSelected = colorPalette.green100; export const pillTextSelected = colorPalette.green700; export const pillBorderSelected = colorPalette.green900; diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts index c236164b4e7..56f73743b40 100644 --- a/packages/desktop-client/src/style/themes/light.ts +++ b/packages/desktop-client/src/style/themes/light.ts @@ -19,7 +19,7 @@ export const modalBackground = colorPalette.white; export const modalBorder = colorPalette.white; export const cardBackground = colorPalette.white; -export const cardBorder = colorPalette.purple500; +export const cardBorder = colorPalette.purple700; export const cardShadow = colorPalette.navy700; export const tableBackground = colorPalette.white; @@ -158,15 +158,19 @@ export const warningBackground = colorPalette.orange200; export const altWarningBackground = colorPalette.orange150; export const warningText = colorPalette.orange800; export const altWarningText = colorPalette.orange900; +export const alt2WarningText = colorPalette.orange700; export const warningAccent = colorPalette.orange400; export const errorBackground = colorPalette.red50; export const altErrorBackground = colorPalette.red100; export const errorText = colorPalette.red500; export const altErrorText = colorPalette.red900; +export const alt2ErrorText = colorPalette.red600; export const errorAccent = colorPalette.red200; export const upcomingBackground = colorPalette.purple100; export const upcomingText = colorPalette.purple900; +export const altUpcomingText = colorPalette.purple500; export const upcomingAccent = colorPalette.purple100; + export const formLabelText = colorPalette.blue500; export const altFormLabelText = colorPalette.blue700; export const formInputBackground = colorPalette.navy50; @@ -189,6 +193,7 @@ export const pillBackground = colorPalette.navy150; export const pillText = colorPalette.navy800; export const pillTextHighlighted = colorPalette.purple600; export const pillBorder = colorPalette.navy150; +export const altPillBorder = colorPalette.navy200; export const pillBackgroundSelected = colorPalette.blue150; export const pillTextSelected = colorPalette.blue900; export const pillBorderSelected = colorPalette.purple500;