From b43d717607e9805407611c75d7661d9d6476cbbb Mon Sep 17 00:00:00 2001
From: lubega-deriv <142860499+lubega-deriv@users.noreply.github.com>
Date: Fri, 5 Apr 2024 16:35:01 +0800
Subject: [PATCH] [WALL] Lubega / WALL-3722 / CFD modal button size (#14513)

* fix: cfd modal button size

* fix: added dependency
---
 .../components/CTraderSuccessModalButtons.tsx |  8 +++++---
 .../DxtradeEnterPasswordModal.tsx             | 13 ++++++------
 .../MT5AccountAdded/MT5AccountAdded.tsx       |  8 ++++----
 .../MT5PasswordModalFooters.tsx               | 20 ++++++++++++++-----
 .../screens/CreatePassword/CreatePassword.tsx |  2 +-
 .../screens/EnterPassword/EnterPassword.tsx   |  4 ++--
 .../MT5ResetPasswordModal.tsx                 |  8 ++++++--
 7 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx
index fc6f4a6f882e..f801d5ff549d 100644
--- a/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx
+++ b/packages/wallets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { WalletButton, WalletButtonGroup } from '../../../../../components';
+import useDevice from '../../../../../hooks/useDevice';
 
 type TCTraderSuccessModalButtons = {
     hide: () => void;
@@ -9,11 +10,12 @@ type TCTraderSuccessModalButtons = {
 
 const CTraderSuccessModalButtons = ({ hide, isDemo }: TCTraderSuccessModalButtons) => {
     const history = useHistory();
+    const { isMobile } = useDevice();
 
     if (isDemo) {
         return (
             <div className='wallets-success-btn'>
-                <WalletButton isFullWidth onClick={hide} size='lg'>
+                <WalletButton isFullWidth onClick={hide} size={isMobile ? 'lg' : 'md'}>
                     OK
                 </WalletButton>
             </div>
@@ -22,7 +24,7 @@ const CTraderSuccessModalButtons = ({ hide, isDemo }: TCTraderSuccessModalButton
 
     return (
         <WalletButtonGroup isFlex isFullWidth>
-            <WalletButton onClick={hide} size='lg' variant='outlined'>
+            <WalletButton onClick={hide} size={isMobile ? 'lg' : 'md'} variant='outlined'>
                 Maybe later
             </WalletButton>
             <WalletButton
@@ -30,7 +32,7 @@ const CTraderSuccessModalButtons = ({ hide, isDemo }: TCTraderSuccessModalButton
                     hide();
                     history.push('/wallets/cashier/transfer');
                 }}
-                size='lg'
+                size={isMobile ? 'lg' : 'md'}
             >
                 Transfer funds
             </WalletButton>
diff --git a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
index f5577ba6c644..1cdbd77751f8 100644
--- a/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
+++ b/packages/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
@@ -54,7 +54,7 @@ const DxtradeEnterPasswordModal = () => {
             if (accountType === 'demo') {
                 return (
                     <div className='wallets-success-btn'>
-                        <WalletButton isFullWidth onClick={hide} size='lg'>
+                        <WalletButton isFullWidth onClick={hide} size={isMobile ? 'lg' : 'md'}>
                             OK
                         </WalletButton>
                     </div>
@@ -62,7 +62,7 @@ const DxtradeEnterPasswordModal = () => {
             }
             return (
                 <WalletButtonGroup isFlex isFullWidth>
-                    <WalletButton onClick={() => hide()} size='lg' variant='outlined'>
+                    <WalletButton onClick={() => hide()} size={isMobile ? 'lg' : 'md'} variant='outlined'>
                         Maybe later
                     </WalletButton>
                     <WalletButton
@@ -70,7 +70,7 @@ const DxtradeEnterPasswordModal = () => {
                             hide();
                             history.push('/wallets/cashier/transfer');
                         }}
-                        size='lg'
+                        size={isMobile ? 'lg' : 'md'}
                     >
                         Transfer funds
                     </WalletButton>
@@ -90,7 +90,7 @@ const DxtradeEnterPasswordModal = () => {
                                 </ModalStepWrapper>
                             );
                         }}
-                        size='lg'
+                        size={isMobile ? 'lg' : 'md'}
                         variant='outlined'
                     >
                         Forgot password?
@@ -100,7 +100,7 @@ const DxtradeEnterPasswordModal = () => {
                         isFullWidth
                         isLoading={isLoading}
                         onClick={onSubmit}
-                        size='lg'
+                        size={isMobile ? 'lg' : 'md'}
                     >
                         Add account
                     </WalletButton>
@@ -114,7 +114,7 @@ const DxtradeEnterPasswordModal = () => {
                 isFullWidth
                 isLoading={isLoading}
                 onClick={onSubmit}
-                size='lg'
+                size={isMobile ? 'lg' : 'md'}
             >
                 {`Create ${PlatformDetails.dxtrade.title} password`}
             </WalletButton>
@@ -126,6 +126,7 @@ const DxtradeEnterPasswordModal = () => {
         history,
         isDxtradePasswordNotSet,
         isLoading,
+        isMobile,
         isSuccess,
         onSubmit,
         password,
diff --git a/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx b/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx
index 93a009006d6d..e44194ca16d1 100644
--- a/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx
@@ -44,7 +44,7 @@ const MT5AccountAdded: FC<TProps> = ({ account, marketType, platform }) => {
             if (isTransferAllowed) {
                 return (
                     <WalletButtonGroup isFlex isFullWidth>
-                        <WalletButton onClick={hide} size='lg' variant='outlined'>
+                        <WalletButton onClick={hide} size={isMobile ? 'lg' : 'md'} variant='outlined'>
                             Maybe later
                         </WalletButton>
                         <WalletButton
@@ -52,7 +52,7 @@ const MT5AccountAdded: FC<TProps> = ({ account, marketType, platform }) => {
                                 hide();
                                 history.push(`/wallets/cashier/transfer`, { toAccountLoginId: addedAccount?.loginid });
                             }}
-                            size='lg'
+                            size={isMobile ? 'lg' : 'md'}
                         >
                             Transfer funds
                         </WalletButton>
@@ -61,13 +61,13 @@ const MT5AccountAdded: FC<TProps> = ({ account, marketType, platform }) => {
             }
             return (
                 <div className='wallets-success-btn'>
-                    <WalletButton isFullWidth onClick={hide} size='lg'>
+                    <WalletButton isFullWidth onClick={hide} size={isMobile ? 'lg' : 'md'}>
                         OK
                     </WalletButton>
                 </div>
             );
         },
-        [hide, history, addedAccount?.loginid]
+        [hide, history, addedAccount?.loginid, isMobile]
     );
 
     const renderMainContent = useMemo(() => {
diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx
index 5ade04165153..03d83527b873 100644
--- a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx
+++ b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx
@@ -2,6 +2,7 @@ import React, { ComponentProps } from 'react';
 import { useHistory } from 'react-router-dom';
 import { WalletButton, WalletButtonGroup } from '../../../../components';
 import { useModal } from '../../../../components/ModalProvider';
+import useDevice from '../../../../hooks/useDevice';
 
 type TProps = {
     disabled: ComponentProps<typeof WalletButton>['disabled'];
@@ -14,6 +15,7 @@ type TProps = {
 export const SuccessModalFooter = ({ isDemo }: Pick<TProps, 'isDemo'>) => {
     const history = useHistory();
     const { hide } = useModal();
+    const { isMobile } = useDevice();
 
     const handleOnClickReal = () => {
         hide();
@@ -23,7 +25,7 @@ export const SuccessModalFooter = ({ isDemo }: Pick<TProps, 'isDemo'>) => {
     if (isDemo) {
         return (
             <div className='wallets-success-btn'>
-                <WalletButton isFullWidth onClick={hide} size='lg'>
+                <WalletButton isFullWidth onClick={hide} size={isMobile ? 'lg' : 'md'}>
                     OK
                 </WalletButton>
             </div>
@@ -32,10 +34,10 @@ export const SuccessModalFooter = ({ isDemo }: Pick<TProps, 'isDemo'>) => {
 
     return (
         <WalletButtonGroup isFlex isFullWidth>
-            <WalletButton onClick={hide} size='lg' variant='outlined'>
+            <WalletButton onClick={hide} size={isMobile ? 'lg' : 'md'} variant='outlined'>
                 Maybe later
             </WalletButton>
-            <WalletButton onClick={() => handleOnClickReal()} size='lg'>
+            <WalletButton onClick={() => handleOnClickReal()} size={isMobile ? 'lg' : 'md'}>
                 Transfer funds
             </WalletButton>
         </WalletButtonGroup>
@@ -48,12 +50,20 @@ export const MT5PasswordModalFooter = ({
     onPrimaryClick,
     onSecondaryClick,
 }: Exclude<TProps, 'isDemo'>) => {
+    const { isMobile } = useDevice();
+
     return (
         <WalletButtonGroup isFullWidth>
-            <WalletButton isFullWidth onClick={onSecondaryClick} size='lg' variant='outlined'>
+            <WalletButton isFullWidth onClick={onSecondaryClick} size={isMobile ? 'lg' : 'md'} variant='outlined'>
                 Forgot password?
             </WalletButton>
-            <WalletButton disabled={disabled} isFullWidth isLoading={isLoading} onClick={onPrimaryClick} size='lg'>
+            <WalletButton
+                disabled={disabled}
+                isFullWidth
+                isLoading={isLoading}
+                onClick={onPrimaryClick}
+                size={isMobile ? 'lg' : 'md'}
+            >
                 Add account
             </WalletButton>
         </WalletButtonGroup>
diff --git a/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx b/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx
index dac10f6a197f..80da41d05ed8 100644
--- a/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx
+++ b/packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx
@@ -46,7 +46,7 @@ const CreatePassword: React.FC<TProps> = ({ isLoading, onPasswordChange, onPrima
                     disabled={!password || isLoading || !validPasswordMT5(password)}
                     isLoading={isLoading}
                     onClick={onPrimaryClick}
-                    size='lg'
+                    size='md'
                 >
                     {`Create ${title} password`}
                 </WalletButton>
diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
index 616f1e2bd490..6b2389c9eb12 100644
--- a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
+++ b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
@@ -62,14 +62,14 @@ const EnterPassword: React.FC<TProps> = ({
             </div>
             {isDesktop && (
                 <div className='wallets-enter-password__buttons'>
-                    <WalletButton onClick={onSecondaryClick} size='lg' variant='outlined'>
+                    <WalletButton onClick={onSecondaryClick} size='md' variant='outlined'>
                         Forgot password?
                     </WalletButton>
                     <WalletButton
                         disabled={!password || isLoading || !validPassword(password)}
                         isLoading={isLoading}
                         onClick={onPrimaryClick}
-                        size='lg'
+                        size='md'
                     >
                         Add account
                     </WalletButton>
diff --git a/packages/wallets/src/features/cfd/screens/MT5ResetPasswordModal/MT5ResetPasswordModal.tsx b/packages/wallets/src/features/cfd/screens/MT5ResetPasswordModal/MT5ResetPasswordModal.tsx
index c9bb06f7eafd..9c3c4f71e64e 100644
--- a/packages/wallets/src/features/cfd/screens/MT5ResetPasswordModal/MT5ResetPasswordModal.tsx
+++ b/packages/wallets/src/features/cfd/screens/MT5ResetPasswordModal/MT5ResetPasswordModal.tsx
@@ -120,13 +120,17 @@ const MT5ResetPasswordModal: React.FC<TProps> = ({
                         </div>
                         <div className='wallets-mt5-reset__footer'>
                             <WalletButtonGroup isFlex isFullWidth={isMobile}>
-                                <WalletButton onClick={sendEmailVerification} size='lg' variant='outlined'>
+                                <WalletButton
+                                    onClick={sendEmailVerification}
+                                    size={isMobile ? 'lg' : 'md'}
+                                    variant='outlined'
+                                >
                                     Forgot password?
                                 </WalletButton>
                                 <WalletButton
                                     disabled={!!errors.currentPassword || !validPasswordMT5(values.newPassword)}
                                     isLoading={isLoading}
-                                    size='lg'
+                                    size={isMobile ? 'lg' : 'md'}
                                     type='submit'
                                 >
                                     Change my password