Add back-to-list-button #10

2 files changed, 18 insertions, 0 deletions

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 3bdb252f..cdac0f0e 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -29,6 +29,13 @@ const useStyles = makeStyles((theme) => ({
     height: '42px',
     marginRight: theme.spacing(2),
   },
+  greenButton: {
+    backgroundColor: '#2ea44fd9',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#2ea44f',
+    },
+  },
 }));
 
 function Header() {
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index 0b97e133..6ec9bf2a 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -28,6 +28,7 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   },
   actions: {
     display: 'flex',
+    gap: '1em',
     justifyContent: 'flex-end',
   },
   greenButton: {
@@ -38,6 +39,13 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
       backgroundColor: '#2ea44f',
     },
   },
+  backButton: {
+    backgroundColor: '#574142',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#610B0B',
+    },
+  },
 }));
 
 type Props = {
@@ -101,6 +109,9 @@ function CommentForm({ bug }: Props) {
           onChange={(comment: string) => setIssueComment(comment)}
         />
         <div className={classes.actions}>
+          <Button className={classes.backButton} variant="contained" href="/">
+            Back to List
+          </Button>
           {bug.status === 'OPEN' ? getCloseButton() : getReopenButton()}
           <Button
             className={classes.greenButton}