@@ -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;
@@ -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} />
@@ -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>
);
}