zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

style(ui): adjust font sizes and fix switch toggle alignment

Browse Source
This commit is contained in:
Hyko
2026-04-22 16:25:17 -04:00
parent 681de18d93
commit db39e7b36a
2 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/Switch.js
+6 -7
View File
@@ -9,15 +9,14 @@ const Switch = ({
}) => { }) => {
return ( return (
<div <div
className={`flex items-center justify-between gap-4 px-4 py-3 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`} className={`flex items-center justify-between gap-4 px-4 py-3 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
onClick={() => !disabled && onChange?.(!checked)}
> >
<div className="flex flex-col gap-0.5 min-w-0"> <div className="flex flex-col gap-0.5 min-w-0">
{label && ( {label && (
<span className="text-sm font-medium text-neutral-900 dark:text-white select-none">{label}</span> <span className="text-[13px] font-medium text-neutral-900 dark:text-white select-none">{label}</span>
)} )}
{description && ( {description && (
<span className="text-xs text-neutral-500 dark:text-neutral-400 select-none">{description}</span> <span className="text-[11px] text-neutral-500 dark:text-neutral-400 select-none">{description}</span>
)} )}
</div> </div>
@@ -26,7 +25,7 @@ const Switch = ({
role="switch" role="switch"
aria-checked={checked} aria-checked={checked}
disabled={disabled} disabled={disabled}
onClick={(e) => { e.stopPropagation(); !disabled && onChange?.(!checked); }} onClick={() => !disabled && onChange?.(!checked)}
className={`relative flex-shrink-0 w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900 border ${ className={`relative flex-shrink-0 w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900 border ${
checked checked
? 'bg-blue-700 border-blue-800' ? 'bg-blue-700 border-blue-800'
@@ -34,8 +33,8 @@ const Switch = ({
} ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`} } ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
> >
<span <span
className={`absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-200 ${ className={`absolute top-1/2 left-1 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-200 ${
checked ? 'translate-x-5' : 'translate-x-0' checked ? 'translate-x-5 -translate-y-1/2' : 'translate-x-0 -translate-y-1/2'
}`} }`}
/> />
</button> </button>
src/shared/components/Textarea.js
+1 -1
View File
@@ -15,7 +15,7 @@ const Textarea = ({
rows = 4, rows = 4,
...props ...props
}) => { }) => {
const baseTextareaClassName = `w-full px-3 py-2.5 bg-white dark:bg-neutral-900/60 border rounded-lg text-sm text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:border-neutral-500 dark:focus:border-neutral-600 focus:ring-1 focus:ring-neutral-500/20 dark:focus:ring-neutral-600/20 hover:bg-neutral-50 dark:hover:bg-neutral-900/80 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed resize-y ${ const baseTextareaClassName = `w-full px-3 py-2.5 bg-white dark:bg-neutral-900/60 border rounded-lg text-[13px] text-neutral-900 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:border-neutral-500 dark:focus:border-neutral-600 focus:ring-1 focus:ring-neutral-500/20 dark:focus:ring-neutral-600/20 hover:bg-neutral-50 dark:hover:bg-neutral-900/80 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed resize-y ${
error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50' error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50'
} ${className}`; } ${className}`;