fix[desktop]: Improve UX for ExtensionItem component (#6443)
Signed-off-by: Yelsin Sepulveda <yelsinsepulveda@gmail.com>
This commit is contained in:
@@ -75,20 +75,20 @@ export default function ExtensionItem({
|
|||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
id={`extension-${kebabCase(extension.name)}`}
|
id={`extension-${kebabCase(extension.name)}`}
|
||||||
className="transition-all duration-200 hover:shadow-default hover:cursor-pointer min-h-[120px] overflow-hidden"
|
className="transition-all duration-200 min-h-[120px] overflow-hidden"
|
||||||
onClick={() => handleToggle(extension)}
|
|
||||||
>
|
>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle>{getFriendlyTitle(extension)}</CardTitle>
|
<CardTitle>{getFriendlyTitle(extension)}</CardTitle>
|
||||||
|
|
||||||
<CardAction onClick={(e) => e.stopPropagation()}>
|
<CardAction>
|
||||||
<div className="flex items-center justify-end gap-2">
|
<div className="flex items-center justify-end gap-2">
|
||||||
{editable && (
|
{editable && (
|
||||||
<button
|
<button
|
||||||
className="text-textSubtle hover:text-textStandard"
|
className="text-textSubtle hover:text-textStandard"
|
||||||
onClick={() => (onConfigure ? onConfigure(extension) : () => {})}
|
aria-label={`Configure ${getFriendlyTitle(extension)} Extension`}
|
||||||
|
onClick={() => onConfigure?.(extension)}
|
||||||
>
|
>
|
||||||
<Gear className="h-4 w-4" />
|
<Gear className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<Switch
|
<Switch
|
||||||
@@ -96,11 +96,12 @@ export default function ExtensionItem({
|
|||||||
onCheckedChange={() => handleToggle(extension)}
|
onCheckedChange={() => handleToggle(extension)}
|
||||||
disabled={isToggling}
|
disabled={isToggling}
|
||||||
variant="mono"
|
variant="mono"
|
||||||
|
aria-label={`Toggle ${getFriendlyTitle(extension)} extension On or Off`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CardAction>
|
</CardAction>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="px-4 text-sm text-text-muted overflow-hidden break-words">
|
<CardContent className="px-4 overflow-hidden text-sm break-words text-text-muted">
|
||||||
{renderSubtitle()}
|
{renderSubtitle()}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
Reference in New Issue
Block a user