diff --git a/packages/appstore/src/components/containers/trading-app-card-actions.tsx b/packages/appstore/src/components/containers/trading-app-card-actions.tsx index 57fc0e4d41ea..d81acfe72fd8 100644 --- a/packages/appstore/src/components/containers/trading-app-card-actions.tsx +++ b/packages/appstore/src/components/containers/trading-app-card-actions.tsx @@ -4,21 +4,19 @@ import TradeButton from 'Components/trade-button/trade-button'; import TransferTradeButtonGroup from 'Components/transfer-trade-button-group'; import React from 'react'; import { observer } from 'mobx-react-lite'; -import { useStores } from 'Stores'; export type Actions = { type: 'get' | 'none' | 'trade' | 'dxtrade' | 'transfer_trade' | 'dxtrade_transfer_trade'; link_to?: string; - is_disabled?: boolean; + has_divider?: boolean; onAction?: () => void; }; -const TradingAppCardActions = ({ type, link_to, is_disabled, onAction }: Actions) => { - const { ui } = useStores(); +const TradingAppCardActions = ({ type, link_to, onAction }: Actions) => { switch (type) { case 'get': return ( - ); diff --git a/packages/appstore/src/components/containers/trading-app-card.scss b/packages/appstore/src/components/containers/trading-app-card.scss index e0ddd987b01c..2ba5e36bb8a5 100644 --- a/packages/appstore/src/components/containers/trading-app-card.scss +++ b/packages/appstore/src/components/containers/trading-app-card.scss @@ -9,7 +9,8 @@ flex-direction: column; height: 100%; margin-left: 1.6rem; - padding: 0 2rem; + padding: 0 2rem 0 0; + width: 100%; } &__actions { @@ -22,4 +23,8 @@ text-decoration: none; } } + + &--divider { + border-bottom: 1px solid var(--general-hover); + } } diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx index 5e4f1d9969a7..d6f80d37859e 100644 --- a/packages/appstore/src/components/containers/trading-app-card.tsx +++ b/packages/appstore/src/components/containers/trading-app-card.tsx @@ -8,16 +8,17 @@ import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types'; import { isMobile } from '@deriv/shared'; import { useStores } from 'Stores/index'; import { observer } from 'mobx-react-lite'; +import classNames from 'classnames'; const TradingAppCard = ({ name, icon, type, description, - is_disabled, is_deriv_platform = false, onAction, sub_title, + has_divider, }: Actions & BrandConfig & AvailableAccount & TDetailsOfEachMT5Loginid) => { const { client } = useStores(); @@ -32,7 +33,7 @@ const TradingAppCard = ({
-
+
{sub_title} @@ -48,8 +49,8 @@ const TradingAppCard = ({ {app_desc}
-
- +
+
); diff --git a/packages/appstore/src/components/main-title-bar/account-type-dropdown.scss b/packages/appstore/src/components/main-title-bar/account-type-dropdown.scss index 3cd56fa60869..7223babf8dcb 100644 --- a/packages/appstore/src/components/main-title-bar/account-type-dropdown.scss +++ b/packages/appstore/src/components/main-title-bar/account-type-dropdown.scss @@ -1,33 +1,57 @@ .account-type-dropdown { - &--parent { - padding: 0; - border: none; - } font-size: 1.4rem; font-weight: 700; line-height: 2rem; text-transform: capitalize; border: 2px solid; + height: 2.4em; + + &--parent { + padding: 0; + border: none; + & > div.dc-dropdown { + &-container { + min-width: 8.2rem; + width: 8.2rem; + } + } + } &:focus, &:hover { outline: none; } - + &--real, + &--demo { + & > .dc-text { + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + } + } &--real, &--real:focus, &--real:hover { border: 2px solid var(--status-info); - color: var(--status-info); + & > .dc-text { + color: var(--status-info); + } } &--demo, &--demo:focus, &--demo:hover { border: 2px solid var(--status-success); - color: var(--status-success); + & > .dc-text { + color: var(--status-success); + } } &__icon { + &--real, + &--demo { + transform: none !important; + } &--real { --fill-color1: var(--status-info) !important; } @@ -36,25 +60,3 @@ } } } -.dc-dropdown { - &-container { - min-width: 8.2rem; - width: 8.2rem; - --fill-color1: currentColor; - } - &__display { - height: 2.4em; - &-text { - color: currentColor; - font-weight: 700; - line-height: 20px; - letter-spacing: 0em; - text-align: left; - } - } - &__select-arrow { - &--up { - transform: none; - } - } -} diff --git a/packages/appstore/src/components/options-multipliers-listing/index.tsx b/packages/appstore/src/components/options-multipliers-listing/index.tsx index 332410530694..b978845e8e61 100644 --- a/packages/appstore/src/components/options-multipliers-listing/index.tsx +++ b/packages/appstore/src/components/options-multipliers-listing/index.tsx @@ -70,12 +70,13 @@ const OptionsAndMultipliersListing = () => {
)} {is_landing_company_loaded ? ( - available_platforms.map((available_platform: BrandConfig) => ( + available_platforms.map((available_platform: BrandConfig, index: number) => ( )) ) : (