refactor: update various components to enhance styling consistency and improve user interaction by removing unnecessary classes and adjusting dialog and dropdown styles

This commit is contained in:
Anish Sarkar 2026-03-07 04:15:40 +05:30
parent b07f8699f6
commit 72337f326c
24 changed files with 127 additions and 158 deletions

View file

@ -466,8 +466,7 @@ export function AllPrivateChatsSidebar({
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => handleDeleteThread(thread.id)}
className="text-destructive focus:text-destructive"
>
>
<Trash2 className="mr-2 h-4 w-4" />
<span>{t("delete") || "Delete"}</span>
</DropdownMenuItem>
@ -525,7 +524,7 @@ export function AllPrivateChatsSidebar({
/>
<DialogFooter className="flex gap-2 sm:justify-end">
<Button
variant="outline"
variant="secondary"
onClick={() => setShowRenameDialog(false)}
disabled={isRenaming}
>

View file

@ -466,8 +466,7 @@ export function AllSharedChatsSidebar({
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => handleDeleteThread(thread.id)}
className="text-destructive focus:text-destructive"
>
>
<Trash2 className="mr-2 h-4 w-4" />
<span>{t("delete") || "Delete"}</span>
</DropdownMenuItem>
@ -525,7 +524,7 @@ export function AllSharedChatsSidebar({
/>
<DialogFooter className="flex gap-2 sm:justify-end">
<Button
variant="outline"
variant="secondary"
onClick={() => setShowRenameDialog(false)}
disabled={isRenaming}
>

View file

@ -125,8 +125,7 @@ export function ChatListItem({
e.stopPropagation();
onDelete();
}}
className="text-destructive focus:text-destructive"
>
>
<Trash2 className="mr-2 h-4 w-4" />
<span>{t("delete")}</span>
</DropdownMenuItem>

View file

@ -712,7 +712,7 @@ export function InboxSidebar({
</Tooltip>
<DropdownMenuContent
align="end"
className={cn("z-80 select-none max-h-[60vh] overflow-hidden flex flex-col bg-muted dark:border dark:border-neutral-700", activeTab === "status" ? "w-52" : "w-44")}
className={cn("z-80 select-none max-h-[60vh] overflow-hidden flex flex-col", activeTab === "status" ? "w-52" : "w-44")}
>
<DropdownMenuLabel className="text-xs text-muted-foreground/80 font-normal">
{t("filter") || "Filter"}

View file

@ -50,7 +50,7 @@ export function SidebarHeader({
<ChevronsUpDown className="h-4 w-4 shrink-0 text-muted-foreground" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48 bg-muted dark:border dark:border-neutral-700">
<DropdownMenuContent align="start" className="w-48">
<DropdownMenuItem onClick={onManageMembers}>
<UserPen className="h-4 w-4" />
{t("manage_members")}

View file

@ -177,7 +177,7 @@ export function SidebarUserProfile({
<TooltipContent side="right">{displayName}</TooltipContent>
</Tooltip>
<DropdownMenuContent className="w-48 bg-muted dark:border dark:border-neutral-700" side="right" align="center" sideOffset={8}>
<DropdownMenuContent className="w-48" side="right" align="center" sideOffset={8}>
<DropdownMenuLabel className="font-normal">
<div className="flex items-center gap-2">
<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
@ -202,7 +202,7 @@ export function SidebarUserProfile({
{t("theme")}
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent className="gap-1 bg-muted dark:border dark:border-neutral-700">
<DropdownMenuSubContent className="gap-1">
{THEMES.map((themeOption) => {
const Icon = themeOption.icon;
const isSelected = theme === themeOption.value;
@ -233,7 +233,7 @@ export function SidebarUserProfile({
{t("language")}
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent className="gap-1 bg-muted dark:border dark:border-neutral-700">
<DropdownMenuSubContent className="gap-1">
{LANGUAGES.map((language) => {
const isSelected = locale === language.code;
return (
@ -299,7 +299,7 @@ export function SidebarUserProfile({
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-48 bg-muted dark:border dark:border-neutral-700" side="top" align="center" sideOffset={4}>
<DropdownMenuContent className="w-48" side="top" align="center" sideOffset={4}>
<DropdownMenuLabel className="font-normal">
<div className="flex items-center gap-2">
<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
@ -324,7 +324,7 @@ export function SidebarUserProfile({
{t("theme")}
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent className="gap-1 bg-muted dark:border dark:border-neutral-700">
<DropdownMenuSubContent className="gap-1">
{THEMES.map((themeOption) => {
const Icon = themeOption.icon;
const isSelected = theme === themeOption.value;
@ -355,7 +355,7 @@ export function SidebarUserProfile({
{t("language")}
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent className="gap-1 bg-muted dark:border dark:border-neutral-700">
<DropdownMenuSubContent className="gap-1">
{LANGUAGES.map((language) => {
const isSelected = locale === language.code;
return (