Removed named icons from form titles

Author: matt-aitken

apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx

@@ -1,6 +1,6 @@
 import { conform, list, requestIntent, useFieldList, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { LockOpenIcon } from "@heroicons/react/20/solid";
+import { LockOpenIcon, UserPlusIcon } from "@heroicons/react/20/solid";
 import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
@@ -143,7 +143,7 @@ export default function Page() {
     <MainCenteredContainer>
       <div>
         <FormTitle
-          LeadingIcon="invite-member"
+          LeadingIcon={<UserPlusIcon className="size-6 text-indigo-500" />}
           title="Invite team members"
           description={`Invite new team members to ${organization.title}.`}
         />

apps/webapp/app/routes/_app.orgs.new/route.tsx

@@ -1,5 +1,6 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
+import { BuildingOffice2Icon } from "@heroicons/react/20/solid";
 import { RadioGroup } from "@radix-ui/react-radio-group";
 import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json, redirect } from "@remix-run/node";
@@ -117,7 +118,10 @@ export default function NewOrganizationPage() {
 
   return (
     <MainCenteredContainer className="max-w-[22rem]">
-      <FormTitle LeadingIcon="organization" title="Create an Organization" />
+      <FormTitle
+        LeadingIcon={<BuildingOffice2Icon className="size-6 text-fuchsia-600" />}
+        title="Create an Organization"
+      />
       <Form method="post" {...form.props}>
         <Fieldset>
           <InputGroup>

apps/webapp/app/routes/invites.tsx

@@ -16,6 +16,7 @@ import { acceptInvite, declineInvite, getUsersInvites } from "~/models/member.se
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import { requireUser, requireUserId } from "~/services/session.server";
 import { invitesPath, rootPath } from "~/utils/pathBuilder";
+import { EnvelopeIcon } from "@heroicons/react/20/solid";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const user = await requireUser(request);
@@ -101,7 +102,7 @@ export default function Page() {
       <MainCenteredContainer>
         <div>
           <FormTitle
-            LeadingIcon="envelope"
+            LeadingIcon={<EnvelopeIcon className="size-6 text-cyan-500" />}
             className="mb-0 text-sky-500"
             title={simplur`You have ${invites.length} new invitation[|s]`}
           />

apps/webapp/app/routes/storybook.detail-cell/route.tsx

@@ -6,7 +6,7 @@ export default function Story() {
   return (
     <div className="flex max-w-xl flex-col items-start gap-y-8 p-8">
       <DetailCell
-        leadingIcon="integration"
+        leadingIcon={CodeBracketIcon}
         leadingIconClassName="text-text-dimmed"
         label="Learn how to create your own API Integrations"
         variant="base"

apps/webapp/app/routes/storybook.simple-form/route.tsx

@@ -1,4 +1,4 @@
-import { ArrowRightIcon } from "@heroicons/react/20/solid";
+import { ArrowRightIcon, BuildingOffice2Icon } from "@heroicons/react/20/solid";
 import { Form } from "@remix-run/react";
 import { MainCenteredContainer } from "~/components/layout/AppLayout";
 import { Button } from "~/components/primitives/Buttons";
@@ -16,7 +16,7 @@ export default function Story() {
     <MainCenteredContainer>
       <div>
         <FormTitle
-          LeadingIcon="organization"
+          LeadingIcon={<BuildingOffice2Icon className="size-6 text-fuchsia-600" />}
           title="Create a new Organization"
           description="Organizations are a great way to group your Projects."
         />

apps/webapp/app/routes/unsubscribe.$userId.$token.tsx

@@ -1,3 +1,4 @@
+import { EnvelopeIcon } from "@heroicons/react/24/solid";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import crypto from "node:crypto";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -63,7 +64,10 @@ export default function Page() {
       <MainCenteredContainer className="max-w-[22rem]">
         {result.success ? (
           <div>
-            <FormTitle LeadingIcon="envelope" title="Unsubscribed" />
+            <FormTitle
+              LeadingIcon={<EnvelopeIcon className="size-6 text-cyan-500" />}
+              title="Unsubscribed"
+            />
             <Paragraph spacing>
               You have unsubscribed from onboarding emails, {result.email}.
             </Paragraph>
@@ -73,7 +77,10 @@ export default function Page() {
           </div>
         ) : (
           <div>
-            <FormTitle LeadingIcon="envelope" title="Unsubscribe failed" />
+            <FormTitle
+              LeadingIcon={<EnvelopeIcon className="size-6 text-cyan-500" />}
+              title="Unsubscribe failed"
+            />
             <Paragraph spacing>{result.message}</Paragraph>
             <Paragraph spacing>
               If you believe this is a bug, please{" "}