chore: replace hardcoded hex colors with named Tailwind classes in folder-icon

[Apetuezekiel]

Problem

apps/web/ui/folders/folder-icon.tsx uses four hardcoded hex color values in defaultIconClassName that map exactly to standard Tailwind color names. Three of the five folder types already use proper named classes (text-blue-800); the other three use bare hex strings:

Hex	Tailwind equivalent
text-[#3730A3]	text-indigo-800
text-[#9A3412]	text-orange-800
text-[#1F2937]	text-gray-800
text-[#166534]	text-green-800

This is the same pattern addressed in #3312.

Fix

Replace the four hex strings with their named equivalents so the file is consistent (all five folder types now use the color-800 naming pattern) and Tailwind's tooling (IntelliSense, tree-shaking, theming) can work correctly.

I have a one-line-per-color fix ready to PR.

[linear]

ENG-1706

[Apetuezekiel]

I've implemented the fix. Since PR creation appears to be restricted for non-collaborators, sharing the branch here for review.

Fork branch: https://github.com/Apetuezekiel/dub/tree/chore/replace-hardcoded-hex-with-tailwind-colors

Diff (single file, apps/web/ui/folders/folder-icon.tsx):

-  read:    defaultIconClassName: "text-[#3730A3]"
+  read:    defaultIconClassName: "text-indigo-800"

-  none:    defaultIconClassName: "text-[#9A3412]"
+  none:    defaultIconClassName: "text-orange-800"

-  new:     defaultIconClassName: "text-[#1F2937]"
+  new:     defaultIconClassName: "text-gray-800"

-  unsorted: defaultIconClassName: "text-[#166534]"
+  unsorted: defaultIconClassName: "text-green-800"

All four hex values were verified to be exact 1:1 matches for the named Tailwind classes (no color change). write already used text-blue-800 — after this change all five folder types follow the same text-{color}-800 pattern consistently.

[numaanahmed3110]

Hi! I prepared a fix for this issue by replacing the four hardcoded hex color values in apps/web/ui/folders/folder-icon.tsx with their corresponding named Tailwind utility classes:

text-[#3730A3] → text-indigo-800
text-[#9A3412] → text-orange-800
text-[#1F2937] → text-gray-800
text-[#166534] → text-green-800

I wasn't able to open a PR because PR creation is currently restricted to repository collaborators, so I've pushed the changes to a branch instead:
Branch: [ https://github.com/numaanahmed3110/dub/tree/fix/folder-icon-tailwind-colors ]

Feel free to cherry-pick the commit or apply the changes directly if they're useful. Thanks!

[AyoNaim]

Since public PRs are temporarily restricted to collaborators, dropping my fix for this issue right here so a maintainer can easily commit or cherry-pick it directly.

The Refactor

We can replace the remaining four arbitrary hex overrides inside folderIconsMap (apps/web/ui/folders/folder-icon.tsx) with native Tailwind tokens. This aligns the rest of the variants with the existing write config, standardizes token mapping, and keeps them fully safe for future dark mode or theme overrides.

Branch: [ https://github.com/AyoNaim/dub/tree/chore/fix-folder-hex-colors ]

const folderIconsMap: Record<
  FolderAccessLevel | "new" | "unsorted" | "none",
  {
    borderColor: string;
    bgColor: string;
    icon: React.ElementType;
    defaultIconClassName: string;
  }
> = {
  read: {
    borderColor: "border-indigo-200",
    bgColor: "bg-indigo-100",
    icon: FolderShield,
-   defaultIconClassName: "text-[#3730A3]",
+   defaultIconClassName: "text-indigo-800",
  },
  write: {
    borderColor: "border-blue-200",
    bgColor: "bg-blue-100",
    icon: Folder,
    defaultIconClassName: "text-blue-800",
  },
  none: {
    borderColor: "border-orange-200",
    bgColor: "bg-orange-100",
    icon: FolderLock,
-   defaultIconClassName: "text-[#9A3412]",
+   defaultIconClassName: "text-orange-800",
  },
  new: {
    borderColor: "border-neutral-200",
    bgColor: "bg-neutral-100",
    icon: FolderPlus,
-   defaultIconClassName: "text-[#1F2937]",
+   defaultIconClassName: "text-gray-800",
  },
  unsorted: {
    borderColor: "border-green-200",
    bgColor: "bg-green-100",
    icon: FolderBookmark,
-   defaultIconClassName: "text-[#166534]",
+   defaultIconClassName: "text-green-800",
  },
} as const;

[ankit-pandit07]

Hi, I looked into this issue and made the suggested change.

I replaced the hardcoded hex colors in folder-icon.tsx with their equivalent Tailwind classes:

• text-[#3730A3] → text-indigo-800
• text-[#9A3412] → text-orange-800
• text-[#1F2937] → text-gray-800
• text-[#166534] → text-green-800

I also ran the TypeScript check and it passed with 0 errors.

The fix is available on my fork in the fix/folder-icon-tailwind-colors branch.

I’m unable to create a PR to the upstream repository from my account, so I’m sharing the branch here for a maintainer to review.

Thanks!