webui: add logo

ludovicm67 created

Change summary

misc/logo/logo-alpha-flat-white.svg | 50 +++++++++++++++++++++++++++++++
webui/public/logo.svg               | 50 +++++++++++++++++++++++++++++++
webui/src/App.js                    | 20 ++++++++----
3 files changed, 113 insertions(+), 7 deletions(-)

Detailed changes

misc/logo/logo-alpha-flat-white.svg 🔗

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 1024 1024"
+   version="1.1"
+   id="svg26"
+   sodipodi:docname="logo-alpha-flat-outline.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata30">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1018"
+     id="namedview28"
+     showgrid="false"
+     inkscape:zoom="0.4609375"
+     inkscape:cx="29.289416"
+     inkscape:cy="396.82507"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g24" />
+  <defs
+     id="defs10">
+    <path
+       id="b"

webui/public/logo.svg 🔗

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 1024 1024"
+   version="1.1"
+   id="svg26"
+   sodipodi:docname="logo.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata30">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1018"
+     id="namedview28"
+     showgrid="false"
+     inkscape:zoom="0.4609375"
+     inkscape:cx="-437.15126"
+     inkscape:cy="388.1471"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g24" />
+  <defs
+     id="defs10">
+    <path
+       id="b"

webui/src/App.js 🔗

@@ -21,13 +21,19 @@ const theme = createMuiTheme({
 
 const useStyles = makeStyles(theme => ({
   offset: theme.mixins.toolbar,
+  filler: {
+    flexGrow: 1,
+  },
   appTitle: {
     ...theme.typography.h6,
     color: 'white',
     textDecoration: 'none',
+    display: 'flex',
+    alignItems: 'center',
   },
-  headerLeft: {
-    flexGrow: 1,
+  logo: {
+    height: '42px',
+    marginRight: theme.spacing(2),
   },
 }));
 
@@ -39,11 +45,11 @@ export default function App() {
       <CssBaseline />
       <AppBar position="fixed" color="primary">
         <Toolbar>
-          <div className={classes.headerLeft}>
-            <Link to="/" className={classes.appTitle}>
-              git-bug webui
-            </Link>
-          </div>
+          <Link to="/" className={classes.appTitle}>
+            <img src="logo.svg" className={classes.logo} alt="git-bug" />
+            git-bug
+          </Link>
+          <div className={classes.filler}></div>
           <CurrentIdentity />
         </Toolbar>
       </AppBar>