fix: mt5 alignment for both financial and derived section (#6897)

binary-com · Nov 17, 2022 · db89c9a · db89c9a
1 parent 8c1e247
commit db89c9a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { Icon, Money, Button, Text, DesktopWrapper, MobileWrapper, Popover } from '@deriv/components';
-import { isMobile, mobileOSDetect, getCFDPlatformLabel, CFD_PLATFORMS } from '@deriv/shared';
+import { isMobile, mobileOSDetect, getCFDPlatformLabel, CFD_PLATFORMS, isDesktop } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import RootStore from 'Stores/index';
@@ -330,21 +330,25 @@ const CFDAccountCardComponent = ({
                             )}
                     </div>
                 </div>
-                {platform === CFD_PLATFORMS.MT5 && type.type === 'financial' && !isMobile() && is_logged_in && (
-                    <Button
-                        onClick={() => setIsAcuityModalOpen(true)}
-                        className='cfd-account-card__acuity-banner'
-                        type='button'
-                        transparent
-                    >
-                        <div className='cfd-account-card__acuity-banner--wrapper'>
-                            <Icon icon='icMt5Acuity' />
-                            <Text as='p' size='xxs' weight='bold' color='prominent'>
-                                <Localize i18n_default_text='Get Acuity trading tools' />
-                            </Text>
-                            <Icon icon='IcAddOutline' color='secondary' />
-                        </div>
-                    </Button>
+                {platform === CFD_PLATFORMS.MT5 && isDesktop() && is_logged_in && (
+                    <div className='cfd-account-card__acuity-container'>
+                        {type.type === 'financial' && (
+                            <Button
+                                onClick={() => setIsAcuityModalOpen(true)}
+                                className='cfd-account-card__acuity-banner'
+                                type='button'
+                                transparent
+                            >
+                                <div className='cfd-account-card__acuity-banner--wrapper'>
+                                    <Icon icon='icMt5Acuity' />
+                                    <Text as='p' size='xxs' weight='bold' color='prominent'>
+                                        <Localize i18n_default_text='Get Acuity trading tools' />
+                                    </Text>
+                                    <Icon icon='IcAddOutline' color='secondary' />
+                                </div>
+                            </Button>
+                        )}
+                    </div>
                 )}
                 {existing_data && <div className='cfd-account-card__divider' />}
 

diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss
@@ -1086,11 +1086,16 @@
         }
     }
 
+    &__acuity-container {
+        height: 3.4rem;
+        margin: 1.6rem;
+    }
+
     &__acuity-banner {
         background: var(--general-section-1);
-        height: 3.4rem;
         border-radius: 0.8rem;
-        margin: 1.6rem;
+        width: 100%;
+        height: 100%;
 
         &--wrapper {
             display: flex;