'MockIcCashierVerticalEllipsis'} />);
- expect(screen.getByText('MockIcCashierVerticalEllipsis')).toBeInTheDocument();
- });
- it('should display the menu items when the icon is clicked', async () => {
- render();
- await userEvent.click(screen.getByTestId('dt_flyout_toggle'));
- flyoutItems.forEach(item => {
- expect(screen.getByText(item)).toBeInTheDocument();
- });
- });
- it('should hide the flyout menu list when the parent is clicked', async () => {
- render(
-
-
-
- );
- await userEvent.click(screen.getByTestId('dt_flyout_toggle'));
- expect(screen.getByText(flyoutItems[0])).toBeInTheDocument();
- await userEvent.click(screen.getByTestId('dt_flyout_parent'));
- expect(screen.queryByText(flyoutItems[0])).not.toBeInTheDocument();
- });
-});
diff --git a/src/components/FlyoutMenu/index.ts b/src/components/FlyoutMenu/index.ts
deleted file mode 100644
index 76059bfd..00000000
--- a/src/components/FlyoutMenu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as FlyoutMenu } from './FlyoutMenu';
diff --git a/src/components/Modals/RadioGroupFilterModal/RadioGroupFilterModal.scss b/src/components/Modals/RadioGroupFilterModal/RadioGroupFilterModal.scss
index 6a647dea..d73c6cd8 100644
--- a/src/components/Modals/RadioGroupFilterModal/RadioGroupFilterModal.scss
+++ b/src/components/Modals/RadioGroupFilterModal/RadioGroupFilterModal.scss
@@ -38,7 +38,7 @@
width: 100%;
&:first-child {
- border-bottom: 1px solid var(--border-normal);
+ border-bottom: 1px solid #d6dadb;
}
}
}
diff --git a/src/components/Modals/ShareAdsModal/ShareAdsModal.scss b/src/components/Modals/ShareAdsModal/ShareAdsModal.scss
index afe8fc3a..2efe4059 100644
--- a/src/components/Modals/ShareAdsModal/ShareAdsModal.scss
+++ b/src/components/Modals/ShareAdsModal/ShareAdsModal.scss
@@ -52,7 +52,7 @@
display: flex;
align-items: center;
border-radius: 0.3rem;
- border: 0.1em solid var(--general-active);
+ border: 0.1em solid #d6dadb;
margin-top: 2.5rem;
padding: 0.8rem;
@@ -60,7 +60,7 @@
display: flex;
align-items: center;
justify-content: center;
- background: var(--general-section-5);
+ background: #f2f3f4;
border-radius: 0.3rem;
margin-left: 1rem;
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss
index 1f1ad1ab..7f291f82 100644
--- a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss
+++ b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.scss
@@ -2,7 +2,6 @@
&__body {
display: flex;
flex-direction: column;
- margin-top: 0.8rem;
vertical-align: baseline;
}
}
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx
index 014632b4..0e319c6b 100644
--- a/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx
+++ b/src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx
@@ -16,11 +16,11 @@ const PaymentMethodCardBody = ({
const isBankOrOther = modifiedDisplayName && ['BankTransfer', 'Other'].includes(modifiedDisplayName);
return (
- {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : {displayName}}
-
+ {isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : {displayName}}
+
{(paymentMethod.fields?.bank_name as TBankName)?.value ?? (paymentMethod.fields?.name as TName)?.value}
- {(paymentMethod.fields?.account as TAccount)?.value}
+ {(paymentMethod.fields?.account as TAccount)?.value}
);
};
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss
index 4832d32f..dc4ba77a 100644
--- a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.scss
+++ b/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;
diff --git a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx b/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
index 3791937a..324e3569 100644
--- a/src/components/PaymentMethodCard/PaymentMethodCardHeader/PaymentMethodCardHeader.tsx
+++ b/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 = [
- ,
- ,
- ];
return (
{isEditable && (
-
}
+ }
+ list={actions}
+ name='payment-method-actions'
+ onSelect={value => {
+ if (value === 'edit') {
+ onEditPaymentMethod?.();
+ } else if (value === 'delete') {
+ onDeletePaymentMethod?.();
+ }
+ }}
/>
)}
{isSelectable && (
diff --git a/src/components/Table/Table.scss b/src/components/Table/Table.scss
index b125e4eb..f4af99f5 100644
--- a/src/components/Table/Table.scss
+++ b/src/components/Table/Table.scss
@@ -11,7 +11,7 @@
&-row {
&:not(:last-child) {
- border-bottom: 1px solid var(--general-section-1);
+ border-bottom: 1px solid #f2f3f4;
}
}
}
@@ -39,13 +39,13 @@
scrollbar-width: thin;
display: unset;
border-radius: 10px;
- background-color: var(--state-active);
+ background-color: #d6dadb;
}
}
&__header {
display: grid;
- border-bottom: 2px solid var(--general-section-1);
+ border-bottom: 2px solid #f2f3f4;
padding: 1.6rem;
}
}
diff --git a/src/components/index.ts b/src/components/index.ts
index 12a622d2..7406e03c 100644
--- a/src/components/index.ts
+++ b/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';
diff --git a/src/pages/my-ads/components/AdType/AdType.scss b/src/pages/my-ads/components/AdType/AdType.scss
index 393cad26..877045fd 100644
--- a/src/pages/my-ads/components/AdType/AdType.scss
+++ b/src/pages/my-ads/components/AdType/AdType.scss
@@ -10,7 +10,7 @@
&__badge {
align-items: center;
border-radius: 0.4rem;
- border: 1px solid var(--border-normal);
+ border: 1px solid #d6dadb;
display: flex;
flex-direction: row;
margin: 0.3rem 0.5rem 0.3rem 0;
diff --git a/src/pages/my-ads/components/ProgressIndicator/ProgressIndicator.scss b/src/pages/my-ads/components/ProgressIndicator/ProgressIndicator.scss
index 5c130db4..22ed535d 100644
--- a/src/pages/my-ads/components/ProgressIndicator/ProgressIndicator.scss
+++ b/src/pages/my-ads/components/ProgressIndicator/ProgressIndicator.scss
@@ -13,14 +13,14 @@
}
&__bar {
z-index: 2;
- background-color: var(--status-success);
+ background-color: #4bb4b3;
height: 100%;
position: absolute;
left: 0;
}
&__empty {
z-index: 1;
- background-color: var(--general-section-1);
+ background-color: #f2f3f4;
width: 100%;
height: 100%;
position: absolute;
diff --git a/src/pages/my-profile/screens/MyProfile/MyProfile.scss b/src/pages/my-profile/screens/MyProfile/MyProfile.scss
index 53fc76c0..297600ee 100644
--- a/src/pages/my-profile/screens/MyProfile/MyProfile.scss
+++ b/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;
}
diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss
index f4d77c0e..ccdf90bb 100644
--- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss
+++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTable/MyProfileCounterpartiesTable.scss
@@ -13,7 +13,7 @@
position: relative;
}
&:not(:last-child) {
- border-bottom: 1px solid var(--general-section-1);
+ border-bottom: 1px solid #f2f3f4;
}
}
}
diff --git a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss
index 749bdc11..a691e367 100644
--- a/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss
+++ b/src/pages/my-profile/screens/MyProfileCounterparties/MyProfileCounterpartiesTableRow/MyProfileCounterpartiesTableRow.scss
@@ -4,7 +4,7 @@
justify-content: space-between;
&:hover {
- background: var(--general-hover);
+ background: #e6e9e9;
}
&__nickname-wrapper {
diff --git a/src/public/ic-alert-warning.svg b/src/public/ic-alert-warning.svg
deleted file mode 100644
index 7aa8d9eb..00000000
--- a/src/public/ic-alert-warning.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-archive.svg b/src/public/ic-archive.svg
deleted file mode 100644
index ab6806b2..00000000
--- a/src/public/ic-archive.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-cashier-sort.svg b/src/public/ic-cashier-sort.svg
deleted file mode 100644
index 5f5ff39c..00000000
--- a/src/public/ic-cashier-sort.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-chat.svg b/src/public/ic-chat.svg
deleted file mode 100644
index 5d5122cc..00000000
--- a/src/public/ic-chat.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-checkmark-circle.svg b/src/public/ic-checkmark-circle.svg
deleted file mode 100644
index 7149fac2..00000000
--- a/src/public/ic-checkmark-circle.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-clipboard.svg b/src/public/ic-clipboard.svg
deleted file mode 100644
index 5a157b57..00000000
--- a/src/public/ic-clipboard.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-close-circle.svg b/src/public/ic-close-circle.svg
deleted file mode 100644
index 43cf60e7..00000000
--- a/src/public/ic-close-circle.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-delete.svg b/src/public/ic-delete.svg
deleted file mode 100644
index 4f98deaa..00000000
--- a/src/public/ic-delete.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-edit.svg b/src/public/ic-edit.svg
deleted file mode 100644
index 280c57a8..00000000
--- a/src/public/ic-edit.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-more.svg b/src/public/ic-more.svg
deleted file mode 100644
index ea499ab0..00000000
--- a/src/public/ic-more.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-share-link.svg b/src/public/ic-share-link.svg
deleted file mode 100644
index d1294f4d..00000000
--- a/src/public/ic-share-link.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-share.svg b/src/public/ic-share.svg
deleted file mode 100644
index 8c19276c..00000000
--- a/src/public/ic-share.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-thumb-up.svg b/src/public/ic-thumb-up.svg
deleted file mode 100644
index bc552742..00000000
--- a/src/public/ic-thumb-up.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/public/ic-unarchive.svg b/src/public/ic-unarchive.svg
deleted file mode 100644
index 105fcd1f..00000000
--- a/src/public/ic-unarchive.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-user-blocked-outline.svg b/src/public/ic-user-blocked-outline.svg
deleted file mode 100644
index c919a28a..00000000
--- a/src/public/ic-user-blocked-outline.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/public/ic-whatsapp-filled.svg b/src/public/ic-whatsapp-filled.svg
deleted file mode 100644
index af15cb8e..00000000
--- a/src/public/ic-whatsapp-filled.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index b9773646..e634bb5c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,7 +19,7 @@
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
- "types": ["@testing-library/jest-dom"],
+ "types": ["@testing-library/jest-dom", "node"],
"paths": {
"@/*": ["src/*"]
}