syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Update bottom controls for improved styling and functionality

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

12
view/bottom-controls/BrushControls.tsx
View File

@@ -54,11 +54,11 @@ export function BrushControls({ tool, settings, editingMask = false, maskViewMod
min={1}
max={200}
value={settings.size}
className="w-48"
className="min-w-10 w-[clamp(2.5rem,9vw,7rem)] shrink"
aria-label={`${tool} size`}
onValueChange={(size) => dispatch(commandIds.toolSetBrushSettings, { size })}
/>
<span className="w-12 text-right text-base text-white">{Math.round(settings.size)}</span>
<span className="w-9 text-right text-xs font-medium text-white/85">{Math.round(settings.size)}</span>
</label>
<BottomControlDivider />
<label className={bottomControlFieldClass()}>
@@ -67,11 +67,11 @@ export function BrushControls({ tool, settings, editingMask = false, maskViewMod
min={0}
max={100}
value={settings.hardness}
className="w-48"
className="min-w-10 w-[clamp(2.5rem,9vw,7rem)] shrink"
aria-label={`${tool} hardness`}
onValueChange={(hardness) => dispatch(commandIds.toolSetBrushSettings, { hardness })}
/>
<span className="w-12 text-right text-base text-white">{Math.round(settings.hardness)}</span>
<span className="w-9 text-right text-xs font-medium text-white/85">{Math.round(settings.hardness)}</span>
</label>
{editingMask ? (
<>
@@ -88,7 +88,7 @@ export function BrushControls({ tool, settings, editingMask = false, maskViewMod
<BottomControlDivider />
<button
type="button"
className="rounded-full bg-white px-5 py-2 text-base font-medium text-black transition hover:bg-white/90"
className="rounded-md bg-sky-300 px-3 py-1.5 text-xs font-semibold text-slate-950 transition hover:bg-sky-200"
onClick={() => dispatch(commandIds.toolExitMaskEdit, undefined)}
>
Done
@@ -100,5 +100,5 @@ export function BrushControls({ tool, settings, editingMask = false, maskViewMod
}
function maskModeButtonClass(active: boolean) {
return `rounded-full px-4 py-2 text-base font-medium transition ${active ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/15"}`;
return `rounded-md px-3 py-1.5 text-xs font-medium transition ${active ? "bg-sky-300 text-slate-950" : "bg-white/[0.06] text-white/70 hover:bg-white/10"}`;
}