Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Apr 5, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
45d57ec
fix: cfd modal button size
lubega-deriv Apr 5, 2024
3279d2a
fix: added dependency
lubega-deriv Apr 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions ...ets/src/features/cfd/modals/CTraderSuccessModal/components/CTraderSuccessModalButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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>
Expand All @@ -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>
Expand Down
13 changes: 7 additions & 6 deletions ...s/wallets/src/features/cfd/modals/DxtradeEnterPasswordModal/DxtradeEnterPasswordModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -90,7 +90,7 @@ const DxtradeEnterPasswordModal = () => {
</ModalStepWrapper>
);
}}
size='lg'
size={isMobile ? 'lg' : 'md'}
variant='outlined'
>
Forgot password?
Expand All @@ -100,7 +100,7 @@ const DxtradeEnterPasswordModal = () => {
isFullWidth
isLoading={isLoading}
onClick={onSubmit}
size='lg'
size={isMobile ? 'lg' : 'md'}
>
Add account
</WalletButton>
Expand All @@ -114,7 +114,7 @@ const DxtradeEnterPasswordModal = () => {
isFullWidth
isLoading={isLoading}
onClick={onSubmit}
size='lg'
size={isMobile ? 'lg' : 'md'}
>
{`Create ${PlatformDetails.dxtrade.title} password`}
</WalletButton>
Expand All @@ -126,6 +126,7 @@ const DxtradeEnterPasswordModal = () => {
history,
isDxtradePasswordNotSet,
isLoading,
isMobile,
isSuccess,
onSubmit,
password,
Expand Down
8 changes: 4 additions & 4 deletions packages/wallets/src/features/cfd/modals/MT5AccountAdded/MT5AccountAdded.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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(() => {
Expand Down
20 changes: 15 additions & 5 deletions packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModalFooters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
Expand All @@ -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();
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 6 additions & 2 deletions packages/wallets/src/features/cfd/screens/MT5ResetPasswordModal/MT5ResetPasswordModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
nijil-deriv marked this conversation as resolved.
Show resolved Hide resolved
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
Expand Down