refactor(webapp): move the last hand-rolled links onto TextLink

Seven places styled something as a link with raw indigo, which meant they
kept the same purple on a near-black card as on white and never followed the
theme. Splitting them by what they actually are:

Four read as links and now take `textLinkClassName()`, picking up the theme's
link color, the color-shift hover and the "Underline links" preference - the
concurrency page's inline "reset", "+ Add port" on both private-connection
forms, "get in touch" on the regions page (which sits between two real
TextLinks), and "Show more" on notification cards. None are anchors, which is
what the class helper exists for.

Two are labels inside a row that is itself the button - "View all" in the
chart legend, "Upgrade" in the environment selector. They take the link color
only: hover belongs to the row, and a row label isn't the body text the
underline preference is for.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/components/navigation/EnvironmentSelector.tsx

@@ -197,7 +197,7 @@ export function EnvironmentSelector({
                       className={ENV_POPOVER_ITEM_LABEL}
                       iconClassName={ENV_POPOVER_ITEM_ICON}
                     />
-                    <span className={cn("text-indigo-500", ENV_POPOVER_ITEM_LABEL)}>Upgrade</span>
+                    <span className={cn("text-text-link", ENV_POPOVER_ITEM_LABEL)}>Upgrade</span>
                   </div>
                 }
                 isSelected={false}
@@ -215,7 +215,7 @@ export function EnvironmentSelector({
                       className={ENV_POPOVER_ITEM_LABEL}
                       iconClassName={ENV_POPOVER_ITEM_ICON}
                     />
-                    <span className={cn("text-indigo-500", ENV_POPOVER_ITEM_LABEL)}>Upgrade</span>
+                    <span className={cn("text-text-link", ENV_POPOVER_ITEM_LABEL)}>Upgrade</span>
                   </div>
                 }
                 isSelected={false}

apps/webapp/app/components/navigation/NotificationCard.tsx

@@ -88,7 +88,7 @@ export function NotificationCard({
           <button
             type="button"
             onClick={handleToggleExpand}
-            className="relative z-20 mt-0.5 text-xs text-indigo-400 hover:text-indigo-300"
+            className={cn(textLinkClassName(), "relative z-20 mt-0.5 text-xs")}
           >
             {isExpanded ? "Show less" : "Show more"}
           </button>

apps/webapp/app/components/primitives/charts/ChartLegendCompound.tsx

@@ -319,7 +319,10 @@ function ViewAllDataRow({ remainingCount, onViewAll }: ViewAllDataRowProps) {
           <div className="w-1 shrink-0 self-stretch rounded-[2px] border border-border-bright" />
           <span className="text-text-dimmed tabular-nums">{remainingCount} more…</span>
         </div>
-        <span className="self-start text-indigo-500">View all</span>
+        {/* The row is the button, so this only takes the link color - it gets its
+            hover from the parent, and it isn't body text the underline
+            preference should reach. */}
+        <span className="self-start text-text-link">View all</span>
       </div>
     </div>
   );

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx

@@ -61,6 +61,7 @@ import {
   getPlans,
   getSelfServePurchaseBlockReason,
 } from "~/services/platform.v3.server";
+import { textLinkClassName } from "~/components/primitives/TextLink";
 import { requireUserId } from "~/services/session.server";
 import { cn } from "~/utils/cn";
 import { formatCurrency, formatNumber } from "~/utils/numberFormatter";
@@ -436,7 +437,7 @@ function Upgradable({
                             <span>
                               Save your changes or{" "}
                               <button
-                                className="inline text-indigo-500 hover:text-indigo-300"
+                                className={cn(textLinkClassName(), "inline")}
                                 onClick={() => {
                                   setAllocation(initialAllocation(environments));
                                 }}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx

@@ -45,7 +45,8 @@ import {
   TableHeaderCell,
   TableRow,
 } from "~/components/primitives/Table";
-import { TextLink } from "~/components/primitives/TextLink";
+import { TextLink, textLinkClassName } from "~/components/primitives/TextLink";
+import { cn } from "~/utils/cn";
 import { InfoIconTooltip } from "~/components/primitives/Tooltip";
 import { useFeatures } from "~/hooks/useFeatures";
 import { useOrganization } from "~/hooks/useOrganizations";
@@ -359,7 +360,7 @@ export default function Page() {
                       <TextLink to="https://security.trigger.dev">security portal</TextLink> or{" "}
                       <Feedback
                         button={
-                          <span className="cursor-pointer text-xs text-indigo-500 transition hover:text-indigo-400">
+                          <span className={cn(textLinkClassName(), "cursor-pointer text-xs")}>
                             get in touch
                           </span>
                         }

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.private-connections.new/route.tsx

@@ -44,6 +44,8 @@ import {
   SparklesIcon,
   TrashIcon,
 } from "@heroicons/react/20/solid";
+import { textLinkClassName } from "~/components/primitives/TextLink";
+import { cn } from "~/utils/cn";
 import { pageMeta } from "~/utils/pageTitle";
 
 export const meta = pageMeta("Add Private Connection");
@@ -326,7 +328,7 @@ output "endpoint_service_name" {
           <button
             type="button"
             onClick={addPort}
-            className="text-xs text-indigo-400 transition hover:text-indigo-300"
+            className={cn(textLinkClassName(), "text-xs")}
           >
             + Add port
           </button>
@@ -472,7 +474,7 @@ After creating everything, give me the VPC Endpoint Service name (it looks like
           <button
             type="button"
             onClick={addPort}
-            className="text-xs text-indigo-400 transition hover:text-indigo-300"
+            className={cn(textLinkClassName(), "text-xs")}
           >
             + Add port
           </button>