diff --git a/public/images/ic-megaphone.svg b/public/images/ic-megaphone.svg new file mode 100644 index 000000000..3e9bbaa8f --- /dev/null +++ b/public/images/ic-megaphone.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/move-to-deriv.svg b/public/images/move-to-deriv.svg deleted file mode 100644 index f5832924a..000000000 --- a/public/images/move-to-deriv.svg +++ /dev/null @@ -1,153 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/images/upgrade-to-deriv-bot.svg b/public/images/upgrade-to-deriv-bot.svg new file mode 100644 index 000000000..d2ae4403f --- /dev/null +++ b/public/images/upgrade-to-deriv-bot.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Banner/fixed-dbot-banner.jsx b/src/components/Banner/fixed-dbot-banner.jsx index 899e7f9d0..790bdc2f3 100644 --- a/src/components/Banner/fixed-dbot-banner.jsx +++ b/src/components/Banner/fixed-dbot-banner.jsx @@ -6,13 +6,16 @@ import './fixed-dbot-banner.scss'; const FixedDbotBanner = () => (
-
+ move to deriv
- {translate('For improved features and an overall better performance, ')} + + {translate('Important: ')} + + {translate('Binary Bot will be discontinued soon. ')} - {translate('switch to Deriv Bot')} + {translate('Upgrade to Deriv Bot')} - {translate(' now.')} + {translate(' to continue trading.')}
diff --git a/src/components/Banner/fixed-dbot-banner.scss b/src/components/Banner/fixed-dbot-banner.scss index f36c110db..5770bed30 100644 --- a/src/components/Banner/fixed-dbot-banner.scss +++ b/src/components/Banner/fixed-dbot-banner.scss @@ -7,7 +7,7 @@ justify-content: center; background-color: #ffeabf; height: 56px; - + font-size: var(--font-size-s); @include mobile { height: unset; } @@ -37,10 +37,8 @@ } } - &__icon-info { + &__icon { margin-right: 0.5rem; - font-size: 1.4rem; - transform: rotate(180deg); } } diff --git a/src/components/Banner/move-to-dbot-banner.jsx b/src/components/Banner/move-to-dbot-banner.jsx index 86bb013d9..2534f767f 100644 --- a/src/components/Banner/move-to-dbot-banner.jsx +++ b/src/components/Banner/move-to-dbot-banner.jsx @@ -25,7 +25,7 @@ const shouldShowPopup = () => { return true; } - const allowed_delay = 7; // One week in days + const allowed_delay = 1; // One week in days const last_popup_date = new Date(last_deriv_redirect_popup_time); const current_date = new Date(); @@ -60,45 +60,26 @@ const MoveToDbotBanner = () => {
{open_modal && (
- move to deriv -
-
- {translate('Take your bot trading to the next level')} + move to deriv
+
{translate('Binary bot is retiring soon')}
-
{translate('On Deriv Bot, you\'ll enjoy:')}
-
    -
  • - {translate('New features and tools with faster execution and enhanced stability')} -
    • -
  • {translate('The ability to use your existing XML files from Binary Bot')}
    • -
  • - {translate( - 'A familiar drag-and-drop interface; create and customise your trading bot easily' - )} -
    • -
-
- {translate('What are you waiting for?')}{' '} - - {translate('Explore Deriv Bot')} - {' '} - {translate('today and unlock new trading possibilities!')} -
+

{translate('Binary bot will be discontinued soon.')}

+

+ {translate( + 'Import your existing strategies (XML files) to Deriv Bot today and enjoy a faster, more efficient trading experience with advanced features.' + )} +

diff --git a/src/components/Banner/move-to-dbot-banner.scss b/src/components/Banner/move-to-dbot-banner.scss index 6719df892..f4e030d76 100644 --- a/src/components/Banner/move-to-dbot-banner.scss +++ b/src/components/Banner/move-to-dbot-banner.scss @@ -12,15 +12,21 @@ .mv-dbot-banner { text-align: center; - padding: 32px 108px; + padding: 16px 24px; + width: 440px; @include mobile { - padding: 28px; + padding: 16px; + width: 100%; } &__title { - font-size: var(--font-size-l); + font-size: 20px; font-weight: bold; margin-bottom: 16px; + + @include mobile { + font-size: var(--font-size-n); + } } &__content { @@ -28,17 +34,14 @@ font-size: var(--font-size-s); line-height: 20px; text-align: left; - ol, - ul { - list-style: disc; + p { line-height: 20px; - padding: 0px 32px; } } &__icon-container { display: flex; align-items: center; justify-content: center; - margin-bottom: 24px; + margin-bottom: 16px; } } diff --git a/src/components/common/deriv-app-modal/deriv-app-modal.scss b/src/components/common/deriv-app-modal/deriv-app-modal.scss index 7500b7ed7..83bacae8b 100644 --- a/src/components/common/deriv-app-modal/deriv-app-modal.scss +++ b/src/components/common/deriv-app-modal/deriv-app-modal.scss @@ -56,14 +56,16 @@ justify-content: center; align-items: center; color: var(--text-prominent); - padding: 24px; + padding: 20px 24px; font-size: 1rem; + @include mobile { + padding: 16px 24px; + } &:after { content: '\00d7'; font-weight: 200; font-size: 24px; - margin-top: -2px; } &:hover { background: transparent; @@ -72,10 +74,14 @@ } &-title { - font-size: var(--font-size-l); + font-size: var(--font-size-n); font-weight: bold; margin: 0; - padding: 16px; + padding: 0 24px; + @include mobile { + padding: 0 16px; + font-size: var(--font-size-s); + } } } @@ -96,9 +102,12 @@ display: flex; justify-content: flex-end; align-items: center; - padding: 8px 16px; + padding: 16px 24px; border: none; border-top: 1px solid var(--border-normal); + @include mobile { + padding: 16px; + } &__btn-container { @include mobile { display: flex; @@ -108,15 +117,15 @@ } &__btn-container, * { - margin: 4px; - font-weight: 600; - font-size: medium; + font-weight: 700; + font-size: var(--font-size-s); text-transform: none; + line-height: 20px; } &-primary-btn { background: var(--button-primary-default); border: 2px solid var(--button-primary-default); - padding-inline: 18px; + padding: 8px 18px; &:hover { background: var(--button-primary-hover); }