diff --git a/apps/admin-x-design-system/src/global/ListItem.tsx b/apps/admin-x-design-system/src/global/ListItem.tsx index ca2b616ad6..d5b4cb17e8 100644 --- a/apps/admin-x-design-system/src/global/ListItem.tsx +++ b/apps/admin-x-design-system/src/global/ListItem.tsx @@ -42,28 +42,36 @@ const ListItem: React.FC = ({ }; const listItemClasses = clsx( - 'group/list-item flex items-center justify-between', - bgOnHover && 'hover:bg-gradient-to-r hover:from-white hover:to-grey-50 dark:hover:from-black dark:hover:to-grey-950', - separator ? 'border-b border-grey-100 last-of-type:border-b-transparent hover:border-grey-200 dark:border-grey-900 dark:hover:border-grey-800' : 'border-y border-transparent hover:border-grey-200 first-of-type:hover:border-t-transparent dark:hover:border-grey-800', + 'group/list-item relative flex items-center justify-between', + bgOnHover && 'hover:bg-grey-50 dark:hover:bg-grey-950', + separator ? 'border-b border-grey-100 last-of-type:border-b-transparent dark:border-grey-900' : 'border-y border-transparent', + onClick && 'cursor-pointer before:absolute before:inset-0 before:content-[""]', + 'hover:z-10 hover:border-b-transparent', + '-mb-px pb-px', className ); return ( -
- {children ? children : -
- {avatar && avatar} -
- {title} - {detail && {detail}} +
+ {bgOnHover && ( +
+ )} +
+ {children ? children : +
+ {avatar && avatar} +
+ {title} + {detail && {detail}} +
-
- } - {action && -
- {action} -
- } + } + {action && +
+ {action} +
+ } +
); }; diff --git a/apps/admin-x-design-system/src/global/TabView.tsx b/apps/admin-x-design-system/src/global/TabView.tsx index f3ccb9ddac..e95790c16d 100644 --- a/apps/admin-x-design-system/src/global/TabView.tsx +++ b/apps/admin-x-design-system/src/global/TabView.tsx @@ -78,7 +78,7 @@ export const TabList: React.FC = ({ topRightContent }) => { const containerClasses = clsx( - 'no-scrollbar flex w-full overflow-x-auto', + 'no-scrollbar mb-px flex w-full overflow-x-auto', width === 'narrow' && 'gap-3', width === 'normal' && 'gap-5', width === 'wide' && 'gap-7', diff --git a/apps/admin-x-design-system/src/global/TableRow.tsx b/apps/admin-x-design-system/src/global/TableRow.tsx index 7e40a3f502..35bb54112e 100644 --- a/apps/admin-x-design-system/src/global/TableRow.tsx +++ b/apps/admin-x-design-system/src/global/TableRow.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import React, {forwardRef} from 'react'; -export const tableRowHoverBgClasses = 'hover:bg-gradient-to-r hover:from-white hover:to-grey-50 dark:hover:from-black dark:hover:to-grey-950'; +export const tableRowHoverBgClasses = 'before:absolute before:inset-x-[-16px] before:top-[-1px] before:bottom-0 before:bg-grey-50 before:opacity-0 hover:before:opacity-100 before:rounded-md before:transition-opacity dark:before:bg-grey-950 hover:z-10'; export interface TableRowProps { id?: string; @@ -28,23 +28,26 @@ const TableRow = forwardRef(function TableRo separator = (separator === undefined) ? true : separator; const tableRowClasses = clsx( - 'group/table-row', + 'group/table-row relative', bgOnHover && tableRowHoverBgClasses, onClick && 'cursor-pointer', - separator ? 'border-b border-grey-100 last-of-type:border-b-transparent hover:border-grey-200 dark:border-grey-950 dark:hover:border-grey-900' : 'border-y border-none first-of-type:hover:border-t-transparent', + separator ? 'border-b border-grey-100 last-of-type:border-b-transparent dark:border-grey-950' : 'border-y border-none first-of-type:hover:border-t-transparent', + 'hover:border-b-transparent', className ); return ( - {children} - {action && - -
- {action} -
- - } + +
+
{children}
+ {action && +
+ {action} +
+ } +
+ ); }); diff --git a/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx b/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx index 9d6be4d288..627fb165f9 100644 --- a/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx +++ b/apps/admin-x-settings/src/components/settings/advanced/Integrations.tsx @@ -40,7 +40,10 @@ const IntegrationItem: React.FC = ({ }) => { const {updateRoute} = useRouting(); - const handleClick = () => { + const handleClick = (e?: React.MouseEvent) => { + // Prevent the click event from bubbling up when clicking the delete button + e?.stopPropagation(); + if (disabled) { updateRoute({route: 'pro', isExternal: true}); } else { @@ -48,8 +51,13 @@ const IntegrationItem: React.FC = ({ } }; + const handleDelete = (e?: React.MouseEvent) => { + e?.stopPropagation(); + onDelete?.(); + }; + const buttons = custom ? -
) } testId='incoming-recommendation-list-item' hideActions> - +
-
+
{incomingRecommendation.title || incomingRecommendation.url}
- - {(signups === 0) ? (-) : (
- {numberWithCommas(signups)} -
)} + + {(signups === 0) ? ( + - + ) : ( +
+ {numberWithCommas(signups)} +
+ )} - {(signups === 0) ? (null) : (
- {freeMembersLabel} -
)} + {(signups === 0) ? (null) : ( +
+ {freeMembersLabel} +
+ )} {incomingRecommendation.recommending_back &&
Recommending
} diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/RecommendationList.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/RecommendationList.tsx index 872f490ed2..e36f54ab26 100644 --- a/apps/admin-x-settings/src/components/settings/growth/recommendations/RecommendationList.tsx +++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/RecommendationList.tsx @@ -35,26 +35,31 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme const clicks = count === 1 ? 'click' : 'clicks'; return ( - - -
-
-
- - {recommendation.title} -
-
+ + +
+ + {recommendation.title}
- - {(count === 0) ? (-) : (
- {numberWithCommas(count)} -
)} - - - {(count === 0) ? (null) : (
- {showSubscribers ? newMembers : clicks} from you -
)} + + {count === 0 ? ( + - + ) : ( + <> +
+
+ {numberWithCommas(count)} +
+
+ {showSubscribers ? newMembers : clicks} + from you +
+
+ + )} ); diff --git a/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts b/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts index 57868eaeee..3d92b5e847 100644 --- a/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts +++ b/apps/admin-x-settings/test/acceptance/email/newsletters.test.ts @@ -342,9 +342,13 @@ test.describe('Newsletter settings', async () => { }] }} }}); + + const awesomeNewsletterRow = section.getByRole('row', {name: /Awesome newsletter/}); + await awesomeNewsletterRow.hover(); - await section.getByText('Awesome newsletter').hover(); - await section.getByRole('button', {name: 'Edit'}).click(); + const editButton = awesomeNewsletterRow.getByTestId('edit-newsletter-button'); + await editButton.waitFor({state: 'visible', timeout: 5000}); + await editButton.click(); const activeNewsletterModal = page.getByTestId('newsletter-modal'); await activeNewsletterModal.getByRole('button', {name: 'Archive newsletter'}).click();