diff --git a/packages/core/src/sass/app/_common/components/media-item.scss b/packages/core/src/sass/app/_common/components/media-item.scss index 06eb05d79d61..35dcda110166 100644 --- a/packages/core/src/sass/app/_common/components/media-item.scss +++ b/packages/core/src/sass/app/_common/components/media-item.scss @@ -6,6 +6,10 @@ color: var(--text-prominent); margin: 0 0 16px; text-transform: none; + + .inline-message { + margin-top: 1.6rem; + } } &__icon { height: 120px; diff --git a/packages/trader/src/App/Containers/SettingsModal/settings-chart.tsx b/packages/trader/src/App/Containers/SettingsModal/settings-chart.tsx index ff588813cdf9..662ebae75c36 100644 --- a/packages/trader/src/App/Containers/SettingsModal/settings-chart.tsx +++ b/packages/trader/src/App/Containers/SettingsModal/settings-chart.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Checkbox } from '@deriv/components'; +import { Checkbox, InlineMessage } from '@deriv/components'; import { localize, Localize } from '@deriv/translations'; import MediaItem, { MediaHeading, MediaIcon, MediaDescription } from 'App/Components/Elements/Media'; import { observer, useStore } from '@deriv/stores'; @@ -16,18 +16,27 @@ import IntervalDurationDisabledLightIcon from 'Assets/SvgComponents/settings/int import IntervalDurationEnabledLightIcon from 'Assets/SvgComponents/settings/interval-enabled.svg'; const ChartSettings = observer(() => { - const { ui } = useStore(); + const { contract_trade, ui } = useStore(); const { is_chart_countdown_visible: is_countdown_visible, is_dark_mode_on: is_dark_mode, setChartCountdown: setCountdown, } = ui; + const { granularity } = contract_trade; return (
+ {granularity === 0 && ( + + } + /> + )} { { if ('checked' in e.target) {