Make top bar fixed to the top - Closes #1727

i18n/locales/en/common.json

@@ -3,6 +3,7 @@
   " FAQ": " FAQ",
   " LSK": " LSK",
   " Make sure that you are using the latest version of Lisk Hub.": " Make sure that you are using the latest version of Lisk Hub.",
+  " of": " of",
   " or get in touch in via ": " or get in touch in via ",
   "About": "About",
   "Academy": "Academy",

src/components/app/app.css

@@ -20,10 +20,12 @@ body {
   z-index: 0;
 
   & > section {
-    margin-top: 25px;
+    margin-top: 85px;
     width: 100%;
     opacity: 0;
     transition: all ease 250ms;
+    position: relative;
+    z-index: -1;
   }
 
   &.loaded > section {

src/components/topBar/topBar.css

@@ -12,6 +12,8 @@
   background: var(--color-background-menu);
   border-bottom: 1px solid var(--color-light-gray);
   box-shadow: var(--box-shadow-header);
+  position: fixed;
+  z-index: 1;
 }
 
 .elements {

src/components/topBar/topBar.js

@@ -5,7 +5,6 @@ import MenuItems from './menuItems';
 import SearchBar from '../searchBar';
 import UserAccount from './userAccount';
 import Piwik from '../../utils/piwik';
-import Options from '../dialog/options';
 import { menuLinks } from './constants';
 import styles from './topBar.css';
 
@@ -19,37 +18,16 @@ class TopBar extends React.Component {
       isDropdownEnable: false,
     };
 
-    this.confirLogout = this.confirLogout.bind(this);
     this.onLogout = this.onLogout.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
     this.setDropdownRef = this.setDropdownRef.bind(this);
   }
 
-  confirLogout() {
-    this.props.logOut();
-    this.props.closeDialog();
-    this.props.history.replace(`${routes.dashboard.path}`);
-  }
-
   onLogout() {
     Piwik.trackingEvent('Header', 'button', 'Open logout dialog');
-
-    this.props.setActiveDialog({
-      childComponent: Options,
-      childComponentProps: {
-        title: this.props.t('Logout'),
-        text: this.props.t('After logging out of your account you will be able to access the Dashboard, Settings and Search.'),
-        firstButton: {
-          text: this.props.t('Cancel'),
-          onClickHandler: this.props.closeDialog,
-        },
-        secondButton: {
-          text: this.props.t('Logout'),
-          onClickHandler: this.confirLogout,
-        },
-      },
-    });
+    this.props.logOut();
+    this.props.history.replace(`${routes.dashboard.path}`);
   }
 
   handleClick() {

src/components/topBar/topBar.test.js

@@ -20,6 +20,10 @@ describe('TopBar', () => {
     location: { pathname: routes.dashboard.path },
     showDelegate: false,
     t: val => val,
+    logOut: sinon.spy(),
+    history: {
+      replace: () => {},
+    },
   };
 
   const history = {
@@ -82,9 +86,9 @@ describe('TopBar', () => {
   it('logout user when user do a click on logout function', () => {
     wrapper.find('.avatar').simulate('click');
     wrapper.update();
-    wrapper.find('span.dropdownOption').simulate('click');
+    wrapper.find('.logout').simulate('click');
     wrapper.update();
-    expect(myProps.setActiveDialog).have.been.calledWith();
+    expect(myProps.logOut).have.been.calledWith();
   });
 
   it('renders sign in component when user is logout', () => {

test/cypress/e2e/search.spec.js

@@ -174,7 +174,6 @@ describe('Search', () => {
     cy.get(ss.userAvatar).click();
     cy.get(ss.logoutBtn).click();
     cy.clearLocalStorage();
-    cy.get(ss.dialogButtons).eq(1).click();
     cy.get(ss.searchInput).click().type(`${accounts.delegate.username}`);
     cy.get(ss.delegateResults).eq(0).click();
     cy.get(ss.leftBlockAccountExplorer).find(ss.delegateName).should('have.text', accounts.delegate.username);