From 41d40d0ca4c5c514f01a757d2d931b6ecd575958 Mon Sep 17 00:00:00 2001 From: Miodec Date: Wed, 4 Mar 2026 22:07:54 +0100 Subject: [PATCH 1/5] chore: enhance button styling --- frontend/src/ts/components/common/Button.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx index 1671eee3aeff..3c34e724a1ac 100644 --- a/frontend/src/ts/components/common/Button.tsx +++ b/frontend/src/ts/components/common/Button.tsx @@ -18,12 +18,12 @@ type BaseProps = { onMouseEnter?: () => void; onMouseLeave?: () => void; dataset?: Record; + active?: boolean; }; type ButtonProps = BaseProps & { href?: never; sameTarget?: true; - active?: boolean; disabled?: boolean; }; @@ -66,15 +66,15 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement { "bg-(--themable-button-bg) text-(--themable-button-text) hover:bg-(--themable-button-hover-bg) hover:text-(--themable-button-hover-text)", "[--themable-button-active:var(--main-color)]", props.variant === "text" && - "[--themable-button-bg:transparent] [--themable-button-hover-bg:transparent] [--themable-button-hover-text:var(--text-color)] [--themable-button-text:var(--sub-color)]", + "[--themable-button-bg:transparent] [--themable-button-hover-bg:transparent] [--themable-button-hover-text:var(--text-color)] [--themable-button-text:var(--sub-color)] active:text-sub", (props?.variant ?? "button") === "button" && - "[--themable-button-bg:var(--sub-alt-color)] [--themable-button-hover-bg:var(--text-color)] [--themable-button-hover-text:var(--bg-color)] [--themable-button-text:var(--text-color)]", - (props?.variant ?? "button") === "button" && - isActive() && - "[--themable-button-bg:var(--main-color)] [--themable-button-hover-bg:var(--text-color)] [--themable-button-hover-text:var(--bg-color)] [--themable-button-text:var(--bg-color)]", + "[--themable-button-bg:var(--sub-alt-color)] [--themable-button-hover-bg:var(--text-color)] [--themable-button-hover-text:var(--bg-color)] [--themable-button-text:var(--text-color)] active:bg-sub", (props?.variant ?? "button") === "button" && isActive() && "[--themable-button-bg:var(--themable-button-active)] [--themable-button-hover-bg:var(--text-color)] [--themable-button-hover-text:var(--bg-color)] [--themable-button-text:var(--bg-color)]", + (props?.variant ?? "button") === "text" && + isActive() && + "[--themable-button-hover-text:var(--themable-button-hover-text)] [--themable-button-text:var(--themable-button-active)]", { "pointer-events-none opacity-[0.33]": props.disabled, }, From 7831d20ea2ccc6cd2f92676ef625e5b69e0afa0b Mon Sep 17 00:00:00 2001 From: Miodec Date: Wed, 4 Mar 2026 22:08:08 +0100 Subject: [PATCH 2/5] chore: update claude.md --- CLAUDE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CLAUDE.md b/CLAUDE.md index b12b915d02d6..df0fccb9273e 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,4 +1,4 @@ Be extremely concise. Sacrifice grammar for concision. Frontend is partially migrated from vanilla JS to SolidJS — new components use `.tsx`, legacy code remains vanilla. -Run `pnpm run lint` when checking for linting OR typescript errors with oxlint. +Run `pnpm lint` when checking for linting OR typescript errors with oxlint. Single test file: `pnpm vitest run path/to/test.ts` From b6900b9813cbd421e4a437d4049dfbf66c914db7 Mon Sep 17 00:00:00 2001 From: Miodec Date: Wed, 4 Mar 2026 22:20:53 +0100 Subject: [PATCH 3/5] fix: streamline variant handling in Button component --- frontend/src/ts/components/common/Button.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx index 3c34e724a1ac..afbec59510e2 100644 --- a/frontend/src/ts/components/common/Button.tsx +++ b/frontend/src/ts/components/common/Button.tsx @@ -38,6 +38,8 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement { const isActive = (): boolean => (!isAnchor() && !("href" in props) && props.active) ?? false; + const variant = () => props.variant ?? "button"; + const content = ( <> @@ -65,14 +67,14 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement { "focus-visible:shadow-[0_0_0_0.1rem_var(--bg-color),_0_0_0_0.2rem_var(--text-color)] focus-visible:outline-none", "bg-(--themable-button-bg) text-(--themable-button-text) hover:bg-(--themable-button-hover-bg) hover:text-(--themable-button-hover-text)", "[--themable-button-active:var(--main-color)]", - props.variant === "text" && + variant() === "text" && "[--themable-button-bg:transparent] [--themable-button-hover-bg:transparent] [--themable-button-hover-text:var(--text-color)] [--themable-button-text:var(--sub-color)] active:text-sub", - (props?.variant ?? "button") === "button" && + variant() === "button" && "[--themable-button-bg:var(--sub-alt-color)] [--themable-button-hover-bg:var(--text-color)] [--themable-button-hover-text:var(--bg-color)] [--themable-button-text:var(--text-color)] active:bg-sub", - (props?.variant ?? "button") === "button" && + variant() === "button" && isActive() && "[--themable-button-bg:var(--themable-button-active)] [--themable-button-hover-bg:var(--text-color)] [--themable-button-hover-text:var(--bg-color)] [--themable-button-text:var(--bg-color)]", - (props?.variant ?? "button") === "text" && + variant() === "text" && isActive() && "[--themable-button-hover-text:var(--themable-button-hover-text)] [--themable-button-text:var(--themable-button-active)]", { @@ -106,7 +108,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement { onClick={() => props.onClick?.()} onMouseEnter={() => props.onMouseEnter?.()} onMouseLeave={() => props.onMouseLeave?.()} - data-ui-variant={props.variant ?? "button"} + data-ui-variant={variant()} {...props.dataset} > {content} @@ -122,7 +124,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement { {...ariaLabel()} {...(props["router-link"] ? { "router-link": "" } : {})} disabled={props.disabled ?? false} - data-ui-variant={props.variant ?? "button"} + data-ui-variant={variant()} {...props.dataset} > {content} From adf1879b2e6a1ff45a1ca9a58529add8e1506326 Mon Sep 17 00:00:00 2001 From: Miodec Date: Thu, 5 Mar 2026 00:02:02 +0100 Subject: [PATCH 4/5] chore: update claude.md --- CLAUDE.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CLAUDE.md b/CLAUDE.md index df0fccb9273e..63e3f7cff385 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -2,3 +2,5 @@ Be extremely concise. Sacrifice grammar for concision. Frontend is partially migrated from vanilla JS to SolidJS — new components use `.tsx`, legacy code remains vanilla. Run `pnpm lint` when checking for linting OR typescript errors with oxlint. Single test file: `pnpm vitest run path/to/test.ts` +For styling, use Tailwind CSS, class property, `cn` utility. Do not use classlist. Only colors available are those defined in Tailwind config. +In legacy code, use `i` tags with FontAwesome classes. In new code, use `Fa` component. \ No newline at end of file From 5af61151ac8c4c173071f500a2fc3cf645293239 Mon Sep 17 00:00:00 2001 From: Miodec Date: Thu, 5 Mar 2026 00:40:11 +0100 Subject: [PATCH 5/5] chore: update claude.md --- CLAUDE.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CLAUDE.md b/CLAUDE.md index 63e3f7cff385..ad75ee4201ee 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -3,4 +3,6 @@ Frontend is partially migrated from vanilla JS to SolidJS — new components use Run `pnpm lint` when checking for linting OR typescript errors with oxlint. Single test file: `pnpm vitest run path/to/test.ts` For styling, use Tailwind CSS, class property, `cn` utility. Do not use classlist. Only colors available are those defined in Tailwind config. -In legacy code, use `i` tags with FontAwesome classes. In new code, use `Fa` component. \ No newline at end of file +In legacy code, use `i` tags with FontAwesome classes. In new code, use `Fa` component. +At the end of plan mode, give me a list of unresolved questions to answer, if any. Make them concise. +Run `pnpm lint` after making every change. \ No newline at end of file