visual adjustments to logo empty state and profile dropdown

messages/en-US.json

@@ -522,8 +522,8 @@
     "pendingSitesBannerDescription": "Sites that connect using a provisioning key appear here for review.",
     "pendingSitesBannerButtonText": "Learn More",
     "apiKeysSettings": "{apiKeyName} Settings",
-    "userTitle": "Manage All Users",
-    "userDescription": "View and manage all users in the system",
+    "userTitle": "Manage Users",
+    "userDescription": "View and manage all users in this instance",
     "userAbount": "About User Management",
     "userAbountDescription": "This table displays all base user objects in the system. Each user may belong to multiple organizations. Removing a user from an organization does not delete their base user object. They will remain in the system. To completely remove a user from the system, you must delete their base user object using the delete action in this table.",
     "userServer": "Server Users",
@@ -1216,7 +1216,7 @@
     "orgPoliciesEdit": "Edit Organization Policy",
     "org": "Organization",
     "orgSelect": "Select organization",
-    "orgSearch": "Search org",
+    "orgSearch": "Search organizations...",
     "orgNotFound": "No org found.",
     "roleMappingPathOptional": "Role Mapping Path (Optional)",
     "orgMappingPathOptional": "Organization Mapping Path (Optional)",
@@ -2100,7 +2100,7 @@
     "sidebarOrgs": "Organizations",
     "sidebarProvisioning": "Provisioning",
     "sidebarSettings": "Settings",
-    "sidebarAllUsers": "All Users",
+    "sidebarAllUsers": "Users",
     "sidebarIdentityProviders": "Identity Providers",
     "sidebarLicense": "License",
     "sidebarClients": "Clients",

src/app/globals.css

@@ -65,7 +65,7 @@
     --chart-3: oklch(0.769 0.188 70.08);
     --chart-4: oklch(0.627 0.265 303.9);
     --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: #0C0C0D;
+    --sidebar: #0c0c0d;
     --sidebar-foreground: oklch(0.985 0 0);
     --sidebar-primary: oklch(0.646 0.222 41.116);
     --sidebar-primary-foreground: oklch(0.98 0.016 73.684);

src/app/navigation.tsx

@@ -377,16 +377,16 @@ export const adminNavSections = (env?: Env): SidebarNavSection[] => [
                 href: "/admin/users",
                 icon: <Users className="size-4 flex-none" />
             },
-            {
-                title: "sidebarApiKeys",
-                href: "/admin/api-keys",
-                icon: <KeyRound className="size-4 flex-none" />
-            },
             {
                 title: "sidebarOrgs",
                 href: "/admin/organizations",
                 icon: <Building2Icon className="size-4 flex-none" />
             },
+            {
+                title: "sidebarApiKeys",
+                href: "/admin/api-keys",
+                icon: <KeyRound className="size-4 flex-none" />
+            },
             ...(build === "oss" ||
             env?.app.identityProviderMode === "global" ||
             env?.app.identityProviderMode === undefined

src/components/LocaleSwitcherSelect.tsx

@@ -60,10 +60,10 @@ export default function LocaleSwitcherSelect({
                         onClick={() => onChange(item.value)}
                         className="flex items-center gap-2"
                     >
-                        {item.value === defaultValue && (
-                            <Check className="h-4 w-4" />
-                        )}
                         <span>{item.label}</span>
+                        {item.value === defaultValue && (
+                            <Check className="ml-auto h-4 w-4" />
+                        )}
                     </DropdownMenuItem>
                 ))}
             </DropdownMenuSubContent>

src/components/OrgsTable.tsx

@@ -26,6 +26,7 @@ import { useRouter } from "next/navigation";
 import { useMemo, useState, useTransition } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import ConfirmDeleteDialog from "./ConfirmDeleteDialog";
+import CopyToClipboard from "./CopyToClipboard";
 
 type OrgTableProps = {
     orgs: AdminOrgRow[];
@@ -106,7 +107,10 @@ export default function OrgsTable({
             {
                 accessorKey: "orgId",
                 friendlyName: t("orgId"),
-                header: () => <span className="p-3">{t("orgId")}</span>
+                header: () => <span className="p-3">{t("orgId")}</span>,
+                cell: ({ row }) => (
+                    <CopyToClipboard text={row.original.orgId} isLink={false} />
+                )
             },
             {
                 accessorKey: "createdAt",

src/components/ProfileIcon.tsx

@@ -182,12 +182,12 @@ export default function ProfileIcon() {
                                         }
                                         className="flex items-center gap-2"
                                     >
-                                        {userTheme === themeOption && (
-                                            <Check className="h-4 w-4" />
-                                        )}
                                         <span className="capitalize">
                                             {t(themeOption)}
                                         </span>
+                                        {userTheme === themeOption && (
+                                            <Check className="ml-auto h-4 w-4" />
+                                        )}
                                     </DropdownMenuItem>
                                 )
                             )}

src/components/ui/button.tsx

@@ -81,15 +81,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
                         <span className="absolute inset-0 flex items-center justify-center">
                             <span className="flex items-center gap-1.5">
                                 <span
-                                    className="h-1 w-1 bg-current animate-dot-pulse"
+                                    className="h-1 w-1 rounded-full bg-current animate-dot-pulse"
                                     style={{ animationDelay: "0ms" }}
                                 />
                                 <span
-                                    className="h-1 w-1 bg-current animate-dot-pulse"
+                                    className="h-1 w-1 rounded-full bg-current animate-dot-pulse"
                                     style={{ animationDelay: "200ms" }}
                                 />
                                 <span
-                                    className="h-1 w-1 bg-current animate-dot-pulse"
+                                    className="h-1 w-1 rounded-full bg-current animate-dot-pulse"
                                     style={{ animationDelay: "400ms" }}
                                 />
                             </span>

src/components/ui/data-table-empty-state.tsx

@@ -24,7 +24,7 @@ export function DataTableEmptyState({
     const placeholderRows = compact
         ? COMPACT_PLACEHOLDER_ROW_COUNT
         : PLACEHOLDER_ROW_COUNT;
-    const minHeightClass = compact ? "min-h-[4.5rem]" : "min-h-[11rem]";
+    const minHeightClass = compact ? "min-h-20" : "min-h-[12.5rem]";
 
     return (
         <TableRow className="hidden sm:table-row hover:bg-transparent data-[state=selected]:bg-transparent">
@@ -33,18 +33,23 @@ export function DataTableEmptyState({
                     className={`relative w-full overflow-hidden ${minHeightClass}`}
                 >
                     <div
-                        className="absolute inset-0 flex flex-col justify-start"
+                        className="pointer-events-none absolute inset-0 flex flex-col justify-start opacity-50"
                         aria-hidden
                     >
                         {Array.from({ length: placeholderRows }).map((_, i) => (
-                            <div key={i} className="h-10 shrink-0" />
+                            <div
+                                key={i}
+                                className="flex h-10 shrink-0 items-center border-b border-border/60 px-4 last:border-b-0"
+                            >
+                                <div className="h-3.5 w-full rounded bg-muted/60" />
+                            </div>
                         ))}
                     </div>
                     <div
                         className={`relative flex w-full flex-col items-center justify-center px-4 ${
                             compact
-                                ? "min-h-[4.5rem] gap-3 py-4"
-                                : "min-h-[11rem] gap-4 py-8"
+                                ? "min-h-20 gap-3 py-4"
+                                : "min-h-[12.5rem] gap-4 py-8"
                         }`}
                     >
                         <p className="text-sm text-muted-foreground">