Skip to content

Commit

Permalink
Merge pull request #651 from henry-deriv/henry/wall-4250/make-header-…
Browse files Browse the repository at this point in the history 
…same-as-deriv-app

Henry/wall 4250/make header same as deriv app
  • Loading branch information
@balakrishna-deriv
balakrishna-deriv authored Jun 11, 2024
2 parents 95dd4da + cf9a2b9 commit 4af07b1
Show file tree
Hide file tree
Showing 8 changed files with 85 additions and 23 deletions.
10 changes: 7 additions & 3 deletions build/webpack/plugins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,15 @@ class WatchRunPlugin {
this.grunt.log.ok('Build started at:', new Date().toString().grey);

if (comp.modifiedFiles) {
const changed_files = Array.from(comp.modifiedFiles, (file) => `\n ${file}`).join('');
const changed_files = Array.from(comp.modifiedFiles);

this.grunt.log.ok(`Changed file${changed_files.length > 1 ? 's' : ''}:`);
changed_files.forEach((file) =>{

changed_files.forEach((file) => {
const file_path = file.replace(process.cwd(), '.').match(/(.*\/)(.*(?!\/))$/);
this.grunt.log.write(' -'.green, file_path[1].grey, `\b${file_path[2]}\n`);
if (file_path) {
this.grunt.log.write(' -'.green, file_path[1].grey, `\b${file_path[2]}\n`);
}
});
}
});
Expand Down
1 change: 1 addition & 0 deletions src/images/pages/header/deriv-com-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/images/pages/header/ic-appstore-home.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/javascript/app/base/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ const Header = (() => {
bindClick();
});
if (Client.isLoggedIn()) {
const wallet_divider = getElementById('wallet-divider');
if (wallet_divider) wallet_divider.style.display = 'none';
displayAccountStatus();
}
fullscreen_map.event.forEach(event => {
Expand Down Expand Up @@ -190,6 +192,10 @@ const Header = (() => {
el.src = Url.urlForStatic(`${wallet_header_icon_base_path}wallet-deriv-logo.svg?${process.env.BUILD_HASH}`);
});

applyToAllElements('.deriv-com-logo-mobile', (el) => {
el.src = Url.urlForStatic(`${header_icon_base_path}deriv-com-logo.svg?${process.env.BUILD_HASH}`);
});

applyToAllElements('#mobile__platform-switcher-icon-trade', (el) => {
el.src = Url.urlForStatic(`${header_icon_base_path}ic-trade.svg?${process.env.BUILD_HASH}`);
});
Expand Down
25 changes: 21 additions & 4 deletions src/sass/_common/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,12 @@ body .header, .wallet__header {
border: none;
z-index: 1;

&-divider {
background: var(--general-section-2);
height: 30px;
width: 1px;
margin-left: 8px;
}
.is-login, .is-logout {
display: none;
}
Expand Down Expand Up @@ -209,6 +215,11 @@ body .header, .wallet__header {
&-item {
height: 100%;
align-self: center;

&--label {
display: flex;
align-items: center;
}
}
&-links {
display: flex;
Expand Down Expand Up @@ -256,6 +267,12 @@ body .header, .wallet__header {
}
}
&__hamburger {
&--container {
border-right: 1px solid var(--general-section-1);
height: 100%;
align-items: center;
display: flex;
}
padding: 0 12px;
width: 20px;
height: 20px;
Expand Down Expand Up @@ -1048,6 +1065,9 @@ body .mobile {
}

@media only screen and (max-width: 879px) {
.mobile-hide-wallet {
display: none;
}
.mobile-hide {
display: none !important;
}
Expand All @@ -1058,9 +1078,6 @@ body .mobile {
height: 40px !important;

&__menu {
&-left {
border-right: 1px solid var(--general-section-1);
}
&-acc {
position: unset;
}
Expand Down Expand Up @@ -1153,7 +1170,7 @@ body #topbar {
}
}

.url-appstore {
.url-appstore, .url-deriv-com-mobile {
display: flex;
font-weight: normal;
text-transform: none !important;
Expand Down
31 changes: 23 additions & 8 deletions src/templates/_common/_layout/header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,41 @@ const Header = () => (
</div>
<div id='deriv__header' className='header__menu-items'>
<div className='header__menu-left'>
<img id='header__hamburger' className='header__hamburger mobile-show' />
<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' />
<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'>
<a className='url-deriv-com' target='_blank' rel='noopener noreferrer' href='https://deriv.com'>
<img className='deriv-com-logo' />
</a>
</div>
<div className='header__menu-item header__menu-links client_logged_in invisible mobile-hide'>
<div className='header-menu-item header-menu-links is-logout'>
<a className='url-deriv-com' target='_blank' rel='noopener noreferrer' href='https://deriv.com'>
<img className='deriv-com-logo' />
</a>
</div>
<div className='header-divider is-logout mobile-hide' />
<div className='header__menu-item header__menu-links mobile-hide'>
<a className='url-appstore header__menu-links-item'>
<span>
<span className='header__menu-item--label'>
<img id='appstore-icon' className='header__icon-text appstore-icon' />
{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>
<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>
<span className='header__menu-item--label'>
<img id='cashier-icon' className='header__icon-text' />
{it.L('Cashier')}
</span>
Expand Down
25 changes: 19 additions & 6 deletions src/templates/_common/_layout/wallet-header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,31 @@ const WalletHeader = () => (
</div>
<div className='wallet__header-menu-items'>
<div className='wallet__header-menu-left'>
<img id='header__hamburger' className='header__hamburger mobile-show' />
<div className='wallet__header-menu-item wallet__header-menu-links client_logged_in invisible mobile-hide'>
<span className='wallet__header__hamburger--container'>
<img id='header__hamburger' className='header__hamburger mobile-show' />
</span>
<div className='wallet__header-menu-item wallet__header-menu-links is-logout'>
<a className='url-deriv-com' target='_blank' rel='noopener noreferrer' href='https://deriv.com'>
<img className='deriv-com-logo' />
</a>
</div>
<div className='wallet__header-menu-item wallet__header-menu-links client_logged_in invisible mobile-hide'>
<a className='url-wallet-apps'>
<img className='wallet-apps-logo' />
<div id='wallet-divider' className='wallet__header-divider mobile-hide-wallet' />
<div className='header__menu-item header__menu-links mobile-hide'>
<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')}
</span>
</a>
</div>
<div className='wallet__header-divider client_logged_in invisible mobile-hide' />
<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-links client_logged_in invisible mobile-hide'>
<a className='url-reports-positions header__menu-links-item'>
<span>
<span className='header__menu-item--label'>
<img className='header__icon-text reports-icon' />
{it.L('Reports')}
</span>
Expand Down Expand Up @@ -80,6 +87,12 @@ const WalletHeader = () => (
</div>
<a className='url-wallets-deposit btn btn--primary header__deposit mobile-hide'>{it.L('Manage funds')}</a>
</div>
<div className='header__menu-right is-logout'>
<div className='header__btn'>
<button id='btn__login' className='btn btn--tertiary header__btn-login'>{it.L('Log in')}</button>
<a id='btn__signup' className='btn btn--primary header__btn-signup' target='_blank' rel='noopener noreferrer'>{it.L('Sign up')}</a>
</div>
</div>
</div>
<MobileMenu />
</div>
Expand Down
8 changes: 7 additions & 1 deletion src/templates/_common/components/mobile_menu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,13 @@ const MobileMenu = () => (
<div id='mobile__platform-switcher-dropdown' className='mobile__platform-switcher-dropdown' />
</div>
<div className='mobile__platform-switcher-lists'>
<div id='mobile__platform-switcher-item-appstore' className='mobile__platform-switcher-item client_logged_in invisible'>
<div className='mobile__platform-switcher-item'>
<a className='url-deriv-com-mobile' target='_blank' rel='noopener noreferrer' href='https://deriv.com'>
<img className='mobile__platform-switcher-icon deriv-com-logo-mobile' />
<div className='mobile__platform-switcher-text'>{'Deriv.com'}</div>
</a>
</div>
<div id='mobile__platform-switcher-item-appstore' className='mobile__platform-switcher-item'>
<a id='url-appstore' className='url-appstore'>
<img id='appstore-icon' className='mobile__platform-switcher-icon appstore-icon' />
<div className='mobile__platform-switcher-text'>{it.L('Trader\'s hub')}</div>
Expand Down

0 comments on commit 4af07b1

Please sign in to comment.