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  filler: {
25    flexGrow: 1,
26  },
27  appTitle: {
28    ...theme.typography.h6,
29    color: 'white',
30    textDecoration: 'none',
31    display: 'flex',
32    alignItems: 'center',
33  },
34  logo: {
35    height: '42px',
36    marginRight: theme.spacing(2),
37  },
38}));
39
40export default function App() {
41  const classes = useStyles();
42
43  return (
44    <ThemeProvider theme={theme}>
45      <CssBaseline />
46      <AppBar position="fixed" color="primary">
47        <Toolbar>
48          <Link to="/" className={classes.appTitle}>
49            <img src="logo.svg" className={classes.logo} alt="git-bug" />
50            git-bug
51          </Link>
52          <div className={classes.filler}></div>
53          <CurrentIdentity />
54        </Toolbar>
55      </AppBar>
56      <div className={classes.offset} />
57      <Switch>
58        <Route path="/" exact component={ListQuery} />
59        <Route path="/bug/:id" exact component={BugQuery} />
60      </Switch>
61    </ThemeProvider>
62  );
63}