url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed font casing and increased slider thumb size

Browse Source
This commit is contained in:
findthelorax
2026-04-24 21:47:07 -04:00
parent 93b98f760c
commit 8859893e42
2 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/modals/GroupRectModal.module.css
+10 -10
View File
@@ -16,27 +16,27 @@
} }
/* Ensure the slider bar is visible on dark backgrounds */ /* Ensure the slider bar is visible on dark backgrounds */
.slider-thumb-sm { .slider-thumb {
background: transparent; background: transparent;
} }
/* Custom slider thumb for smaller circle */ /* Custom slider thumb for smaller circle */
.slider-thumb-sm::-webkit-slider-thumb { .slider-thumb::-webkit-slider-thumb {
width: 10px; width: 13px;
height: 10px; height: 13px;
border-radius: 50%; border-radius: 50%;
background: #00d4ff; background: #00d4ff;
border: 2px solid #21262d; border: 2px solid #21262d;
} }
.slider-thumb-sm::-moz-range-thumb { .slider-thumb::-moz-range-thumb {
width: 10px; width: 13px;
height: 10px; height: 13px;
border-radius: 50%; border-radius: 50%;
background: #00d4ff; background: #00d4ff;
border: 2px solid #21262d; border: 2px solid #21262d;
} }
.slider-thumb-sm::-ms-thumb { .slider-thumb::-ms-thumb {
width: 10px; width: 13px;
height: 10px; height: 13px;
border-radius: 50%; border-radius: 50%;
background: #00d4ff; background: #00d4ff;
border: 2px solid #21262d; border: 2px solid #21262d;
frontend/src/components/modals/GroupRectModal.tsx
+12 -3
View File
@@ -89,6 +89,8 @@ const TEXT_POSITIONS: { value: TextPosition; label: string }[] = [
{ value: 'bottom-right', label: '↘' }, { value: 'bottom-right', label: '↘' },
] ]
const getFontLabel = (value: string) => FONTS.find((f) => f.value === value)?.label ?? value
interface GroupRectModalProps { interface GroupRectModalProps {
open: boolean open: boolean
onClose: () => void onClose: () => void
@@ -138,12 +140,19 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
{/* Font */} {/* Font */}
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<Label className="text-xs text-muted-foreground">Font</Label> <Label className="text-xs text-muted-foreground">Font</Label>
<Select value={form.font} onValueChange={(v: string | null) => set('font', v ?? 'inter')}>
<Select
value={form.font}
onValueChange={(v: string | null) => set('font', v ?? 'inter')}
>
<SelectTrigger <SelectTrigger
className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`} className={`bg-[#21262d] border-[#30363d] text-sm h-8 cursor-pointer ${modalStyles['modal-interactive']} ${modalStyles['modal-radius']}`}
aria-label="Font selector" aria-label="Font selector"
> >
<SelectValue /> {/* ✅ show human-readable label instead of raw value */}
<SelectValue>
{getFontLabel(form.font)}
</SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent className="bg-[#21262d] border-[#30363d]"> <SelectContent className="bg-[#21262d] border-[#30363d]">
@@ -235,7 +244,7 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
max={100} max={100}
value={alpha} value={alpha}
onChange={(e) => set(key, rgbaToHex8(hex6, Number(e.target.value)))} onChange={(e) => set(key, rgbaToHex8(hex6, Number(e.target.value)))}
className={`w-full h-1 cursor-pointer mt-2 ${styles['slider-thumb-sm']} ${styles['slider-accent']}`} className={`w-full h-1 cursor-pointer mt-2 ${styles['slider-thumb']} ${styles['slider-accent']}`}
title={`Opacity: ${alpha}%`} title={`Opacity: ${alpha}%`}
style={{ accentColor: '#00d4ff' }} style={{ accentColor: '#00d4ff' }}
/> />