Aizad/WALL-4579/Change Password Button to Forgot Password Link on MT5…

…TradeModal (deriv-com#16379) * chore: Replace password button with Forgot Password link * chore: update stylings * chore: translate new string within component * chore: remove edit svg * chore: made changes based on comments * chore: added optinal value string * chore: update default value placement
kate-deriv · Aug 12, 2024 · 948dff7 · 948dff7
1 parent ccc9735
commit 948dff7
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 44 deletions.
diff --git a/...lets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss b/...lets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.scss
@@ -21,19 +21,19 @@
         align-items: center;
         gap: 0.8rem;
         padding-right: 0.8rem;
-        font-family: 'Courier', monospace;
-
-        & .wallets-text {
-            font-family: 'Courier', serif;
-        }
 
         & .wallets-clipboard {
             border: none;
             border-radius: none;
         }
-    }
 
-    &__edit {
-        cursor: pointer;
+        &--mono-text {
+            font-family: 'Courier', serif;
+        }
+
+        &--forgot-link {
+            text-decoration: underline;
+            cursor: pointer;
+        }
     }
 }
diff --git a/...llets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx b/...llets/src/features/cfd/screens/MT5TradeScreen/MT5TradeDetailsItem/MT5TradeDetailsItem.tsx
@@ -1,55 +1,69 @@
 import React, { FC } from 'react';
 import classNames from 'classnames';
-import { Tooltip } from '@deriv-com/ui';
-import { WalletClipboard, WalletText } from '../../../../../components/Base';
+import { Localize } from '@deriv-com/translations';
+import { Text, useDevice } from '@deriv-com/ui';
+import { WalletClipboard } from '../../../../../components/Base';
 import { useModal } from '../../../../../components/ModalProvider';
-import useDevice from '../../../../../hooks/useDevice';
-import EditIcon from '../../../../../public/images/ic-edit.svg';
 import { ChangePassword } from '../../ChangePassword';
 import './MT5TradeDetailsItem.scss';
 
 type TMT5TradeDetailsItemProps = {
     label?: string;
-    value: string;
+    value?: string;
     variant?: 'clipboard' | 'info' | 'password';
 };
 
-const MT5TradeDetailsItem: FC<TMT5TradeDetailsItemProps> = ({ label, value, variant = 'clipboard' }) => {
+const MT5TradeDetailsItem: FC<TMT5TradeDetailsItemProps> = ({ label, value = '', variant = 'clipboard' }) => {
     const { isDesktop } = useDevice();
     const { show } = useModal();
+
+    const textSize = isDesktop ? 'xs' : 'sm';
+
     return (
         <div
             className={classNames('wallets-mt5-trade-details-item', {
                 'wallets-mt5-trade-details-item--info': variant === 'info',
             })}
         >
-            {variant !== 'info' && (
+            {variant === 'clipboard' && (
                 <React.Fragment>
-                    <WalletText color='less-prominent' size={isDesktop ? 'xs' : 'sm'}>
+                    <Text color='less-prominent' size={textSize}>
                         {label}
-                    </WalletText>
+                    </Text>
                     <div className='wallets-mt5-trade-details-item__values'>
-                        <WalletText size={isDesktop ? 'xs' : 'sm'} weight='bold'>
+                        <Text
+                            className='wallets-mt5-trade-details-item__values--mono-text'
+                            size={textSize}
+                            weight='bold'
+                        >
                             {value}
-                        </WalletText>
-                        {variant === 'clipboard' && <WalletClipboard popoverAlignment='left' textCopy={value} />}
-                        {variant === 'password' && (
-                            <Tooltip
-                                as='button'
-                                onClick={() => show(<ChangePassword />)}
-                                tooltipContent='Change password'
-                                tooltipPosition='left'
-                            >
-                                <EditIcon className='wallets-mt5-trade-details-item__edit' />
-                            </Tooltip>
-                        )}
+                        </Text>
+                        <WalletClipboard popoverAlignment='left' textCopy={value} />
+                    </div>
+                </React.Fragment>
+            )}
+            {variant === 'password' && (
+                <React.Fragment>
+                    <Text color='less-prominent' size={textSize}>
+                        {label}
+                    </Text>
+                    <div className='wallets-mt5-trade-details-item__values'>
+                        <Text
+                            as='a'
+                            className='wallets-mt5-trade-details-item__values--forgot-link'
+                            onClick={() => show(<ChangePassword />)}
+                            size={textSize}
+                            weight='bold'
+                        >
+                            <Localize i18n_default_text=' Forgot Password?' />
+                        </Text>
                     </div>
                 </React.Fragment>
             )}
             {variant === 'info' && (
-                <WalletText color='less-prominent' size={isDesktop ? 'xs' : 'sm'}>
+                <Text color='less-prominent' size={textSize}>
                     {value}
-                </WalletText>
+                </Text>
             )}
         </div>
     );

diff --git a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx
@@ -167,13 +167,13 @@ const MT5TradeScreen: FC<MT5TradeScreenProps> = ({ mt5Account }) => {
                                 value={details?.server_info?.environment ?? 'Deriv-Server'}
                             />
                             <MT5TradeDetailsItem label='Login ID' value={loginId ?? '12345678'} />
-                            <MT5TradeDetailsItem label='Password' value='********' variant='password' />
+                            <MT5TradeDetailsItem label='Password' variant='password' />
                         </Fragment>
                     )}
                     {getModalState('platform') === dxtradePlatform && (
                         <Fragment>
                             <MT5TradeDetailsItem label='Username' value={details?.login ?? '12345678'} />
-                            <MT5TradeDetailsItem label='Password' value='********' variant='password' />
+                            <MT5TradeDetailsItem label='Password' variant='password' />
                         </Fragment>
                     )}
                     {getModalState('platform') === ctraderPlatform && (

diff --git a/packages/wallets/src/public/images/ic-edit.svg b/packages/wallets/src/public/images/ic-edit.svg