diff --git a/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss b/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss
index d32f26fcc29..610b41c729c 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss
+++ b/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/my-subscriptions.scss
@@ -4,9 +4,7 @@
@mixin content-width {
max-width: calc(100vw - (2 * #{$grid-unit-20}));
@media screen and (min-width: 783px) {
- max-width: calc(
- 100vw - (2 * #{$grid-unit-40}) - $admin-menu-width-collapsed
- );
+ max-width: calc(100vw - (2 * #{$grid-unit-40}) - $admin-menu-width-collapsed);
}
@media screen and (min-width: 960px) {
max-width: calc(100vw - (2 * #{$grid-unit-40}) - $admin-menu-width);
@@ -132,12 +130,13 @@
display: flex;
align-items: center;
- color: $gray-900;
&-name {
margin-left: $grid-unit-15;
line-height: 18px;
font-weight: 600;
+ color: $gray-900;
+ text-decoration: none;
}
&-icon img {
@@ -148,6 +147,7 @@
&-icon {
width: $product-icon-size;
height: $product-icon-size;
+
svg {
border-radius: 4px;
padding: $grid-unit-10;
@@ -159,6 +159,16 @@
}
}
+.woocommerce-table__item {
+ .woocommerce-marketplace__my-subscriptions__product-name {
+ &:active,
+ &:hover,
+ &:visited {
+ color: $gray-900;
+ }
+ }
+}
+
.woocommerce-marketplace__my-subscriptions__product-status {
display: flex;
align-items: center;
@@ -241,12 +251,10 @@
text-decoration: none;
padding: 6px 12px;
}
+
.woocommerce-marketplace__my-subscriptions
.components-button.is-secondary:hover:not(:disabled) {
- color: var(
- --wp-components-color-accent,
- var(--wp-admin-theme-color, #3858e9)
- );
+ color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
}
.woocommerce-marketplace__my-subscriptions--connect {
diff --git a/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx b/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx
index faf32573a8e..c234f49ebed 100644
--- a/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx
+++ b/plugins/woocommerce-admin/client/marketplace/components/my-subscriptions/table/rows/functions.tsx
@@ -19,7 +19,11 @@ import Update from '../actions/update';
import StatusPopover from './status-popover';
import ActionsDropdownMenu from './actions-dropdown-menu';
import Version from './version';
-import { renewUrl, subscribeUrl } from '../../../../utils/functions';
+import {
+ appendURLParams,
+ renewUrl,
+ subscribeUrl,
+} from '../../../../utils/functions';
import { MARKETPLACE_COLLABORATION_PATH } from '../../../constants';
type StatusBadge = {
@@ -141,6 +145,15 @@ function getVersion( subscription: Subscription ): string | JSX.Element {
return '';
}
+function appendUTMParams( url: string ) {
+ return appendURLParams( url, [
+ [ 'utm_source', 'subscriptionsscreen' ],
+ [ 'utm_medium', 'product' ],
+ [ 'utm_campaign', 'wcaddons' ],
+ [ 'utm_content', 'product-name' ],
+ ] );
+}
+
export function nameAndStatus( subscription: Subscription ): TableRow {
// This is the fallback icon element with products without
let iconElement =