color fixes

actualbudget · Sep 13, 2023 · ab388ad · ab388ad
1 parent 40ab0f2
commit ab388ad
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git 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) {
     <PieProgress
       progress={frac}
       color={over ? theme.errorText : theme.noticeText}
-      backgroundColor={over ? theme.errorBackground : theme.noticeBackground}
+      backgroundColor={over ? theme.errorBackground : theme.pageBackground}
       style={{ width: 20, height: 20 }}
     />
   );
@@ -133,7 +133,7 @@ function ExpenseProgress({ current, target }: ExpenseProgressProps) {
     <PieProgress
       progress={frac}
       color={over ? theme.errorText : theme.noticeText}
-      backgroundColor={over ? theme.errorBackground : theme.noticeBackground}
+      backgroundColor={over ? theme.errorBackground : theme.pageBackground}
       style={{ width: 20, height: 20 }}
     />
   );
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;