refine: improve visual feedback for in-use provider actions
- Add subtle gray background to "In Use" button for better visual distinction - Enhance disabled state of delete button with opacity and cursor feedback - Remove disabled attribute to allow pointer events for better UX - Prevent delete action via conditional onClick instead of disabled prop
This commit is contained in:
@@ -29,7 +29,7 @@ export function ProviderActions({
|
|||||||
disabled={isCurrent}
|
disabled={isCurrent}
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-20",
|
"w-20",
|
||||||
isCurrent && "text-muted-foreground hover:text-muted-foreground",
|
isCurrent && "bg-gray-200 text-muted-foreground hover:bg-gray-200 hover:text-muted-foreground dark:bg-gray-700 dark:hover:bg-gray-700",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{isCurrent ? (
|
{isCurrent ? (
|
||||||
@@ -69,12 +69,12 @@ export function ProviderActions({
|
|||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={onDelete}
|
onClick={isCurrent ? undefined : onDelete}
|
||||||
disabled={isCurrent}
|
|
||||||
title={t("common.delete")}
|
title={t("common.delete")}
|
||||||
className={cn(
|
className={cn(
|
||||||
"px-2 hover:bg-muted hover:text-red-500 dark:hover:text-red-400",
|
"px-2",
|
||||||
isCurrent && "text-muted-foreground hover:text-muted-foreground hover:bg-transparent",
|
!isCurrent && "hover:bg-muted hover:text-red-500 dark:hover:text-red-400",
|
||||||
|
isCurrent && "opacity-40 cursor-not-allowed text-muted-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Trash2 className="h-4 w-4" />
|
<Trash2 className="h-4 w-4" />
|
||||||
|
|||||||
Reference in New Issue
Block a user