From 32e974234b240f268d1580c683bd350716457052 Mon Sep 17 00:00:00 2001 From: Akmal Djumakhodjaev Date: Thu, 10 Jul 2025 16:38:07 +0800 Subject: [PATCH] feat: add new icons for security, verification, and account limits; update header layout and styles --- src/images/pages/footer/ic-account-limits.svg | 1 + .../pages/footer/ic-responsible-trading.svg | 1 + src/images/pages/footer/ic-security.svg | 1 + src/images/pages/footer/ic-verification.svg | 1 + src/javascript/app/base/header.js | 16 ++++++ src/sass/_common/header.scss | 52 ++++++++++++++++--- src/templates/_common/_layout/layout.jsx | 23 +++++--- 7 files changed, 80 insertions(+), 15 deletions(-) create mode 100644 src/images/pages/footer/ic-account-limits.svg create mode 100644 src/images/pages/footer/ic-responsible-trading.svg create mode 100644 src/images/pages/footer/ic-security.svg create mode 100644 src/images/pages/footer/ic-verification.svg diff --git a/src/images/pages/footer/ic-account-limits.svg b/src/images/pages/footer/ic-account-limits.svg new file mode 100644 index 00000000000..94929f85f20 --- /dev/null +++ b/src/images/pages/footer/ic-account-limits.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/pages/footer/ic-responsible-trading.svg b/src/images/pages/footer/ic-responsible-trading.svg new file mode 100644 index 00000000000..0b8b38405ff --- /dev/null +++ b/src/images/pages/footer/ic-responsible-trading.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/pages/footer/ic-security.svg b/src/images/pages/footer/ic-security.svg new file mode 100644 index 00000000000..900136604f5 --- /dev/null +++ b/src/images/pages/footer/ic-security.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/pages/footer/ic-verification.svg b/src/images/pages/footer/ic-verification.svg new file mode 100644 index 00000000000..4318f08570b --- /dev/null +++ b/src/images/pages/footer/ic-verification.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/javascript/app/base/header.js b/src/javascript/app/base/header.js index f0646cc9298..a644e14bb45 100644 --- a/src/javascript/app/base/header.js +++ b/src/javascript/app/base/header.js @@ -221,6 +221,14 @@ const Header = (() => { el.src = Url.urlForStatic(`${header_icon_base_path}ic-livechat.svg?${process.env.BUILD_HASH}`); }); + applyToAllElements('.security-icon', (el) => { + el.src = Url.urlForStatic(`${header_icon_base_path}ic-security.svg?${process.env.BUILD_HASH}`); + }); + + applyToAllElements('.speed-icon', (el) => { + el.src = Url.urlForStatic(`${header_icon_base_path}ic-verification.svg?${process.env.BUILD_HASH}`); + }); + applyToAllElements('.btn__close', (el) => { el.src = Url.urlForStatic(`${header_icon_base_path}ic-close.svg?${process.env.BUILD_HASH}`); }); @@ -936,6 +944,14 @@ const Header = (() => { const topbar_whatsapp = getElementById('topbar-whatsapp'); topbar_whatsapp.addEventListener('click', () => window.open('https://wa.me/35699578341', '_blank')); + // Responsible Trading. + const topbar_responsible_trading = getElementById('topbar-responsible-trading'); + topbar_responsible_trading.addEventListener('click', () => window.open('https://deriv.com/responsible', '_blank')); + + // Account Limits. + const topbar_account_limits = getElementById('topbar-account-limits'); + topbar_account_limits.addEventListener('click', () => window.open('https://app.deriv.com/account/account-limits', '_blank')); + // Topbar fullscreen events. const topbar_fullscreen = getElementById('topbar-fullscreen'); topbar_fullscreen.addEventListener('click', toggleFullscreen); diff --git a/src/sass/_common/header.scss b/src/sass/_common/header.scss index 9d7ed4f3caf..2e996b31084 100644 --- a/src/sass/_common/header.scss +++ b/src/sass/_common/header.scss @@ -18,6 +18,9 @@ body .topbar { display: flex; position: fixed; bottom: 0; + left: 0; + right: 0; + width: 100%; height: 36px; padding: 0; color: $COLOR_BLACK; @@ -30,7 +33,7 @@ body .topbar { display: flex; align-items: center; height: 36px; - margin: 0 0.8em; + padding: 0 10px; div, span { display: inline-flex; @@ -40,9 +43,10 @@ body .topbar { width: 42px; cursor: default; } - #topbar-help-centre, #topbar-fullscreen { + #topbar-help-centre, #topbar-fullscreen, #topbar-responsible-trading, #topbar-account-limits, #topbar-whatsapp { height: inherit; cursor: pointer; + padding: 0 8px; &:hover { background-color: var(--general-hover); @@ -51,7 +55,6 @@ body .topbar { width: 16px; height: 16px; align-self: center; - padding: 0 0.8rem; } } #topbar-help-centre { @@ -62,6 +65,27 @@ body .topbar { border-left-color: var(--general-hover); } } + #language-select { + display: flex; + align-items: center; + cursor: pointer; + height: inherit; + padding: 0 8px; + + &:hover { + background-color: var(--general-hover); + } + img { + width: 16px; + height: 12px; + margin-right: 4px; + } + #language-select__text { + font-size: 12px; + font-weight: bold; + color: $COLOR_BLACK; + } + } } [data-balloon] { &:before { @@ -102,8 +126,11 @@ body .topbar { .gmt-clock { font-size: 0.75rem; font-weight: 100; - padding: 0 0.8em; + padding: 0 12px; + margin-right: 12px; width: 147px; + height: 16px; + border-left: 1px solid var(--general-section-1); cursor: default; } #contact-us, .upgrademessage { @@ -144,7 +171,6 @@ body .topbar { height: inherit; img { - padding: 0 0.8rem; width: 24px; height: 16px; border-left: 1px solid var(--general-section-1); @@ -161,17 +187,27 @@ body .topbar { height: inherit; img { - padding: 0 0.4rem; width: 16px; height: 16px; - border-left: 1px solid var(--general-section-1); - border-right: 1px solid var(--general-section-1); } &:hover { background-color: var(--general-hover); } } +#deriv_livechat { + padding: 0 8px; +} + +#topbar-help-centre, #topbar-whatsapp { + padding-left: 0 !important; + + img { + padding-left: 8px; + border-left: 1px solid var(--general-section-1); + } +} + body .header, .wallet__header { position: fixed; background-color: var(--general-main-1); diff --git a/src/templates/_common/_layout/layout.jsx b/src/templates/_common/_layout/layout.jsx index ff4cdf3bb4f..93b0d723337 100644 --- a/src/templates/_common/_layout/layout.jsx +++ b/src/templates/_common/_layout/layout.jsx @@ -35,19 +35,28 @@ const InnerContent = () => ( const Topbar = () => (
-
+
-
- -
+ +
-
-
+
+
+ +
+
+ +
+
-
+
+ + EN +
+