diff --git a/misc/logo/logo-alpha-flat-white.svg b/misc/logo/logo-alpha-flat-white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..69f8ef5013282cd4ff0e56ea9e5af7a953d38a2e
--- /dev/null
+++ b/misc/logo/logo-alpha-flat-white.svg
@@ -0,0 +1,95 @@
+
+
diff --git a/webui/public/logo.svg b/webui/public/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..05f175b030c57985aee0ebac4088c6c18affc8a6
--- /dev/null
+++ b/webui/public/logo.svg
@@ -0,0 +1,95 @@
+
+
diff --git a/webui/src/App.js b/webui/src/App.js
index 4a52eca1dbed3f201aadb54d5d20431ac2b1c2f2..b9c573274f11d0b6d027e3fd728ab36676febf59 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 (
- <>
+
-
+
- git-bug webui
+ 
+ git-bug
+
+
+
-
+
);
}
diff --git a/webui/src/CurrentIdentity.js b/webui/src/CurrentIdentity.js
new file mode 100644
index 0000000000000000000000000000000000000000..451979fb7c2afc77dc7dcdacf922aeb6510d4955
--- /dev/null
+++ b/webui/src/CurrentIdentity.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import gql from 'graphql-tag';
+import { Query } from 'react-apollo';
+import Avatar from '@material-ui/core/Avatar';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles(theme => ({
+ displayName: {
+ marginLeft: theme.spacing(2),
+ },
+}));
+
+const QUERY = gql`
+ {
+ defaultRepository {
+ userIdentity {
+ displayName
+ avatarUrl
+ }
+ }
+ }
+`;
+
+const CurrentIdentity = () => {
+ const classes = useStyles();
+ return (
+
+ {({ loading, error, data }) => {
+ if (error || loading || !data.defaultRepository.userIdentity)
+ return null;
+ const user = data.defaultRepository.userIdentity;
+ return (
+ <>
+
+ {user.displayName.charAt(0).toUpperCase()}
+
+ {user.displayName}
+
+ );
+ }}
+
+ );
+};
+
+export default CurrentIdentity;