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

3 files changed, 7 insertions, 8 deletions

diff --git a/web-ui/src/common/header/header.js b/web-ui/src/common/header/header.js
index 50c863b5..fde93817 100644
--- a/web-ui/src/common/header/header.js
+++ b/web-ui/src/common/header/header.js
@@ -17,6 +17,7 @@
 
 import React from 'react';
 import { translate } from 'react-i18next';
+import Logout from 'src/common/logout/logout';
 import './header.scss';
 
 export const Header = ({ t }) => (
@@ -26,14 +27,11 @@ export const Header = ({ t }) => (
         <img
           className='header-logo'
           src='/public/images/logo-orange.svg'
-          alt='Pixelated'
+          alt={t('Pixelated')}
         />
       </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>
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..e5004bcc 100644
--- a/web-ui/src/common/header/header.spec.js
+++ b/web-ui/src/common/header/header.spec.js
@@ -12,6 +12,6 @@ describe('Header', () => {
   });
 
   it('renders the header content', () => {
-    expect(header.find('header').text()).toContain('logout');
+    expect(header.find('header').text()).toContain('Logout');
   });
 });