Merge pull request #1729 from LiskHQ/1727-make-topBar-fixed-to-the-top

Make top bar fixed to the top - Closes #1727
LiskHQ · Feb 5, 2019 · 0847ca2 · 0847ca2
2 parents 0b54e01 + 7693db0
commit 0847ca2
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 30 deletions.
diff --git a/src/components/app/app.css b/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 {

diff --git a/src/components/topBar/topBar.css b/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 {

diff --git a/src/components/topBar/topBar.js b/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() {

diff --git a/src/components/topBar/topBar.test.js b/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', () => {

diff --git a/test/constants/selectors.js b/test/constants/selectors.js
@@ -72,7 +72,6 @@ const ss = {
   transactionId: '.transaction-id .copy-title',
   logoutBtn: '.logout',
   userAvatar: '.user-avatar',
-  dialogButtons: '.ok-button',
   emptyResultsMessage: '.empty-message',
   revealCheckbox: '.reveal-checkbox',
   passphraseTextarea: 'textarea.passphrase',

diff --git a/test/cypress/e2e/account.spec.js b/test/cypress/e2e/account.spec.js
@@ -24,6 +24,7 @@ describe('Account', () => {
     cy.visit(`${urls.accounts}/${accounts.genesis.address}`);
     cy.get(ss.leftBlockAccountExplorer).find(ss.delegateName).should('not.exist');
     cy.visit(`${urls.accounts}/${accounts.delegate.address}`);
+    cy.wait(1000); // Avoid failing on jenkins
     cy.get(ss.leftBlockAccountExplorer).find(ss.delegateName).contains(accounts.delegate.username);
   });
 

diff --git a/test/cypress/e2e/search.spec.js b/test/cypress/e2e/search.spec.js
@@ -173,8 +173,6 @@ describe('Search', () => {
     cy.visit('/');
     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);