Use success.dark for green-button:hover

Sascha created 4 years ago

Change summary

webui/src/components/BugTitleForm/BugTitleForm.tsx | 4 ++++
webui/src/pages/bug/CommentForm.tsx                | 7 ++++---
webui/src/pages/list/ListQuery.tsx                 | 4 ++++
webui/src/pages/new/NewBugPage.tsx                 | 4 ++++
4 files changed, 16 insertions(+), 3 deletions(-)

Detailed changes

webui/src/components/BugTitleForm/BugTitleForm.tsx

@@ -43,6 +43,10 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(1),
     backgroundColor: theme.palette.success.main,
     color: theme.palette.success.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.success.dark,
+      color: theme.palette.primary.contrastText,
+    },
   },
   saveButton: {
     marginRight: theme.spacing(1),

webui/src/pages/bug/CommentForm.tsx

@@ -32,10 +32,11 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   },
   greenButton: {
     marginLeft: '8px',
-    backgroundColor: '#2ea44fd9',
-    color: '#fff',
+    backgroundColor: theme.palette.success.main,
+    color: theme.palette.success.contrastText,
     '&:hover': {
-      backgroundColor: '#2ea44f',
+      backgroundColor: theme.palette.success.dark,
+      color: theme.palette.primary.contrastText,
     },
   },
 }));

webui/src/pages/list/ListQuery.tsx

@@ -115,6 +115,10 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
   greenButton: {
     backgroundColor: theme.palette.success.main,
     color: theme.palette.success.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.success.dark,
+      color: theme.palette.primary.contrastText,
+    },
   },
 }));
 

webui/src/pages/new/NewBugPage.tsx

@@ -32,6 +32,10 @@ const useStyles = makeStyles((theme: Theme) => ({
   greenButton: {
     backgroundColor: theme.palette.success.main,
     color: theme.palette.success.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.success.dark,
+      color: theme.palette.primary.contrastText,
+    },
   },
 }));