Skip to content

Farabi/grwt-5822/fix-inconsistent-header #1168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+26 −20
Open

Farabi/grwt-5822/fix-inconsistent-header #1168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions src/sass/_common/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ body .header, .wallet__header {
background: var(--general-section-2);
height: 30px;
width: 1px;
margin-left: 8px;
margin-left: 4px;
}
.is-login, .is-logout {
display: none;
Expand Down Expand Up @@ -238,7 +238,11 @@ body .header, .wallet__header {
text-decoration: none;
letter-spacing: 0;
text-transform: capitalize;
padding: 0 8px;
padding: 0 16px;

&.url-appstore {
padding: 0 10px 0 16px;
}
word-wrap: break-word;
}
&-item {
Expand Down Expand Up @@ -352,6 +356,7 @@ body .header, .wallet__header {
}
&__expand {
transition: transform 500ms;
margin: 0 8px;

&-light {
transition: transform 500ms;
Expand All @@ -363,7 +368,7 @@ body .header, .wallet__header {
}
&__notification {
height: min-content;
margin-right: 10px;
margin: 0 10px;
position: relative;

&-icon {
Expand Down
35 changes: 18 additions & 17 deletions src/templates/_common/_layout/header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Header = () => (
<span className='header__hamburger--container'>
<img id='header__hamburger' className='header__hamburger mobile-show' />
</span>
<div className='header-menu-item header-menu-links client_logged_in invisible mobile-hide'>
<div className='header-menu-item header-menu-links client_logged_in invisible'>
<a className='url-deriv-com' target='_blank' rel='noopener noreferrer' href='https://deriv.com'>
<img className='deriv-com-logo' />
</a>
Expand All @@ -28,34 +28,31 @@ const Header = () => (
<a className='url-appstore header__menu-links-item'>
<span className='header__menu-item--label'>
<img id='appstore-icon' className='header__icon-text appstore-icon' />
{it.L('Trader\'s hub')}
{it.L('Trader\'s Hub')}
</span>
</a>
</div>
<div id='platform__switcher' className='header__menu-item platform__switcher mobile-hide'>
<img className='header__logo' />
<img id='platform__switcher-expand' className='header__icon header__expand' />
</div>
<div className='header__menu-item header__menu-links client_logged_in invisible mobile-hide'>
<a className='url-reports-positions header__menu-links-item'>
<span className='header__menu-item--label'>
<img className='header__icon-text reports-icon' />
{it.L('Reports')}
</span>
</a>
<a className='url-cashier-deposit header__menu-links-item'>
<span className='header__menu-item--label'>
<img id='cashier-icon' className='header__icon-text' />
{it.L('Cashier')}
</span>
</a>
<a className='url-reports-positions header__menu-links-item'>
<span className='header__menu-item--label'>
<img className='header__icon-text reports-icon' />
{it.L('Reports')}
</span>
</a>
</div>
<div id='platform__switcher' className='header__menu-item platform__switcher mobile-hide'>
<img className='header__logo' />
<img id='platform__switcher-expand' className='header__icon header__expand' />
</div>
</div>
<div className='header__menu-right client_logged_in invisible'>
<Notification />
<a className='url-account-details header__account header__menu-item mobile-hide'>
<img className='header__icon-button' id='header__account-settings' />
</a>
<a className='url-cashier-deposit btn btn--primary header__deposit mobile-hide'>{it.L('Deposit')}</a>
<div className='header__divider mobile-hide' />
<div className='header__menu-item header__menu-acc' id='acc_switcher'>
<div className='header__acc-info'>
Expand Down Expand Up @@ -149,7 +146,11 @@ const Header = () => (
</div>
</div>
</div>
<a className='url-cashier-deposit btn btn--primary header__deposit mobile-hide'>{it.L('Deposit')}</a>
<div className='header__divider' />
<Notification />
<a className='url-account-details header__account header__menu-item mobile-hide'>
<img className='header__icon-button' id='header__account-settings' />
</a>
</div>
<div className='header__menu-right is-logout'>
<div className='header__btn'>
Expand Down
Loading