simeonradivoev/gameflow-deck
simeonradivoev/gameflow-deck
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: minor UI issues

Browse source
This commit is contained in:
Simeon Radivoev 2026-03-15 16:45:00 +02:00
parent df20979afa
commit 8125c8695c
Signed by: simeonradivoev
GPG key ID: C16C2132A7660C8E
5 changed files with 44 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/mainview/components/Header.tsx
View file

@ -290,7 +290,7 @@ export function HeaderStatusBar (data: { buttons?: HeaderButton[]; buttonElement
className="header-icon sm:size-10 md:size-16"
id={b.id}
external={b.external}
style={{ viewTransitionName: `header-button-${b.id}` }}
cssStyle={{ viewTransitionName: `header-button-${b.id}` }}
onAction={b.action}
>{b.icon}</RoundButton>)}
</div>

4
src/mainview/components/RoundButton.tsx
View file

@ -8,11 +8,11 @@ export function RoundButton (data: {
className?: string;
external?: boolean;
style?: ButtonStyle;
cssStyle?: CSSProperties;
} & InteractParams & FocusParams)
{
return (
<Button onFocus={data.onFocus} id={data.id} style={data.style} className={twMerge("rounded-full", data.external && "focusable focusable-primary focusable-hover", data.className)} onAction={data.onAction}>
<Button cssStyle={data.cssStyle} onFocus={data.onFocus} id={data.id} style={data.style} className={twMerge("rounded-full", data.external && "focusable focusable-primary focusable-hover", data.className)} onAction={data.onAction}>
{data.children}
</Button>

3
src/mainview/components/options/Button.tsx
View file

@ -6,6 +6,7 @@ import
} from "@noriginmedia/norigin-spatial-navigation";
import classNames from "classnames";
import { GamePadButtonCode, Shortcut, useShortcuts } from "@/mainview/scripts/shortcuts";
import { CSSProperties } from "react";
export type ButtonStyle = 'base' | 'accent' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
@ -29,6 +30,7 @@ export function Button (data: {
style?: ButtonStyle,
shortcutLabel?: string;
focusClassName?: string;
cssStyle?: CSSProperties;
} & InteractParams & FocusParams)
{
const { ref, focused, focusKey } = useFocusable({
@ -47,6 +49,7 @@ export function Button (data: {
ref={ref}
onClick={e => data.onAction?.(e.nativeEvent)}
disabled={data.disabled}
style={data.cssStyle}
className={twMerge("flex items-center justify-center px-4 py-2 disabled:bg-base-200/40 disabled:text-base-content/40 cursor-pointer rounded-3xl md:text-lg not-control-mouse:focused:drop-shadow-lg border border-base-content/5 not-control-mouse:focused:bg-base-content not-control-mouse:focused:text-base-100 control-mouse:hover:bg-base-content control-mouse:hover:text-base-100 active:transition-none active:ring-offset-4",
styles[data.style ?? 'base'],
focused ? data.focusClassName : undefined,