Skip to content
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

Henry/wall 4250/make header same as deriv app #651

Merged
merged 10 commits into from
Jun 11, 2024
Merged

Henry/wall 4250/make header same as deriv app #651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
bd6353b
fix: make header for wallets and reguler headers
henry-deriv May 31, 2024
f617112
fix: mimic regular and wallet header with dtrader production
henry-deriv May 31, 2024
aa2ba2c
Merge branch 'master' of github.com:deriv-com/smarttrader into henry/…
henry-deriv May 31, 2024
cba94a0
fix: remove extra space
henry-deriv Jun 4, 2024
016a980
fix: move traders hub to left side of platform switcher and show trad…
henry-deriv Jun 4, 2024
e47a864
fix: remove unused code
henry-deriv Jun 5, 2024
b4c24c4
fix: swap logo
henry-deriv Jun 5, 2024
e5efc5e
fix: add deriv.com to mobile menu
henry-deriv Jun 5, 2024
2fb9b73
Merge branch 'master' of github.com:deriv-com/smarttrader into henry/…
henry-deriv Jun 5, 2024
cf9a2b9
fix: label and icon alignment
henry-deriv Jun 5, 2024
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
10 changes: 7 additions & 3 deletions build/webpack/plugins.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading