farrah/ fix: payment methods style issues

src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss

@@ -2,7 +2,6 @@
     &__body {
         display: flex;
         flex-direction: column;
-        margin-top: 0.8rem;
         vertical-align: baseline;
     }
 }

src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx

@@ -16,11 +16,11 @@ const PaymentMethodCardBody = ({
     const isBankOrOther = modifiedDisplayName && ['BankTransfer', 'Other'].includes(modifiedDisplayName);
     return (
         <div className='payment-method-card__body'>
-            {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : <Text size='xs'>{displayName}</Text>}
-            <Text size='xs'>
+            {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : <Text>{displayName}</Text>}
+            <Text>
                 {(paymentMethod.fields?.bank_name as TBankName)?.value ?? (paymentMethod.fields?.name as TName)?.value}
             </Text>
-            <Text size='xs'>{(paymentMethod.fields?.account as TAccount)?.value}</Text>
+            <Text>{(paymentMethod.fields?.account as TAccount)?.value}</Text>
         </div>
     );
 };

src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss

@@ -8,6 +8,26 @@
         justify-content: space-between;
         align-items: center;
         margin-bottom: 1.1rem;
+
+        .deriv-dropdown {
+            width: 3.2rem;
+
+            &__items {
+                width: 12.8rem;
+                border: 0;
+                padding: 0;
+            }
+
+            .deriv-input {
+                border: 0;
+                padding: 0;
+
+                &__field,
+                &__helper-message {
+                    display: none;
+                }
+            }
+        }
     }
     .derivs-button__variant--ghost {
         color: #0e0e0e;

src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx

@@ -1,7 +1,6 @@
 import { THooks } from 'types';
-import { FlyoutMenu } from '@/components';
 import { LabelPairedEllipsisVerticalXlRegularIcon } from '@deriv/quill-icons';
-import { Button, Checkbox } from '@deriv-com/ui';
+import { Checkbox, Dropdown } from '@deriv-com/ui';
 import { ReactComponent as IcCashierBankTransfer } from '../../../public/ic-cashier-bank-transfer.svg';
 import { ReactComponent as IcCashierEwallet } from '../../../public/ic-cashier-ewallet.svg';
 import { ReactComponent as IcCashierOther } from '../../../public/ic-cashier-other.svg';
@@ -20,6 +19,18 @@ type TPaymentMethodCardHeaderProps = {
     type: THooks.AdvertiserPaymentMethods.Get[number]['type'];
 };
 
+// TODO: Remember to translate these
+const actions = [
+    {
+        text: 'Edit',
+        value: 'edit',
+    },
+    {
+        text: 'Delete',
+        value: 'delete',
+    },
+];
+
 const PaymentMethodCardHeader = ({
     isDisabled = false,
     isEditable = false,
@@ -38,16 +49,7 @@ const PaymentMethodCardHeader = ({
     } else if (type === 'ewallet') {
         Icon = IcCashierEwallet;
     }
-    // TODO: Remember to translate these
-    const flyoutMenuItems = [
-        <Button color='black' key={0} onClick={() => onEditPaymentMethod?.()} size='sm' textSize='xs' variant='ghost'>
-            Edit
-        </Button>,
 
-        <Button color='black' key={1} onClick={() => onDeletePaymentMethod?.()} size='sm' textSize='xs' variant='ghost'>
-            Delete
-        </Button>,
-    ];
     return (
         <div className='payment-method-card__header' data-testid='dt_payment_method_card_header'>
             <Icon
@@ -57,9 +59,18 @@ const PaymentMethodCardHeader = ({
                 width={medium || small ? 16 : 24}
             />
             {isEditable && (
-                <FlyoutMenu
-                    listItems={flyoutMenuItems}
-                    renderIcon={() => <LabelPairedEllipsisVerticalXlRegularIcon className='cursor-pointer' />}
+                <Dropdown
+                    className='payment-method-card__header-dropdown'
+                    dropdownIcon={<LabelPairedEllipsisVerticalXlRegularIcon />}
+                    list={actions}
+                    name='payment-method-actions'
+                    onSelect={value => {
+                        if (value === 'edit') {
+                            onEditPaymentMethod?.();
+                        } else if (value === 'delete') {
+                            onDeletePaymentMethod?.();
+                        }
+                    }}
                 />
             )}
             {isSelectable && (

src/components/index.ts

@@ -7,7 +7,6 @@ export * from './Clipboard';
 export * from './Dropdown';
 export * from './FileDropzone';
 export * from './FloatingRate';
-export * from './FlyoutMenu';
 export * from './FormProgress';
 export * from './FullPageMobileWrapper';
 export * from './Header';

src/pages/my-profile/screens/MyProfile/MyProfile.scss

@@ -2,10 +2,10 @@
     display: flex;
     flex-direction: column;
     padding-top: 2.4rem;
+    overflow-y: auto;
+    height: calc(100vh - 12rem);
 
     @include mobile {
-        overflow-y: scroll;
-        height: calc(100vh - 12rem);
         padding: 0;
     }