diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx index 477e4a303c66..dbd392075556 100644 --- a/packages/cfd/src/Components/cfd-account-card.tsx +++ b/packages/cfd/src/Components/cfd-account-card.tsx @@ -175,17 +175,18 @@ const CFDAccountCardComponent = ({ is_eu, isEligibleForMoreDemoMt5Svg, isEligibleForMoreRealMt5, - platform, - title, - type, - specs, - onSelectAccount, onClickFund, onPasswordManager, + onSelectAccount, + platform, + setIsAcuityModalOpen, + setMT5TradeAccount, + specs, + title, toggleAccountsDialog, toggleMT5TradeModal, toggleShouldShowRealAccountsList, - setMT5TradeAccount, + type, }: TCFDAccountCard) => { const existing_data = existing_accounts_data?.length ? existing_accounts_data?.[0] : existing_accounts_data; const all_svg_acc: DetailsOfEachMT5Loginid[] = []; @@ -329,6 +330,22 @@ const CFDAccountCardComponent = ({ )} + {platform === CFD_PLATFORMS.MT5 && type.type === 'financial' && !isMobile() && is_logged_in && ( + + )} {existing_data &&
}
@@ -676,10 +693,11 @@ const CFDAccountCardComponent = ({ ); }; -const CFDAccountCard = connect(({ modules: { cfd }, client }: RootStore) => ({ +const CFDAccountCard = connect(({ modules: { cfd }, client, ui }: RootStore) => ({ dxtrade_tokens: cfd.dxtrade_tokens, isEligibleForMoreDemoMt5Svg: client.isEligibleForMoreDemoMt5Svg, isEligibleForMoreRealMt5: client.isEligibleForMoreRealMt5, + setIsAcuityModalOpen: ui.setIsAcuityModalOpen, setMT5TradeAccount: cfd.setMT5TradeAccount, }))(CFDAccountCardComponent); diff --git a/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx b/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx index 8f9bc6c06437..061c7cb8f0ea 100644 --- a/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx +++ b/packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx @@ -107,7 +107,7 @@ const CFDMT5DemoAccountDisplay = ({ }, [is_logged_in, is_eu, is_eu_country, residence, platform]); return ( -
+ {is_loading ? ( ) : ( @@ -176,7 +176,7 @@ const CFDMT5DemoAccountDisplay = ({ )}
)} -
+ ); }; diff --git a/packages/cfd/src/Components/cfd-real-account-display.tsx b/packages/cfd/src/Components/cfd-real-account-display.tsx index 527fa67192f3..958595b13ad9 100644 --- a/packages/cfd/src/Components/cfd-real-account-display.tsx +++ b/packages/cfd/src/Components/cfd-real-account-display.tsx @@ -61,6 +61,7 @@ type TCFDRealAccountDisplayProps = { account_status?: object; openDerivRealAccountNeededModal: () => void; should_enable_add_button?: boolean; + setIsAcuityModalOpen: (value: boolean) => void; }; const CFDRealAccountDisplay = ({ @@ -88,6 +89,7 @@ const CFDRealAccountDisplay = ({ residence, openDerivRealAccountNeededModal, should_enable_add_button, + setIsAcuityModalOpen, }: TCFDRealAccountDisplayProps) => { const is_eu_user = (is_logged_in && is_eu) || (!is_logged_in && is_eu_country); @@ -231,6 +233,7 @@ const CFDRealAccountDisplay = ({ toggleShouldShowRealAccountsList={toggleShouldShowRealAccountsList} toggleAccountsDialog={toggleAccountsDialog} toggleMT5TradeModal={toggleMT5TradeModal} + setIsAcuityModalOpen={setIsAcuityModalOpen} /> ); diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts index d2f0d6d443cb..ec638a4951f2 100644 --- a/packages/cfd/src/Components/props.types.ts +++ b/packages/cfd/src/Components/props.types.ts @@ -108,6 +108,7 @@ export type TCFDAccountCard = { toggleMT5TradeModal: (arg?: boolean) => void; toggleShouldShowRealAccountsList?: (arg?: boolean) => void; setMT5TradeAccount: (arg: any) => void; + setIsAcuityModalOpen: (value: boolean) => void; }; export type TTradingPlatformAccounts = { diff --git a/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx b/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx index 377092a28232..88e110edcb48 100644 --- a/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx +++ b/packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx @@ -142,6 +142,7 @@ describe('', () => { onUnmount: jest.fn(), openAccountNeededModal: jest.fn(), openDerivRealAccountNeededModal: jest.fn(), + refreshNotifications: jest.fn(), openPasswordModal: jest.fn(), openTopUpModal: jest.fn(), platform: CFD_PLATFORMS.MT5, @@ -179,6 +180,7 @@ describe('', () => { ], setAccountType: jest.fn(), setCFDPasswordResetModal: jest.fn(), + setIsAcuityModalOpen: jest.fn(), setCurrentAccount: jest.fn(), standpoint: { financial_company: 'svg', diff --git a/packages/cfd/src/Containers/cfd-dashboard.tsx b/packages/cfd/src/Containers/cfd-dashboard.tsx index 29bded5b40d6..e3e4287d3161 100644 --- a/packages/cfd/src/Containers/cfd-dashboard.tsx +++ b/packages/cfd/src/Containers/cfd-dashboard.tsx @@ -173,6 +173,8 @@ export type TCFDDashboardProps = RouteComponentProps & { getRealSyntheticAccountsExistingData: DetailsOfEachMT5Loginid[] | undefined ) => void; openDerivRealAccountNeededModal: () => void; + setIsAcuityModalOpen: (value: boolean) => void; + refreshNotifications: () => void; }; const CFDDashboard = (props: TCFDDashboardProps) => { @@ -200,6 +202,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => { React.useEffect(() => { updateActiveIndex(getIndexToSet()); openResetPassword(); + props.refreshNotifications(); props.onMount(); return () => { props.onUnmount(); @@ -393,6 +396,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => { getRealSyntheticAccountsExistingData, getRealFinancialAccountsExistingData, openDerivRealAccountNeededModal, + setIsAcuityModalOpen, } = props; const should_show_missing_real_account = @@ -524,6 +528,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => { residence={residence} openDerivRealAccountNeededModal={openDerivRealAccountNeededModal} should_enable_add_button={should_enable_add_button} + setIsAcuityModalOpen={setIsAcuityModalOpen} />
@@ -668,7 +673,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => { }; export default withRouter( - connect(({ client, modules, ui }: RootStore) => ({ + connect(({ client, modules, notifications, ui }: RootStore) => ({ beginRealSignupForMt5: modules.cfd.beginRealSignupForMt5, checkShouldOpenAccount: modules.cfd.checkShouldOpenAccount, country: client.account_settings.residence, @@ -716,6 +721,7 @@ export default withRouter( NotificationMessages: ui.notification_messages_ui, onMount: modules.cfd.onMount, onUnmount: modules.cfd.onUnmount, + refreshNotifications: notifications.refreshNotifications, toggleAccountsDialog: ui.toggleAccountsDialog, toggleShouldShowRealAccountsList: ui.toggleShouldShowRealAccountsList, upgradeable_landing_companies: client.upgradeable_landing_companies, @@ -728,5 +734,6 @@ export default withRouter( dxtrade_verification_code: client.verification_code.trading_platform_dxtrade_password_reset, mt5_status_server: client.website_status.mt5_status, openDerivRealAccountNeededModal: ui.openDerivRealAccountNeededModal, + setIsAcuityModalOpen: ui.setIsAcuityModalOpen, }))(CFDDashboard) ); diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss index a384c2973a68..81fa7740f26f 100644 --- a/packages/cfd/src/sass/cfd-dashboard.scss +++ b/packages/cfd/src/sass/cfd-dashboard.scss @@ -120,6 +120,41 @@ } } + &__social-banner { + width: 100%; + background-color: var(--general-section-1); + opacity: 95%; + top: 0; + position: absolute; + z-index: 1; + + &--close-icon { + position: absolute; + top: 1.6rem; + right: 1.6rem; + } + + &--wrapper { + display: flex; + flex-direction: row; + gap: 2.4rem; + align-items: center; + justify-content: center; + padding: 0.8rem 0; + margin-inline: 2.4rem; + + &__image { + width: 16rem; + height: 12rem; + } + + &__button { + float: right; + padding: 0.8rem; + } + } + } + &__download-container { border-top: 2px solid var(--general-section-1); padding-top: 2rem; @@ -440,7 +475,7 @@ grid-gap: 2.4rem; justify-content: center; padding-top: 2.4em; - height: 100%; + height: fit-content; @include mobile { display: flex; @@ -451,12 +486,6 @@ } } -.cfd-demo-accounts-display .cfd-account-card__wrapper { - @include desktop { - height: auto; - } -} - .cfd-jurisdiction-card--synthetic, .cfd-jurisdiction-card--financial { border: solid 1px var(--border-normal); @@ -698,11 +727,10 @@ display: grid; grid-template-rows: 1fr; justify-content: center; - height: 100%; + height: fit-content; @include mobile { grid-template-rows: 1fr; - height: fit-content; &:not(:last-child) { margin-bottom: 2.4rem; @@ -1057,6 +1085,22 @@ } } } + + &__acuity-banner { + background: var(--general-section-1); + height: 3.4rem; + border-radius: 0.8rem; + margin: 1.6rem; + + &--wrapper { + display: flex; + flex-direction: row; + align-items: center; + gap: 1.6rem; + padding: 0.8rem 2.65rem; + } + } + &__divider { width: calc(100% - 3.2rem); margin-left: 1.6rem; diff --git a/packages/components/src/components/icon/common/ic-close-dark.svg b/packages/components/src/components/icon/common/ic-close-dark.svg new file mode 100644 index 000000000000..a16cf2171fba --- /dev/null +++ b/packages/components/src/components/icon/common/ic-close-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index de1b602f4513..b5771da99a30 100644 --- a/packages/components/src/components/icon/icons.js +++ b/packages/components/src/components/icon/icons.js @@ -273,6 +273,7 @@ import './common/ic-clock-outline.svg'; import './common/ic-clock.svg'; import './common/ic-close-circle-red.svg'; import './common/ic-close-circle.svg'; +import './common/ic-close-dark.svg'; import './common/ic-close-light.svg'; import './common/ic-cloud-upload.svg'; import './common/ic-confirm-details.svg'; @@ -537,6 +538,7 @@ import './flag/ic-flag-uk.svg'; import './flag/ic-flag-vi.svg'; import './flag/ic-flag-zh-cn.svg'; import './flag/ic-flag-zh-tw.svg'; +import './mt5/ic-mt5-acuity.svg'; import './mt5/ic-mt5-cfd-platform.svg'; import './mt5/ic-mt5-cfds.svg'; import './mt5/ic-mt5-derived.svg'; diff --git a/packages/components/src/components/icon/mt5/ic-mt5-acuity.svg b/packages/components/src/components/icon/mt5/ic-mt5-acuity.svg new file mode 100644 index 000000000000..d0ee8977d8a0 --- /dev/null +++ b/packages/components/src/components/icon/mt5/ic-mt5-acuity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index 909eeb8ed34e..197b03b8388e 100644 --- a/packages/components/stories/icon/icons.js +++ b/packages/components/stories/icon/icons.js @@ -281,6 +281,7 @@ export const icons = 'IcClock', 'IcCloseCircleRed', 'IcCloseCircle', + 'IcCloseDark', 'IcCloseLight', 'IcCloudUpload', 'IcConfirmDetails', @@ -555,6 +556,7 @@ export const icons = 'IcFlagZhTw', ], 'mt5': [ + 'IcMt5Acuity', 'IcMt5CfdPlatform', 'IcMt5Cfds', 'IcMt5Derived', diff --git a/packages/core/src/App/Components/Elements/NotificationMessage/notification-banner.jsx b/packages/core/src/App/Components/Elements/NotificationMessage/notification-banner.jsx index a3a97ebbddc0..99249727d8ac 100644 --- a/packages/core/src/App/Components/Elements/NotificationMessage/notification-banner.jsx +++ b/packages/core/src/App/Components/Elements/NotificationMessage/notification-banner.jsx @@ -4,7 +4,17 @@ import classNames from 'classnames'; import { isMobile } from '@deriv/shared'; import { Button, Icon, Text } from '@deriv/components'; -const NotificationBanner = ({ className, header, message, primary_btn, secondary_btn, img_src, img_alt, onClose }) => ( +const NotificationBanner = ({ + className, + header, + message, + primary_btn, + secondary_btn, + img_src, + img_alt, + onClose, + icon, +}) => (
{img_alt} - +
); @@ -52,6 +62,7 @@ NotificationBanner.propTypes = { text: PropTypes.string, onClick: PropTypes.func, }), + icon: PropTypes.string, }; export default NotificationBanner; diff --git a/packages/core/src/App/Components/Elements/NotificationMessage/notification.jsx b/packages/core/src/App/Components/Elements/NotificationMessage/notification.jsx index ad71aebc7520..8d126d74281e 100644 --- a/packages/core/src/App/Components/Elements/NotificationMessage/notification.jsx +++ b/packages/core/src/App/Components/Elements/NotificationMessage/notification.jsx @@ -42,6 +42,7 @@ const Notification = ({ data, removeNotificationMessage }) => { img_src={data.img_src} img_alt={data.img_alt} onClose={destroy} + icon={data.icon} /> ); case 'trustpilot': @@ -176,6 +177,7 @@ Notification.propTypes = { img_src: PropTypes.string, is_auto_close: PropTypes.bool, key: PropTypes.string, + icon: PropTypes.string, message: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), message_popup: PropTypes.string, primary_btn: PropTypes.object, diff --git a/packages/core/src/App/Containers/AcuityDownloadModal/acuity-download-modal.tsx b/packages/core/src/App/Containers/AcuityDownloadModal/acuity-download-modal.tsx new file mode 100644 index 000000000000..8386f9613d7f --- /dev/null +++ b/packages/core/src/App/Containers/AcuityDownloadModal/acuity-download-modal.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import RootStore from 'Stores/index'; +import { Button, Modal, Text, Icon } from '@deriv/components'; +import { Localize, localize } from '@deriv/translations'; +import { getUrlBase } from '@deriv/shared'; +import { connect } from 'Stores/connect'; +import 'Sass/app/modules/acuity-download.scss'; + +type TAcuityDownloadModal = { + is_acuity_modal_open: boolean; + is_eu: boolean; + setIsAcuityModalOpen: (value: boolean) => void; +}; + +const AcuityDownloadModal = ({ is_acuity_modal_open, is_eu, setIsAcuityModalOpen }: TAcuityDownloadModal) => { + const closeModal = () => setIsAcuityModalOpen(false); + + const openDownloadLink = () => { + window.open( + is_eu ? 'https://deriv.link/3hgxv2m' : 'https://deriv.link/3WhYxq1', + '_blank', + 'noopener,noreferrer' + ); + closeModal(); + }; + + return ( + +
+
+ +
+ + + +
+ + , ]} + /> + +
+
+ + + + +
+
+
+
+ + ); +}; + +export default connect(({ client, ui }: RootStore) => ({ + is_acuity_modal_open: ui.is_acuity_modal_open, + is_eu: client.is_eu, + setIsAcuityModalOpen: ui.setIsAcuityModalOpen, +}))(AcuityDownloadModal); diff --git a/packages/core/src/App/Containers/AcuityDownloadModal/index.js b/packages/core/src/App/Containers/AcuityDownloadModal/index.js new file mode 100644 index 000000000000..0f46c6f0f364 --- /dev/null +++ b/packages/core/src/App/Containers/AcuityDownloadModal/index.js @@ -0,0 +1,3 @@ +import ActuityDownloadModal from './acuity-download-modal'; + +export default ActuityDownloadModal; diff --git a/packages/core/src/App/Containers/Modals/app-modals.jsx b/packages/core/src/App/Containers/Modals/app-modals.jsx index 621164058631..393e9f162208 100644 --- a/packages/core/src/App/Containers/Modals/app-modals.jsx +++ b/packages/core/src/App/Containers/Modals/app-modals.jsx @@ -9,6 +9,9 @@ import { moduleLoader } from '@deriv/shared'; const AccountSignupModal = React.lazy(() => moduleLoader(() => import(/* webpackChunkName: "account-signup-modal" */ '../AccountSignupModal')) ); +const AcuityDownloadModal = React.lazy(() => + import(/* webpackChunkName: "acuity-download-modal" */ '../AcuityDownloadModal') +); const CloseMxMltAccountModal = React.lazy(() => moduleLoader(() => import(/* webpackChunkName: "close-mx-mlt-account-modal" */ '../CloseMxMltAccountModal')) ); @@ -46,6 +49,7 @@ const WarningScamMessageModal = React.lazy(() => const AppModals = ({ is_account_needed_modal_on, + is_acuity_modal_open, is_welcome_modal_visible, is_reality_check_visible, is_set_residence_modal_visible, @@ -85,6 +89,11 @@ const AppModals = ({ } break; } + + if (is_acuity_modal_open) { + ComponentToLoad = ; + } + if (is_close_mx_mlt_account_modal_visible) { ComponentToLoad = ; } @@ -123,6 +132,7 @@ const AppModals = ({ export default connect(({ client, ui }) => ({ is_welcome_modal_visible: ui.is_welcome_modal_visible, is_account_needed_modal_on: ui.is_account_needed_modal_on, + is_acuity_modal_open: ui.is_acuity_modal_open, is_close_mx_mlt_account_modal_visible: ui.is_close_mx_mlt_account_modal_visible, is_close_uk_account_modal_visible: ui.is_close_uk_account_modal_visible, is_set_residence_modal_visible: ui.is_set_residence_modal_visible, diff --git a/packages/core/src/Stores/notification-store.js b/packages/core/src/Stores/notification-store.js index c93f1de486cb..fa1a42f49991 100644 --- a/packages/core/src/Stores/notification-store.js +++ b/packages/core/src/Stores/notification-store.js @@ -258,9 +258,13 @@ export default class NotificationStore extends BaseStore { const has_trustpilot = LocalStore.getObject('notification_messages')[loginid]?.includes( this.client_notifications.trustpilot.key ); + const has_acuity_mt5_download = LocalStore.getObject('notification_messages')[loginid]?.includes( + this.client_notifications.acuity_mt5_download.key + ); let has_missing_required_field; if (is_logged_in) { + if (isEmptyObject(account_status)) return; const { authentication: { document, identity, needs_verification }, status, @@ -304,6 +308,13 @@ export default class NotificationStore extends BaseStore { ) { this.addNotificationMessage(this.client_notifications.close_mx_mlt_account); } + + // Acuity notification is available for both Demo and Real desktop clients + this.addNotificationMessage(this.client_notifications.acuity); + if (!has_acuity_mt5_download && getPathname() === platform_name.DMT5) { + this.addNotificationMessage(this.client_notifications.acuity_mt5_download); + } + const client = accounts[loginid]; if (client && !client.is_virtual) { if (isEmptyObject(account_status)) return; @@ -603,6 +614,52 @@ export default class NotificationStore extends BaseStore { const platform_name_go = getPlatformSettings('go').name; const notifications = { + acuity: { + key: 'acuity', + header: localize('New trading tools for MT5'), + message: localize('Power up your Financial trades with intuitive tools from Acuity.'), + secondary_btn: { + text: localize('Learn More'), + onClick: () => { + ui.setIsAcuityModalOpen(true); + this.removeNotificationByKey({ key: this.client_notifications.acuity.key }); + this.removeNotificationMessage({ + key: this.client_notifications.acuity.key, + should_show_again: false, + }); + }, + }, + platform: [platform_name.DTrader], + is_disposable: true, + img_src: getUrlBase('/public/images/common/acuity_banner.png'), + img_alt: 'Acuity', + className: 'acuity', + type: 'news', + }, + acuity_mt5_download: { + key: 'acuity_mt5_download', + header: localize('Power up your trades with Acuity'), + message: localize( + 'Download intuitive trading tools to keep track of market events. The Acuity suite is only available for Windows, and is most recommended for financial assets.' + ), + secondary_btn: { + text: localize('Learn More'), + onClick: () => { + ui.setIsAcuityModalOpen(true); + this.removeNotificationByKey({ key: this.client_notifications.acuity_mt5_download.key }); + this.removeNotificationMessage({ + key: this.client_notifications.acuity_mt5_download.key, + should_show_again: false, + }); + }, + }, + platform: [platform_name.DMT5], + img_src: getUrlBase('/public/images/common/acuity_software.png'), + img_alt: 'Acuity Download', + className: 'acuity-mt5', + icon: 'IcCloseDark', + type: 'news', + }, ask_financial_risk_approval: { key: 'ask_financial_risk_approval', header: localize('Complete your Appropriateness Test'), diff --git a/packages/core/src/Stores/ui-store.js b/packages/core/src/Stores/ui-store.js index d4052c16dae2..d3d242383c7d 100644 --- a/packages/core/src/Stores/ui-store.js +++ b/packages/core/src/Stores/ui-store.js @@ -104,6 +104,9 @@ export default class UIStore extends BaseStore { // MT5 create real STP from demo, show only real accounts from switcher should_show_real_accounts_list = false; + // MT5 acuity download + is_acuity_modal_open = false; + // Real account signup real_account_signup = { active_modal_index: -1, @@ -226,6 +229,7 @@ export default class UIStore extends BaseStore { real_account_signup_target: observable, deposit_real_account_signup_target: observable, has_real_account_signup_ended: observable, + is_acuity_modal_open: observable, is_welcome_modal_visible: observable, is_close_mx_mlt_account_modal_visible: observable, is_close_uk_account_modal_visible: observable, @@ -320,6 +324,7 @@ export default class UIStore extends BaseStore { setCurrentFocus: action.bound, addToast: action.bound, removeToast: action.bound, + setIsAcuityModalOpen: action.bound, setIsNativepickerVisible: action.bound, setReportsTabIndex: action.bound, toggleWelcomeModal: action.bound, @@ -762,6 +767,10 @@ export default class UIStore extends BaseStore { this.should_show_real_accounts_list = value; } + setIsAcuityModalOpen(value) { + this.is_acuity_modal_open = value; + } + toggleShouldShowMultipliersOnboarding(value) { this.should_show_multipliers_onboarding = value; } diff --git a/packages/core/src/public/images/common/static_images/acuity_banner.png b/packages/core/src/public/images/common/static_images/acuity_banner.png new file mode 100644 index 000000000000..16149d5509b8 Binary files /dev/null and b/packages/core/src/public/images/common/static_images/acuity_banner.png differ diff --git a/packages/core/src/public/images/common/static_images/acuity_modal.png b/packages/core/src/public/images/common/static_images/acuity_modal.png new file mode 100644 index 000000000000..b17a5b9bbe66 Binary files /dev/null and b/packages/core/src/public/images/common/static_images/acuity_modal.png differ diff --git a/packages/core/src/public/images/common/static_images/acuity_software.png b/packages/core/src/public/images/common/static_images/acuity_software.png new file mode 100644 index 000000000000..415bdfc9b7cb Binary files /dev/null and b/packages/core/src/public/images/common/static_images/acuity_software.png differ diff --git a/packages/core/src/sass/app/_common/components/notification-banner.scss b/packages/core/src/sass/app/_common/components/notification-banner.scss index bb73c0342991..585f58b379d6 100644 --- a/packages/core/src/sass/app/_common/components/notification-banner.scss +++ b/packages/core/src/sass/app/_common/components/notification-banner.scss @@ -94,6 +94,46 @@ top: 1.6rem; cursor: pointer; } + &__acuity { + .notification-banner { + &__bg { + width: 12.8rem; + clip-path: polygon(0 0, 100% 0, 100% 100%, 63% 100%); + } + &__btn-wrapper { + margin-top: 1.6rem; + } + &__img { + width: 12.7rem; + height: auto; + right: 0.3rem; + bottom: 1.4rem; + } + &--left { + width: unset; + } + } + } + + &__acuity-mt5 { + min-width: 55rem; + .notification-banner { + &--left { + min-width: 42.2rem; + } + &__bg { + background-color: var(--icon-grey-background); + width: 12.8rem; + clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%); + } + &__img { + width: 15rem; + height: 11.5rem; + right: -1rem; + bottom: 3rem; + } + } + } @include mobile { height: 100%; diff --git a/packages/core/src/sass/app/modules/acuity-download.scss b/packages/core/src/sass/app/modules/acuity-download.scss new file mode 100644 index 000000000000..f6bfa6707a1d --- /dev/null +++ b/packages/core/src/sass/app/modules/acuity-download.scss @@ -0,0 +1,30 @@ +.acuity-download-modal { + &__body { + padding: 0rem 2.4rem 2.4rem; + + &--image { + padding-bottom: 1.6rem; + text-align: center; + } + + &--description { + padding: 0.8rem 0rem 1.6rem; + } + + &--info { + display: flex; + flex-direction: row; + padding: 0.8rem; + gap: 0.8rem; + background-color: var(--transparent-info); + + p { + width: 35.2rem; + } + } + &--button { + text-align: center; + padding-top: 1.6rem; + } + } +}