[FEQ] / Ameerul / FEQ-1977 Refactor my profile page (deriv-com#14331)

* fix: ui issues in my-profile and create new ad button

* fix: styling issues

* fix: failing test cases

* chore: remove PaymentMethodsHeader component and fix minor style issues

* chore: replace Table component with deriv-com/ui one

* fix: removed unused prop isFloating

* chore: removed text

* chore: refactored PaymentMethodForm, separated components out

* chore: refactored PaymentMethodModals

* fix: style discrepencies in BuySellModal

* chore: removed Text and unused imports

* chore: added suggestions

* chore: added LightDivider component

* fix: ui issues for share-my-ads-modal, dropdown in myadsrow, my-ads-delete-modal

* fix: header padding ShareAdsModal

* chore: removed color from LightDivider, changed prop name

* chore: renamed PaymentMethodFormInput to PaymentMethodFormAutocomplete

Author: ameerul-deriv

packages/p2p-v2/src/components/BuySellForm/BuySellAmount/BuySellAmount.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { LightDivider } from '@/components';
 import { floatingPointValidator } from '@/utils';
-import { Divider, Input, Text, useDevice } from '@deriv-com/ui';
+import { Input, Text, useDevice } from '@deriv-com/ui';
 import { FormatUtils } from '@deriv-com/utils';
 import './BuySellAmount.scss';
 
@@ -42,7 +43,7 @@ const BuySellAmount = ({
 
     return (
         <div className='flex flex-col gap-[2rem] py-[2.4rem]'>
-            <Text className='px-[2.4rem]' color='less-prominent' size={labelSize}>
+            <Text className='px-[2.4rem]' color='less-prominent' size='sm'>
                 {`Enter ${isBuy ? 'sell' : 'buy'} amount`}
             </Text>
             <div className='p2p-v2-buy-sell-amount__input-wrapper'>
@@ -93,10 +94,10 @@ const BuySellAmount = ({
                         required: 'Enter a valid amount',
                     }}
                 />
-                {isMobile && <Divider />}
+                {isMobile && <LightDivider />}
                 <div className='flex flex-col w-full px-[2.4rem]'>
                     <Text color='less-prominent' size={labelSize}>{`You'll ${isBuy ? 'receive' : 'send'}`}</Text>
-                    <Text size={labelSize} weight='bold'>
+                    <Text size={isMobile ? 'md' : 'sm'} weight='bold'>
                         {buySellAmount} {localCurrency}
                     </Text>
                 </div>

packages/p2p-v2/src/components/BuySellForm/BuySellForm.scss

@@ -27,7 +27,6 @@
         position: absolute;
         top: -4rem;
         left: 0;
-        background: #fff;
         z-index: 1;
         height: calc(100vh - 8rem);
 

packages/p2p-v2/src/components/BuySellForm/BuySellForm.tsx

@@ -12,7 +12,8 @@ import {
     setDecimalPlaces,
 } from '@/utils';
 import { p2p } from '@deriv/api-v2';
-import { Divider, InlineMessage, Text, TextArea, useDevice } from '@deriv-com/ui';
+import { InlineMessage, Text, TextArea, useDevice } from '@deriv-com/ui';
+import { LightDivider } from '../LightDivider';
 import { BuySellAmount } from './BuySellAmount';
 import { BuySellData } from './BuySellData';
 import BuySellFormDisplayWrapper from './BuySellFormDisplayWrapper';
@@ -184,7 +185,7 @@ const BuySellForm = ({
                     paymentMethods={paymentMethods}
                     rate={displayEffectiveRate}
                 />
-                <Divider />
+                <LightDivider />
                 {isBuy && payment_method_names?.length > 0 && (
                     <BuySellPaymentSection
                         availablePaymentMethods={availablePaymentMethods}
@@ -240,7 +241,7 @@ const BuySellForm = ({
                 )}
                 {isBuy && (
                     <>
-                        <Divider />
+                        <LightDivider />
                         <Controller
                             control={control}
                             name='contact_details'

packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/BuySellFormHeader.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
-import { Text } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 
 type TBuySellFormHeaderProps = {
     currency?: string;
     isBuy: boolean;
 };
-const BuySellFormHeader = ({ currency = '', isBuy }: TBuySellFormHeaderProps) => (
-    <Text size='lg' weight='bold'>
-        {`${isBuy ? 'Sell' : 'Buy'} ${currency}`}
-    </Text>
-);
+
+const BuySellFormHeader = ({ currency = '', isBuy }: TBuySellFormHeaderProps) => {
+    const { isMobile } = useDevice();
+
+    return (
+        <Text size={isMobile ? 'lg' : 'md'} weight='bold'>
+            {`${isBuy ? 'Sell' : 'Buy'} ${currency}`}
+        </Text>
+    );
+};
 
 export default BuySellFormHeader;

packages/p2p-v2/src/components/BuySellForm/BuySellFormHeader/__tests__/BuySellFormHeader.spec.tsx

@@ -7,6 +7,11 @@ const mockProps = {
     isBuy: true,
 };
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: () => ({ isMobile: false }),
+}));
+
 describe('BuySellFormHeader', () => {
     it('should render the header as expected', () => {
         render(<BuySellFormHeader {...mockProps} />);

packages/p2p-v2/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { TPaymentMethod } from 'types';
+import { LightDivider } from '@/components';
 import { sortPaymentMethodsWithAvailability } from '@/utils';
-import { Divider, Text, useDevice } from '@deriv-com/ui';
+import { Text, useDevice } from '@deriv-com/ui';
 import { PaymentMethodCard } from '../../PaymentMethodCard';
 
 type TBuySellPaymentSectionProps = {
@@ -70,7 +71,7 @@ const BuySellPaymentSection = ({
                     ))}
                 </div>
             </div>
-            <Divider />
+            <LightDivider />
         </>
     );
 };

packages/p2p-v2/src/components/Clipboard/Clipboard.scss

@@ -6,6 +6,6 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    height: 4.8rem;
-    width: 3.8rem;
+    height: 3.8rem;
+    width: 3.2rem;
 }

packages/p2p-v2/src/components/Clipboard/Clipboard.tsx

@@ -33,7 +33,7 @@ const Clipboard = ({ textCopy }: TClipboardProps) => {
     }, []);
 
     return (
-        <Tooltip message={isCopied ? 'Copied!' : 'Copy'} position='right'>
+        <Tooltip message={isCopied ? 'Copied!' : 'Copy'} position='top'>
             <button className='p2p-v2-clipboard' onClick={onClick}>
                 {isCopied ? <CheckmarkCircle /> : <CopyIcon />}
             </button>

packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss

@@ -5,6 +5,7 @@
         border-radius: 0;
         display: grid;
         grid-template-rows: 6rem auto;
+        background-color: #fff;
 
         &--fixed-footer {
             grid-template-rows: 6rem auto 8rem;

packages/p2p-v2/src/components/LightDivider/LightDivider.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Divider } from '@deriv-com/ui';
+
+type TLightDividerProps = {
+    className?: string;
+    height?: string;
+    margin?: string;
+};
+
+const LightDivider = ({ className, height, margin }: TLightDividerProps) => {
+    return <Divider className={className} color='#f2f3f4' height={height} margin={margin} />;
+};
+
+export default LightDivider;

packages/p2p-v2/src/components/LightDivider/index.ts

@@ -0,0 +1 @@
+export { default as LightDivider } from './LightDivider';

packages/p2p-v2/src/components/MobileTabs/MobileTabs.scss

@@ -2,12 +2,13 @@
     display: flex;
     flex-direction: column;
 
-    .derivs-button {
-        padding: 2.3rem 1.6rem;
+    &__tab {
+        padding: 3rem 1.6rem;
         display: flex;
         justify-content: space-between;
-        border-bottom: 0.1rem solid #e6e9e9;
+        border-bottom: 0.1rem solid #f2f3f4;
         flex-direction: row-reverse;
+        border-radius: unset;
 
         &:last-child {
             border-bottom: none;

packages/p2p-v2/src/components/MobileTabs/MobileTabs.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { LabelPairedChevronRightLgBoldIcon } from '@deriv/quill-icons';
-import { Button } from '@deriv-com/ui';
+import { LabelPairedChevronRightSmRegularIcon } from '@deriv/quill-icons';
+import { Button, Text } from '@deriv-com/ui';
 import './MobileTabs.scss';
 
 type TMobileTabsProps<T extends string[]> = {
@@ -15,12 +15,12 @@ function MobileTabs<T extends string[]>({ onChangeTab, tabs }: TMobileTabsProps<
                 <Button
                     className='p2p-v2-mobile-tabs__tab'
                     color='white'
-                    icon={<LabelPairedChevronRightLgBoldIcon />}
+                    icon={<LabelPairedChevronRightSmRegularIcon />}
                     key={`${tab}-${i}`}
                     onClick={() => onChangeTab(tab)}
                     variant='contained'
                 >
-                    {tab}
+                    <Text size='sm'>{tab}</Text>
                 </Button>
             ))}
         </div>

packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx

@@ -59,7 +59,14 @@ const BlockUnblockUserModal = ({
                 {getModalContent()}
             </Text>
             <div className='p2p-v2-block-unblock-user-modal__footer'>
-                <Button onClick={onRequestClose} size='lg' textSize='sm' variant='outlined'>
+                <Button
+                    className='border-2'
+                    color='black'
+                    onClick={onRequestClose}
+                    size='lg'
+                    textSize='sm'
+                    variant='outlined'
+                >
                     Cancel
                 </Button>
                 <Button onClick={onClickBlockUnblock} size='lg' textSize='sm'>

packages/p2p-v2/src/components/Modals/FilterModal/FilterModal.scss

@@ -7,7 +7,6 @@
     @include mobile {
         position: absolute;
         top: -4rem;
-        background: #fff;
         z-index: 1;
         height: calc(100vh - 8rem);
     }

packages/p2p-v2/src/components/Modals/FilterModal/FilterModalFooter/FilterModalFooter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Text, useDevice } from '@deriv-com/ui';
+import { Button, useDevice } from '@deriv-com/ui';
 import './FilterModalFooter.scss';
 
 type TFilterModalFooterProps = {
@@ -30,21 +30,19 @@ const FilterModalFooter = ({
                 isFullWidth={isMobile}
                 onClick={onResetClear}
                 size='lg'
+                textSize={isMobile ? 'md' : 'sm'}
                 variant='outlined'
             >
-                <Text lineHeight='6xl' size='sm' weight='bold'>
-                    {showPaymentMethods ? 'Clear' : 'Reset'}
-                </Text>
+                {showPaymentMethods ? 'Clear' : 'Reset'}
             </Button>
             <Button
                 disabled={(showPaymentMethods && hasSamePaymentMethods) || (!showPaymentMethods && hasSameFilters)}
                 isFullWidth={isMobile}
                 onClick={onApplyConfirm}
                 size='lg'
+                textSize={isMobile ? 'md' : 'sm'}
             >
-                <Text lineHeight='6xl' size='sm' weight='bold'>
-                    {showPaymentMethods ? 'Confirm' : 'Apply'}
-                </Text>
+                {showPaymentMethods ? 'Confirm' : 'Apply'}
             </Button>
         </div>
     );

packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.scss

@@ -1,20 +1,28 @@
 .p2p-v2-my-ads-delete-modal {
-    @include p2p-v2-modal-styles;
+    height: auto;
     width: 44rem;
+    border-radius: 8px;
+
     @include mobile {
         width: 32.8rem;
     }
+
     &__header {
-        margin: 0 0.8rem;
-        padding-bottom: 1.2rem;
         @include mobile {
-            margin: 0;
+            padding: 0 1.6rem;
         }
     }
+
     &__body {
-        margin: 2.4rem 0.8rem;
+        padding: 1rem 2.4rem;
         @include mobile {
-            margin: 0;
+            padding: 0 1.6rem;
+        }
+    }
+
+    &__footer {
+        @include mobile {
+            padding: 1.6rem;
         }
     }
 }

packages/p2p-v2/src/components/Modals/MyAdsDeleteModal/MyAdsDeleteModal.tsx

@@ -1,9 +1,7 @@
-import React, { memo, useEffect } from 'react';
-import Modal from 'react-modal';
+import React, { memo } from 'react';
 import { useDevice } from '@/hooks';
 import { p2p } from '@deriv/api-v2';
-import { Button, Text } from '@deriv-com/ui';
-import { customStyles } from '../helpers';
+import { Button, Modal, Text } from '@deriv-com/ui';
 import './MyAdsDeleteModal.scss';
 
 type TMyAdsDeleteModalProps = {
@@ -21,10 +19,6 @@ const MyAdsDeleteModal = ({ error, id, isModalOpen, onClickDelete, onRequestClos
 
     const hasActiveOrders = advertInfo?.active_orders && advertInfo?.active_orders > 0;
 
-    useEffect(() => {
-        Modal.setAppElement('#v2_modal_root');
-    }, []);
-
     const getModalText = () => {
         if (hasActiveOrders && !error) {
             return 'You have open orders for this ad. Complete all open orders before deleting this ad.';
@@ -37,17 +31,22 @@ const MyAdsDeleteModal = ({ error, id, isModalOpen, onClickDelete, onRequestClos
     const getModalFooter = () => {
         if (hasActiveOrders || error) {
             return (
-                <div className='flex justify-end'>
-                    <Button onClick={onRequestClose} size='lg' textSize={textSize}>
-                        Ok
-                    </Button>
-                </div>
+                <Button onClick={onRequestClose} size='lg' textSize={textSize}>
+                    Ok
+                </Button>
             );
         }
 
         return (
-            <div className='flex justify-end gap-[1rem] pt-[1.6rem]'>
-                <Button onClick={onRequestClose} size='lg' textSize={textSize} variant='outlined'>
+            <div className='flex gap-[0.8rem]'>
+                <Button
+                    className='border-2'
+                    color='black'
+                    onClick={onRequestClose}
+                    size='lg'
+                    textSize={textSize}
+                    variant='outlined'
+                >
                     Cancel
                 </Button>
                 <Button onClick={onClickDelete} size='lg' textSize={textSize}>
@@ -60,20 +59,29 @@ const MyAdsDeleteModal = ({ error, id, isModalOpen, onClickDelete, onRequestClos
         <>
             {!isLoadingInfo && (
                 <Modal
-                    className='p-[1.6rem] p2p-v2-my-ads-delete-modal'
+                    ariaHideApp={false}
+                    className='p2p-v2-my-ads-delete-modal'
                     isOpen={isModalOpen}
                     onRequestClose={onRequestClose}
                     shouldCloseOnOverlayClick={false}
-                    style={customStyles}
                     testId='dt_p2p_v2_ads_delete_modal'
                 >
-                    <Text as='div' className='p2p-v2-my-ads-delete-modal__header' color='general' weight='bold'>
-                        Do you want to delete this ad?
-                    </Text>
-                    <Text as='div' className='p2p-v2-my-ads-delete-modal__body' color='prominent' size='sm'>
-                        {getModalText()}
-                    </Text>
-                    {getModalFooter()}
+                    <Modal.Header
+                        className='p2p-v2-my-ads-delete-modal__header'
+                        hideBorder
+                        hideCloseIcon
+                        onRequestClose={onRequestClose}
+                    >
+                        <Text weight='bold'>Do you want to delete this ad?</Text>
+                    </Modal.Header>
+                    <Modal.Body className='p2p-v2-my-ads-delete-modal__body'>
+                        <Text color='prominent' size='sm'>
+                            {getModalText()}
+                        </Text>
+                    </Modal.Body>
+                    <Modal.Footer className='p2p-v2-my-ads-delete-modal__footer' hideBorder>
+                        {getModalFooter()}
+                    </Modal.Footer>
                 </Modal>
             )}
         </>