Unify automation actions styles with segments

[MAILPOET-5395]

mailpoet/assets/css/src/components-automation-listing/cells/_actions.scss

@@ -1,7 +0,0 @@
-.mailpoet-automation-listing-cell-actions {
-  align-items: center;
-  display: grid;
-  gap: 8px;
-  grid-auto-flow: column;
-  white-space: nowrap;
-}

mailpoet/assets/css/src/mailpoet-automation.scss

@@ -12,7 +12,6 @@
 @import './components-automation-listing/listing';
 @import './components-automation-listing/header';
 @import './components-automation-listing/search';
-@import './components-automation-listing/cells/actions';
 @import './components-automation-listing/cells/status';
 
 // automation templates

mailpoet/assets/js/src/automation/listing/components/actions/analytics.tsx

@@ -1,3 +1,4 @@
+import { ComponentProps } from 'react';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
@@ -7,17 +8,25 @@ import { MailPoet } from '../../../../mailpoet';
 type Props = {
   automation: AutomationItem;
   label?: string;
+  variant?: ComponentProps<typeof Button>['variant'];
 };
 
-export function Analytics({ automation, label }: Props): JSX.Element {
+export function Analytics({
+  automation,
+  label,
+  variant = 'link',
+}: Props): JSX.Element {
   const { id, isLegacy } = automation;
   return isLegacy ? (
-    <a href={`?page=mailpoet-newsletters&context=automation#/stats/${id}`}>
+    <Button
+      variant={variant}
+      href={`?page=mailpoet-newsletters&context=automation#/stats/${id}`}
+    >
       {label ?? __('Analytics', 'mailpoet')}
-    </a>
+    </Button>
   ) : (
     <Button
-      variant="link"
+      variant={variant}
       href={addQueryArgs(MailPoet.urls.automationAnalytics, {
         id: automation.id,
       })}

mailpoet/assets/js/src/automation/listing/components/actions/edit-automation.tsx

@@ -1,3 +1,4 @@
+import { ComponentProps } from 'react';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
@@ -7,17 +8,25 @@ import { MailPoet } from '../../../../mailpoet';
 type Props = {
   automation: AutomationItem;
   label?: string;
+  variant?: ComponentProps<typeof Button>['variant'];
 };
 
-export function EditAutomation({ automation, label }: Props): JSX.Element {
+export function EditAutomation({
+  automation,
+  label,
+  variant = 'link',
+}: Props): JSX.Element {
   const { id, isLegacy } = automation;
   return isLegacy ? (
-    <Button variant="link" href={`?page=mailpoet-newsletter-editor&id=${id}`}>
+    <Button
+      variant={variant}
+      href={`?page=mailpoet-newsletter-editor&id=${id}`}
+    >
       {label ?? __('Edit', 'mailpoet')}
     </Button>
   ) : (
     <Button
-      variant="link"
+      variant={variant}
       href={addQueryArgs(MailPoet.urls.automationEditor, { id: automation.id })}
     >
       {label ?? __('Edit', 'mailpoet')}

mailpoet/assets/js/src/automation/listing/components/cells/actions.tsx

@@ -21,9 +21,9 @@ export function Actions({ automation }: Props): JSX.Element {
   const menuItems = [trash, restore, del].filter((item) => item);
 
   return (
-    <div className="mailpoet-automation-listing-cell-actions">
-      <Analytics automation={automation} />
-      <EditAutomation automation={automation} />
+    <div className="mailpoet-listing-actions-cell">
+      <Analytics automation={automation} variant="tertiary" />
+      <EditAutomation automation={automation} variant="tertiary" />
       {menuItems.map(({ control, slot }) => (
         <Fragment key={control.title}>{slot}</Fragment>
       ))}