Add success/warning/error colors to the theme

Author: canac

src/components/Announcements/AnnouncementAction/AnnouncementAction.test.tsx

@@ -120,7 +120,7 @@ describe('AnnouncementAction', () => {
 
         const button = getByText('Contacts');
         expect(button).toHaveStyle({
-          'background-color': '#ED6C02',
+          'background-color': '#D34400',
           color: '#FFFFFF',
         });
       });
@@ -131,7 +131,7 @@ describe('AnnouncementAction', () => {
 
         const button = getByText('Contacts');
         expect(button).toHaveStyle({
-          'background-color': '#ED6C02',
+          'background-color': '#D34400',
           color: '#FFFFFF',
         });
       });

src/components/Contacts/ContactDetails/ContactTasksTab/ContactTaskRow/TaskDate/TaskDate.test.tsx

@@ -17,13 +17,7 @@ describe('TaskCommentsButton', () => {
       </ThemeProvider>,
     );
 
-    const dateText = getByText('Oct 12, 21');
-
-    expect(dateText).toBeInTheDocument();
-
-    const style = dateText && window.getComputedStyle(dateText);
-
-    expect(style?.color).toMatchInlineSnapshot(`"rgb(56, 63, 67)"`);
+    expect(getByText('Oct 12, 21')).toHaveStyle('color: #383F43');
   });
 
   it('should render complete', () => {
@@ -33,13 +27,7 @@ describe('TaskCommentsButton', () => {
       </ThemeProvider>,
     );
 
-    const dateText = getByText('Oct 12, 21');
-
-    expect(dateText).toBeInTheDocument();
-
-    const style = dateText && window.getComputedStyle(dateText);
-
-    expect(style?.color).toMatchInlineSnapshot(`"rgb(156, 159, 161)"`);
+    expect(getByText('Oct 12, 21')).toHaveStyle('color: #9C9FA1');
   });
 
   it('should render late', () => {
@@ -49,13 +37,7 @@ describe('TaskCommentsButton', () => {
       </ThemeProvider>,
     );
 
-    const dateText = getByText('Oct 12, 19');
-
-    expect(dateText).toBeInTheDocument();
-
-    const style = dateText && window.getComputedStyle(dateText);
-
-    expect(style?.color).toMatchInlineSnapshot(`"rgb(211, 47, 47)"`);
+    expect(getByText('Oct 12, 19')).toHaveStyle('color: #991313');
   });
 
   it('should not render year', () => {
@@ -65,7 +47,6 @@ describe('TaskCommentsButton', () => {
       </ThemeProvider>,
     );
 
-    const dateText = getByText('Oct 12');
-    expect(dateText).toBeInTheDocument();
+    expect(getByText('Oct 12')).toBeInTheDocument();
   });
 });

src/components/Dashboard/MonthlyGoal/MonthlyGoal.tsx

@@ -255,7 +255,7 @@ const MonthlyGoal = ({
                             component={NextLink}
                             href={`/accountLists/${accountListId}/settings/preferences?selectedTab=${PreferenceAccordion.MonthlyGoal}`}
                             variant="outlined"
-                            color="statusWarning"
+                            color="warning"
                             sx={(theme) => ({
                               marginTop: theme.spacing(1),
                               textAlign: 'center',

src/theme.ts

@@ -136,6 +136,15 @@ const theme = createTheme({
     progressBarGray: {
       main: progressBarColors.gray,
     },
+    success: {
+      main: statusColors.success,
+    },
+    warning: {
+      main: statusColors.warning,
+    },
+    error: {
+      main: statusColors.danger,
+    },
     statusSuccess: {
       main: statusColors.success,
     },