[CPCN-480] For Company Admin user in Settings the Product names don't look like links that are clickable

assets/company-admin/components/CompanyDetailsProductRow.tsx

@@ -13,11 +13,8 @@ export function CompanyDetailsProductRow({product, onNameClicked, showSeatReques
 
     return (
         <tr>
-            <td
-                onClick={onNameClicked}
-                className={textClassName}
-            >
-                {product.name}
+            <td className={textClassName}>
+                <a className="text-link text-link--text-color" onClick={onNameClicked}>{product.name}</a>
             </td>
             {getConfig('allow_companies_to_manage_products') && (
                 <td className={textClassName}>

assets/styles/custom-variables.scss

@@ -188,6 +188,10 @@ $container-max-widths: (
     --color-text--inverse:        var(--color-neutral-050);
     --color-text--disabled:       var(--color-neutral-600);
 
+    // CORE: TEXT LINK
+    --color-text-link:            var(--color-interactive-focus);
+    --color-text-link-hover:      hsl(var(--color-interactive-focus-base), calc(var(--color-interactive-focus-l) - 8%));
+
     // CORE: LINE COLORS
     --color-line--x-light:        var(--color-neutral-150);
     --color-line--light:          var(--color-neutral-200);
@@ -284,7 +288,7 @@ $container-max-widths: (
     --searchbar-color-shadow--focus: var(--color-interactive-focus--translucent);
     --searchbar-color-button-bg: var(--color-text--muted);
     --searchbar-color-button-bg--active: var(--button-color-bg--primary);
-    --searchbar-color-button-bg--active-hover: var(--button-color-bg--primary--hover);
+    --searchbar-color-button-bg--active-hover: var(--button-color-bg--primary-hover);
 
     // COMPONENT: NAVBAR MAIN
     --top-bar-color-bg: hsl(216, 45%, 14%);

assets/styles/index.scss

@@ -16,6 +16,37 @@ a {
     text-decoration: none;
     &:hover {
         text-decoration: underline;
+        color: var(--color-text-link);
+    }
+}
+
+.text-link {
+    color: var(--color-text-link);
+    text-decoration: none;
+    display: inline;
+    border-bottom: 1px dotted var(--color-text-link);
+    transition: all 0.2s ease;
+    &:hover {
+        text-decoration: none !important;
+        color: var(--color-text-link-hover);
+        border-bottom: 1px solid var(--color-text-link);
+        cursor: pointer;
+    }
+    &.text-link--text-color {
+        color: var(--color-text);
+        &:hover {
+            color: var(--color-text-link);
+        }
+    }
+    &:focus {
+        outline: none;
+        box-shadow: none;
+    }
+    &:focus-visible {
+        outline: 1px dotted var(--color-text-link);
+        outline-offset: 2px;
+        border-radius: var(--border-radius--xs);
+        border: none;
     }
 }
 

design_app/src/components/MyCompany.jsx

@@ -17,7 +17,7 @@ function MyCompany() {
                         <td>Wire</td>
                     </tr>
                     <tr>
-                        <td>Product one</td>
+                        <td><a className="text-link text-link--text-color" href="#">Product one</a></td>
                         <td>16/30</td>
                         <td className="font-light">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</td>
                         <td><button className="nh-button nh-button--tertiary nh-button--small">Request more seats</button></td>