Jim/84062/add bottom border to platform cards (binary-com#59)

* chore: increase specificity for dropdown selector * chore: add bottom boder to platform cards
yashim-deriv · Dec 23, 2022 · 9711618 · 9711618
1 parent eac2817
commit 9711618
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 40 deletions.
diff --git 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 (
-                <Button primary_light disabled={is_disabled} onClick={() => ui.openRealAccountSignup()}>
+                <Button primary_light onClick={() => onAction?.()}>
                     {localize('Get')}
                 </Button>
             );

diff --git 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
@@ -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 = ({
             <div>
                 <TradigPlatformIconProps icon={icon} size={48} />
             </div>
-            <div className='trading-app-card__details'>
+            <div className={classNames('trading-app-card__details', { 'trading-app-card--divider': has_divider })}>
                 <Text className='title' size='xs' line_height='s'>
                     {sub_title}
                 </Text>
@@ -48,8 +49,8 @@ const TradingAppCard = ({
                     {app_desc}
                 </Text>
             </div>
-            <div className='trading-app-card__actions'>
-                <TradingAppCardActions type={type} link_to={link_to} is_disabled={is_disabled} onAction={onAction} />
+            <div className={classNames('trading-app-card__actions', { 'trading-app-card--divider': has_divider })}>
+                <TradingAppCardActions type={type} link_to={link_to} onAction={onAction} />
             </div>
         </div>
     );

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
@@ -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
@@ -70,12 +70,13 @@ const OptionsAndMultipliersListing = () => {
                 </div>
             )}
             {is_landing_company_loaded ? (
-                available_platforms.map((available_platform: BrandConfig) => (
+                available_platforms.map((available_platform: BrandConfig, index: number) => (
                     <TradingAppCard
                         key={`trading_app_card_${available_platform.name}`}
                         {...available_platform}
                         type={is_demo || has_any_real_account ? 'trade' : 'none'}
                         is_deriv_platform
+                        has_divider={index < 3}
                     />
                 ))
             ) : (