From c3eeb3ca731f2fc79eee69dc3b5af06349870081 Mon Sep 17 00:00:00 2001 From: Hyko Date: Wed, 22 Apr 2026 14:46:30 -0400 Subject: [PATCH] style(ui): update border radius and spacing across shared components --- src/shared/components/Button.js | 4 ++-- src/shared/components/Card.js | 18 +++++++++--------- src/shared/components/Input.js | 4 ++-- src/shared/components/Textarea.js | 2 +- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/shared/components/Button.js b/src/shared/components/Button.js index 40b5bf3..e6b8744 100644 --- a/src/shared/components/Button.js +++ b/src/shared/components/Button.js @@ -15,7 +15,7 @@ const Button = ({ className = '', ...props }) => { - const baseClassName = 'cursor-pointer inline-flex items-center justify-center font-medium rounded transition-all duration-[120ms] ease-out focus:outline-none focus:ring-1 disabled:opacity-50 disabled:cursor-not-allowed'; + const baseClassName = 'cursor-pointer inline-flex items-center justify-center font-medium rounded-lgtransition-all duration-[120ms] ease-out focus:outline-none focus:ring-1 disabled:opacity-50 disabled:cursor-not-allowed'; const variants = { primary: 'bg-neutral-900 text-white hover:bg-neutral-800 focus:ring-neutral-900/20 dark:bg-white dark:text-black dark:hover:bg-neutral-100 dark:focus:ring-white/20', @@ -27,7 +27,7 @@ const Button = ({ }; const sizes = { - sm: 'px-[10px] py-[4px] text-[12px] gap-1.5', + sm: 'px-[12px] py-[6px] text-[12px] gap-1.5', md: 'px-[14px] py-[7px] text-[13px] gap-2', lg: 'px-6 py-3 text-base gap-2.5' }; diff --git a/src/shared/components/Card.js b/src/shared/components/Card.js index 49e68ae..faa57d3 100644 --- a/src/shared/components/Card.js +++ b/src/shared/components/Card.js @@ -19,15 +19,15 @@ const Card = ({ const isLightDark = variant === 'lightDark'; const variants = { - default: 'rounded-md bg-white dark:bg-neutral-800/30 border-neutral-200 dark:border-neutral-700/30', - elevated: 'rounded-md bg-neutral-50/80 dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50', - outline: 'rounded-md bg-transparent border-neutral-300 dark:border-neutral-700/50', - solid: 'rounded-md bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700', - lightDark: 'rounded-md bg-white dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50', - success: 'rounded-md bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-900/50', - info: 'rounded-md bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-900/50', - warning: 'rounded-md bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-900/50', - danger: 'rounded-md bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-900/50' + default: 'rounded-xl bg-white dark:bg-neutral-800/30 border-neutral-200 dark:border-neutral-700/30', + elevated: 'rounded-xl bg-neutral-50/80 dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50', + outline: 'rounded-xl bg-transparent border-neutral-300 dark:border-neutral-700/50', + solid: 'rounded-xl bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700', + lightDark: 'rounded-xl bg-white dark:bg-neutral-900/40 border-neutral-200 dark:border-neutral-800/50', + success: 'rounded-xl bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-900/50', + info: 'rounded-xl bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-900/50', + warning: 'rounded-xl bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-900/50', + danger: 'rounded-xl bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-900/50' }; const variantsHover = { diff --git a/src/shared/components/Input.js b/src/shared/components/Input.js index 6a66882..80d820a 100644 --- a/src/shared/components/Input.js +++ b/src/shared/components/Input.js @@ -18,7 +18,7 @@ const Input = ({ step, ...props }) => { - const baseInputClassName = `w-full px-[10px] py-[7px] rounded text-[13px] focus:outline-none transition-all duration-[120ms] ease-out disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900/60 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20 ${ + const baseInputClassName = `w-full px-[10px] py-[7px] rounded-lg text-[13px] focus:outline-none transition-all duration-[120ms] ease-out disabled:opacity-50 disabled:cursor-not-allowed bg-white border border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:ring-1 focus:ring-neutral-500/20 dark:bg-neutral-900/60 dark:border-neutral-700/50 dark:text-white dark:placeholder-neutral-500 dark:focus:border-neutral-600 dark:focus:ring-neutral-600/20 ${ error ? 'border-red-500/50 dark:border-red-500/50' : '' } ${className}`; @@ -56,7 +56,7 @@ const Input = ({ {...props} />
{ - const baseTextareaClassName = `w-full px-3 py-2.5 bg-white dark:bg-neutral-900/60 border rounded-xl 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-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 ${ error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50' } ${className}`;