Update Link Component

src/components/Home/PipelineSection/PipelineRow.tsx

@@ -1,4 +1,4 @@
-import { Link, useNavigate } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import { type MouseEvent, useCallback, useMemo } from "react";
 
 import { ConfirmationDialog } from "@/components/shared/Dialogs";
@@ -86,15 +86,6 @@ const PipelineRow = ({
     return formatDate(modificationTime.toISOString());
   }, [modificationTime]);
 
-  const linkProps = {
-    to: `${EDITOR_PATH}/$name`,
-    params: { name: name ?? "" },
-    className: "hover:underline",
-    onClick: (e: MouseEvent) => {
-      e.stopPropagation();
-    },
-  };
-
   return (
     <>
       <TableRow
@@ -110,7 +101,7 @@ const PipelineRow = ({
           />
         </TableCell>
         <TableCell>
-          <Link {...linkProps}>{name}</Link>
+          <Paragraph>{name}</Paragraph>
         </TableCell>
         <TableCell>
           <Paragraph tone="subdued" size="xs">

src/components/Home/RunSection/RunRow.tsx

@@ -1,4 +1,4 @@
-import { Link, useNavigate } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import { type MouseEvent, useCallback } from "react";
 
 import type { PipelineRunResponse } from "@/api/types.gen";
@@ -15,6 +15,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { Paragraph } from "@/components/ui/typography";
 import useToastNotification from "@/hooks/useToastNotification";
 import { APP_ROUTES } from "@/routes/router";
 import {
@@ -50,14 +51,6 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
 
   const clickThroughUrl = `${APP_ROUTES.RUNS}/${runId}`;
 
-  const LinkProps = {
-    to: clickThroughUrl,
-    className: "underline hover:text-blue-500 text-black",
-    onClick: (e: MouseEvent) => {
-      e.stopPropagation(); // Prevent triggering the row click handler
-    },
-  };
-
   const createdByButton = (
     <Button
       className="truncate underline"
@@ -88,7 +81,7 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
     >
       <TableCell className="text-sm flex items-center gap-2">
         <StatusIcon status={getRunStatus(statusCounts)} />
-        <Link {...LinkProps}>{name}</Link>
+        <Paragraph>{name}</Paragraph>
         <span>{`#${runId}`}</span>
       </TableCell>
       <TableCell>

src/components/layout/AppFooter.tsx

@@ -18,46 +18,39 @@ function AppFooter() {
     >
       <InlineStack className="w-full" align="space-between">
         <div />
-        <InlineStack gap="1" blockAlign="center">
-          <Link
-            href={ABOUT_URL}
-            className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+        <InlineStack gap="4" blockAlign="center">
+          <Link href={ABOUT_URL} target="_blank" rel="noopener noreferrer">
             About
           </Link>
           <Link
             href={GIVE_FEEDBACK_URL}
-            className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
             target="_blank"
             rel="noopener noreferrer"
           >
             Give feedback
           </Link>
           <Link
             href={PRIVACY_POLICY_URL}
-            className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
             target="_blank"
             rel="noopener noreferrer"
           >
             Privacy policy
           </Link>
-          Version:
-          <Link
-            href={`${GIT_REPO_URL}/commit/${GIT_COMMIT}`}
-            className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {GIT_COMMIT.substring(0, 6)}
-          </Link>
+          <InlineStack gap="1" blockAlign="center">
+            Version:
+            <Link
+              href={`${GIT_REPO_URL}/commit/${GIT_COMMIT}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {GIT_COMMIT.substring(0, 6)}
+            </Link>
+          </InlineStack>
         </InlineStack>
         <Text size="xs" font="mono" tone="subdued">
           Built with{" "}
           <Link
             href="https://reactflow.dev"
-            className="text-blue-400 hover:text-blue-600 hover:underline"
             target="_blank"
             rel="noopener noreferrer"
           >

src/components/layout/AppMenu.tsx

@@ -1,10 +1,9 @@
-import { Link } from "@tanstack/react-router";
-
 import logo from "/public/Tangle_white.png";
 import { isAuthorizationRequired } from "@/components/shared/Authentication/helpers";
 import { TopBarAuthentication } from "@/components/shared/Authentication/TopBarAuthentication";
 import ImportPipeline from "@/components/shared/ImportPipeline";
 import { InlineStack } from "@/components/ui/layout";
+import { Link } from "@/components/ui/link";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { TOP_NAV_HEIGHT } from "@/utils/constants";
 
@@ -28,7 +27,7 @@ const AppMenu = () => {
         className="pl-12 pr-2"
       >
         <InlineStack blockAlign="center">
-          <Link to="/">
+          <Link href="/" aria-label="Home" variant="block">
             <img
               src={logo}
               alt="logo"

src/components/shared/ExecutionDetails/ExecutionDetails.tsx

@@ -7,6 +7,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import { Link } from "@/components/ui/link";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useBackend } from "@/providers/BackendProvider";
 import { useFetchContainerExecutionState } from "@/services/executionService";
@@ -161,15 +162,14 @@ export const ExecutionDetails = ({
                       <span className="font-medium text-foreground min-w-fit">
                         {linkInfo.name}:
                       </span>
-                      <a
+                      <Link
                         href={linkInfo.url}
-                        className="text-sky-500 hover:underline flex items-center gap-1"
                         target="_blank"
                         rel="noopener noreferrer"
                       >
                         {linkInfo.value}
                         <ExternalLink className="size-3 shrink-0" />
-                      </a>
+                      </Link>
                     </div>
                   ))}
                 </>

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.tsx

@@ -38,7 +38,6 @@ const IOCellDetails = ({ io, artifactData, actions }: IOCellDetailsProps) => {
               artifactData.uri,
               artifactData.is_dir,
             )}
-            className="font-mono break-all text-xs text-blue-600 hover:text-blue-800 hover:underline flex items-center gap-1"
           >
             {artifactData.uri}
           </Link>

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.tsx

@@ -97,8 +97,7 @@ const IOCellHeader = ({
                       artifactData.is_dir || false,
                     )}
                     external
-                    iconClassName="h-2.5 w-2.5"
-                    className="font-mono break-all text-[10px] text-blue-600 hover:text-blue-800 hover:underline flex gap-1"
+                    size="xs"
                   >
                     Link
                   </Link>

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx

@@ -207,7 +207,7 @@ export const OpenLogsInNewWindowLink = ({
     <Link
       href={logsUrl}
       external
-      variant={available ? "link" : "disabled"}
+      variant={available ? "primary" : "disabled"}
       size="sm"
       aria-label={
         available

src/components/shared/ReactFlow/FlowSidebar/components/RecentExecutions.tsx

@@ -2,8 +2,10 @@ import { useEffect, useMemo } from "react";
 
 import { InfoBox } from "@/components/shared/InfoBox";
 import RunOverview from "@/components/shared/RunOverview";
+import { Link } from "@/components/ui/link";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Spinner } from "@/components/ui/spinner";
+import { Paragraph } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
 import { useBackend } from "@/providers/BackendProvider";
 import { usePipelineRuns } from "@/providers/PipelineRunsProvider";
@@ -15,15 +17,21 @@ const RecentExecutions = ({ pipelineName }: { pipelineName?: string }) => {
   const runOverviews = useMemo(
     () =>
       recentRuns.map((run) => (
-        <a key={run.id} href={`/runs/${run.id}`} tabIndex={0}>
+        <Link
+          key={run.id}
+          href={`/runs/${run.id}`}
+          tabIndex={0}
+          variant="block"
+          className="w-full"
+        >
           <RunOverview
             run={run}
             config={{
               showName: false,
             }}
-            className="rounded-sm hover:bg-gray-100"
+            className="rounded-sm hover:bg-gray-100 w-full"
           />
-        </a>
+        </Link>
       )),
     [recentRuns],
   );
@@ -95,12 +103,16 @@ const RecentExecutions = ({ pipelineName }: { pipelineName?: string }) => {
       {recentRuns.length === 0 ? (
         <div className="text-xs text-muted-foreground">No runs yet.</div>
       ) : (
-        <ScrollArea className="h-fit rounded">
+        <ScrollArea className="h-fit rounded w-full">
           {runOverviews}
           {remainingRuns > 0 && (
-            <div className="mt-2 text-xs text-muted-foreground w.full text-center">
+            <Paragraph
+              size="xs"
+              tone="subdued"
+              className="mt-2 w-full text-center"
+            >
               +{remainingRuns} more runs
-            </div>
+            </Paragraph>
           )}
         </ScrollArea>
       )}

src/components/shared/ReactFlow/FlowSidebar/sections/FileActions.tsx

@@ -5,6 +5,7 @@ import { PipelineNameDialog } from "@/components/shared/Dialogs";
 import ImportPipeline from "@/components/shared/ImportPipeline";
 import { Icon } from "@/components/ui/icon";
 import { InlineStack } from "@/components/ui/layout";
+import { Link } from "@/components/ui/link";
 import {
   SidebarContent,
   SidebarGroup,
@@ -166,12 +167,13 @@ const FileActions = ({ isOpen }: { isOpen: boolean }) => {
               tooltipPosition={tooltipPosition}
               asChild
             >
-              <a
+              <Link
                 href={URL.createObjectURL(componentTextBlob)}
                 download={filename}
+                variant="primary"
               >
                 <Icon name="FileDown" size="lg" className="stroke-[1.5]" />
-              </a>
+              </Link>
             </SidebarMenuButton>
           </SidebarMenuItem>
           <SidebarMenuItem>

src/components/shared/Submitters/GoogleCloud/GoogleCloudSubmitter.tsx

@@ -2,6 +2,7 @@ import { type ChangeEvent, useCallback } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Link } from "@/components/ui/link";
 import { useGoogleCloudSubmitter } from "@/hooks/useGoogleCloudSubmitter";
 import type { ComponentSpec } from "@/utils/componentSpec";
 
@@ -73,14 +74,14 @@ const GoogleCloudSubmitter = ({ componentSpec }: GoogleCloudSubmitterProps) => {
           Submit pipeline job
         </Button>
         {jobWebUrl && (
-          <a
+          <Link
             href={jobWebUrl}
             target="_blank"
             rel="noreferrer"
             style={{ margin: "5px" }}
           >
             Job
-          </a>
+          </Link>
         )}
       </div>
       {jsonBlobUrl && (

src/components/shared/Submitters/GoogleCloud/ManualSubmissionInstructions.tsx

@@ -1,3 +1,5 @@
+import { Link } from "@/components/ui/link";
+
 import { InfoBox } from "../../InfoBox";
 
 interface ManualSubmissionInstructionsProps {
@@ -15,31 +17,17 @@ export const ManualSubmissionInstructions = ({
   return (
     <InfoBox title="Manual Submission" className="text-xs text-gray-700">
       Download{" "}
-      <a
-        href={downloadUrl}
-        download="vertex_pipeline_job.json"
-        className="text-blue-600 hover:underline"
-      >
+      <Link href={downloadUrl} download="vertex_pipeline_job.json">
         pipeline_job.json
-      </a>
+      </Link>
       , then go to{" "}
-      <a
-        href={VERTEX_PIPELINES_URL}
-        className="text-blue-600 hover:underline"
-        target="_blank"
-        rel="noreferrer"
-      >
+      <Link href={VERTEX_PIPELINES_URL} target="_blank" rel="noreferrer">
         Vertex Pipelines
-      </a>{" "}
+      </Link>{" "}
       and{" "}
-      <a
-        href={CREATE_RUN_DOCS_URL}
-        className="text-blue-600 hover:underline"
-        target="_blank"
-        rel="noreferrer"
-      >
+      <Link href={CREATE_RUN_DOCS_URL} target="_blank" rel="noreferrer">
         create a new run
-      </a>
+      </Link>
       .
     </InfoBox>
   );