Merge pull request #18 from kawwong/header-logo

Add Mezzurite logo to header

src/devpanel/components/Header/Header.css

@@ -1,19 +1,27 @@
 @media only screen {
   .header {
+    align-items: center;
     background-color: var(--microsoft-gray-darkest);
     color: var(--microsoft-white);
+    display: flex;
+    justify-content: center;
     padding: 10px;
   }
 
   .header--text {
+    font-size: 16px;
     margin: 0;
     padding: 0;
-    text-align: center;
   }
 }
 
 @media only screen and (min-width: 540px) {
+  .header {
+    justify-content: start;
+  }
+
   .header--text {
+    font-size: 24px;
     text-align: start;
   }
 }

src/devpanel/components/Header/Header.js

@@ -1,9 +1,11 @@
 import React from 'react';
 
 import './Header.css';
+import Logo from './Logo';
 
 const Header = () => (
   <header className='header' role='banner'>
+    <Logo />
     <h1 className='header--text'>Mezzurite Developer Tools</h1>
   </header>
 );

src/devpanel/components/Header/Header.test.js

@@ -1,12 +1,14 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import ShallowRenderer from 'react-test-renderer/shallow';
 
 import Header from './Header';
 
 describe('Header.js', () => {
+  const renderer = new ShallowRenderer();
+
   it('should render the header', () => {
     const tree = renderer
-      .create(<Header />)
+      .render(<Header />)
       .toJSON();
     expect(tree).toMatchSnapshot();
   });

src/devpanel/components/Header/Logo.css

@@ -0,0 +1,18 @@
+@media only screen {
+  .logo-inner {
+    fill: var(--microsoft-white);
+  }
+
+  .logo {
+    background-color: var(--microsoft-orange);
+    border-radius: 16px;
+    margin-right: 8px;
+    padding: 2px;
+  }
+}
+
+@media only screen and (min-width: 540px) {
+  .logo {
+    padding: 4px;
+  }
+}

src/devpanel/components/Header/Logo.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import './Logo.css';
+
+const Logo = props => (
+  <svg
+    className='logo'
+    id='prefix__Layer_1'
+    x={0}
+    y={0}
+    viewBox='0 0 324 216'
+    xmlSpace='preserve'
+    {...props}
+  >
+    <path
+      className='logo-inner'
+      d='M101.18 19.57L66.2 27.04s-10.9 3.1-13.93 16.93L22.3 175.18s-7.76 22.34-19.38 24.27l34.82 6.21s14.84-1.41 25.13-34.71L89.51 41.43s4.1-17.35 11.67-21.86z'
+    />
+    <path
+      className='logo-inner'
+      d='M106.77 19.98s10.29-4.8 24.22 18.34c0 0 8.52 16.84 21.83 53.81.68 1.88 12.46 38.4 12.46 38.4s-7.23 34.23-24.34 38.11c-.89.2-28.73-86.3-31.15-93.36 0 0-10.9-29.63-16.05-33.01.01 0 4.86-20.88 13.03-22.29z'
+    />
+    <path
+      className='logo-inner'
+      d='M232.3 39.99s-2.56-8.12-13.15-10.76c-6.81-1.7-14.9-2.82-22.04 2.78l-28.27 98.88s-7.55 35.7-24.75 39.12l37.13.05s17.36-1.46 22.82-23.14l25.33-99.75c0-.02 1.27-6.43 2.93-7.18z'
+    />
+    <path
+      className='logo-inner'
+      d='M213.52 25.26h27.37s26.04 2.14 32.87 20.83l27.91 99.4s1.95 10.82 19.38 19.75l-41.19 5.66s-11.41-6.82-18.76-28.85l-25.59-101.2s-1.66-13.98-21.99-15.59z'
+    />
+    <path d='M19.01 182.83l9.57 1.54-1.8 2.67-9.27-1.4zM22.88 172.65l10.5 1.7-.85 2.8-10.38-1.56zM25.24 162.36l17.8 2.89-.82 3.32-17.75-2.91zM27.44 152.61l10.53 1.7-.69 2.99-10.48-1.73zM29.84 142.22l10.73 1.6-.72 2.96-10.69-1.61zM32.17 131.96l17.81 2.99-.67 3.28-17.88-2.97zM34.45 122.01l10.53 1.7-.7 2.99-10.51-1.74zM36.79 111.77l10.74 1.59-.73 2.97-10.68-1.61zM39.15 101.39l17.95 2.29-.66 3.24-18.04-2.22zM41.42 91.51l10.62 1.28-.69 3-10.61-1.33zM43.65 81.7l10.83 1.18-.73 3.02-10.78-1.25zM46.18 70.64l17.95 2.29-.66 3.24-18.04-2.23zM48.7 59.44l10.62 1.3-.7 3.03-10.56-1.37zM51.28 48.39l10.93.81-.77 3.13-10.83-.99z' />
+  </svg>
+);
+
+export default Logo;

src/devpanel/components/Header/Logo.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import ShallowRenderer from 'react-test-renderer/shallow';
+
+import Logo from './Logo';
+
+describe('Logo.js', () => {
+  const renderer = new ShallowRenderer();
+
+  it('should render the logo', () => {
+    const tree = renderer
+      .render(<Logo />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/devpanel/components/Header/__snapshots__/Logo.test.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Logo.js should render the logo 1`] = `
+<svg
+  className="logo"
+  id="prefix__Layer_1"
+  viewBox="0 0 324 216"
+  x={0}
+  xmlSpace="preserve"
+  y={0}
+>
+  <path
+    className="logo-inner"
+    d="M101.18 19.57L66.2 27.04s-10.9 3.1-13.93 16.93L22.3 175.18s-7.76 22.34-19.38 24.27l34.82 6.21s14.84-1.41 25.13-34.71L89.51 41.43s4.1-17.35 11.67-21.86z"
+  />
+  <path
+    className="logo-inner"
+    d="M106.77 19.98s10.29-4.8 24.22 18.34c0 0 8.52 16.84 21.83 53.81.68 1.88 12.46 38.4 12.46 38.4s-7.23 34.23-24.34 38.11c-.89.2-28.73-86.3-31.15-93.36 0 0-10.9-29.63-16.05-33.01.01 0 4.86-20.88 13.03-22.29z"
+  />
+  <path
+    className="logo-inner"
+    d="M232.3 39.99s-2.56-8.12-13.15-10.76c-6.81-1.7-14.9-2.82-22.04 2.78l-28.27 98.88s-7.55 35.7-24.75 39.12l37.13.05s17.36-1.46 22.82-23.14l25.33-99.75c0-.02 1.27-6.43 2.93-7.18z"
+  />
+  <path
+    className="logo-inner"
+    d="M213.52 25.26h27.37s26.04 2.14 32.87 20.83l27.91 99.4s1.95 10.82 19.38 19.75l-41.19 5.66s-11.41-6.82-18.76-28.85l-25.59-101.2s-1.66-13.98-21.99-15.59z"
+  />
+  <path
+    d="M19.01 182.83l9.57 1.54-1.8 2.67-9.27-1.4zM22.88 172.65l10.5 1.7-.85 2.8-10.38-1.56zM25.24 162.36l17.8 2.89-.82 3.32-17.75-2.91zM27.44 152.61l10.53 1.7-.69 2.99-10.48-1.73zM29.84 142.22l10.73 1.6-.72 2.96-10.69-1.61zM32.17 131.96l17.81 2.99-.67 3.28-17.88-2.97zM34.45 122.01l10.53 1.7-.7 2.99-10.51-1.74zM36.79 111.77l10.74 1.59-.73 2.97-10.68-1.61zM39.15 101.39l17.95 2.29-.66 3.24-18.04-2.22zM41.42 91.51l10.62 1.28-.69 3-10.61-1.33zM43.65 81.7l10.83 1.18-.73 3.02-10.78-1.25zM46.18 70.64l17.95 2.29-.66 3.24-18.04-2.23zM48.7 59.44l10.62 1.3-.7 3.03-10.56-1.37zM51.28 48.39l10.93.81-.77 3.13-10.83-.99z"
+  />
+</svg>
+`;

src/devpanel/index.css

@@ -6,6 +6,7 @@
   --microsoft-gray-lightest: #e6e6e6;
   --microsoft-white: #fff;
   --microsoft-blue: #0078d7;
+  --microsoft-orange: #d83b01;
 
   background-color: var(--microsoft-gray-lightest);
   color: var(--microsoft-gray-darkest);