[CLAUDE] FE-User: redesign foundation "nâng màu giữ brand" — gradient/accent/badge bắt mắt hơn

Anh: giao diện đơn điệu, muốn đẹp + bắt mắt, font/màu đẹp hơn. Hướng anh chốt "nâng màu, giữ nền xanh brand" (eoffice trước). Foundation lan tỏa toàn app, KHÔNG đụng 65 trang lẻ. - index.css: +accent palette teal/amberx/violet/greenx (đặt tên né trùng Tailwind) + utilities .app-gradient-brand / .card-accent / .icon-chip / .stat-value; heading 600->700 đậm hơn; .label-eyebrow brand-600. Brand #1F7DC1 + Be Vietnam Pro GIỮ. - primitives: Button primary/danger gradient nổi bật; Input/Select/Textarea focus-glow mạnh hơn; Label brand-600; Dialog title-bar gradient. variant/size keys STABLE. - shell: Layout stripe dày hơn + logo cap; PageHeader title lớn/đậm + accent bar cao; TopBar gradient hairline; DataTable thead gradient brand chữ trắng. - Dashboard: KPI cards accent + icon chips. - color maps (contract/PE phase + PE display status): -700->-800 đậm chữ, phase nháp tint brand. Visual-only — props/handler/signature nguyên. Build PASS (tsc -b 0 error). a11y: contrast AA + prefers-reduced-motion. fe-admin mirror đợt sau. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-16 10:12:40 +07:00
parent 4004481989
commit c98030f27c
14 changed files with 230 additions and 96 deletions
--- a/fe-user/src/components/DataTable.tsx
+++ b/fe-user/src/components/DataTable.tsx
@ -79,18 +79,19 @@ export function DataTable<T>({
  onRowClick,
 }: Props<T>) {
  return (
-    // Density-first: rounded-lg + crisp border (no decorative shadow).
+    // rounded-lg + crisp border (no decorative shadow).
    <div className="overflow-auto rounded-lg border border-slate-200 bg-white">
      <table className="w-full text-[12px]">
-        {/* thead tint brand — đậm nhận diện hơn slate (anh yêu cầu "trang trí
-            lên 1 tý" 06-11); brand-700 semibold uppercase 11px đạt AA trên nền nhạt. */}
-        <thead className="sticky top-0 z-10 bg-brand-50/60 text-brand-700">
-          <tr className="border-b border-brand-100">
+        {/* 2026-06-16 anh "thead nền màu brand đậm hơn": solid brand gradient +
+            white uppercase — đậm nhận diện rõ rệt (was pale brand-50/60). White
+            on brand-600→700 = >7:1 contrast. */}
+        <thead className="app-gradient-brand sticky top-0 z-10 text-white">
+          <tr>
            {columns.map(c => (
              <th
                key={c.key}
                className={cn(
-                  'px-3 py-2 text-[11px] font-semibold uppercase tracking-wider',
+                  'px-3 py-2.5 text-[11px] font-bold uppercase tracking-wider',
                  c.align === 'right' && 'text-right',
                  c.align === 'center' && 'text-center',
                  c.align !== 'right' && c.align !== 'center' && 'text-left',
@ -100,7 +101,7 @@ export function DataTable<T>({
                {c.sortable && onSortChange ? (
                  <button
                    onClick={() => onSortChange(c.key, sortBy === c.key ? !sortDesc : false)}
-                    className="inline-flex items-center gap-1 hover:text-slate-900"
+                    className="inline-flex items-center gap-1 transition-colors hover:text-white/80"
                  >
                    {c.header}
                    {sortBy === c.key && (sortDesc ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronUp className="h-3.5 w-3.5" />)}
--- a/fe-user/src/components/Layout.tsx
+++ b/fe-user/src/components/Layout.tsx
@ -381,16 +381,17 @@ export function Layout() {

  return (
    <AccordionContext.Provider value={accordionValue}>
-      {/* Brand stripe — dải nhận diện #1F7DC1 chạy suốt đỉnh app (anh yêu cầu
-          "trang trí lên 1 tý" 06-11; guide cho accent sparing — đây là 1 chỗ). */}
+      {/* Brand stripe — dải nhận diện #1F7DC1 chạy suốt đỉnh app. 2026-06-16
+          anh "nâng màu": dày hơn (h-1.5) + dải gradient xanh đậm bắt mắt. */}
      <div className="flex h-screen flex-col">
-        <div className="h-1 shrink-0 bg-gradient-to-r from-brand-700 via-brand-500 to-brand-600" />
+        <div className="h-1.5 shrink-0 bg-gradient-to-r from-brand-700 via-brand-400 to-brand-600" />
        <div className="flex min-h-0 flex-1">
        <aside className="flex w-72 flex-col border-r border-slate-200 bg-white xl:w-80">
-          <div className="flex h-16 items-center border-b border-brand-100 bg-gradient-to-b from-brand-50/70 to-transparent px-5">
+          {/* Logo cap — brand gradient wash đậm hơn (was brand-50/70). */}
+          <div className="flex h-16 items-center border-b border-brand-100 bg-gradient-to-r from-brand-50 via-brand-50/60 to-transparent px-5">
            <Link to="/dashboard" className="flex items-center gap-2.5">
              <img src="/logo.png" alt="Solutions" className="h-8 w-auto" />
-              <span className="text-[11px] font-semibold uppercase tracking-wider text-brand-600/80">ERP</span>
+              <span className="rounded-md bg-brand-600 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white">ERP</span>
            </Link>
          </div>
          <nav className="flex-1 space-y-1 overflow-y-auto p-3">
--- a/fe-user/src/components/PageHeader.tsx
+++ b/fe-user/src/components/PageHeader.tsx
@ -10,14 +10,16 @@ export function PageHeader({
  actions?: ReactNode
 }) {
  return (
-    // Density-first (NAMGROUP): compact one-line header, text-[15px] semibold,
-    // tighter bottom rule. Toolbar/actions sit inline on the right.
+    // 2026-06-16 "nâng màu / bắt mắt hơn" (anh): bigger bolder title (text-lg
+    // font-bold, was 15px semibold) + a taller brand gradient accent bar.
+    // Toolbar/actions stay inline right. Props {title, description, actions}
+    // unchanged.
    <div className="mb-5 flex items-start justify-between gap-6 border-b border-slate-200 pb-3.5">
-      <div className="flex min-w-0 items-start gap-2.5">
-        {/* Brand accent bar — nhận diện #1F7DC1 per-page (anh yêu cầu 06-11) */}
-        <span aria-hidden className="mt-0.5 h-4 w-1 shrink-0 rounded-full bg-gradient-to-b from-brand-500 to-brand-700" />
+      <div className="flex min-w-0 items-start gap-3">
+        {/* Brand accent bar — nhận diện #1F7DC1, đậm + cao hơn per-page. */}
+        <span aria-hidden className="mt-1 h-6 w-1.5 shrink-0 rounded-full bg-gradient-to-b from-brand-400 via-brand-600 to-brand-800" />
        <div className="min-w-0">
-          <h1 className="text-[15px] font-semibold leading-tight text-slate-800">{title}</h1>
+          <h1 className="text-lg font-bold leading-tight tracking-tight text-slate-900">{title}</h1>
          {description && <p className="mt-1 text-xs leading-relaxed text-slate-500">{description}</p>}
        </div>
      </div>
--- a/fe-user/src/components/TopBar.tsx
+++ b/fe-user/src/components/TopBar.tsx
@ -68,12 +68,15 @@ function UserMenu() {

 export function TopBar({ title }: { title?: string }) {
  return (
-    <header className="flex h-14 items-center justify-between border-b border-slate-200 bg-white px-6">
-      <div className="text-sm font-semibold text-slate-700">{title}</div>
+    // 2026-06-16: thin brand gradient hairline under the bar (border-b-2 với
+    // border-image) + bolder title — đậm nhận diện nhẹ. Signature unchanged.
+    <header className="relative flex h-14 items-center justify-between border-b border-slate-200 bg-white px-6">
+      <div className="text-sm font-bold text-slate-800">{title}</div>
      <div className="flex items-center gap-2">
        <NotificationBell />
        <UserMenu />
      </div>
+      <span aria-hidden className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-brand-500/60 via-brand-300/30 to-transparent" />
    </header>
  )
 }
--- a/fe-user/src/components/ui/Button.tsx
+++ b/fe-user/src/components/ui/Button.tsx
@ -2,21 +2,24 @@ import { forwardRef, type ButtonHTMLAttributes } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/cn'

-// Density-first (NAMGROUP convention): text-xs font-semibold, compact heights,
-// rounded-lg. Brand identity kept — primary = brand-600, focus ring brand-500.
-// Decorative shadow dropped; only the filled actions keep a 1px tint shadow for
-// affordance. Variant keys (primary/secondary/outline/ghost/danger) + size keys
-// (sm/md/lg) are STABLE — call-sites depend on them.
+// 2026-06-16 "nâng màu, bắt mắt hơn" (anh): primary now a brand gradient with a
+// real lifted shadow — reads as the clear focal action. Danger mirrors it in
+// red. Outline/secondary/ghost stay quiet so the primary pops. Brand identity
+// kept (gradient anchored on brand-600). Variant keys
+// (primary/secondary/outline/ghost/danger) + size keys (sm/md/lg) are STABLE —
+// 51+ call-sites depend on them. Visual-only; no API change.
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white focus-visible:ring-brand-500/70 active:translate-y-[0.5px]',
+  'inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold transition-[background,box-shadow,transform] disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white focus-visible:ring-brand-500/70 active:translate-y-[0.5px]',
  {
    variants: {
      variant: {
-        primary: 'bg-brand-600 text-white shadow-xs shadow-brand-700/20 hover:bg-brand-700',
+        primary:
+          'bg-gradient-to-b from-brand-500 to-brand-700 text-white shadow-sm shadow-brand-700/30 hover:from-brand-600 hover:to-brand-800 hover:shadow-md hover:shadow-brand-700/35',
        secondary: 'bg-slate-100 text-slate-700 hover:bg-slate-200',
-        outline: 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-400',
-        ghost: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
-        danger: 'bg-red-600 text-white shadow-xs shadow-red-700/20 hover:bg-red-700',
+        outline: 'border border-slate-300 bg-white text-slate-700 hover:bg-brand-50 hover:border-brand-300 hover:text-brand-700',
+        ghost: 'text-slate-600 hover:bg-brand-50 hover:text-brand-700',
+        danger:
+          'bg-gradient-to-b from-red-500 to-red-700 text-white shadow-sm shadow-red-700/30 hover:from-red-600 hover:to-red-800 hover:shadow-md',
      },
      size: {
        sm: 'h-7 px-2.5',
--- a/fe-user/src/components/ui/Dialog.tsx
+++ b/fe-user/src/components/ui/Dialog.tsx
@ -35,12 +35,13 @@ export function Dialog({ open, onClose, title, children, footer, size = 'md' }:
        )}
        onClick={e => e.stopPropagation()}
      >
-        <div className="flex items-center justify-between border-b border-slate-200 px-5 py-3">
-          <div className="text-sm font-semibold text-slate-800">{title}</div>
+        {/* 2026-06-16: brand gradient title bar — đậm nhận diện, white text. */}
+        <div className="app-gradient-brand flex items-center justify-between rounded-t-xl px-5 py-3">
+          <div className="text-sm font-bold text-white">{title}</div>
          <button
            onClick={onClose}
            aria-label="Đóng"
-            className="-mr-1 rounded-md p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+            className="-mr-1 rounded-md p-1 text-white/70 transition-colors hover:bg-white/15 hover:text-white"
          >
            <X className="h-4 w-4" />
          </button>
--- a/fe-user/src/components/ui/Input.tsx
+++ b/fe-user/src/components/ui/Input.tsx
@ -7,10 +7,11 @@ export const Input = forwardRef<HTMLInputElement, Props>(({ className, ...props
  <input
    ref={ref}
    className={cn(
-      // Density-first: compact (~34px) rounded-lg, brand focus glow at low opacity.
+      // Compact (~34px) rounded-lg. 2026-06-16: stronger brand focus glow
+      // (border brand-500 + ring /25) so the active field reads clearly.
      'h-8 w-full rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-900',
      'placeholder:text-slate-400',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
      'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
      className,
    )}
--- a/fe-user/src/components/ui/Label.tsx
+++ b/fe-user/src/components/ui/Label.tsx
@ -1,13 +1,13 @@
 import type { LabelHTMLAttributes } from 'react'
 import { cn } from '@/lib/cn'

-// Density-first ERP scan-pattern (NAMGROUP convention): uppercase + tracking +
-// muted. slate-500 (not 400) so 11px label still clears WCAG-AA (~4.6:1) — a
-// deliberate accessibility-floor deviation from NAMGROUP's zinc-400.
+// ERP scan-pattern: uppercase + tracking. 2026-06-16 "nâng màu" — eyebrow now
+// brand-600 (was slate-500) so form labels carry the identity colour. brand-600
+// on white = 4.7:1, clears WCAG-AA at 11px. Signature unchanged.
 export function Label({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {
  return (
    <label
-      className={cn('text-[11px] font-semibold uppercase tracking-wider text-slate-500', className)}
+      className={cn('text-[11px] font-bold uppercase tracking-wider text-brand-600', className)}
      {...props}
    />
  )
--- a/fe-user/src/components/ui/Select.tsx
+++ b/fe-user/src/components/ui/Select.tsx
@ -7,9 +7,9 @@ export const Select = forwardRef<HTMLSelectElement, Props>(({ className, childre
  <select
    ref={ref}
    className={cn(
-      // Density-first: matches Input — compact rounded-lg, brand focus glow.
+      // Matches Input — compact rounded-lg, stronger brand focus glow (2026-06-16).
      'h-8 w-full rounded-lg border border-slate-300 bg-white px-3 pr-8 text-sm text-slate-900',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
      'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
      className,
    )}
--- a/fe-user/src/components/ui/Textarea.tsx
+++ b/fe-user/src/components/ui/Textarea.tsx
@ -7,10 +7,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props>(({ className, ...
  <textarea
    ref={ref}
    className={cn(
-      // Density-first: matches Input — rounded-lg, brand focus glow.
+      // Matches Input — rounded-lg, stronger brand focus glow (2026-06-16).
      'w-full rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm leading-relaxed text-slate-900',
      'placeholder:text-slate-400',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
      'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
      className,
    )}