Rebrand to new logo/colors and fix dropdown, breadcrumb, and dark mode issues (#553)

* Polish allocations and projects pages UX

Hide allocation GUIDs/cluster IDs from list and detail views, remove
duplicate breadcrumbs, and improve the overview detail sections with
consistent colon alignment, background, and rounded corners. Add
dividers and a brand-tinted pill background to the meta row below
each detail page title, sized to match the status badge height.

* Wrap PI email in parentheses on project overview

Plain trailing email next to the PI name read ambiguously; bracketing
it makes clear it's supplementary contact info.

* Replace wordmark with new logo and rebrand to orange

Swap the plain-text "Custos" wordmark in the sidebar and sign-in card
for the new logo SVG, and repoint the brand color system (--brand,
--custos-primary, --custos-action) from blue to the logo's orange.
Fix AccessCard's brand-tint text pairing to use --brand instead of the
stale blue --accent-foreground. Also tweak the dark-theme default
button fill from blue to a neutral gray for consistency with light
theme, align the sidebar logo vertically with the topbar nav arrows,
and lighten the sidebar section labels.

* Rework native selects into themed dropdowns, fix breadcrumbs and post-login redirect

Replace native <select> filters (Users & Permissions roles/identities,
Allocations/Projects status) with the shared Select component so they
share the app's theming, open below their trigger, and never render
narrower than their widest option (was clipping into the checkmark on
the change-request type dropdown). Give trigger/menu matching, fixed
widths and friendly labels instead of raw values everywhere they're used.

Breadcrumbs on allocation/project detail pages now show the resource's
name instead of its raw ID, via a small context that lets the detail
page register a label once its data loads.

Also: surface Initial SUs in the allocation header meta row, and make
the signed-in root route redirect straight to /allocations instead of
showing an empty placeholder page.

* Use theme-aware tone tokens for status badges

StatusBadge hardcoded light-theme colors (e.g. custos-green-50), so
badges like ACTIVE rendered as a solid light box in dark mode instead
of blending in. Switch to the existing --tone-ok/-error/-warn/-info
tokens, which already define a translucent dark-mode variant for each.

* Remove dead Suspense/SignInForm JSX left over from the master merge

The merge brought in master's redesigned sign-in page (redirect-only,
no custom UI) but left the old card markup in place, referencing
components that no longer exist and breaking the build.

* Remove duplicate roleLabelFor/identityLabelFor in UsersTable

The merge duplicated both helper functions verbatim, which TypeScript
flags as a duplicate implementation and fails the build. Keep a single
copy of each; behavior is unchanged.

* Use the configured brand logo in the sidebar instead of a duplicate asset

Sidebar.tsx hardcoded a new public/custos-logo.svg with a fixed "Custos"
alt text, bypassing the existing brand.logo/brand.name config (already
wired to NEXT_PUBLIC_PORTAL_LOGO/NEXT_PUBLIC_PORTAL_NAME) and silently
breaking white-labeling. The new logo is byte-identical to the one
already shipped at public/brand/logo/custos-logo.svg, so point the
sidebar back at brand.logo and drop the redundant duplicate file.

* Restore config-driven brand logo in Sidebar.tsx

Missed in the previous commit: point the sidebar's <img> back at
brand.logo/brand.name instead of the hardcoded path removed there.

Author: NipunaDB

web/design-tokens/colors.css

@@ -74,20 +74,26 @@
   --custos-purple-500: #8b5cf6;
   --custos-purple-700: #6d28d9;
 
+  --custos-orange-50: #fff3e0;
+  --custos-orange-100: #ffe0b2;
+  --custos-orange-400: #ffa726;
+  --custos-orange-500: #fe8c00;
+  --custos-orange-700: #b35f00;
+
   --custos-white: #ffffff;
 
-  --custos-primary: var(--custos-blue-500);
+  --custos-primary: var(--custos-orange-500);
   --custos-primary-foreground: var(--custos-white);
-  --custos-action: var(--custos-blue-500);
+  --custos-action: var(--custos-orange-500);
   --custos-error: var(--custos-red-600);
   --custos-success: var(--custos-green-600);
   --custos-warning: #f59e0b;
 
   /* Brand semantic — distinct from --primary; reserved for active states,
        links, brand wordmark, progress bar default fill. */
-  --brand: var(--custos-blue-500);
+  --brand: var(--custos-orange-500);
   --brand-foreground: #ffffff;
-  --brand-tint: var(--custos-blue-50);
+  --brand-tint: var(--custos-orange-50);
 
   /* Semantic tone tokens — paired bg/fg used by pills, chips, banners. */
   --banner-error-bg: var(--custos-red-50);
@@ -197,9 +203,9 @@
   --sidebar-border: var(--custos-gray-700);
   --sidebar-ring: var(--custos-blue-400);
 
-  --brand: var(--custos-blue-400);
+  --brand: var(--custos-orange-400);
   --brand-foreground: #ffffff;
-  --brand-tint: rgba(77, 134, 201, 0.22);
+  --brand-tint: rgba(254, 140, 0, 0.22);
 
   --muted-2: var(--custos-gray-700);
   --border-strong: var(--custos-gray-600);

web/src/app/(portal)/admin/users/management/UsersTable.tsx

@@ -78,7 +78,6 @@ export function UsersTable({
   const identityFilter = searchParams.get("identity") ?? "all";
   const filtersActive =
     Boolean(search.trim()) || (canManageRoles && roleFilter !== "all") || identityFilter !== "all";
-  const selectedUser = users.find((user) => user.id === selectedId) ?? null;
 
   function roleLabelFor(value: string): string {
     if (value === "all") return "All roles";
@@ -88,6 +87,7 @@ export function UsersTable({
   function identityLabelFor(value: string): string {
     return value === "all" ? "All external identities" : identitySourceLabel(value);
   }
+  const selectedUser = users.find((user) => user.id === selectedId) ?? null;
 
   function resetSelection() {
     setSelectedId(null);

web/src/shared/__tests__/tokens.test.ts

@@ -37,16 +37,16 @@ describe("design-tokens/colors.css", () => {
   it("defines the brand semantic in :root", () => {
     expect(tokens).toContain("--primary: oklch(0.205 0 0)");
     expect(tokens).toContain("--primary-foreground: oklch(0.985 0 0)");
-    expect(tokens).toContain("--brand: var(--custos-blue-500)");
+    expect(tokens).toContain("--brand: var(--custos-orange-500)");
     expect(tokens).toContain("--brand-foreground: #ffffff");
-    expect(tokens).toContain("--brand-tint: var(--custos-blue-50)");
+    expect(tokens).toContain("--brand-tint: var(--custos-orange-50)");
   });
 
   it("mirrors the brand semantic under .dark", () => {
     const darkBlockMatch = tokens.match(/\.dark\s*{[^}]*}/);
     expect(darkBlockMatch, "expected a .dark { ... } block").not.toBeNull();
     const darkBlock = darkBlockMatch?.[0] ?? "";
-    expect(darkBlock).toContain("--brand: var(--custos-blue-400)");
+    expect(darkBlock).toContain("--brand: var(--custos-orange-400)");
     expect(darkBlock).toContain("--brand-tint:");
   });
 });