diff options
Diffstat (limited to 'webui/src/App.js')
-rw-r--r-- | webui/src/App.js | 32 |
1 files changed, 28 insertions, 4 deletions
diff --git a/webui/src/App.js b/webui/src/App.js index 4a52eca1..b9c57327 100644 --- a/webui/src/App.js +++ b/webui/src/App.js @@ -1,5 +1,6 @@ import AppBar from '@material-ui/core/AppBar'; import CssBaseline from '@material-ui/core/CssBaseline'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/styles'; import Toolbar from '@material-ui/core/Toolbar'; import React from 'react'; @@ -8,12 +9,31 @@ import { Link } from 'react-router-dom'; import BugQuery from './bug/BugQuery'; import ListQuery from './list/ListQuery'; +import CurrentIdentity from './CurrentIdentity'; + +const theme = createMuiTheme({ + palette: { + primary: { + main: '#263238', + }, + }, +}); const useStyles = makeStyles(theme => ({ + offset: theme.mixins.toolbar, + filler: { + flexGrow: 1, + }, appTitle: { ...theme.typography.h6, color: 'white', textDecoration: 'none', + display: 'flex', + alignItems: 'center', + }, + logo: { + height: '42px', + marginRight: theme.spacing(2), }, })); @@ -21,19 +41,23 @@ export default function App() { const classes = useStyles(); return ( - <> + <ThemeProvider theme={theme}> <CssBaseline /> - <AppBar position="static" color="primary"> + <AppBar position="fixed" color="primary"> <Toolbar> <Link to="/" className={classes.appTitle}> - git-bug webui + <img src="logo.svg" className={classes.logo} alt="git-bug" /> + git-bug </Link> + <div className={classes.filler}></div> + <CurrentIdentity /> </Toolbar> </AppBar> + <div className={classes.offset} /> <Switch> <Route path="/" exact component={ListQuery} /> <Route path="/bug/:id" exact component={BugQuery} /> </Switch> - </> + </ThemeProvider> ); } |