From c223c75c11f3ec903413207dd275152e1ec97fcc Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Sun, 28 Feb 2021 00:18:03 +0100
Subject: Add back-to-list-button #10

---
 webui/src/components/Header/Header.tsx |  7 +++++++
 webui/src/pages/bug/CommentForm.tsx    | 11 +++++++++++
 2 files changed, 18 insertions(+)

(limited to 'webui/src')

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}
-- 
cgit 


From cdf655f869bd0993b52f4268f058571740b1cf4d Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Sun, 28 Feb 2021 02:58:53 +0100
Subject: Add 404 page #10

---
 webui/src/App.tsx                         |  2 ++
 webui/src/components/Header/Header.tsx    |  7 ------
 webui/src/pages/notfound/NotFoundPage.tsx | 37 +++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 webui/src/pages/notfound/NotFoundPage.tsx

(limited to 'webui/src')

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index b9ade974..4c81913c 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -5,6 +5,7 @@ import Layout from './components/Header';
 import BugPage from './pages/bug';
 import ListPage from './pages/list';
 import NewBugPage from './pages/new/NewBugPage';
+import NotFoundPage from './pages/notfound/NotFoundPage';
 
 export default function App() {
   return (
@@ -13,6 +14,7 @@ export default function App() {
         <Route path="/" exact component={ListPage} />
         <Route path="/new" exact component={NewBugPage} />
         <Route path="/bug/:id" exact component={BugPage} />
+        <Route component={NotFoundPage} />
       </Switch>
     </Layout>
   );
diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index cdac0f0e..3bdb252f 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -29,13 +29,6 @@ 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/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx
new file mode 100644
index 00000000..ae84ac3e
--- /dev/null
+++ b/webui/src/pages/notfound/NotFoundPage.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  main: {
+    maxWidth: 1000,
+    margin: 'auto',
+    marginTop: theme.spacing(20),
+  },
+  logo: {
+    height: '350px',
+  },
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+}));
+
+function NotFoundPage() {
+  const classes = useStyles();
+  return (
+    <main className={classes.main}>
+      <div className={classes.container}>
+        <h1>404 – Page not found</h1>
+        <img
+          src="/logo-alpha-flat-outline.svg"
+          className={classes.logo}
+          alt="git-bug"
+        />
+        <h1>Go back to start page</h1>
+      </div>
+    </main>
+  );
+}
+
+export default NotFoundPage;
-- 
cgit 


From 4dcc6f67b37bf756c7afb7e40f700a838906113b Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Sun, 28 Feb 2021 04:15:21 +0100
Subject: Add backlink to 404 page #10

---
 webui/src/pages/notfound/NotFoundPage.tsx | 42 +++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 13 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/pages/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx
index ae84ac3e..2aba9cef 100644
--- a/webui/src/pages/notfound/NotFoundPage.tsx
+++ b/webui/src/pages/notfound/NotFoundPage.tsx
@@ -1,19 +1,34 @@
+import wrap from '@arrows/composition/internal/wrap';
 import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
 const useStyles = makeStyles((theme) => ({
   main: {
     maxWidth: 1000,
     margin: 'auto',
-    marginTop: theme.spacing(20),
+    marginTop: theme.spacing(10),
   },
   logo: {
     height: '350px',
+    display: 'block',
+    marginLeft: 'auto',
+    marginRight: 'auto',
   },
-  container: {
-    display: 'flex',
-    alignItems: 'center',
+  icon: {
+    display: 'block',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    fontSize: '80px',
+  },
+  backLink: {
+    textDecoration: 'none',
+    color: theme.palette.text.primary,
+  },
+  header: {
+    fontSize: '30px',
+    textAlign: 'center',
   },
 }));
 
@@ -21,15 +36,16 @@ function NotFoundPage() {
   const classes = useStyles();
   return (
     <main className={classes.main}>
-      <div className={classes.container}>
-        <h1>404 – Page not found</h1>
-        <img
-          src="/logo-alpha-flat-outline.svg"
-          className={classes.logo}
-          alt="git-bug"
-        />
-        <h1>Go back to start page</h1>
-      </div>
+      <h1 className={classes.header}>404 – Page not found</h1>
+      <img
+        src="/logo-alpha-flat-outline.svg"
+        className={classes.logo}
+        alt="git-bug"
+      />
+      <a href="/" className={classes.backLink}>
+        <h2 className={classes.header}>Go back to start page</h2>
+        <ArrowBackIcon className={classes.icon} />
+      </a>
     </main>
   );
 }
-- 
cgit 


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

(limited to 'webui/src')

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index d85c5296..b8c3e8aa 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 6ec9bf2a..e53c7ddd 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 2aba9cef..57b186c5 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>
-- 
cgit 


From ec8a9b20696da25bf1781dd190e7ec6a8fbf5687 Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Mon, 1 Mar 2021 21:12:53 +0100
Subject: Backbutton to left with patch from GlancingMind, Adjusting and 404
 for missing bug pages #10

---
 webui/src/App.tsx                |  1 +
 webui/src/pages/bug/Bug.tsx      | 45 +++++++++++++++++++++++++---------------
 webui/src/pages/bug/BugQuery.tsx |  4 ++--
 3 files changed, 31 insertions(+), 19 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index 4c81913c..e0580b1d 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -13,6 +13,7 @@ export default function App() {
       <Switch>
         <Route path="/" exact component={ListPage} />
         <Route path="/new" exact component={NewBugPage} />
+        <Route path="/404bug" exact component={NotFoundPage} />
         <Route path="/bug/:id" exact component={BugPage} />
         <Route component={NotFoundPage} />
       </Switch>
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index b8c3e8aa..8b537fb8 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -17,13 +17,20 @@ import TimelineQuery from './TimelineQuery';
  */
 const useStyles = makeStyles((theme) => ({
   main: {
-    maxWidth: 1000,
+    maxWidth: 1200,
     margin: 'auto',
     marginTop: theme.spacing(4),
   },
   header: {
-    marginLeft: theme.spacing(3) + 40,
     marginRight: theme.spacing(2),
+    marginLeft: theme.spacing(3) + 205,
+  },
+  title: {
+    ...theme.typography.h5,
+  },
+  id: {
+    ...theme.typography.subtitle1,
+    marginLeft: theme.spacing(1),
   },
   container: {
     display: 'flex',
@@ -37,11 +44,15 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(2),
     minWidth: 400,
   },
-  sidebar: {
+  leftSidebar: {
+    marginTop: theme.spacing(2),
+    marginRight: theme.spacing(2),
+  },
+  rightSidebar: {
     marginTop: theme.spacing(2),
     flex: '0 0 200px',
   },
-  sidebarTitle: {
+  rightSidebarTitle: {
     fontWeight: 'bold',
   },
   labelList: {
@@ -64,7 +75,6 @@ const useStyles = makeStyles((theme) => ({
   },
   backButton: {
     position: 'sticky',
-    marginTop: theme.spacing(1),
     top: '80px',
     backgroundColor: '#574142',
     color: '#fff',
@@ -86,8 +96,18 @@ function Bug({ bug }: Props) {
       <div className={classes.header}>
         <BugTitleForm bug={bug} />
       </div>
-
       <div className={classes.container}>
+        <div className={classes.leftSidebar}>
+          <Button
+            variant="contained"
+            className={classes.backButton}
+            aria-label="back to issue list"
+            href="/"
+          >
+            <ArrowBackIcon />
+            Back to List
+          </Button>
+        </div>
         <div className={classes.timeline}>
           <TimelineQuery id={bug.id} />
           <IfLoggedIn>
@@ -98,8 +118,8 @@ function Bug({ bug }: Props) {
             )}
           </IfLoggedIn>
         </div>
-        <div className={classes.sidebar}>
-          <span className={classes.sidebarTitle}>Labels</span>
+        <div className={classes.rightSidebar}>
+          <span className={classes.rightSidebarTitle}>Labels</span>
           <ul className={classes.labelList}>
             {bug.labels.length === 0 && (
               <span className={classes.noLabel}>None yet</span>
@@ -110,15 +130,6 @@ 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/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx
index 2a70a2f8..ade64e9d 100644
--- a/webui/src/pages/bug/BugQuery.tsx
+++ b/webui/src/pages/bug/BugQuery.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { Redirect, RouteComponentProps } from 'react-router-dom';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
 
@@ -15,8 +15,8 @@ const BugQuery: React.FC<Props> = ({ match }: Props) => {
     variables: { id: match.params.id },
   });
   if (loading) return <CircularProgress />;
+  if (!data?.repository?.bug) return <Redirect to="/404bug" />;
   if (error) return <p>Error: {error}</p>;
-  if (!data?.repository?.bug) return <p>404.</p>;
   return <Bug bug={data.repository.bug} />;
 };
 
-- 
cgit 


From 46d38aa53fa925a2335fdf6c3b0b6f47d05dce94 Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Tue, 2 Mar 2021 20:15:39 +0100
Subject: Route instead of Redirect from empty bug to 404 after a hint from GM
 #10

---
 webui/src/App.tsx                | 1 -
 webui/src/pages/bug/BugQuery.tsx | 6 ++++--
 2 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index e0580b1d..4c81913c 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -13,7 +13,6 @@ export default function App() {
       <Switch>
         <Route path="/" exact component={ListPage} />
         <Route path="/new" exact component={NewBugPage} />
-        <Route path="/404bug" exact component={NotFoundPage} />
         <Route path="/bug/:id" exact component={BugPage} />
         <Route component={NotFoundPage} />
       </Switch>
diff --git a/webui/src/pages/bug/BugQuery.tsx b/webui/src/pages/bug/BugQuery.tsx
index ade64e9d..5d459c42 100644
--- a/webui/src/pages/bug/BugQuery.tsx
+++ b/webui/src/pages/bug/BugQuery.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps } from 'react-router-dom';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
 
+import NotFoundPage from '../notfound/NotFoundPage';
+
 import Bug from './Bug';
 import { useGetBugQuery } from './BugQuery.generated';
 
@@ -15,7 +17,7 @@ const BugQuery: React.FC<Props> = ({ match }: Props) => {
     variables: { id: match.params.id },
   });
   if (loading) return <CircularProgress />;
-  if (!data?.repository?.bug) return <Redirect to="/404bug" />;
+  if (!data?.repository?.bug) return <NotFoundPage />;
   if (error) return <p>Error: {error}</p>;
   return <Bug bug={data.repository.bug} />;
 };
-- 
cgit 


From de26990afc9f21a9017b039ba9d7546a8d8ea5da Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Thu, 11 Mar 2021 12:47:09 +0100
Subject: Adjust BackToList button color for dark/light-mode

The AppBar is commonly used for navigation. As the BackToList button is a
navigation element, use similar colors as the AppBar.
---
 webui/src/components/Header/Header.tsx | 8 ++++++--
 webui/src/pages/bug/Bug.tsx            | 7 ++++---
 webui/src/themes/DefaultDark.ts        | 3 ++-
 webui/src/themes/DefaultLight.ts       | 4 +++-
 4 files changed, 15 insertions(+), 7 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 3bdb252f..579bf127 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -15,9 +15,13 @@ const useStyles = makeStyles((theme) => ({
   filler: {
     flexGrow: 1,
   },
+  appBar: {
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText,
+  },
   appTitle: {
     ...theme.typography.h6,
-    color: 'white',
+    color: theme.palette.primary.contrastText,
     textDecoration: 'none',
     display: 'flex',
     alignItems: 'center',
@@ -36,7 +40,7 @@ function Header() {
 
   return (
     <>
-      <AppBar position="fixed" color="primary">
+      <AppBar position="fixed" className={classes.appBar}>
         <Toolbar>
           <Link to="/" className={classes.appTitle}>
             <img src="/logo.svg" className={classes.logo} alt="git-bug" />
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 8b537fb8..343721b4 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -76,10 +76,11 @@ const useStyles = makeStyles((theme) => ({
   backButton: {
     position: 'sticky',
     top: '80px',
-    backgroundColor: '#574142',
-    color: '#fff',
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText,
     '&:hover': {
-      backgroundColor: '#610B0B',
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
     },
   },
 }));
diff --git a/webui/src/themes/DefaultDark.ts b/webui/src/themes/DefaultDark.ts
index 6a92ec49..65dd6329 100644
--- a/webui/src/themes/DefaultDark.ts
+++ b/webui/src/themes/DefaultDark.ts
@@ -4,7 +4,8 @@ const defaultDarkTheme = createMuiTheme({
   palette: {
     type: 'dark',
     primary: {
-      main: '#263238',
+      dark: '#263238',
+      main: '#2a393e',
       light: '#525252',
     },
     error: {
diff --git a/webui/src/themes/DefaultLight.ts b/webui/src/themes/DefaultLight.ts
index bc788a98..9c57ebe5 100644
--- a/webui/src/themes/DefaultLight.ts
+++ b/webui/src/themes/DefaultLight.ts
@@ -4,8 +4,10 @@ const defaultLightTheme = createMuiTheme({
   palette: {
     type: 'light',
     primary: {
-      main: '#263238',
+      dark: '#263238',
+      main: '#5a6b73',
       light: '#f5f5f5',
+      contrastText: '#fff',
     },
     info: {
       main: '#e2f1ff',
-- 
cgit 


From 07f3163296b187ddf7069c05ca94f5ebaf43413c Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Thu, 11 Mar 2021 22:27:08 +0100
Subject: #10 Add redirect to detail page after creating new bug

---
 webui/src/pages/new/NewBugPage.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'webui/src')

diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index a46226ad..9ad52ad0 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -1,4 +1,5 @@
 import React, { FormEvent, useState } from 'react';
+import { useHistory } from 'react-router-dom';
 
 import { Button } from '@material-ui/core';
 import Paper from '@material-ui/core/Paper';
@@ -43,7 +44,9 @@ function NewBugPage() {
   const [issueTitle, setIssueTitle] = useState('');
   const [issueComment, setIssueComment] = useState('');
   const classes = useStyles();
+
   let issueTitleInput: any;
+  let history = useHistory();
 
   function submitNewIssue(e: FormEvent) {
     e.preventDefault();
@@ -55,6 +58,9 @@ function NewBugPage() {
           message: issueComment,
         },
       },
+    }).then(function (data) {
+      const id = data.data?.newBug.bug.humanId;
+      history.push('/bug/' + id);
     });
     issueTitleInput.value = '';
   }
-- 
cgit 


From cd02d80ca2458be40d64d2e945670e0aeeb30fcc Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Sat, 13 Mar 2021 23:12:24 +0100
Subject: Make BackButton a component and Add it to NewBugPage #10

---
 webui/src/pages/bug/BackButton.tsx | 36 +++++++++++++++
 webui/src/pages/bug/Bug.tsx        | 23 +---------
 webui/src/pages/new/NewBugPage.tsx | 90 +++++++++++++++++++++++++-------------
 3 files changed, 97 insertions(+), 52 deletions(-)
 create mode 100644 webui/src/pages/bug/BackButton.tsx

(limited to 'webui/src')

diff --git a/webui/src/pages/bug/BackButton.tsx b/webui/src/pages/bug/BackButton.tsx
new file mode 100644
index 00000000..4c73dd0a
--- /dev/null
+++ b/webui/src/pages/bug/BackButton.tsx
@@ -0,0 +1,36 @@
+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';
+
+const useStyles = makeStyles((theme) => ({
+  backButton: {
+    position: 'sticky',
+    top: '80px',
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+    },
+  },
+}));
+
+function BackButton() {
+  const classes = useStyles();
+
+  return (
+    <Button
+      variant="contained"
+      className={classes.backButton}
+      aria-label="back to issue list"
+      href="/"
+    >
+      <ArrowBackIcon />
+      Back to List
+    </Button>
+  );
+}
+
+export default BackButton;
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 343721b4..aa6247f2 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -1,13 +1,12 @@
 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';
 import Label from 'src/components/Label';
 
+import BackButton from './BackButton';
 import { BugFragment } from './Bug.generated';
 import CommentForm from './CommentForm';
 import TimelineQuery from './TimelineQuery';
@@ -73,16 +72,6 @@ const useStyles = makeStyles((theme) => ({
   commentForm: {
     marginLeft: 48,
   },
-  backButton: {
-    position: 'sticky',
-    top: '80px',
-    backgroundColor: theme.palette.primary.dark,
-    color: theme.palette.primary.contrastText,
-    '&:hover': {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-    },
-  },
 }));
 
 type Props = {
@@ -99,15 +88,7 @@ function Bug({ bug }: Props) {
       </div>
       <div className={classes.container}>
         <div className={classes.leftSidebar}>
-          <Button
-            variant="contained"
-            className={classes.backButton}
-            aria-label="back to issue list"
-            href="/"
-          >
-            <ArrowBackIcon />
-            Back to List
-          </Button>
+          <BackButton />
         </div>
         <div className={classes.timeline}>
           <TimelineQuery id={bug.id} />
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index 9ad52ad0..d04e753a 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -1,12 +1,12 @@
 import React, { FormEvent, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Button } from '@material-ui/core';
-import Paper from '@material-ui/core/Paper';
+import { Button, Paper } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
 import BugTitleInput from '../../components/BugTitleForm/BugTitleInput';
 import CommentInput from '../../components/CommentInput/CommentInput';
+import BackButton from '../bug/BackButton';
 
 import { useNewBugMutation } from './NewBug.generated';
 
@@ -15,12 +15,17 @@ import { useNewBugMutation } from './NewBug.generated';
  */
 const useStyles = makeStyles((theme: Theme) => ({
   main: {
-    maxWidth: 800,
+    maxWidth: 1200,
     margin: 'auto',
     marginTop: theme.spacing(4),
     marginBottom: theme.spacing(4),
     padding: theme.spacing(2),
-    overflow: 'hidden',
+  },
+  container: {
+    display: 'flex',
+    marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(2),
+    marginLeft: theme.spacing(2),
   },
   form: {
     display: 'flex',
@@ -34,6 +39,21 @@ const useStyles = makeStyles((theme: Theme) => ({
     backgroundColor: theme.palette.success.main,
     color: theme.palette.success.contrastText,
   },
+  leftSidebar: {
+    marginTop: theme.spacing(2),
+    marginRight: theme.spacing(2),
+  },
+  rightSidebar: {
+    marginTop: theme.spacing(2),
+    flex: '0 0 200px',
+  },
+  timeline: {
+    flex: 1,
+    marginTop: theme.spacing(2),
+    marginRight: theme.spacing(2),
+    minWidth: 400,
+    padding: theme.spacing(1),
+  },
 }));
 
 /**
@@ -73,34 +93,42 @@ function NewBugPage() {
   if (error) return <div>Error</div>;
 
   return (
-    <Paper className={classes.main}>
-      <form className={classes.form} onSubmit={submitNewIssue}>
-        <BugTitleInput
-          inputRef={(node) => {
-            issueTitleInput = node;
-          }}
-          label="Title"
-          variant="outlined"
-          fullWidth
-          margin="dense"
-          onChange={(event: any) => setIssueTitle(event.target.value)}
-        />
-        <CommentInput
-          loading={false}
-          onChange={(comment: string) => setIssueComment(comment)}
-        />
-        <div className={classes.actions}>
-          <Button
-            className={classes.greenButton}
-            variant="contained"
-            type="submit"
-            disabled={isFormValid() ? false : true}
-          >
-            Submit new issue
-          </Button>
+    <main className={classes.main}>
+      <div className={classes.container}>
+        <div className={classes.leftSidebar}>
+          <BackButton />
         </div>
-      </form>
-    </Paper>
+        <Paper className={classes.timeline}>
+          <form className={classes.form} onSubmit={submitNewIssue}>
+            <BugTitleInput
+              inputRef={(node) => {
+                issueTitleInput = node;
+              }}
+              label="Title"
+              variant="outlined"
+              fullWidth
+              margin="dense"
+              onChange={(event: any) => setIssueTitle(event.target.value)}
+            />
+            <CommentInput
+              loading={false}
+              onChange={(comment: string) => setIssueComment(comment)}
+            />
+            <div className={classes.actions}>
+              <Button
+                className={classes.greenButton}
+                variant="contained"
+                type="submit"
+                disabled={isFormValid() ? false : true}
+              >
+                Submit new issue
+              </Button>
+            </div>
+          </form>
+        </Paper>
+        <div className={classes.rightSidebar}></div>
+      </div>
+    </main>
   );
 }
 
-- 
cgit 


From ac17596c1ab94b6426bb5b48e39ed0dd9038303e Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Mon, 15 Mar 2021 14:52:06 +0100
Subject: Refactor BackToListButton #10

---
 .../BackToListButton/BackToListButton.tsx          | 36 ++++++++++++++++++++++
 webui/src/pages/bug/BackButton.tsx                 | 36 ----------------------
 webui/src/pages/bug/Bug.tsx                        |  4 +--
 webui/src/pages/new/NewBugPage.tsx                 |  4 +--
 4 files changed, 40 insertions(+), 40 deletions(-)
 create mode 100644 webui/src/components/BackToListButton/BackToListButton.tsx
 delete mode 100644 webui/src/pages/bug/BackButton.tsx

(limited to 'webui/src')

diff --git a/webui/src/components/BackToListButton/BackToListButton.tsx b/webui/src/components/BackToListButton/BackToListButton.tsx
new file mode 100644
index 00000000..7ca53ad0
--- /dev/null
+++ b/webui/src/components/BackToListButton/BackToListButton.tsx
@@ -0,0 +1,36 @@
+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';
+
+const useStyles = makeStyles((theme) => ({
+  backButton: {
+    position: 'sticky',
+    top: '80px',
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+    },
+  },
+}));
+
+function BackToListButton() {
+  const classes = useStyles();
+
+  return (
+    <Button
+      variant="contained"
+      className={classes.backButton}
+      aria-label="back to issue list"
+      href="/"
+    >
+      <ArrowBackIcon />
+      Back to List
+    </Button>
+  );
+}
+
+export default BackToListButton;
diff --git a/webui/src/pages/bug/BackButton.tsx b/webui/src/pages/bug/BackButton.tsx
deleted file mode 100644
index 4c73dd0a..00000000
--- a/webui/src/pages/bug/BackButton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-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';
-
-const useStyles = makeStyles((theme) => ({
-  backButton: {
-    position: 'sticky',
-    top: '80px',
-    backgroundColor: theme.palette.primary.dark,
-    color: theme.palette.primary.contrastText,
-    '&:hover': {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-    },
-  },
-}));
-
-function BackButton() {
-  const classes = useStyles();
-
-  return (
-    <Button
-      variant="contained"
-      className={classes.backButton}
-      aria-label="back to issue list"
-      href="/"
-    >
-      <ArrowBackIcon />
-      Back to List
-    </Button>
-  );
-}
-
-export default BackButton;
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index aa6247f2..9ce2f6a6 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
 
+import BackToListButton from '../../components/BackToListButton/BackToListButton';
 import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm';
 import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 import Label from 'src/components/Label';
 
-import BackButton from './BackButton';
 import { BugFragment } from './Bug.generated';
 import CommentForm from './CommentForm';
 import TimelineQuery from './TimelineQuery';
@@ -88,7 +88,7 @@ function Bug({ bug }: Props) {
       </div>
       <div className={classes.container}>
         <div className={classes.leftSidebar}>
-          <BackButton />
+          <BackToListButton />
         </div>
         <div className={classes.timeline}>
           <TimelineQuery id={bug.id} />
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index d04e753a..aa220e04 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -4,9 +4,9 @@ import { useHistory } from 'react-router-dom';
 import { Button, Paper } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
+import BackToListButton from '../../components/BackToListButton/BackToListButton';
 import BugTitleInput from '../../components/BugTitleForm/BugTitleInput';
 import CommentInput from '../../components/CommentInput/CommentInput';
-import BackButton from '../bug/BackButton';
 
 import { useNewBugMutation } from './NewBug.generated';
 
@@ -96,7 +96,7 @@ function NewBugPage() {
     <main className={classes.main}>
       <div className={classes.container}>
         <div className={classes.leftSidebar}>
-          <BackButton />
+          <BackToListButton />
         </div>
         <Paper className={classes.timeline}>
           <form className={classes.form} onSubmit={submitNewIssue}>
-- 
cgit 


From 09fabc98a357454b2c4da4f08ce269bb4106c36a Mon Sep 17 00:00:00 2001
From: Lena <lena.becker-3@mni.thm.de>
Date: Mon, 15 Mar 2021 15:40:25 +0100
Subject: Adjust Button #10

---
 webui/src/components/BackToListButton.tsx          | 36 ++++++++++++++++++++++
 .../BackToListButton/BackToListButton.tsx          | 36 ----------------------
 webui/src/pages/bug/Bug.tsx                        |  2 +-
 webui/src/pages/new/NewBugPage.tsx                 |  4 +--
 4 files changed, 39 insertions(+), 39 deletions(-)
 create mode 100644 webui/src/components/BackToListButton.tsx
 delete mode 100644 webui/src/components/BackToListButton/BackToListButton.tsx

(limited to 'webui/src')

diff --git a/webui/src/components/BackToListButton.tsx b/webui/src/components/BackToListButton.tsx
new file mode 100644
index 00000000..7ca53ad0
--- /dev/null
+++ b/webui/src/components/BackToListButton.tsx
@@ -0,0 +1,36 @@
+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';
+
+const useStyles = makeStyles((theme) => ({
+  backButton: {
+    position: 'sticky',
+    top: '80px',
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText,
+    '&:hover': {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+    },
+  },
+}));
+
+function BackToListButton() {
+  const classes = useStyles();
+
+  return (
+    <Button
+      variant="contained"
+      className={classes.backButton}
+      aria-label="back to issue list"
+      href="/"
+    >
+      <ArrowBackIcon />
+      Back to List
+    </Button>
+  );
+}
+
+export default BackToListButton;
diff --git a/webui/src/components/BackToListButton/BackToListButton.tsx b/webui/src/components/BackToListButton/BackToListButton.tsx
deleted file mode 100644
index 7ca53ad0..00000000
--- a/webui/src/components/BackToListButton/BackToListButton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-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';
-
-const useStyles = makeStyles((theme) => ({
-  backButton: {
-    position: 'sticky',
-    top: '80px',
-    backgroundColor: theme.palette.primary.dark,
-    color: theme.palette.primary.contrastText,
-    '&:hover': {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-    },
-  },
-}));
-
-function BackToListButton() {
-  const classes = useStyles();
-
-  return (
-    <Button
-      variant="contained"
-      className={classes.backButton}
-      aria-label="back to issue list"
-      href="/"
-    >
-      <ArrowBackIcon />
-      Back to List
-    </Button>
-  );
-}
-
-export default BackToListButton;
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 9ce2f6a6..bde8c5dd 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
 
-import BackToListButton from '../../components/BackToListButton/BackToListButton';
+import BackToListButton from '../../components/BackToListButton';
 import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm';
 import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 import Label from 'src/components/Label';
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index aa220e04..39725722 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { Button, Paper } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
-import BackToListButton from '../../components/BackToListButton/BackToListButton';
+import BackToListButton from '../../components/BackToListButton';
 import BugTitleInput from '../../components/BugTitleForm/BugTitleInput';
 import CommentInput from '../../components/CommentInput/CommentInput';
 
@@ -40,7 +40,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     color: theme.palette.success.contrastText,
   },
   leftSidebar: {
-    marginTop: theme.spacing(2),
+    marginTop: theme.spacing(4),
     marginRight: theme.spacing(2),
   },
   rightSidebar: {
-- 
cgit 


From 833f020a9b97656941434a5e9bc5248ee0caeb76 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Mon, 15 Mar 2021 16:09:40 +0100
Subject: Use BackToList button on 404-Page

---
 webui/src/pages/notfound/NotFoundPage.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/pages/notfound/NotFoundPage.tsx b/webui/src/pages/notfound/NotFoundPage.tsx
index 57b186c5..2c6f6854 100644
--- a/webui/src/pages/notfound/NotFoundPage.tsx
+++ b/webui/src/pages/notfound/NotFoundPage.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+
+import BackToListButton from '../../components/BackToListButton';
 
 const useStyles = makeStyles((theme) => ({
   main: {
@@ -22,8 +23,8 @@ const useStyles = makeStyles((theme) => ({
     fontSize: '80px',
   },
   backLink: {
-    textDecoration: 'none',
-    color: theme.palette.text.primary,
+    marginTop: theme.spacing(1),
+    textAlign: 'center',
   },
   header: {
     fontSize: '30px',
@@ -41,10 +42,9 @@ function NotFoundPage() {
         className={classes.logo}
         alt="git-bug Logo"
       />
-      <a href="/" className={classes.backLink}>
-        <h2 className={classes.header}>Go back to start page</h2>
-        <ArrowBackIcon className={classes.icon} />
-      </a>
+      <div className={classes.backLink}>
+        <BackToListButton />
+      </div>
     </main>
   );
 }
-- 
cgit 


From 07e1c45cd70554630640bb1ea25968078a36fd6c Mon Sep 17 00:00:00 2001
From: Michael Muré <batolettre@gmail.com>
Date: Fri, 19 Mar 2021 17:04:59 +0100
Subject: webui: minor code fixes

---
 webui/src/components/BugTitleForm/BugTitleForm.tsx | 2 +-
 webui/src/components/Content/PreTag.tsx            | 2 +-
 webui/src/components/Header/Header.tsx             | 2 +-
 webui/src/pages/list/FilterToolbar.tsx             | 2 +-
 webui/src/pages/new/NewBugPage.tsx                 | 6 +++---
 5 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/components/BugTitleForm/BugTitleForm.tsx b/webui/src/components/BugTitleForm/BugTitleForm.tsx
index c31f8ef7..9a161443 100644
--- a/webui/src/components/BugTitleForm/BugTitleForm.tsx
+++ b/webui/src/components/BugTitleForm/BugTitleForm.tsx
@@ -66,7 +66,7 @@ function BugTitleForm({ bug }: Props) {
 
   function isFormValid() {
     if (issueTitleInput) {
-      return issueTitleInput.value.length > 0 ? true : false;
+      return issueTitleInput.value.length > 0;
     } else {
       return false;
     }
diff --git a/webui/src/components/Content/PreTag.tsx b/webui/src/components/Content/PreTag.tsx
index 5256ab12..8e352153 100644
--- a/webui/src/components/Content/PreTag.tsx
+++ b/webui/src/components/Content/PreTag.tsx
@@ -11,7 +11,7 @@ const useStyles = makeStyles({
 
 const PreTag = (props: React.HTMLProps<HTMLPreElement>) => {
   const classes = useStyles();
-  return <pre className={classes.tag} {...props}></pre>;
+  return <pre className={classes.tag} {...props} />;
 };
 
 export default PreTag;
diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 579bf127..3443fcf5 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -46,7 +46,7 @@ function Header() {
             <img src="/logo.svg" className={classes.logo} alt="git-bug" />
             git-bug
           </Link>
-          <div className={classes.filler}></div>
+          <div className={classes.filler} />
           <div className={classes.lightSwitch}>
             <LightSwitch />
           </div>
diff --git a/webui/src/pages/list/FilterToolbar.tsx b/webui/src/pages/list/FilterToolbar.tsx
index e4cd8e6a..74eefe4c 100644
--- a/webui/src/pages/list/FilterToolbar.tsx
+++ b/webui/src/pages/list/FilterToolbar.tsx
@@ -40,7 +40,7 @@ function CountingFilter({ query, children, ...props }: CountingFilterProps) {
     variables: { query },
   });
 
-  var prefix;
+  let prefix;
   if (loading) prefix = '...';
   else if (error || !data?.repository) prefix = '???';
   // TODO: better prefixes & error handling
diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index 39725722..f313ac24 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -86,7 +86,7 @@ function NewBugPage() {
   }
 
   function isFormValid() {
-    return issueTitle.length > 0 && issueComment.length > 0 ? true : false;
+    return issueTitle.length > 0;
   }
 
   if (loading) return <div>Loading...</div>;
@@ -119,14 +119,14 @@ function NewBugPage() {
                 className={classes.greenButton}
                 variant="contained"
                 type="submit"
-                disabled={isFormValid() ? false : true}
+                disabled={!isFormValid()}
               >
                 Submit new issue
               </Button>
             </div>
           </form>
         </Paper>
-        <div className={classes.rightSidebar}></div>
+        <div className={classes.rightSidebar} />
       </div>
     </main>
   );
-- 
cgit 


From 8d8eb2942f73213b175529f47af980889cd080d4 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sat, 20 Mar 2021 10:37:49 +0100
Subject: Add test navbar

---
 webui/src/components/Header/Header.tsx | 42 ++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

(limited to 'webui/src')

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 3443fcf5..5a968a29 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import AppBar from '@material-ui/core/AppBar';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
 import Toolbar from '@material-ui/core/Toolbar';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -35,6 +37,45 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+function a11yProps(index: any) {
+  return {
+    id: `nav-tab-${index}`,
+    'aria-controls': `nav-tabpanel-${index}`,
+  };
+}
+
+function NavTabs() {
+  const [value, setValue] = React.useState(0);
+
+  //TODO page refresh resets state. Must parse url to determine which tab is
+  //highlighted
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
+    setValue(newValue);
+  };
+
+
+  return (
+    <Tabs
+      variant="fullWidth"
+      value={value}
+      onChange={handleChange}
+      aria-label="nav tabs example"
+    >
+      <Tab label="Code" component="a" href="/code" {...a11yProps(0)} />
+      <Tab label="Bugs" component="a" href="/" {...a11yProps(1)} />
+      <Tab
+        label="Pull Requests"
+        component="a"
+        href="/pulls"
+        {...a11yProps(2)}
+      />
+      <Tab label="Projects" component="a" href="/projects" {...a11yProps(3)} />
+      <Tab label="Wiki" component="a" href="/wiki" {...a11yProps(4)} />
+      <Tab label="Settings" component="a" href="/settings" {...a11yProps(5)} />
+    </Tabs>
+  );
+}
+
 function Header() {
   const classes = useStyles();
 
@@ -54,6 +95,7 @@ function Header() {
         </Toolbar>
       </AppBar>
       <div className={classes.offset} />
+      <NavTabs />
     </>
   );
 }
-- 
cgit 


From 1e411f5abfffa3955504f700b5edbe7f74007ae2 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sat, 20 Mar 2021 14:53:23 +0100
Subject: Fix eslint empty line error

---
 webui/src/components/Header/Header.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'webui/src')

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 5a968a29..8e9b6697 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -53,7 +53,6 @@ function NavTabs() {
     setValue(newValue);
   };
 
-
   return (
     <Tabs
       variant="fullWidth"
-- 
cgit 


From a332c085f82ddfc32adf581b0c907db6f2202d19 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sun, 21 Mar 2021 13:32:08 +0100
Subject: Center navbar and disable unresolved navigations

---
 webui/src/components/Header/Header.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 8e9b6697..1fe7504f 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -55,22 +55,27 @@ function NavTabs() {
 
   return (
     <Tabs
-      variant="fullWidth"
+      centered
       value={value}
       onChange={handleChange}
       aria-label="nav tabs example"
     >
-      <Tab label="Code" component="a" href="/code" {...a11yProps(0)} />
+      <Tab disabled label="Code" component="a" href="/code" {...a11yProps(0)} />
       <Tab label="Bugs" component="a" href="/" {...a11yProps(1)} />
       <Tab
+        disabled
         label="Pull Requests"
         component="a"
         href="/pulls"
         {...a11yProps(2)}
       />
-      <Tab label="Projects" component="a" href="/projects" {...a11yProps(3)} />
-      <Tab label="Wiki" component="a" href="/wiki" {...a11yProps(4)} />
-      <Tab label="Settings" component="a" href="/settings" {...a11yProps(5)} />
+      <Tab
+        disabled
+        label="Settings"
+        component="a"
+        href="/settings"
+        {...a11yProps(3)}
+      />
     </Tabs>
   );
 }
-- 
cgit 


From 9fa40d3d0819aaa27a055ebb51ebdccd83bf1dfd Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sun, 21 Mar 2021 13:46:49 +0100
Subject: Add tooltip to unimplemented navigations

---
 webui/src/components/Header/Header.tsx | 55 ++++++++++++++++++++++++----------
 1 file changed, 40 insertions(+), 15 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 1fe7504f..dc649cb4 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -5,6 +5,7 @@ import AppBar from '@material-ui/core/AppBar';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import Toolbar from '@material-ui/core/Toolbar';
+import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import { makeStyles } from '@material-ui/core/styles';
 
 import { LightSwitch } from '../../components/Themer';
@@ -53,6 +54,12 @@ function NavTabs() {
     setValue(newValue);
   };
 
+  const tooltipMsg = `This feature doesn't exist yet. Come help us build it.`;
+
+  /*The span elements around disabled tabs are needed, as the tooltip
+   * won't be triggered by disabled elements.
+   * See: https://material-ui.com/components/tooltips/#disabled-elements
+   */
   return (
     <Tabs
       centered
@@ -60,22 +67,40 @@ function NavTabs() {
       onChange={handleChange}
       aria-label="nav tabs example"
     >
-      <Tab disabled label="Code" component="a" href="/code" {...a11yProps(0)} />
+      <Tooltip title={tooltipMsg}>
+        <span>
+          <Tab
+            disabled
+            label="Code"
+            component="a"
+            href="/code"
+            {...a11yProps(0)}
+          />
+        </span>
+      </Tooltip>
       <Tab label="Bugs" component="a" href="/" {...a11yProps(1)} />
-      <Tab
-        disabled
-        label="Pull Requests"
-        component="a"
-        href="/pulls"
-        {...a11yProps(2)}
-      />
-      <Tab
-        disabled
-        label="Settings"
-        component="a"
-        href="/settings"
-        {...a11yProps(3)}
-      />
+      <Tooltip title={tooltipMsg}>
+        <span>
+          <Tab
+            disabled
+            label="Pull Requests"
+            component="a"
+            href="/pulls"
+            {...a11yProps(2)}
+          />
+        </span>
+      </Tooltip>
+      <Tooltip title={tooltipMsg}>
+        <span>
+          <Tab
+            disabled
+            label="Settings"
+            component="a"
+            href="/settings"
+            {...a11yProps(3)}
+          />
+        </span>
+      </Tooltip>
     </Tabs>
   );
 }
-- 
cgit 


From 00fbd0a2c861cfa873aad28ad78f69caf81e0e3c Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sun, 21 Mar 2021 16:43:37 +0100
Subject: Fix highlighting of tabs and error in console

---
 webui/src/components/Header/Header.tsx | 102 +++++++++++++++------------------
 1 file changed, 45 insertions(+), 57 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index dc649cb4..975944d7 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 import AppBar from '@material-ui/core/AppBar';
-import Tab from '@material-ui/core/Tab';
+import Tab, { TabProps } from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import Toolbar from '@material-ui/core/Toolbar';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
@@ -45,75 +45,45 @@ function a11yProps(index: any) {
   };
 }
 
-function NavTabs() {
-  const [value, setValue] = React.useState(0);
-
-  //TODO page refresh resets state. Must parse url to determine which tab is
-  //highlighted
-  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
-    setValue(newValue);
-  };
-
-  const tooltipMsg = `This feature doesn't exist yet. Come help us build it.`;
-
+const DisabledTabWithTooltip = (props: TabProps) => {
   /*The span elements around disabled tabs are needed, as the tooltip
    * won't be triggered by disabled elements.
    * See: https://material-ui.com/components/tooltips/#disabled-elements
+   * This must be done in a wrapper component, otherwise the TabS component
+   * cannot pass it styles down to the Tab component. Resulting in (console)
+   * warnings. This wrapper acceps the passed down TabProps and pass it around
+   * the span element to the Tab component.
    */
+  const msg = `This feature doesn't exist yet. Come help us build it.`;
+  console.log(props);
   return (
-    <Tabs
-      centered
-      value={value}
-      onChange={handleChange}
-      aria-label="nav tabs example"
-    >
-      <Tooltip title={tooltipMsg}>
-        <span>
-          <Tab
-            disabled
-            label="Code"
-            component="a"
-            href="/code"
-            {...a11yProps(0)}
-          />
-        </span>
-      </Tooltip>
-      <Tab label="Bugs" component="a" href="/" {...a11yProps(1)} />
-      <Tooltip title={tooltipMsg}>
-        <span>
-          <Tab
-            disabled
-            label="Pull Requests"
-            component="a"
-            href="/pulls"
-            {...a11yProps(2)}
-          />
-        </span>
-      </Tooltip>
-      <Tooltip title={tooltipMsg}>
-        <span>
-          <Tab
-            disabled
-            label="Settings"
-            component="a"
-            href="/settings"
-            {...a11yProps(3)}
-          />
-        </span>
-      </Tooltip>
-    </Tabs>
+    <Tooltip title={msg}>
+      <span>
+        <Tab disabled {...props} />
+      </span>
+    </Tooltip>
   );
-}
+};
 
 function Header() {
   const classes = useStyles();
+  const location = useLocation();
+  const [selectedTab, setTab] = React.useState(location.pathname);
+  console.log(location.pathname);
+
+  const handleTabClick = (
+    event: React.ChangeEvent<{}>,
+    newTabValue: string
+  ) => {
+    setTab(newTabValue);
+  };
 
   return (
     <>
       <AppBar position="fixed" className={classes.appBar}>
         <Toolbar>
           <Link to="/" className={classes.appTitle}>
-            <img src="/logo.svg" className={classes.logo} alt="git-bug" />
+            <img src="/logo.svg" className={classes.logo} alt="git-bug logo" />
             git-bug
           </Link>
           <div className={classes.filler} />
@@ -124,7 +94,25 @@ function Header() {
         </Toolbar>
       </AppBar>
       <div className={classes.offset} />
-      <NavTabs />
+      <Tabs
+        centered
+        value={selectedTab}
+        onChange={handleTabClick}
+        aria-label="nav tabs"
+      >
+        <DisabledTabWithTooltip label="Code" value="/code" {...a11yProps(1)} />
+        <Tab label="Bugs" value="/" href="/" {...a11yProps(2)} />
+        <DisabledTabWithTooltip
+          label="Pull Requests"
+          value="/pulls"
+          {...a11yProps(3)}
+        />
+        <DisabledTabWithTooltip
+          label="Settings"
+          value="/settings"
+          {...a11yProps(4)}
+        />
+      </Tabs>
     </>
   );
 }
-- 
cgit 


From f752dd54806122ea9d77b6807246897eb2656f0e Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sun, 21 Mar 2021 16:53:00 +0100
Subject: Remove BackToList button from BugPage

---
 webui/src/pages/bug/Bug.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index bde8c5dd..3b6b61e0 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
 
-import BackToListButton from '../../components/BackToListButton';
 import BugTitleForm from 'src/components/BugTitleForm/BugTitleForm';
 import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 import Label from 'src/components/Label';
@@ -16,13 +15,13 @@ import TimelineQuery from './TimelineQuery';
  */
 const useStyles = makeStyles((theme) => ({
   main: {
-    maxWidth: 1200,
+    maxWidth: 1000,
     margin: 'auto',
     marginTop: theme.spacing(4),
   },
   header: {
     marginRight: theme.spacing(2),
-    marginLeft: theme.spacing(3) + 205,
+    marginLeft: theme.spacing(3) + 40,
   },
   title: {
     ...theme.typography.h5,
@@ -43,10 +42,6 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(2),
     minWidth: 400,
   },
-  leftSidebar: {
-    marginTop: theme.spacing(2),
-    marginRight: theme.spacing(2),
-  },
   rightSidebar: {
     marginTop: theme.spacing(2),
     flex: '0 0 200px',
@@ -87,9 +82,6 @@ function Bug({ bug }: Props) {
         <BugTitleForm bug={bug} />
       </div>
       <div className={classes.container}>
-        <div className={classes.leftSidebar}>
-          <BackToListButton />
-        </div>
         <div className={classes.timeline}>
           <TimelineQuery id={bug.id} />
           <IfLoggedIn>
-- 
cgit 


From 50f146a42a3b59341531b5f478217b10d7033ead Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sun, 21 Mar 2021 17:01:21 +0100
Subject: Remove BackToList button from NewBugPage

---
 webui/src/pages/new/NewBugPage.tsx | 87 +++++++++++++-------------------------
 1 file changed, 29 insertions(+), 58 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx
index f313ac24..2181d44c 100644
--- a/webui/src/pages/new/NewBugPage.tsx
+++ b/webui/src/pages/new/NewBugPage.tsx
@@ -4,7 +4,6 @@ import { useHistory } from 'react-router-dom';
 import { Button, Paper } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
-import BackToListButton from '../../components/BackToListButton';
 import BugTitleInput from '../../components/BugTitleForm/BugTitleInput';
 import CommentInput from '../../components/CommentInput/CommentInput';
 
@@ -15,17 +14,12 @@ import { useNewBugMutation } from './NewBug.generated';
  */
 const useStyles = makeStyles((theme: Theme) => ({
   main: {
-    maxWidth: 1200,
+    maxWidth: 800,
     margin: 'auto',
     marginTop: theme.spacing(4),
     marginBottom: theme.spacing(4),
     padding: theme.spacing(2),
-  },
-  container: {
-    display: 'flex',
-    marginBottom: theme.spacing(1),
-    marginRight: theme.spacing(2),
-    marginLeft: theme.spacing(2),
+    overflow: 'hidden',
   },
   form: {
     display: 'flex',
@@ -39,21 +33,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     backgroundColor: theme.palette.success.main,
     color: theme.palette.success.contrastText,
   },
-  leftSidebar: {
-    marginTop: theme.spacing(4),
-    marginRight: theme.spacing(2),
-  },
-  rightSidebar: {
-    marginTop: theme.spacing(2),
-    flex: '0 0 200px',
-  },
-  timeline: {
-    flex: 1,
-    marginTop: theme.spacing(2),
-    marginRight: theme.spacing(2),
-    minWidth: 400,
-    padding: theme.spacing(1),
-  },
 }));
 
 /**
@@ -93,42 +72,34 @@ function NewBugPage() {
   if (error) return <div>Error</div>;
 
   return (
-    <main className={classes.main}>
-      <div className={classes.container}>
-        <div className={classes.leftSidebar}>
-          <BackToListButton />
+    <Paper className={classes.main}>
+      <form className={classes.form} onSubmit={submitNewIssue}>
+        <BugTitleInput
+          inputRef={(node) => {
+            issueTitleInput = node;
+          }}
+          label="Title"
+          variant="outlined"
+          fullWidth
+          margin="dense"
+          onChange={(event: any) => setIssueTitle(event.target.value)}
+        />
+        <CommentInput
+          loading={false}
+          onChange={(comment: string) => setIssueComment(comment)}
+        />
+        <div className={classes.actions}>
+          <Button
+            className={classes.greenButton}
+            variant="contained"
+            type="submit"
+            disabled={isFormValid() ? false : true}
+          >
+            Submit new issue
+          </Button>
         </div>
-        <Paper className={classes.timeline}>
-          <form className={classes.form} onSubmit={submitNewIssue}>
-            <BugTitleInput
-              inputRef={(node) => {
-                issueTitleInput = node;
-              }}
-              label="Title"
-              variant="outlined"
-              fullWidth
-              margin="dense"
-              onChange={(event: any) => setIssueTitle(event.target.value)}
-            />
-            <CommentInput
-              loading={false}
-              onChange={(comment: string) => setIssueComment(comment)}
-            />
-            <div className={classes.actions}>
-              <Button
-                className={classes.greenButton}
-                variant="contained"
-                type="submit"
-                disabled={!isFormValid()}
-              >
-                Submit new issue
-              </Button>
-            </div>
-          </form>
-        </Paper>
-        <div className={classes.rightSidebar} />
-      </div>
-    </main>
+      </form>
+    </Paper>
   );
 }
 
-- 
cgit 


From aa91f39cdf98217cb0b26c70f344148275617220 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Sun, 21 Mar 2021 17:34:57 +0100
Subject: Fix (hoepfully) eslint error for pipeline

Unfortunatly will this result in error for eslint on local machine... *sigh*
---
 webui/src/components/Header/Header.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 975944d7..70b8c9ff 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -83,7 +83,11 @@ function Header() {
       <AppBar position="fixed" className={classes.appBar}>
         <Toolbar>
           <Link to="/" className={classes.appTitle}>
-            <img src="/logo.svg" className={classes.logo} alt="git-bug logo" />
+            <img
+              src="/logo.svg"
+              className={classes.logo}
+              alt="git-bug logo"
+            />
             git-bug
           </Link>
           <div className={classes.filler} />
@@ -100,7 +104,11 @@ function Header() {
         onChange={handleTabClick}
         aria-label="nav tabs"
       >
-        <DisabledTabWithTooltip label="Code" value="/code" {...a11yProps(1)} />
+        <DisabledTabWithTooltip
+          label="Code"
+          value="/code"
+          {...a11yProps(1)}
+        />
         <Tab label="Bugs" value="/" href="/" {...a11yProps(2)} />
         <DisabledTabWithTooltip
           label="Pull Requests"
-- 
cgit 


From fbf7c48b9ec53f94a2f56a3405b381f598c38f1a Mon Sep 17 00:00:00 2001
From: Michael Muré <batolettre@gmail.com>
Date: Sun, 21 Mar 2021 19:45:26 +0100
Subject: webui: fix eslint?

---
 webui/src/components/Header/Header.tsx | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 70b8c9ff..975944d7 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -83,11 +83,7 @@ function Header() {
       <AppBar position="fixed" className={classes.appBar}>
         <Toolbar>
           <Link to="/" className={classes.appTitle}>
-            <img
-              src="/logo.svg"
-              className={classes.logo}
-              alt="git-bug logo"
-            />
+            <img src="/logo.svg" className={classes.logo} alt="git-bug logo" />
             git-bug
           </Link>
           <div className={classes.filler} />
@@ -104,11 +100,7 @@ function Header() {
         onChange={handleTabClick}
         aria-label="nav tabs"
       >
-        <DisabledTabWithTooltip
-          label="Code"
-          value="/code"
-          {...a11yProps(1)}
-        />
+        <DisabledTabWithTooltip label="Code" value="/code" {...a11yProps(1)} />
         <Tab label="Bugs" value="/" href="/" {...a11yProps(2)} />
         <DisabledTabWithTooltip
           label="Pull Requests"
-- 
cgit 


From aeb26d0e84b14a44ed52e2fd158b01310e295e45 Mon Sep 17 00:00:00 2001
From: Michael Muré <batolettre@gmail.com>
Date: Sun, 21 Mar 2021 21:28:02 +0100
Subject: webui: stay within the SPA when redirecting from the header

---
 webui/src/components/Header/Header.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'webui/src')

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 975944d7..3064f6e4 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -8,8 +8,8 @@ import Toolbar from '@material-ui/core/Toolbar';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import { makeStyles } from '@material-ui/core/styles';
 
-import { LightSwitch } from '../../components/Themer';
 import CurrentIdentity from '../CurrentIdentity/CurrentIdentity';
+import { LightSwitch } from '../Themer';
 
 const useStyles = makeStyles((theme) => ({
   offset: {
@@ -55,7 +55,6 @@ const DisabledTabWithTooltip = (props: TabProps) => {
    * the span element to the Tab component.
    */
   const msg = `This feature doesn't exist yet. Come help us build it.`;
-  console.log(props);
   return (
     <Tooltip title={msg}>
       <span>
@@ -69,7 +68,6 @@ function Header() {
   const classes = useStyles();
   const location = useLocation();
   const [selectedTab, setTab] = React.useState(location.pathname);
-  console.log(location.pathname);
 
   const handleTabClick = (
     event: React.ChangeEvent<{}>,
@@ -101,7 +99,7 @@ function Header() {
         aria-label="nav tabs"
       >
         <DisabledTabWithTooltip label="Code" value="/code" {...a11yProps(1)} />
-        <Tab label="Bugs" value="/" href="/" {...a11yProps(2)} />
+        <Tab label="Bugs" value="/" component={Link} to="/" {...a11yProps(2)} />
         <DisabledTabWithTooltip
           label="Pull Requests"
           value="/pulls"
-- 
cgit