bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add improved production UI 4

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-09-23 22:11:34 +02:00
parent 7892c5a739
commit 87310ced5f
17 changed files with 1658 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/ui/Button/Button.tsx
View File

@@ -25,11 +25,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
...props
}, ref) => {
const baseClasses = [
'inline-flex items-center justify-center font-semibold tracking-wide',
'inline-flex items-center justify-center font-medium',
'transition-all duration-200 ease-in-out',
'focus:outline-none focus:ring-2 focus:ring-offset-2',
'disabled:opacity-50 disabled:cursor-not-allowed',
'border rounded-xl shadow-sm',
'border rounded-md shadow-sm',
'hover:shadow-md active:shadow-sm'
];
@@ -53,10 +53,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
'active:bg-[var(--color-primary-dark)] active:border-[var(--color-primary-dark)]'
],
ghost: [
'bg-transparent text-[var(--color-primary)] border-transparent',
'hover:bg-[var(--color-primary)]/10 hover:text-[var(--color-primary-dark)]',
'bg-transparent text-[var(--text-primary)] border-transparent',
'hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]',
'focus:ring-[var(--color-primary)]/20',
'active:bg-[var(--color-primary)]/20'
'active:bg-[var(--bg-secondary)]'
],
danger: [
'bg-[var(--color-error)] text-[var(--text-inverse)] border-[var(--color-error)]',
@@ -79,11 +79,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
};
const sizeClasses = {
xs: 'px-3 py-1.5 text-xs gap-1.5 min-h-7',
sm: 'px-4 py-2 text-sm gap-2 min-h-9 sm:min-h-10',
md: 'px-6 py-3 text-sm gap-2.5 min-h-11 sm:min-h-12',
lg: 'px-8 py-3.5 text-base gap-3 min-h-13 sm:min-h-14',
xl: 'px-10 py-4 text-lg gap-3.5 min-h-15 sm:min-h-16'
xs: 'px-2 py-1 text-xs gap-1 min-h-[1.75rem]',
sm: 'px-3 py-1.5 text-sm gap-1.5 min-h-[2.25rem]',
md: 'px-4 py-2 text-sm gap-2 min-h-[2.75rem]',
lg: 'px-5 py-2.5 text-base gap-2.5 min-h-[3.25rem]',
xl: 'px-6 py-3 text-lg gap-3 min-h-[3.75rem]'
};
const loadingSpinner = (
@@ -129,13 +129,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
>
{isLoading && loadingSpinner}
{!isLoading && leftIcon && (
<span className="flex-shrink-0 w-5 h-5 flex items-center justify-center">{leftIcon}</span>
<span className="flex-shrink-0 w-4 h-4 flex items-center justify-center">{leftIcon}</span>
)}
<span className="relative">
{isLoading && loadingText ? loadingText : children}
</span>
{!isLoading && rightIcon && (
<span className="flex-shrink-0 w-5 h-5 flex items-center justify-center">{rightIcon}</span>
<span className="flex-shrink-0 w-4 h-4 flex items-center justify-center">{rightIcon}</span>
)}
</button>
);