Merge pull request #1020 from pixelated/logout_button_header

|#973| Thais + Sriram | Adds logout component to be shown on the header

3 files changed, 15 insertions, 17 deletions

diff --git a/web-ui/src/common/header/header.js b/web-ui/src/common/header/header.js
index 50c863b5..715d54c6 100644
--- a/web-ui/src/common/header/header.js
+++ b/web-ui/src/common/header/header.js
@@ -16,10 +16,10 @@
  */
 
 import React from 'react';
-import { translate } from 'react-i18next';
+import Logout from 'src/common/logout/logout';
 import './header.scss';
 
-export const Header = ({ t }) => (
+export const Header = () => (
   <header className='header-wrapper'>
     <div className='header-content'>
       <a href='/'>
@@ -30,17 +30,10 @@ export const Header = ({ t }) => (
         />
       </a>
       <div className='header-icons'>
-        <a href='/'>
-          <span>{t('logout')}</span>
-          <i className='fa fa-sign-out' aria-hidden='true' />
-        </a>
+        <Logout />
       </div>
     </div>
   </header>
 );
 
-Header.propTypes = {
-  t: React.PropTypes.func.isRequired
-};
-
-export default translate('', { wait: true })(Header);
+export default Header;
diff --git a/web-ui/src/common/header/header.scss b/web-ui/src/common/header/header.scss
index d56629bf..3e10ba39 100644
--- a/web-ui/src/common/header/header.scss
+++ b/web-ui/src/common/header/header.scss
@@ -28,7 +28,6 @@
 
 .header-content {
   display: flex;
-  align-items: center;
 }
 
 .header-logo {
@@ -41,7 +40,7 @@
 
   position: absolute;
   right: 6%;
-  top: 13px;
+  line-height: 0;
 
   span {
     display: none;
@@ -51,6 +50,7 @@
     font-size: 1.3em;
     margin-left: 0.4em;
     color: $medium_light_grey;
+    overflow: visible;
   }
 }
 
@@ -78,6 +78,7 @@
       font-style: normal;
       font-size: 0.7em;
       padding-bottom: 0.1em;
+      line-height: 36px;
     }
 
     .fa {
diff --git a/web-ui/src/common/header/header.spec.js b/web-ui/src/common/header/header.spec.js
index 82e29e1c..81a952c7 100644
--- a/web-ui/src/common/header/header.spec.js
+++ b/web-ui/src/common/header/header.spec.js
@@ -2,16 +2,20 @@ import { shallow } from 'enzyme';
 import expect from 'expect';
 import React from 'react';
 import { Header } from 'src/common/header/header';
+import Logout from 'src/common/logout/logout';
 
 describe('Header', () => {
   let header;
 
   beforeEach(() => {
-    const mockTranslations = key => key;
-    header = shallow(<Header t={mockTranslations} />);
+    header = shallow(<Header />);
   });
 
-  it('renders the header content', () => {
-    expect(header.find('header').text()).toContain('logout');
+  it('renders the header containing the logout button', () => {
+    expect(header.find('header').find(Logout)).toExist();
+  });
+
+  it('renders the header pixelated logo', () => {
+    expect(header.find('header').find('img').props().alt).toEqual('Pixelated');
   });
 });