App.js

 1import AppBar from '@material-ui/core/AppBar';
 2import CssBaseline from '@material-ui/core/CssBaseline';
 3import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 4import { makeStyles } from '@material-ui/styles';
 5import Toolbar from '@material-ui/core/Toolbar';
 6import React from 'react';
 7import { Route, Switch } from 'react-router';
 8import { Link } from 'react-router-dom';
 9
10import BugQuery from './bug/BugQuery';
11import ListQuery from './list/ListQuery';
12import CurrentIdentity from './CurrentIdentity';
13
14const theme = createMuiTheme({
15  palette: {
16    primary: {
17      main: '#263238',
18    },
19  },
20});
21
22const useStyles = makeStyles(theme => ({
23  offset: theme.mixins.toolbar,
24  appTitle: {
25    ...theme.typography.h6,
26    color: 'white',
27    textDecoration: 'none',
28  },
29  headerLeft: {
30    flexGrow: 1,
31  },
32}));
33
34export default function App() {
35  const classes = useStyles();
36
37  return (
38    <ThemeProvider theme={theme}>
39      <CssBaseline />
40      <AppBar position="fixed" color="primary">
41        <Toolbar>
42          <div className={classes.headerLeft}>
43            <Link to="/" className={classes.appTitle}>
44              git-bug webui
45            </Link>
46          </div>
47          <CurrentIdentity />
48        </Toolbar>
49      </AppBar>
50      <div className={classes.offset} />
51      <Switch>
52        <Route path="/" exact component={ListQuery} />
53        <Route path="/bug/:id" exact component={BugQuery} />
54      </Switch>
55    </ThemeProvider>
56  );
57}