From 16b176f9bf40a5fd6fb832f8858ec389826752a5 Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Sun, 28 Feb 2021 20:54:17 +0100
Subject: [PATCH] Make backbutton sticky #10

---
 webui/src/pages/bug/Bug.tsx               | 22 +++++++++++++++++++++-
 webui/src/pages/bug/CommentForm.tsx       | 10 ----------
 webui/src/pages/notfound/NotFoundPage.tsx |  3 +--
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index d85c52966139658fe79ef1d1d9ac7fcdc6a06401..b8c3e8aae62c05b260bce40a4472300cf30a71ce 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
+import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm';
 import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
@@ -18,7 +20,6 @@ const useStyles = makeStyles((theme) => ({
     maxWidth: 1000,
     margin: 'auto',
     marginTop: theme.spacing(4),
-    overflow: 'hidden',
   },
   header: {
     marginLeft: theme.spacing(3) + 40,
@@ -61,6 +62,16 @@ const useStyles = makeStyles((theme) => ({
   commentForm: {
     marginLeft: 48,
   },
+  backButton: {
+    position: 'sticky',
+    marginTop: theme.spacing(1),
+    top: '80px',
+    backgroundColor: '#574142',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#610B0B',
+    },
+  },
 }));
 
 type Props = {
@@ -99,6 +110,15 @@ function Bug({ bug }: Props) {
               </li>
             ))}
           </ul>
+          <Button
+            variant="contained"
+            className={classes.backButton}
+            aria-label="back"
+            href="/"
+          >
+            <ArrowBackIcon />
+            Back to List
+          </Button>
         </div>
       </div>
     </main>
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index 6ec9bf2a10cf6095b0dc19f2f6a92d5a5f12be12..e53c7ddd0b163e216f1e1078cd39bf355a4ce863 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -39,13 +39,6 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
       backgroundColor: '#2ea44f',
     },
   },
-  backButton: {
-    backgroundColor: '#574142',
-    color: '#fff',
-    '&:hover': {
-      backgroundColor: '#610B0B',
-    },
-  },
 }));
 
 type Props = {
@@ -109,9 +102,6 @@ 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}
diff --git a/webui/src/pages/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx
index 2aba9ceffc5e0538f1fa6d69a779dd04138c67dd..57b186c59255389564192263353e6c7a0c9d7139 100644
--- a/webui/src/pages/notfound/NotFoundPage.tsx
+++ b/webui/src/pages/notfound/NotFoundPage.tsx
@@ -1,4 +1,3 @@
-import wrap from '@arrows/composition/internal/wrap';
 import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
@@ -40,7 +39,7 @@ function NotFoundPage() {
       <img
         src="/logo-alpha-flat-outline.svg"
         className={classes.logo}
-        alt="git-bug"
+        alt="git-bug Logo"
       />
       <a href="/" className={classes.backLink}>
         <h2 className={classes.header}>Go back to start page</h2>