Updated icons for the account side menu

Author: samejr

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

@@ -0,0 +1,21 @@
+export function PadlockIcon({ 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"
+    >
+      <rect x="5" y="9" width="14" height="12" rx="2" stroke="currentColor" strokeWidth="2" />
+      <rect x="11" y="13" width="2" height="5" rx="1" fill="currentColor" />
+      <rect x="10" y="12" width="4" height="4" rx="2" fill="currentColor" />
+      <path
+        d="M16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,25 @@
+export function ShieldIcon({ 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="M11.4199 3.2207C11.7981 3.1061 12.2019 3.1061 12.5801 3.2207L18.5801 5.03906C19.4233 5.29464 20 6.072 20 6.95312V11.4951C20 13.7676 18.8965 15.899 17.041 17.2109L12 20.7754L6.95898 17.2109C5.10346 15.899 4 13.7676 4 11.4951V6.95312C4 6.072 4.57669 5.29464 5.41992 5.03906L11.4199 3.2207Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M9.03125 11L11.0312 13.0625L15.0312 9"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -1,4 +1,3 @@
-import { LockClosedIcon, ShieldCheckIcon, UserCircleIcon } from "@heroicons/react/20/solid";
 import { ArrowLeftIcon } from "@heroicons/react/24/solid";
 import type { User } from "@trigger.dev/database";
 import { cn } from "~/utils/cn";
@@ -13,6 +12,9 @@ import { LinkButton } from "../primitives/Buttons";
 import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
+import { AvatarCircleIcon } from "~/assets/icons/AvatarCircleIcon";
+import { ShieldIcon } from "~/assets/icons/ShieldIcon";
+import { PadlockIcon } from "~/assets/icons/PadlockIcon";
 
 export function AccountSideMenu({ user }: { user: User }) {
   return (
@@ -36,22 +38,22 @@ export function AccountSideMenu({ user }: { user: User }) {
         <SideMenuHeader title="Account" />
         <SideMenuItem
           name="Profile"
-          icon={UserCircleIcon}
-          activeIconColor="text-indigo-500"
+          icon={AvatarCircleIcon}
+          activeIconColor="text-text-bright"
           to={accountPath()}
           data-action="account"
         />
         <SideMenuItem
           name="Personal Access Tokens"
-          icon={ShieldCheckIcon}
-          activeIconColor="text-emerald-500"
+          icon={ShieldIcon}
+          activeIconColor="text-text-bright"
           to={personalAccessTokensPath()}
           data-action="tokens"
         />
         <SideMenuItem
           name="Security"
-          icon={LockClosedIcon}
-          activeIconColor="text-rose-500"
+          icon={PadlockIcon}
+          activeIconColor="text-text-bright"
           to={accountSecurityPath()}
           data-action="security"
         />

apps/webapp/app/routes/account._index/route.tsx

@@ -1,12 +1,12 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { EnvelopeIcon, UserCircleIcon } from "@heroicons/react/20/solid";
 import { Form, type MetaFunction, useActionData } from "@remix-run/react";
 import { type ActionFunction, json } from "@remix-run/server-runtime";
 import { z } from "zod";
+import { AvatarCircleIcon } from "~/assets/icons/AvatarCircleIcon";
+import { EnvelopeIcon } from "~/assets/icons/EnvelopeIcon";
 import { UserProfilePhoto } from "~/components/UserProfilePhoto";
 import {
-  MainCenteredContainer,
   MainHorizontallyCenteredContainer,
   PageBody,
   PageContainer,
@@ -160,7 +160,7 @@ export default function Page() {
                   {...conform.input(name, { type: "text" })}
                   placeholder="Your full name"
                   defaultValue={user?.name ?? ""}
-                  icon={UserCircleIcon}
+                  icon={AvatarCircleIcon}
                 />
                 <Hint>Your teammates will see this</Hint>
                 <FormError id={name.errorId}>{name.error}</FormError>