Update commercial use trial wording

src-web/components/core/Link.tsx

@@ -12,32 +12,37 @@ interface Props extends HTMLAttributes<HTMLAnchorElement> {
 export function Link({ href, children, noUnderline, className, ...other }: Props) {
   const isExternal = href.match(/^https?:\/\//);
 
-  className = classNames(className, 'relative');
+  className = classNames(
+    className,
+    'relative',
+    'inline-flex items-center hover:underline group',
+    !noUnderline && 'underline',
+  );
 
   if (isExternal) {
+    const isYaakLink = href.startsWith('https://yaak.app');
     let finalHref = href;
-    if (href.startsWith('https://yaak.app')) {
+    if (isYaakLink) {
       const url = new URL(href);
       url.searchParams.set('ref', appInfo.identifier);
       finalHref = url.toString();
     }
     return (
+      // eslint-disable-next-line react/jsx-no-target-blank
       <a
         href={finalHref}
         target="_blank"
-        rel="noopener noreferrer"
-        className={classNames(
-          className,
-          'pr-4 inline-flex items-center hover:underline group',
-          !noUnderline && 'underline',
-        )}
-        onClick={(e) => {
-          e.preventDefault();
-        }}
+        rel={isYaakLink ? undefined : 'noopener noreferrer'}
+        onClick={(e) => e.preventDefault()}
+        className={className}
         {...other}
       >
-        <span className="pr-0.5">{children}</span>
-        <Icon className="inline absolute right-0.5 top-[0.3em] opacity-70 group-hover:opacity-100" size="xs" icon="external_link" />
+        <span className="pr-5">{children}</span>
+        <Icon
+          className="inline absolute right-0.5 top-[0.3em] opacity-70 group-hover:opacity-100"
+          size="xs"
+          icon="external_link"
+        />
       </a>
     );
   }

src-web/components/core/Separator.tsx

@@ -1,3 +1,4 @@
+import type { Color } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 
@@ -6,9 +7,10 @@ interface Props {
   dashed?: boolean;
   className?: string;
   children?: ReactNode;
+  color?: Color;
 }
 
-export function Separator({ className, dashed, orientation = 'horizontal', children }: Props) {
+export function Separator({ color, className, dashed, orientation = 'horizontal', children }: Props) {
   return (
     <div role="separator" className={classNames(className, 'flex items-center w-full')}>
       {children && (
@@ -16,7 +18,15 @@ export function Separator({ className, dashed, orientation = 'horizontal', child
       )}
       <div
         className={classNames(
-          'h-0 border-t border-t-border-subtle',
+          'h-0 border-t opacity-60',
+          color == null && 'border-border',
+          color === 'primary' && 'border-primary',
+          color === 'secondary' && 'border-secondary',
+          color === 'success' && 'border-success',
+          color === 'notice' && 'border-notice',
+          color === 'warning' && 'border-warning',
+          color === 'danger' && 'border-danger',
+          color === 'info' && 'border-info',
           dashed && 'border-dashed',
           orientation === 'horizontal' && 'w-full h-[1px]',
           orientation === 'vertical' && 'h-full w-[1px]',

src-web/components/core/Tooltip.tsx

@@ -94,8 +94,8 @@ export function Tooltip({ children, content, tabIndex, size = 'md' }: TooltipPro
         ref={triggerRef}
         role="button"
         aria-describedby={isOpen ? id.current : undefined}
-        tabIndex={tabIndex ?? 0}
-        className="flex-grow-0 flex items-center"
+        tabIndex={tabIndex ?? -1}
+        className="flex-grow-0 inline-flex items-center"
         onClick={handleToggleImmediate}
         onMouseEnter={handleOpen}
         onMouseLeave={handleClose}