whole lot of changes including dark/lite mode support

dahal · dahal · commit 62ccd1d910aa · 2025-05-31T05:17:42.000-05:00
diff --git a/apps/captable/app/(authenticated)/(dashboard)/[publicId]/documents/data-rooms/components/data-room-files.tsx b/apps/captable/app/(authenticated)/(dashboard)/[publicId]/documents/data-rooms/components/data-room-files.tsx
@@ -65,7 +65,7 @@ const DataRoomFiles = ({
                   name="title"
                   required
                   type="text"
-                  className="h4 min-w-[300px] bg-transparent px-2 text-gray-800 outline-none focus:ring-0	focus:ring-offset-0"
+                  className="h4 min-w-[300px] bg-transparent px-2 text-foreground outline-none focus:ring-0	focus:ring-offset-0"
                   placeholder={`Data room's folder name`}
                   defaultValue={dataRoom.name}
                   onChange={async (e) => {
diff --git a/apps/captable/app/(authenticated)/(dashboard)/[publicId]/documents/data-rooms/components/dataroom-folders.tsx b/apps/captable/app/(authenticated)/(dashboard)/[publicId]/documents/data-rooms/components/dataroom-folders.tsx
@@ -60,12 +60,12 @@ const Folders = ({ companyPublicId, folders }: FolderProps) => {
                     aria-hidden="true"
                   />
                 </div>
-                <div className="flex flex-1 items-center justify-between truncate rounded-r-md border-y border-r border-gray-200 bg-white">
+                <div className="flex flex-1 items-center justify-between truncate rounded-r-md border-y border-r border-border bg-card">
                   <div className="flex-1 truncate px-4 py-2 text-sm">
-                    <span className="font-medium text-gray-900 hover:text-gray-600">
+                    <span className="font-medium text-foreground hover:text-muted-foreground">
                       {folder.name}
                     </span>
-                    <p className="text-gray-500">
+                    <p className="text-muted-foreground">
                       {folder._count.documents === 1
                         ? `${folder._count.documents} file`
                         : `${folder._count.documents} files`}
@@ -74,7 +74,7 @@ const Folders = ({ companyPublicId, folders }: FolderProps) => {
                   <div className="flex-shrink-0 pr-2">
                     <button
                       type="button"
-                      className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-transparent bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-transparent focus:ring-offset-2"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-transparent bg-white text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-transparent focus:ring-offset-2"
                     >
                       <span className="sr-only">Open options</span>
                       <MoreIcon className="h-5 w-5" aria-hidden="true" />
diff --git a/apps/captable/app/(authenticated)/(dashboard)/[publicId]/documents/esign/v/[templatePublicId]/page.tsx b/apps/captable/app/(authenticated)/(dashboard)/[publicId]/documents/esign/v/[templatePublicId]/page.tsx
@@ -62,7 +62,7 @@ export default async function TemplateDetailViewPage({
 
   return (
     <TemplateSigningFieldProvider fields={fields}>
-      <div className="flex min-h-screen bg-gray-50">
+      <div className="flex min-h-screen bg-background">
         <div className="flex h-full flex-grow flex-col">
           <div className="col-span-12 flex align-middle">
             <Badge variant={badgeVariant()} className="h-7 align-middle">
diff --git a/apps/captable/app/(authenticated)/(dashboard)/[publicId]/equity-plans/table.tsx b/apps/captable/app/(authenticated)/(dashboard)/[publicId]/equity-plans/table.tsx
@@ -13,6 +13,10 @@ import { type EquityPlanMutationType } from "@/trpc/routers/equity-plan/schema";
 import { type ShareClassMutationType } from "@/trpc/routers/share-class/schema";
 import { RiEqualizer2Line } from "@remixicon/react";
 import EquityPlanModal from "./modal";
+import { cn } from "@/lib/utils";
+import { pushModal } from "@/providers/modal-provider";
+import type { RouterOutputs } from "@/trpc/shared";
+import type { ColumnDef } from "@tanstack/react-table";
 const formatter = new Intl.NumberFormat("en-US");
 
 type EquityPlanTableProps = {
@@ -90,7 +94,7 @@ const EquityPlanTable = ({
                     />
                   }
                   trigger={
-                    <RiEqualizer2Line className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700" />
+                    <RiEqualizer2Line className="h-5 w-5 cursor-pointer text-muted-foreground hover:text-foreground" />
                   }
                 />
               </TableCell>
diff --git a/apps/captable/app/(authenticated)/(dashboard)/[publicId]/layout.tsx b/apps/captable/app/(authenticated)/(dashboard)/[publicId]/layout.tsx
@@ -38,7 +38,7 @@ const DashboardLayout = async ({ children, params }: DashboardLayoutProps) => {
   const permissions = RBAC.normalizePermissionsMap(permissionsData.permissions);
   return (
     <RolesProvider data={{ permissions }}>
-      <div className="flex min-h-screen bg-gray-50">
+      <div className="flex min-h-screen bg-background">
         <aside className="sticky top-0 hidden min-h-full w-64 flex-shrink-0 flex-col lg:flex lg:border-r">
           <SideBar companies={companies} publicId={publicId} />
         </aside>
diff --git a/apps/captable/app/(authenticated)/(dashboard)/[publicId]/settings/developer/components/create-access-token.tsx b/apps/captable/app/(authenticated)/(dashboard)/[publicId]/settings/developer/components/create-access-token.tsx
@@ -83,7 +83,7 @@ const CreateAccessToken = () => {
               {accessToken}
             </code>
           </Card>
-          <span className="text-xs text-gray-700">
+          <span className="text-xs text-muted-foreground">
             Click the access token above to copy
           </span>
         </Fragment>
diff --git a/apps/captable/app/(authenticated)/(dashboard)/[publicId]/share-classes/edit-share-class-button.tsx b/apps/captable/app/(authenticated)/(dashboard)/[publicId]/share-classes/edit-share-class-button.tsx
@@ -16,7 +16,7 @@ export const EditShareClassButton = ({
 }: EditShareClassButtonProps) => {
   return (
     <RiEqualizer2Line
-      className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700"
+      className="h-5 w-5 cursor-pointer text-muted-foreground hover:text-foreground"
       onClick={() => {
         pushModal("ShareClassModal", {
           shouldClientFetch: false,
diff --git a/apps/captable/app/(documents)/esign/[token]/page.tsx b/apps/captable/app/(documents)/esign/[token]/page.tsx
@@ -46,7 +46,7 @@ export default async function SigningPage(props: SigningPageProps) {
 
   return (
     <TemplateSigningFieldProvider fields={fields}>
-      <div className="flex min-h-screen bg-gray-50">
+      <div className="flex min-h-screen bg-background">
         <div className="flex h-full flex-grow flex-col">
           <div className="mx-auto min-h-full w-full px-5 py-10 lg:px-8 2xl:max-w-screen-xl">
             <div className="grid grid-cols-12">
diff --git a/apps/captable/app/(unauthenticated)/new/page.tsx b/apps/captable/app/(unauthenticated)/new/page.tsx
@@ -29,7 +29,7 @@ export default async function CapPage() {
     <div className="flex h-screen items-center justify-center bg-background">
       <div className="grid w-full max-w-lg grid-cols-1 gap-5 rounded-xl border bg-card/10 p-10 shadow-sm hover:shadow-md">
         <h3 className="-mt-5">
-          cap.<span className="text-2xl text-gray-600">new</span>
+          cap.<span className="text-2xl text-muted-foreground">new</span>
         </h3>
         <ul>
           <li className="mb-1">
diff --git a/apps/captable/app/not-found.tsx b/apps/captable/app/not-found.tsx
@@ -8,7 +8,7 @@ export default function NotFoundPage() {
 
   return (
     <div className="flex h-screen w-full flex-col items-center justify-center bg-background">
-      <h1 className=" text-9xl font-extrabold tracking-widest text-gray-900 md:text-[150px]">
+      <h1 className=" text-9xl font-extrabold tracking-widest text-foreground md:text-[150px]">
         404
       </h1>
       <div className=" px-4 pb-2 text-sm text-black">
diff --git a/apps/captable/app/view/updates/[publicId]/page.tsx b/apps/captable/app/view/updates/[publicId]/page.tsx
@@ -114,7 +114,7 @@ const PublicUpdatePage = async ({
       <div className="h-screen w-full flex justify-center items-center">
         <div className="flex items-center space-x-5">
           <RiLock2Line className="h-10 w-10" />
-          <p className="text-lg font-semibold text-gray-600">
+          <p className="text-lg font-semibold text-muted-foreground">
             Public access denied
           </p>
         </div>
diff --git a/apps/captable/components/common/modal.tsx b/apps/captable/components/common/modal.tsx
@@ -55,7 +55,7 @@ const Modal = ({
             scrollable ? "overflow-scroll" : "",
           )}
         >
-          <header className="border-b border-gray-200 p-5">
+          <header className="border-b border-border p-5">
             <div className="">
               <DialogHeader>
                 <div className="flex justify-center">
@@ -71,7 +71,7 @@ const Modal = ({
             </div>
           </header>
 
-          <section className=" bg-gray-100 px-8 py-5">
+          <section className=" bg-muted/30 px-8 py-5">
             <div className="">{children}</div>
           </section>
         </div>
diff --git a/apps/captable/components/common/push-modal.tsx b/apps/captable/components/common/push-modal.tsx
@@ -45,7 +45,7 @@ const Modal = ({
           scrollable ? "overflow-scroll" : "",
         )}
       >
-        <header className="border-b border-gray-200 p-5">
+        <header className="border-b border-border p-5">
           <div className="">
             <DialogHeader>
               <div className="flex justify-center">
@@ -61,7 +61,7 @@ const Modal = ({
           </div>
         </header>
 
-        <section className=" bg-gray-100 px-8 py-5">
+        <section className=" bg-muted/30 px-8 py-5">
           <div className="">{children}</div>
         </section>
       </div>
diff --git a/apps/captable/components/common/share-modal.tsx b/apps/captable/components/common/share-modal.tsx
@@ -99,7 +99,7 @@ const Share = ({
               placeholder="Search stakeholders, members or add email addresses"
               creatable
               emptyIndicator={
-                <p className="text-center text-sm leading-10 text-gray-600 dark:text-gray-400">
+                <p className="text-center text-sm leading-10 text-muted-foreground">
                   No results found!
                 </p>
               }
diff --git a/apps/captable/components/dashboard/navbar/command-menu.tsx b/apps/captable/components/dashboard/navbar/command-menu.tsx
@@ -252,7 +252,7 @@ export function CommandMenu({ companyPublicId }: CommandMenuProps) {
                 <div
                   className={cn(
                     "rounded-lg p-0.5",
-                    page.id === "ai" ? "bg-teal-100" : "bg-gray-200",
+                    page.id === "ai" ? "bg-teal-100" : "bg-muted",
                   )}
                 >
                   {page.id === "ai" ? (
diff --git a/apps/captable/components/dashboard/navbar/index.tsx b/apps/captable/components/dashboard/navbar/index.tsx
@@ -11,7 +11,7 @@ interface SideBarProps {
 export function NavBar({ publicId, companies }: SideBarProps) {
   return (
     <div className="sticky top-0 z-50 w-full border-b">
-      <header className="flex h-14 items-center bg-gray-50 px-4 lg:px-8">
+      <header className="flex h-14 items-center bg-muted/50 px-4 lg:px-8">
         <div className="flex w-full items-center justify-between">
           <MobileDrawer publicId={publicId} companies={companies} />
           <div className="flex items-center gap-6">
diff --git a/apps/captable/components/dashboard/overview/activities-card.tsx b/apps/captable/components/dashboard/overview/activities-card.tsx
@@ -40,7 +40,7 @@ const ActivityCard = async ({ className, publicId }: Props) => {
                 <li key={activityItem.id} className="group">
                   <div className="relative pb-8">
                     <span
-                      className="absolute left-5 top-5 -ml-px h-full w-0.5 bg-gray-200 group-last:hidden"
+                      className="absolute left-5 top-5 -ml-px h-full w-0.5 bg-border group-last:hidden"
                       aria-hidden="true"
                     />
 
@@ -57,7 +57,7 @@ const ActivityCard = async ({ className, publicId }: Props) => {
                           </div>
                         </div>
                         <div className="min-w-0 flex-1 py-1.5">
-                          <div className="text-sm text-gray-500">
+                          <div className="text-sm text-muted-foreground">
                             <span className="font-medium text-primary/80">
                               {activityItem.summary}
                             </span>{" "}
@@ -77,7 +77,7 @@ const ActivityCard = async ({ className, publicId }: Props) => {
             <div className="mt-6">
               <Link
                 href={`/${publicId}/audits`}
-                className="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white py-1 text-sm text-primary/85 hover:bg-gray-50"
+                className="flex w-full items-center justify-center rounded-md border border-border bg-card py-1 text-sm text-primary/85 hover:bg-muted/50"
               >
                 View all activity
               </Link>
diff --git a/apps/captable/components/dashboard/overview/donut-card.tsx b/apps/captable/components/dashboard/overview/donut-card.tsx
@@ -74,7 +74,7 @@ const DonutCard = () => {
       {isClient && (
         <Card className="h-[365px]">
           <CardHeader>
-            <div className="text-sm text-gray-700">
+            <div className="text-sm text-muted-foreground">
               <div className="flex">
                 <span>Ownership by</span>
                 <DonutSelector selected={selected} onChange={setSelected} />
diff --git a/apps/captable/components/dashboard/sidebar/index.tsx b/apps/captable/components/dashboard/sidebar/index.tsx
@@ -247,7 +247,7 @@ export function SideBar({ className, publicId, companies }: SideBarProps) {
                               <item.icon
                                 className={cn(
                                   "ml-1 mr-1 mt-1 inline-block",
-                                  "text-gray-400 group-hover:text-primary",
+                                  "text-muted-foreground group-hover:text-primary",
                                   "h-6 w-6 shrink-0",
                                 )}
                                 aria-hidden="true"
@@ -257,8 +257,8 @@ export function SideBar({ className, publicId, companies }: SideBarProps) {
                             <AccordionTrigger
                               className={cn(
                                 isActive
-                                  ? "bg-gray-50 font-semibold text-primary"
-                                  : "text-gray-700 hover:bg-gray-50 hover:text-primary",
+                                  ? "bg-muted/70 font-semibold text-primary"
+                                  : "text-muted-foreground hover:bg-muted/50 hover:text-primary",
                                 "group flex gap-x-3 rounded-md px-2 py-1 text-sm leading-6 hover:no-underline",
                               )}
                             >
@@ -307,7 +307,7 @@ export function SideBar({ className, publicId, companies }: SideBarProps) {
             </ul>
 
             <div className="py-3">
-              <div className="text-xs font-semibold leading-6 text-gray-400">
+              <div className="text-xs font-semibold leading-6 text-muted-foreground">
                 Company
               </div>
               <ul className="space-y-1">
diff --git a/apps/captable/components/dashboard/sidebar/nav-link.tsx b/apps/captable/components/dashboard/sidebar/nav-link.tsx
@@ -23,8 +23,8 @@ export function NavLink({ active, href, icon, name, className }: NavLinkProps) {
           className={cn(
             className,
             active
-              ? "bg-gray-50 font-semibold text-primary"
-              : "text-gray-700 hover:bg-gray-50 hover:text-primary",
+              ? "bg-muted/70 font-semibold text-primary"
+              : "text-muted-foreground hover:bg-muted/50 hover:text-primary",
             "group flex gap-x-3 rounded-md p-1 text-sm leading-6",
           )}
         >
@@ -33,7 +33,7 @@ export function NavLink({ active, href, icon, name, className }: NavLinkProps) {
               className={cn(
                 active
                   ? "text-primary"
-                  : "text-gray-400 group-hover:text-primary",
+                  : "text-muted-foreground group-hover:text-primary",
                 "h-6 w-6 shrink-0",
               )}
               aria-hidden="true"
@@ -47,8 +47,8 @@ export function NavLink({ active, href, icon, name, className }: NavLinkProps) {
           className={cn(
             className,
             active
-              ? "bg-gray-50 font-semibold text-primary"
-              : "text-gray-700 hover:bg-gray-50 hover:text-primary",
+              ? "bg-muted/70 font-semibold text-primary"
+              : "text-muted-foreground hover:bg-muted/50 hover:text-primary",
             "group flex gap-x-3 rounded-md p-2 text-sm leading-6",
           )}
         >
@@ -57,7 +57,7 @@ export function NavLink({ active, href, icon, name, className }: NavLinkProps) {
               className={cn(
                 active
                   ? "text-primary"
-                  : "text-gray-400 group-hover:text-primary",
+                  : "text-muted-foreground group-hover:text-primary",
                 "h-6 w-6 shrink-0",
               )}
               aria-hidden="true"
diff --git a/apps/captable/components/documents/data-room/explorer.tsx b/apps/captable/components/documents/data-room/explorer.tsx
@@ -39,12 +39,12 @@ const DataRoomFileExplorer = ({
               >
                 <FileIcon type={document.mimeType} />
               </div>
-              <div className="flex flex-1 items-center justify-between truncate rounded-r-md border-y border-r border-gray-200 bg-white">
+              <div className="flex flex-1 items-center justify-between truncate rounded-r-md border-y border-r border-border bg-card">
                 <div className="text-md flex-1 truncate px-4 py-2">
-                  <span className="font-medium text-gray-900 hover:text-gray-600">
+                  <span className="font-medium text-foreground hover:text-muted-foreground">
                     {document.name}
                   </span>
-                  <p className="text-xs text-gray-500">{`${
+                  <p className="text-xs text-muted-foreground">{`${
                     document.mimeType
                   } - ${(document.size / 1024 / 1024).toFixed(2)} MB`}</p>
                 </div>
diff --git a/apps/captable/components/esign/optional-message-modal.tsx b/apps/captable/components/esign/optional-message-modal.tsx
@@ -50,7 +50,7 @@ export const OptionalMessageModal = ({
           <FormItem>
             <FormLabel>
               Message
-              <span className="text-xs text-gray-400"> (Optional)</span>
+              <span className="text-xs text-muted-foreground"> (Optional)</span>
             </FormLabel>
             <FormControl>
               <Textarea
@@ -72,7 +72,7 @@ export const OptionalMessageModal = ({
           Send for signatures
         </Button>
       </div>
-      <p className="py-1 text-center text-xs text-gray-500">
+      <p className="py-1 text-center text-xs text-muted-foreground">
         We{`'`}ll send your recipients an email with a link to complete and sign
         the document.
       </p>
diff --git a/apps/captable/components/member/member-profile.tsx b/apps/captable/components/member/member-profile.tsx
@@ -234,7 +234,7 @@ export const ProfileSettings = ({ memberProfile }: ProfileType) => {
                   onChange={handleFileChangeAndUpload}
                   ref={fileInputRef}
                 />
-                <p className="mt-2 text-xs text-gray-700">
+                <p className="mt-2 text-xs text-muted-foreground">
                   JPG, GIF or PNG. 1MB max.
                 </p>
               </div>
diff --git a/apps/captable/components/member/member-uploader.tsx b/apps/captable/components/member/member-uploader.tsx
@@ -68,7 +68,7 @@ const TeamMemberUploader = ({ setOpen }: TeamMemberUploaderType) => {
           href="/sample-csv/captable-team-members-template.csv"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded bg-gray-300/70 px-2 py-1 text-xs font-medium hover:bg-gray-400/50"
+          className="rounded bg-muted px-2 py-1 text-xs font-medium hover:bg-muted/80"
         >
           <span className="mr-1">sample csv file</span>
           <span aria-hidden="true"> &darr;</span>
@@ -78,7 +78,7 @@ const TeamMemberUploader = ({ setOpen }: TeamMemberUploaderType) => {
 
       {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
       <div
-        className="flex h-24 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-gray-300"
+        className="flex h-24 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-border"
         onClick={() => fileInputRef.current?.click()}
       >
         <RiUploadLine className="h-7 w-7 text-neutral-500" />
diff --git a/apps/captable/components/modals/role-create-update-modal.tsx b/apps/captable/components/modals/role-create-update-modal.tsx
@@ -144,7 +144,7 @@ function RoleForm(props: FormProps) {
                     <Input {...field} />
                   </FormControl>
 
-                  <span className="text-xs text-gray-500">
+                  <span className="text-xs text-muted-foreground">
                     The name of the role, eg. "Billing", "Investor", "Employee"
                   </span>
 
diff --git a/apps/captable/components/modals/team-member/team-member-modal.tsx b/apps/captable/components/modals/team-member/team-member-modal.tsx
@@ -215,7 +215,7 @@ export const TeamMemberModal = ({
             {rest.isEditMode === true ? "Update team member" : "Send an invite"}
           </Button>
 
-          <p className="text-center text-xs text-gray-500">
+          <p className="text-center text-xs text-muted-foreground">
             We{`'`}ll send an email to your team member with a link to create an
             account.
           </p>
diff --git a/apps/captable/components/onboarding/company-form.tsx b/apps/captable/components/onboarding/company-form.tsx
@@ -228,7 +228,7 @@ export const CompanyForm = ({ type, data }: CompanyFormProps) => {
                 onChange={handleLogoChangeAndUpload}
                 ref={fileInputRef}
               />
-              <p className="mt-2 text-xs text-gray-700">
+              <p className="mt-2 text-xs text-muted-foreground">
                 JPG, GIF or PNG. 1MB max.
               </p>
             </div>
diff --git a/apps/captable/components/onboarding/forgot-password/index.tsx b/apps/captable/components/onboarding/forgot-password/index.tsx
@@ -91,7 +91,7 @@ const ForgotPassword = () => {
               </div>
             </form>
           </Form>
-          <span className="text-center text-sm text-gray-500">
+          <span className="text-center text-sm text-muted-foreground">
             Remembered your password?{" "}
             <Link
               href="/login"
diff --git a/apps/captable/components/onboarding/signin/index.tsx b/apps/captable/components/onboarding/signin/index.tsx
diff --git a/apps/captable/components/onboarding/signup/index.tsx b/apps/captable/components/onboarding/signup/index.tsx
diff --git a/apps/captable/components/safe/safe-actions.tsx b/apps/captable/components/safe/safe-actions.tsx
diff --git a/apps/captable/components/screen-size.tsx b/apps/captable/components/screen-size.tsx
diff --git a/apps/captable/components/securities/shares/share-table.tsx b/apps/captable/components/securities/shares/share-table.tsx
diff --git a/apps/captable/components/settings/settings-sidebar.tsx b/apps/captable/components/settings/settings-sidebar.tsx
diff --git a/apps/captable/components/stakeholder/stakeholder-uploader.tsx b/apps/captable/components/stakeholder/stakeholder-uploader.tsx
diff --git a/apps/captable/components/ui/stepper.tsx b/apps/captable/components/ui/stepper.tsx
diff --git a/apps/captable/components/update/editor.tsx b/apps/captable/components/update/editor.tsx
diff --git a/apps/captable/components/update/update-table.tsx b/apps/captable/components/update/update-table.tsx
diff --git a/packages/email/components/link.tsx b/packages/email/components/link.tsx
diff --git a/packages/email/templates/share-data-room-email.tsx b/packages/email/templates/share-data-room-email.tsx
diff --git a/packages/email/templates/share-update-email.tsx b/packages/email/templates/share-update-email.tsx

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ export default function NotFoundPage() {`
`8`	`8`
`9`	`9`	`return (`
`10`	`10`	`<div className="flex h-screen w-full flex-col items-center justify-center bg-background">`
`11`		`- <h1 className=" text-9xl font-extrabold tracking-widest text-gray-900 md:text-[150px]">`
	`11`	`+ <h1 className=" text-9xl font-extrabold tracking-widest text-foreground md:text-[150px]">`
`12`	`12`	`404`
`13`	`13`	`</h1>`
`14`	`14`	`<div className=" px-4 pb-2 text-sm text-black">`