cosmetic adjustments

src/components/LocaleSwitcherSelect.tsx

@@ -1,19 +1,18 @@
 "use client";
 
 import {
-    DropdownMenu,
-    DropdownMenuContent,
     DropdownMenuItem,
-    DropdownMenuTrigger
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger
 } from "@app/components/ui/dropdown-menu";
-import { Button } from "@app/components/ui/button";
-import { Check, Globe, Languages } from "lucide-react";
-import clsx from "clsx";
+import { Check, Languages } from "lucide-react";
 import { useTransition } from "react";
 import { Locale } from "@/i18n/config";
 import { setUserLocale } from "@/services/locale";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { cn } from "@app/lib/cn";
 
 type Props = {
     defaultValue: string;
@@ -43,23 +42,18 @@ export default function LocaleSwitcherSelect({
     const selected = items.find((item) => item.value === defaultValue);
 
     return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button
-                    variant="ghost"
-                    className={clsx(
-                        "w-full rounded-sm h-8 gap-2 justify-start font-normal",
-                        isPending && "pointer-events-none"
-                    )}
-                    aria-label={label}
-                >
-                    <Languages className="text-muted-foreground h-4 w-4" />
-                    <span className="text-left flex-1">
-                        {selected?.label ?? label}
-                    </span>
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="min-w-[8rem]">
+        <DropdownMenuSub>
+            <DropdownMenuSubTrigger
+                className={cn(
+                    "[&_svg:not([class*='text-'])]:text-muted-foreground",
+                    isPending && "pointer-events-none"
+                )}
+                aria-label={label}
+            >
+                <Languages className="mr-2 h-4 w-4" />
+                <span>{selected?.label ?? label}</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent className="min-w-[8rem]">
                 {items.map((item) => (
                     <DropdownMenuItem
                         key={item.value}
@@ -72,7 +66,7 @@ export default function LocaleSwitcherSelect({
                         <span>{item.label}</span>
                     </DropdownMenuItem>
                 ))}
-            </DropdownMenuContent>
-        </DropdownMenu>
+            </DropdownMenuSubContent>
+        </DropdownMenuSub>
     );
 }

src/components/OrgSelector.tsx

@@ -27,15 +27,7 @@ export function OrgSelector({
     const selectedOrg = orgs?.find((org) => org.orgId === orgId);
 
     const picker = (
-        <OrgPicker
-            orgId={orgId}
-            orgs={orgs}
-            contentClassName={
-                isCollapsed
-                    ? "w-[320px]"
-                    : "w-[var(--radix-popover-trigger-width)]"
-            }
-        >
+        <OrgPicker orgId={orgId} orgs={orgs} contentClassName="w-[320px]">
             <div
                 role="combobox"
                 className={cn(

src/components/OrgsTable.tsx

@@ -103,6 +103,11 @@ export default function OrgsTable({
                 enableHiding: false,
                 header: () => sortableHeader("name", t("name"))
             },
+            {
+                accessorKey: "orgId",
+                friendlyName: t("orgId"),
+                header: () => <span className="p-3">{t("orgId")}</span>
+            },
             {
                 accessorKey: "createdAt",
                 friendlyName: t("createdAt"),
@@ -141,11 +146,6 @@ export default function OrgsTable({
                     );
                 }
             },
-            {
-                accessorKey: "orgId",
-                friendlyName: t("orgId"),
-                header: () => <span className="p-3">{t("orgId")}</span>
-            },
             {
                 accessorKey: "subnet",
                 friendlyName: t("subnet"),
@@ -164,31 +164,19 @@ export default function OrgsTable({
                 accessorKey: "userCount",
                 friendlyName: t("users"),
                 header: () => <span className="p-3">{t("users")}</span>,
-                cell: ({ row }) => (
-                    <span className="tabular-nums">
-                        {row.original.userCount}
-                    </span>
-                )
+                cell: ({ row }) => <span>{row.original.userCount}</span>
             },
             {
                 accessorKey: "siteCount",
                 friendlyName: t("sites"),
                 header: () => <span className="p-3">{t("sites")}</span>,
-                cell: ({ row }) => (
-                    <span className="tabular-nums">
-                        {row.original.siteCount}
-                    </span>
-                )
+                cell: ({ row }) => <span>{row.original.siteCount}</span>
             },
             {
                 accessorKey: "resourceCount",
                 friendlyName: t("resources"),
                 header: () => <span className="p-3">{t("resources")}</span>,
-                cell: ({ row }) => (
-                    <span className="tabular-nums">
-                        {row.original.resourceCount}
-                    </span>
-                )
+                cell: ({ row }) => <span>{row.original.resourceCount}</span>
             },
 
             {
@@ -205,7 +193,6 @@ export default function OrgsTable({
                                     setIsDeleteModalOpen(true);
                                 }}
                                 variant="outline"
-                                className="text-red-400 focus:text-destructive "
                             >
                                 {t("delete")}
                             </Button>
@@ -288,8 +275,7 @@ export default function OrgsTable({
                 rowCount={rowCount}
                 columnVisibility={{
                     subnet: false,
-                    utilitySubnet: false,
-                    orgId: false
+                    utilitySubnet: false
                 }}
                 enableColumnVisibility
                 stickyLeftColumn="name"

src/components/ProfileIcon.tsx

@@ -9,13 +9,16 @@ import {
     DropdownMenuItem,
     DropdownMenuLabel,
     DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
     DropdownMenuTrigger
 } from "@app/components/ui/dropdown-menu";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
 import { getUserDisplayName } from "@app/lib/getUserDisplayName";
-import { Laptop, LogOut, Moon, Sun, Smartphone, Trash2 } from "lucide-react";
+import { Check, Laptop, Moon, Sun, Trash2 } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
@@ -149,42 +152,49 @@ export default function ProfileIcon() {
                             >
                                 <span>{t("changePassword")}</span>
                             </DropdownMenuItem>
-                            <DropdownMenuSeparator />
                         </>
                     )}
                     <DropdownMenuItem onClick={() => setOpenViewDevices(true)}>
-                        <Smartphone className="mr-2 h-4 w-4" />
                         <span>{t("viewDevices") || "View Devices"}</span>
                     </DropdownMenuItem>
                     <DropdownMenuSeparator />
                     <DropdownMenuLabel>{t("theme")}</DropdownMenuLabel>
-                    {(["light", "dark", "system"] as const).map(
-                        (themeOption) => (
-                            <DropdownMenuItem
-                                key={themeOption}
-                                onClick={() => handleThemeChange(themeOption)}
-                            >
-                                {themeOption === "light" && (
-                                    <Sun className="mr-2 h-4 w-4" />
-                                )}
-                                {themeOption === "dark" && (
-                                    <Moon className="mr-2 h-4 w-4" />
-                                )}
-                                {themeOption === "system" && (
-                                    <Laptop className="mr-2 h-4 w-4" />
-                                )}
-                                <span className="capitalize">
-                                    {t(themeOption)}
-                                </span>
-                                {userTheme === themeOption && (
-                                    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-                                        <span className="h-2 w-2 rounded-full bg-primary"></span>
-                                    </span>
-                                )}
-                            </DropdownMenuItem>
-                        )
-                    )}
+                    <DropdownMenuSub>
+                        <DropdownMenuSubTrigger className="[&_svg:not([class*='text-'])]:text-muted-foreground">
+                            {userTheme === "light" && (
+                                <Sun className="mr-2 h-4 w-4" />
+                            )}
+                            {userTheme === "dark" && (
+                                <Moon className="mr-2 h-4 w-4" />
+                            )}
+                            {userTheme === "system" && (
+                                <Laptop className="mr-2 h-4 w-4" />
+                            )}
+                            <span className="capitalize">{t(userTheme)}</span>
+                        </DropdownMenuSubTrigger>
+                        <DropdownMenuSubContent className="min-w-[8rem]">
+                            {(["light", "dark", "system"] as const).map(
+                                (themeOption) => (
+                                    <DropdownMenuItem
+                                        key={themeOption}
+                                        onClick={() =>
+                                            handleThemeChange(themeOption)
+                                        }
+                                        className="flex items-center gap-2"
+                                    >
+                                        {userTheme === themeOption && (
+                                            <Check className="h-4 w-4" />
+                                        )}
+                                        <span className="capitalize">
+                                            {t(themeOption)}
+                                        </span>
+                                    </DropdownMenuItem>
+                                )
+                            )}
+                        </DropdownMenuSubContent>
+                    </DropdownMenuSub>
                     <DropdownMenuSeparator />
+                    <DropdownMenuLabel>{t("language")}</DropdownMenuLabel>
                     <LocaleSwitcher />
                     <DropdownMenuSeparator />
                     {user?.type === UserType.Internal && !user?.serverAdmin && (