Make backbutton sticky #10

Lena created 4 years ago

Change summary

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(-)

Detailed changes

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>

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}

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>