Merge pull request #127 from thisyahlen-deriv/thisyahlen/trade-modal-…

…style-fix chore: trade modal style fix
deriv-com · Apr 24, 2024 · a36c835 · a36c835
2 parents 8b855ef + 1fefaa9
commit a36c835
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 53 deletions.
diff --git a/src/assets/svgs/ic-linux-logo.svg b/src/assets/svgs/ic-linux-logo.svg
diff --git a/src/assets/svgs/ic-macos-logo.svg b/src/assets/svgs/ic-macos-logo.svg
diff --git a/src/assets/svgs/ic-windows-logo.svg b/src/assets/svgs/ic-windows-logo.svg
diff --git a/src/cfd/constants/constants.tsx b/src/cfd/constants/constants.tsx
@@ -202,7 +202,7 @@ export const AppToContentMapper: TAppToContentMapper = {
         icon: '',
         link: '',
         text: 'Open',
-        title: 'cTrader web',
+        title: 'Run cTrader on your browser',
     },
     dxtrade_web: {
         icon: '',

diff --git a/src/cfd/modals/TradeModal/TradeModal.tsx b/src/cfd/modals/TradeModal/TradeModal.tsx
@@ -31,47 +31,46 @@ export const TradeModal = () => {
             <Modal.Header onRequestClose={closeModal}>
                 <Text weight='bold'>Trade</Text>
             </Modal.Header>
-            <Modal.Body className='w-auto h-auto'>
+            <Modal.Body>
                 <TradeScreen account={account} />
             </Modal.Body>
-            {platform !== PlatformDetails.mt5.platform ||
-                (isDesktop && (
-                    <Modal.Footer>
-                        <div className='pt-0 min-h-[190px] flex justify-center items-center flex-col h-fit w-full gap-16'>
-                            <Text align='center' size='xs' weight='bold'>
-                                Download {PlatformDetails[platform]?.title} on your phone to trade with the{' '}
-                                {PlatformDetails[platform].title} account
-                            </Text>
-                            <div className='flex gap-16'>
-                                <div className='flex flex-col justify-center gap-8'>
-                                    {appOrder.map(app => {
-                                        const AppsLinkMapper = LinksMapper[platform][app as keyof TAppLinks];
-                                        if (AppsLinkMapper) {
-                                            const AppIcon = AppToIconMapper[app];
-                                            const appLink = AppsLinkMapper;
-                                            return (
-                                                <AppIcon
-                                                    className='w-[137px] h-[40px] cursor-pointer'
-                                                    key={app}
-                                                    onClick={() => window.open(appLink)}
-                                                />
-                                            );
-                                        }
-                                        return null;
-                                    })}
-                                </div>
-                                {isDesktop && (
-                                    <div className='border-1 border-solid border-system-light-hover-background rounded-xs flex flex-col justify-center items-center w-[150px] gap-[5px] p-8'>
-                                        <QRCode size={80} value={PlatformDetails[platform].link} />
-                                        <Text align='center' size='xs'>
-                                            Scan the QR code to download {PlatformDetails[platform].title}
-                                        </Text>
-                                    </div>
-                                )}
+            {isDesktop && (
+                <Modal.Footer>
+                    <div className='pt-0 min-h-[190px] flex justify-center items-center flex-col h-fit w-full gap-16'>
+                        <Text align='center' size='xs' weight='bold'>
+                            Download {PlatformDetails[platform]?.title} on your phone to trade with the{' '}
+                            {PlatformDetails[platform].title} account
+                        </Text>
+                        <div className='flex gap-16'>
+                            <div className='flex flex-col justify-center gap-8'>
+                                {appOrder.map(app => {
+                                    const AppsLinkMapper = LinksMapper[platform][app as keyof TAppLinks];
+                                    if (AppsLinkMapper) {
+                                        const AppIcon = AppToIconMapper[app];
+                                        const appLink = AppsLinkMapper;
+                                        return (
+                                            <AppIcon
+                                                className='w-[137px] h-[40px] cursor-pointer'
+                                                key={app}
+                                                onClick={() => window.open(appLink)}
+                                            />
+                                        );
+                                    }
+                                    return null;
+                                })}
                             </div>
+                            {isDesktop && (
+                                <div className='border-1 border-solid border-system-light-hover-background rounded-xs flex flex-col justify-center items-center w-[150px] gap-[5px] p-8'>
+                                    <QRCode size={80} value={PlatformDetails[platform].link} />
+                                    <Text align='center' size='xs'>
+                                        Scan the QR code to download {PlatformDetails[platform].title}
+                                    </Text>
+                                </div>
+                            )}
                         </div>
-                    </Modal.Footer>
-                ))}
+                    </div>
+                </Modal.Footer>
+            )}
         </Modal>
     );
 };