refactor: Update bottom controls for improved styling and functionality

- Adjusted button styles across various components for consistency and better UX.
- Enhanced layout of action controls to utilize whitespace more effectively.
- Updated slider styles for a more modern appearance and improved usability.
- Refined input fields and labels for better accessibility and readability.
- Introduced new app surface styles for a cohesive design across the application.
- Added tests for canvas cursor behavior to ensure correct cursor display during operations.
This commit is contained in:
syntaxbullet
2026-07-11 14:55:32 +02:00
parent 37aa719047
commit 5915c62a9a
31 changed files with 345 additions and 287 deletions

View File

@@ -1,9 +1,9 @@
export function bottomControlMenuClass() {
return "flex w-full items-center justify-center gap-4 tabular-nums";
return "flex max-w-full min-w-0 flex-nowrap items-center justify-center gap-2 whitespace-nowrap tabular-nums";
}
export function bottomControlFieldClass() {
return "flex items-center gap-3";
return "flex min-w-0 shrink items-center gap-2 whitespace-nowrap";
}
export function bottomControlDividerClass() {
@@ -11,19 +11,19 @@ export function bottomControlDividerClass() {
}
export function bottomControlLabelClass() {
return "text-sm text-white/60";
return "shrink-0 text-xs text-white/60";
}
export function bottomControlValueClass() {
return "min-w-16 text-center text-base text-white";
return "min-w-12 text-center text-xs font-medium text-white/85";
}
export function bottomControlInputClass() {
return "h-10 w-20 px-2 text-center text-base text-white outline-none transition placeholder:text-white/30 focus:text-white";
return "h-7 w-12 rounded bg-transparent px-1.5 text-right font-mono text-xs text-white/90 outline-none transition placeholder:text-white/25 hover:bg-white/[0.04] focus:bg-white/[0.06] focus:ring-1 focus:ring-sky-300/50";
}
export function bottomControlIconSlotClass() {
return "grid size-12 place-items-center rounded-full text-white/80";
return "grid size-8 place-items-center rounded-lg text-white/70";
}
export function bottomControlButtonClass() {