diff --git a/apps/renderer/src/components/ui/button/index.tsx b/apps/renderer/src/components/ui/button/index.tsx index 97caf5349..00716cf80 100644 --- a/apps/renderer/src/components/ui/button/index.tsx +++ b/apps/renderer/src/components/ui/button/index.tsx @@ -27,8 +27,15 @@ interface ActionButtonProps { disabled?: boolean shortcut?: string disableTriggerShortcut?: boolean + size?: "sm" | "md" | "base" } +const actionButtonStyleVariant = { + size: { + base: tw`text-xl size-8`, + sm: tw`text-sm size-6`, + }, +} export const ActionButton = React.forwardRef< HTMLButtonElement, ComponentType & React.HTMLAttributes @@ -45,6 +52,7 @@ export const ActionButton = React.forwardRef< shortcut, disabled, disableTriggerShortcut, + size = "base", ...rest }, ref, @@ -60,10 +68,11 @@ export const ActionButton = React.forwardRef< // @see https://github.com/radix-ui/primitives/issues/2248#issuecomment-2147056904 onFocusCapture={stopPropagation} className={cn( - "no-drag-region inline-flex size-8 items-center justify-center text-xl", + "no-drag-region inline-flex items-center justify-center", active && "bg-zinc-500/15 hover:bg-zinc-500/20", "rounded-md duration-200 hover:bg-theme-button-hover data-[state=open]:bg-theme-button-hover", "disabled:cursor-not-allowed disabled:opacity-50", + actionButtonStyleVariant.size[size], className, )} type="button" @@ -86,7 +95,9 @@ export const ActionButton = React.forwardRef< )} {tooltip ? ( - {Trigger} + + {Trigger} + {tooltip} diff --git a/apps/renderer/src/modules/discover/inbox-list-form.tsx b/apps/renderer/src/modules/discover/inbox-list-form.tsx index 1a422fc5c..2c4342841 100644 --- a/apps/renderer/src/modules/discover/inbox-list-form.tsx +++ b/apps/renderer/src/modules/discover/inbox-list-form.tsx @@ -3,7 +3,7 @@ import { useMutation } from "@tanstack/react-query" import { useTranslation } from "react-i18next" import { toast } from "sonner" -import { Button } from "~/components/ui/button" +import { ActionButton, Button } from "~/components/ui/button" import { CopyButton } from "~/components/ui/code-highlighter" import { useModalStack } from "~/components/ui/modal" import { @@ -78,8 +78,9 @@ export function DiscoverInboxList() { - - + ))} @@ -162,9 +163,14 @@ const ConfirmDestroyModalContent = ({ id, onSuccess }: { id: string; onSuccess: return (
-
{t("discover.inbox_destroy_warning")}
+
+ + {t("discover.inbox_destroy_warning")} +
- +
)