[WALL] Lubega / WALL-3722 / CFD modal button size (#14513)

* fix: cfd modal button size * fix: added dependency
deriv-com · Apr 5, 2024 · b43d717 · b43d717
1 parent 3bc8430
commit b43d717
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 23 deletions.
diff --git a/...ets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx b/...ets/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,15 +24,15 @@ 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
                 onClick={() => {
                     hide();
                     history.push('/wallets/cashier/transfer');
                 }}
-                size='lg'
+                size={isMobile ? 'lg' : 'md'}
             >
                 Transfer funds
             </WalletButton>

diff --git a/...s/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx b/...s/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
@@ -54,23 +54,23 @@ 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>
                 );
             }
             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={() => {
                             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
@@ -44,15 +44,15 @@ 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
                             onClick={() => {
                                 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
@@ -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
@@ -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
@@ -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
@@ -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