feat(webapp): use a custom chain link icon for private connections

Add a ChainLinkIcon and use it for the Private connections item in both the organization settings side menu and the organization dropdown, replacing the heroicons link icon.

Author: samejr

apps/webapp/app/assets/icons/ChainLinkIcon.tsx

@@ -0,0 +1,27 @@
+export function ChainLinkIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 19.0004L9.82843 19.1719C8.26634 20.734 5.73368 20.734 4.17158 19.1719L3.82843 18.8288C2.26634 17.2667 2.26633 14.734 3.82843 13.1719L7.17158 9.8288C8.73368 8.2667 11.2663 8.2667 12.8284 9.8288L13.1716 10.1719C13.8252 10.8256 14.2053 11.6491 14.312 12.5004"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.68799 12.5004C9.79463 13.3516 10.1748 14.1752 10.8284 14.8288L11.1715 15.1719C12.7336 16.734 15.2663 16.734 16.8284 15.1719L20.1715 11.8288C21.7336 10.2667 21.7336 7.73404 20.1715 6.17194L19.8284 5.8288C18.2663 4.2667 15.7336 4.2667 14.1715 5.8288L14 6.00037"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -1,5 +1,6 @@
-import { ArrowLeftIcon, LinkIcon } from "@heroicons/react/24/solid";
+import { ArrowLeftIcon } from "@heroicons/react/24/solid";
 import { BellIcon } from "~/assets/icons/BellIcon";
+import { ChainLinkIcon } from "~/assets/icons/ChainLinkIcon";
 import { CreditCardIcon } from "~/assets/icons/CreditCardIcon";
 import { PadlockIcon } from "~/assets/icons/PadlockIcon";
 import { UsageIcon } from "~/assets/icons/UsageIcon";
@@ -130,7 +131,7 @@ export function OrganizationSettingsSideMenu({
           {featureFlags.hasPrivateConnections && (
             <SideMenuItem
               name="Private Connections"
-              icon={LinkIcon}
+              icon={ChainLinkIcon}
               activeIconColor="text-text-bright"
               inactiveIconColor="text-text-dimmed"
               to={v3PrivateConnectionsPath(organization)}

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

@@ -3,7 +3,6 @@ import {
   ChevronRightIcon,
   ExclamationTriangleIcon,
 } from "@heroicons/react/24/outline";
-import { LinkIcon } from "@heroicons/react/24/solid";
 import { useFetcher, useNavigate, useNavigation, useSubmit } from "@remix-run/react";
 import { LayoutGroup, motion } from "framer-motion";
 import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
@@ -16,6 +15,7 @@ import { BatchesIcon } from "~/assets/icons/BatchesIcon";
 import { BellIcon } from "~/assets/icons/BellIcon";
 import { Box3DIcon } from "~/assets/icons/Box3DIcon";
 import { BugIcon } from "~/assets/icons/BugIcon";
+import { ChainLinkIcon } from "~/assets/icons/ChainLinkIcon";
 import { ChartBarIcon } from "~/assets/icons/ChartBarIcon";
 import { CodeSquareIcon } from "~/assets/icons/CodeSquareIcon";
 import { ConcurrencyIcon } from "~/assets/icons/ConcurrencyIcon";
@@ -934,7 +934,7 @@ function OrgSelector({
             <PopoverMenuItem
               to={v3PrivateConnectionsPath(organization)}
               title="Private connections"
-              icon={LinkIcon}
+              icon={ChainLinkIcon}
               leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON}
               className={SIDE_MENU_POPOVER_ITEM_LABEL}
             />