diff --git a/client/public/logo-dark.svg b/client/public/logo-dark.svg new file mode 100644 index 0000000..3c01914 --- /dev/null +++ b/client/public/logo-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/public/logo-light.svg b/client/public/logo-light.svg new file mode 100644 index 0000000..17327a1 --- /dev/null +++ b/client/public/logo-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/components/Brand.tsx b/client/src/components/Brand.tsx new file mode 100644 index 0000000..173edc1 --- /dev/null +++ b/client/src/components/Brand.tsx @@ -0,0 +1,40 @@ +interface BrandProps { + variant?: 'dark' | 'light'; + size?: 'sm' | 'md' | 'lg'; + showTitle?: boolean; + condensed?: boolean; + className?: string; +} + +export default function Brand({ + variant = 'dark', + size = 'md', + showTitle = true, + condensed = false, + className = '', +}: BrandProps) { + const sizes = { + sm: { logo: 'w-[28px] h-auto', title: 'text-sm font-semibold' }, + md: { logo: 'w-[36px] h-auto', title: 'text-base font-bold' }, + lg: { logo: 'w-[44px] h-auto', title: 'text-xl font-bold tracking-tight' }, + }[size]; + + return ( +
+
+ 宣传部义工 +
+ {showTitle && !condensed && ( + + 宣传部义工时长记录系统 + + )} +
+ ); +} diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx index 46f3522..d04d723 100644 --- a/client/src/components/Button.tsx +++ b/client/src/components/Button.tsx @@ -8,24 +8,24 @@ interface Props extends ButtonHTMLAttributes { export default function Button({ variant = 'primary', size = 'md', className = '', children, ...rest }: Props) { const base = - 'inline-flex items-center justify-center font-bold border-2 border-black transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed active:translate-x-[2px] active:translate-y-[2px] active:shadow-none'; + 'inline-flex items-center justify-center font-semibold transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed border'; const sizeCls = size === 'sm' - ? 'px-3 py-1.5 text-sm shadow-sm' + ? 'px-3 py-1.5 text-sm rounded' : size === 'lg' - ? 'px-6 py-3 text-lg shadow' - : 'px-4 py-2 text-base shadow'; + ? 'px-6 py-3 text-lg rounded-md' + : 'px-4 py-2 text-base rounded-md'; const variantCls = { primary: - 'bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-800 shadow', + 'bg-[#275354] text-white border-[#275354] hover:bg-[#1e4041] hover:border-[#1e4041] shadow-sm', secondary: - 'bg-white text-black hover:bg-gray-50 hover:border-gray-700 shadow-sm', + 'bg-white text-gray-800 border-gray-300 hover:bg-gray-50 hover:border-gray-400 shadow-sm', danger: - 'bg-red-500 text-white hover:bg-red-600 hover:border-red-700 shadow', + 'bg-red-500 text-white border-red-500 hover:bg-red-600 hover:border-red-600 shadow-sm', ghost: - 'bg-transparent text-black border-transparent hover:bg-gray-100 shadow-none active:translate-x-0 active:translate-y-0', + 'bg-transparent text-gray-700 border-transparent hover:bg-gray-100 hover:border-gray-200 shadow-none', amber: - 'bg-amber-400 text-black hover:bg-amber-500 shadow-amber', + 'bg-amber-50 text-amber-800 border-amber-300 hover:bg-amber-100 shadow-sm', }[variant]; return (