More side menu improvements

Author: samejr

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

@@ -0,0 +1,42 @@
+export function ChartArrowIcon({ 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="M9 12C9 10.8954 9.89543 10 11 10H13C14.1046 10 15 10.8954 15 12V21H9V12Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M15 7C15 5.89543 15.8954 5 17 5H19C20.1046 5 21 5.89543 21 7V20C21 20.5523 20.5523 21 20 21H15V7Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M3 17C3 15.8954 3.89543 15 5 15H7C8.10457 15 9 15.8954 9 17V21H4C3.44772 21 3 20.5523 3 20V17Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M3 5.5L8 5.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.4 8L9.9 5.50005L7.39995 3"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,14 @@
+export function SlackIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" />
+    </svg>
+  );
+}

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

@@ -0,0 +1,33 @@
+export function UserGroupIcon({ 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"
+    >
+      <circle cx="12" cy="7.5" r="2.5" stroke="currentColor" strokeWidth="2" />
+      <circle cx="19" cy="9.5" r="2" stroke="currentColor" strokeWidth="2" />
+      <circle cx="5" cy="9.5" r="2" stroke="currentColor" strokeWidth="2" />
+      <path
+        d="M12 13C9.28772 13 8.29961 15.0954 8.06142 17.0026C7.99297 17.5507 8.44772 18 9 18H15C15.5523 18 16.007 17.5507 15.9386 17.0026C15.7004 15.0954 14.7123 13 12 13Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M19 18H20C20.5523 18 21.0112 17.5481 20.904 17.0063C20.6537 15.7422 19.867 14.4289 18 14.0859"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <path
+        d="M5 17.9141H4C3.44772 17.9141 2.9888 17.4621 3.09604 16.9203C3.34626 15.6562 4.13299 14.3429 6 14"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

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

@@ -34,7 +34,7 @@ export function AccountSideMenu({ user }: { user: User }) {
           <span className="text-text-bright">Back to app</span>
         </LinkButton>
       </div>
-      <div className="mb-6 flex grow flex-col gap-1 overflow-y-auto px-1 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="mb-6 flex grow flex-col overflow-y-auto px-1 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <SideMenuHeader title="Account" />
         <SideMenuItem
           name="Profile"

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

@@ -2,7 +2,7 @@ import { IconChartHistogram } from "@tabler/icons-react";
 import { GripVerticalIcon } from "lucide-react";
 import ReactGridLayout from "react-grid-layout";
 import { AIMetricsIcon } from "~/assets/icons/AIMetricsIcon";
-import { RunsIcon } from "~/assets/icons/RunsIcon";
+import { ChartArrowIcon } from "~/assets/icons/ChartArrowIcon";
 import { type MatchedOrganization, useCustomDashboards } from "~/hooks/useOrganizations";
 import { type UserWithDashboardPreferences } from "~/models/user.server";
 import { type RenderIcon } from "~/components/primitives/Icon";
@@ -58,7 +58,7 @@ export function DashboardList({
       kind: "builtin",
       label: "Run metrics",
       path: v3BuiltInDashboardPath(organization, project, environment, "overview"),
-      collapsedIcon: RunsIcon,
+      collapsedIcon: ChartArrowIcon,
       activeColor: "text-runs",
     },
     {

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

@@ -1,14 +1,14 @@
 import {
   BellAlertIcon,
   ChartBarIcon,
-  Cog8ToothIcon,
   CreditCardIcon,
   LockClosedIcon,
   ShieldCheckIcon,
-  UserGroupIcon,
 } from "@heroicons/react/20/solid";
 import { ArrowLeftIcon } from "@heroicons/react/24/solid";
-import { SlackIcon } from "@trigger.dev/companyicons";
+import { SlackIcon } from "~/assets/icons/SlackIcon";
+import { SlidersIcon } from "~/assets/icons/SlidersIcon";
+import { UserGroupIcon } from "~/assets/icons/UserGroupIcon";
 import { VercelLogo } from "~/components/integrations/VercelLogo";
 import { useFeatureFlags } from "~/hooks/useFeatureFlags";
 import { useFeatures } from "~/hooks/useFeatures";
@@ -86,16 +86,16 @@ export function OrganizationSettingsSideMenu({
               <SideMenuItem
                 name="Usage"
                 icon={ChartBarIcon}
-                activeIconColor="text-indigo-500"
-                inactiveIconColor="text-indigo-500"
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
                 to={v3UsagePath(organization)}
                 data-action="usage"
               />
               <SideMenuItem
                 name="Billing"
                 icon={CreditCardIcon}
-                activeIconColor="text-emerald-500"
-                inactiveIconColor="text-emerald-500"
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
                 to={v3BillingPath(organization)}
                 data-action="billing"
                 badge={
@@ -107,8 +107,8 @@ export function OrganizationSettingsSideMenu({
               <SideMenuItem
                 name="Billing alerts"
                 icon={BellAlertIcon}
-                activeIconColor="text-rose-500"
-                inactiveIconColor="text-rose-500"
+                activeIconColor="text-text-bright"
+                inactiveIconColor="text-text-dimmed"
                 to={v3BillingAlertsPath(organization)}
                 data-action="billing-alerts"
               />
@@ -118,35 +118,35 @@ export function OrganizationSettingsSideMenu({
             <SideMenuItem
               name="Private Connections"
               icon={LockClosedIcon}
-              activeIconColor="text-purple-500"
-              inactiveIconColor="text-purple-500"
+              activeIconColor="text-text-bright"
+              inactiveIconColor="text-text-dimmed"
               to={v3PrivateConnectionsPath(organization)}
               data-action="private-connections"
             />
           )}
           <SideMenuItem
             name="Team"
             icon={UserGroupIcon}
-            activeIconColor="text-amber-500"
-            inactiveIconColor="text-amber-500"
+            activeIconColor="text-text-bright"
+            inactiveIconColor="text-text-dimmed"
             to={organizationTeamPath(organization)}
             data-action="team"
           />
           {isUsingPlugin && (
             <SideMenuItem
               name="Roles"
               icon={ShieldCheckIcon}
-              activeIconColor="text-sky-500"
-              inactiveIconColor="text-sky-500"
+              activeIconColor="text-text-bright"
+              inactiveIconColor="text-text-dimmed"
               to={organizationRolesPath(organization)}
               data-action="roles"
             />
           )}
           <SideMenuItem
             name="Settings"
-            icon={Cog8ToothIcon}
-            activeIconColor="text-orgSettings"
-            inactiveIconColor="text-orgSettings"
+            icon={SlidersIcon}
+            activeIconColor="text-text-bright"
+            inactiveIconColor="text-text-dimmed"
             to={organizationSettingsPath(organization)}
             data-action="settings"
           />
@@ -158,17 +158,18 @@ export function OrganizationSettingsSideMenu({
           <SideMenuItem
             name="Vercel"
             icon={VercelLogo}
-            activeIconColor="text-white"
-            inactiveIconColor="text-white"
-            iconClassName="size-4 ml-0.5"
+            activeIconColor="text-text-bright"
+            inactiveIconColor="text-text-dimmed"
+            iconClassName="size-4 ml-[0.15rem]"
             to={organizationVercelIntegrationPath(organization)}
             data-action="integrations"
           />
           <SideMenuItem
             name="Slack"
             icon={SlackIcon}
-            activeIconColor="text-white"
-            inactiveIconColor="text-white"
+            activeIconColor="text-text-bright"
+            inactiveIconColor="text-text-dimmed"
+            iconClassName="size-4 ml-0.5"
             to={organizationSlackIntegrationPath(organization)}
             data-action="integrations"
           />

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

@@ -56,9 +56,11 @@ export function SideMenuItem({
       target={target}
       data-action={dataAction}
       className={cn(
-        "group/menulink flex h-8 items-center gap-2 overflow-hidden rounded pl-[0.4375rem] pr-2 group-hover/menuitem:bg-charcoal-750 group-hover/menuitem:text-text-bright hover:bg-charcoal-750 hover:text-text-bright",
+        "group/menulink flex h-8 items-center gap-2 overflow-hidden rounded pl-[0.4375rem] pr-2",
         isIndented ? "min-w-0 flex-1" : "w-full",
-        isActive ? "bg-tertiary text-text-bright" : "text-text-dimmed"
+        isActive
+          ? "bg-tertiary text-text-bright"
+          : "text-text-dimmed group-hover/menuitem:bg-charcoal-750 group-hover/menuitem:text-text-bright hover:bg-charcoal-750 hover:text-text-bright"
       )}
     >
       <Icon

apps/webapp/app/routes/confirm-basic-details.tsx

@@ -1,6 +1,7 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { ArrowRightIcon, EnvelopeIcon, UserGroupIcon, UserIcon } from "@heroicons/react/20/solid";
+import { ArrowRightIcon, EnvelopeIcon, UserIcon } from "@heroicons/react/20/solid";
+import { UserGroupIcon } from "~/assets/icons/UserGroupIcon";
 import { HandRaisedIcon } from "@heroicons/react/24/solid";
 import { RadioGroup } from "@radix-ui/react-radio-group";
 import { json, type ActionFunction } from "@remix-run/node";