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 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

(limited to 'webui/src/pages/bug/Bug.tsx')

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index d85c52966..b8c3e8aae 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>
-- 
cgit v1.2.3


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/pages/bug/Bug.tsx')

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index 4c81913cb..e0580b1df 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 b8c3e8aae..8b537fb8c 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 2a70a2f84..ade64e9d0 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 v1.2.3


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/pages/bug/Bug.tsx')

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 3bdb252f4..579bf127f 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 8b537fb8c..343721b4e 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 6a92ec49d..65dd6329b 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 bc788a986..9c57ebe57 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 v1.2.3


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/pages/bug/Bug.tsx')

diff --git a/webui/src/pages/bug/BackButton.tsx b/webui/src/pages/bug/BackButton.tsx
new file mode 100644
index 000000000..4c73dd0ae
--- /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 343721b4e..aa6247f2f 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 9ad52ad08..d04e753a2 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 v1.2.3


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/pages/bug/Bug.tsx')

diff --git a/webui/src/components/BackToListButton/BackToListButton.tsx b/webui/src/components/BackToListButton/BackToListButton.tsx
new file mode 100644
index 000000000..7ca53ad05
--- /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 4c73dd0ae..000000000
--- 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 aa6247f2f..9ce2f6a67 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 d04e753a2..aa220e041 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 v1.2.3


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/pages/bug/Bug.tsx')

diff --git a/webui/src/components/BackToListButton.tsx b/webui/src/components/BackToListButton.tsx
new file mode 100644
index 000000000..7ca53ad05
--- /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 7ca53ad05..000000000
--- 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 9ce2f6a67..bde8c5dd3 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 aa220e041..397257229 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 v1.2.3


From cd4b1adebbb009caba47b7dc4f543c4d951841f2 Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 12:28:45 +0100
Subject: Pass BugFragment as prop to EditComment

---
 webui/src/pages/bug/.Bug.tsx.swp           | Bin 0 -> 12288 bytes
 webui/src/pages/bug/.TimelineQuery.tsx.swp | Bin 0 -> 12288 bytes
 webui/src/pages/bug/Bug.tsx                |   2 +-
 webui/src/pages/bug/Message.tsx            |  13 ++++++++++++-
 webui/src/pages/bug/Timeline.tsx           |   8 +++++---
 webui/src/pages/bug/TimelineQuery.tsx      |   9 +++++----
 6 files changed, 23 insertions(+), 9 deletions(-)
 create mode 100644 webui/src/pages/bug/.Bug.tsx.swp
 create mode 100644 webui/src/pages/bug/.TimelineQuery.tsx.swp

(limited to 'webui/src/pages/bug/Bug.tsx')

diff --git a/webui/src/pages/bug/.Bug.tsx.swp b/webui/src/pages/bug/.Bug.tsx.swp
new file mode 100644
index 000000000..4a312e0da
Binary files /dev/null and b/webui/src/pages/bug/.Bug.tsx.swp differ
diff --git a/webui/src/pages/bug/.TimelineQuery.tsx.swp b/webui/src/pages/bug/.TimelineQuery.tsx.swp
new file mode 100644
index 000000000..0ad00f67d
Binary files /dev/null and b/webui/src/pages/bug/.TimelineQuery.tsx.swp differ
diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index d85c52966..46a443d56 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -78,7 +78,7 @@ function Bug({ bug }: Props) {
 
       <div className={classes.container}>
         <div className={classes.timeline}>
-          <TimelineQuery id={bug.id} />
+          <TimelineQuery bug={bug} />
           <IfLoggedIn>
             {() => (
               <div className={classes.commentForm}>
diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx
index 390f369e5..3993b5f71 100644
--- a/webui/src/pages/bug/Message.tsx
+++ b/webui/src/pages/bug/Message.tsx
@@ -9,7 +9,10 @@ import EditIcon from '@material-ui/icons/Edit';
 import Author, { Avatar } from 'src/components/Author';
 import Content from 'src/components/Content';
 import Date from 'src/components/Date';
+import IfLoggedIn from 'src/components/IfLoggedIn/IfLoggedIn';
 
+import { BugFragment } from './Bug.generated';
+import CommentForm from './CommentForm';
 import { AddCommentFragment } from './MessageCommentFragment.generated';
 import { CreateFragment } from './MessageCreateFragment.generated';
 
@@ -65,10 +68,11 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 type Props = {
+  bug: BugFragment;
   op: AddCommentFragment | CreateFragment;
 };
 
-function Message({ op }: Props) {
+function Message({ bug, op }: Props) {
   const classes = useStyles();
 
   const editComment = (id: String) => {
@@ -101,6 +105,13 @@ function Message({ op }: Props) {
           <Content markdown={op.message} />
         </section>
       </Paper>
+      <IfLoggedIn>
+        {() => (
+          <div>
+            <CommentForm bug={bug} />
+          </div>
+        )}
+      </IfLoggedIn>
     </article>
   );
 }
diff --git a/webui/src/pages/bug/Timeline.tsx b/webui/src/pages/bug/Timeline.tsx
index 6e1d242e0..60459a532 100644
--- a/webui/src/pages/bug/Timeline.tsx
+++ b/webui/src/pages/bug/Timeline.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
 
+import { BugFragment } from './Bug.generated';
 import LabelChange from './LabelChange';
 import Message from './Message';
 import SetStatus from './SetStatus';
@@ -18,9 +19,10 @@ const useStyles = makeStyles((theme) => ({
 
 type Props = {
   ops: Array<TimelineItemFragment>;
+  bug: BugFragment;
 };
 
-function Timeline({ ops }: Props) {
+function Timeline({ bug, ops }: Props) {
   const classes = useStyles();
 
   return (
@@ -28,9 +30,9 @@ function Timeline({ ops }: Props) {
       {ops.map((op, index) => {
         switch (op.__typename) {
           case 'CreateTimelineItem':
-            return <Message key={index} op={op} />;
+            return <Message key={index} op={op} bug={bug} />;
           case 'AddCommentTimelineItem':
-            return <Message key={index} op={op} />;
+            return <Message key={index} op={op} bug={bug} />;
           case 'LabelChangeTimelineItem':
             return <LabelChange key={index} op={op} />;
           case 'SetTitleTimelineItem':
diff --git a/webui/src/pages/bug/TimelineQuery.tsx b/webui/src/pages/bug/TimelineQuery.tsx
index 74eed52b2..d66c665b8 100644
--- a/webui/src/pages/bug/TimelineQuery.tsx
+++ b/webui/src/pages/bug/TimelineQuery.tsx
@@ -2,17 +2,18 @@ import React from 'react';
 
 import CircularProgress from '@material-ui/core/CircularProgress';
 
+import { BugFragment } from './Bug.generated';
 import Timeline from './Timeline';
 import { useTimelineQuery } from './TimelineQuery.generated';
 
 type Props = {
-  id: string;
+  bug: BugFragment;
 };
 
-const TimelineQuery = ({ id }: Props) => {
+const TimelineQuery = ({ bug }: Props) => {
   const { loading, error, data } = useTimelineQuery({
     variables: {
-      id,
+      id: bug.id,
       first: 100,
     },
   });
@@ -25,7 +26,7 @@ const TimelineQuery = ({ id }: Props) => {
     return null;
   }
 
-  return <Timeline ops={nodes} />;
+  return <Timeline ops={nodes} bug={bug} />;
 };
 
 export default TimelineQuery;
-- 
cgit v1.2.3


From 0cd5c84d59d00141bb997346f538b165644d233c Mon Sep 17 00:00:00 2001
From: Sascha <GlancingMind@outlook.com>
Date: Wed, 17 Mar 2021 13:14:07 +0100
Subject: Fix CommentForm margin

---
 webui/src/pages/bug/Bug.tsx         | 1 +
 webui/src/pages/bug/CommentForm.tsx | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

(limited to 'webui/src/pages/bug/Bug.tsx')

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index 46a443d56..83785a37f 100644
--- a/webui/src/pages/bug/Bug.tsx
+++ b/webui/src/pages/bug/Bug.tsx
@@ -59,6 +59,7 @@ const useStyles = makeStyles((theme) => ({
     ...theme.typography.body2,
   },
   commentForm: {
+    marginTop: theme.spacing(2),
     marginLeft: 48,
   },
 }));
diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx
index 773e7d0ec..fe9536ac6 100644
--- a/webui/src/pages/bug/CommentForm.tsx
+++ b/webui/src/pages/bug/CommentForm.tsx
@@ -15,7 +15,6 @@ import { TimelineDocument } from './TimelineQuery.generated';
 type StyleProps = { loading: boolean };
 const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   container: {
-    margin: theme.spacing(2, 0),
     padding: theme.spacing(0, 2, 2, 2),
   },
   textarea: {},
-- 
cgit v1.2.3


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/pages/bug/Bug.tsx')

diff --git a/webui/src/pages/bug/Bug.tsx b/webui/src/pages/bug/Bug.tsx
index bde8c5dd3..3b6b61e0a 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 v1.2.3