vietreport-admin/solution-erp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[CLAUDE] FE-Admin+FE-User: brand identity từ Solutions logo
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 2m54s
Details

Browse Source 
Lấy logo gốc từ template docx (SOL-CCM-FO-002.05) và brand color
exact pixel-sampled #1F7DC1 từ chữ "Solutions".

Thay đổi:
- logo.png (407x145, từ header docx) đặt vào /public cả 2 app
- favicon.svg: "S" trắng trên nền vuông brand blue bo góc
- index.css: palette brand-50..900 generate quanh #1F7DC1 + accent
  red-500/600 cho ® mark + font Be Vietnam Pro (Google Fonts,
  designed cho tiếng Việt, diacritics đẹp) với fallback Inter
  + JetBrains Mono cho font-mono + tùy chỉnh scrollbar
- Layout sidebar: logo.png 32px + "Admin"/"ERP" subtitle (thay
  text "SOLUTION ERP" đơn điệu)
- LoginPage: gradient background brand-50 + 2 decorative orbs
  blur, rounded-2xl card + backdrop-blur, big logo 56px + subtitle
  tracking-[0.2em]
- index.html: lang="vi", title "Solutions ERP · Admin" / "Solutions
  ERP", theme-color #1F7DC1 cho mobile address bar, preconnect
  fonts.gstatic.com để load Google Fonts nhanh hơn

Tất cả màu hardcoded trong component đã dùng `brand-600` → tự
map sang palette mới, không cần đổi logic.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
pqhuy1987
2026-04-21 15:57:45 +07:00
parent c73e3f904b
commit 4abb5596d5
12 changed files with 134 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
fe-admin/index.html
View File

@ -1,10 +1,14 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="vi">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fe-admin</title> <meta name="theme-color" content="#1F7DC1" />
<meta name="description" content="Solutions ERP — Hệ thống quản trị hợp đồng nhà cung cấp" />
<title>Solutions ERP · Admin</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

7
fe-admin/public/favicon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 375 B

BIN
fe-admin/public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

7
fe-admin/src/components/Layout.tsx
View File

@ -80,9 +80,10 @@ export function Layout() {
return ( return (
<div className="flex h-screen"> <div className="flex h-screen">
<aside className="flex w-64 flex-col border-r border-slate-200 bg-white"> <aside className="flex w-64 flex-col border-r border-slate-200 bg-white">
<div className="flex h-14 items-center border-b border-slate-200 px-6"> <div className="flex h-16 items-center border-b border-slate-200 px-5">
<Link to="/dashboard" className="text-base font-bold text-brand-700"> <Link to="/dashboard" className="flex items-center gap-2.5">
SOLUTION ERP · Admin <img src="/logo.png" alt="Solutions" className="h-8 w-auto" />
<span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Admin</span>
</Link> </Link>
</div> </div>
<nav className="flex-1 space-y-1 overflow-y-auto p-3"> <nav className="flex-1 space-y-1 overflow-y-auto p-3">

45
fe-admin/src/index.css
View File

@ -1,11 +1,26 @@
@import "tailwindcss"; @import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap");
@theme { @theme {
--color-brand-50: #eff6ff; /* Solutions brand palette (derived from logo #1F7DC1) */
--color-brand-500: #2563eb; --color-brand-50: #f0f7fc;
--color-brand-600: #1d4ed8; --color-brand-100: #dbeaf7;
--color-brand-700: #1e40af; --color-brand-200: #b8d5ef;
--font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --color-brand-300: #8bbae3;
--color-brand-400: #5499d3;
--color-brand-500: #2e85c7;
--color-brand-600: #1f7dc1; /* exact logo blue */
--color-brand-700: #1b6aa3;
--color-brand-800: #175685;
--color-brand-900: #144868;
/* Accent red from ® mark */
--color-accent-500: #dc2626;
--color-accent-600: #b91c1c;
--font-sans: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
} }
html, body, #root { html, body, #root {
@ -17,4 +32,24 @@ body {
background-color: #f8fafc; background-color: #f8fafc;
color: #0f172a; color: #0f172a;
font-family: var(--font-sans); font-family: var(--font-sans);
font-feature-settings: "cv11", "ss01", "ss03";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Subtle scrollbar that fits the brand */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
} }

17
fe-admin/src/pages/LoginPage.tsx
View File

@ -42,11 +42,18 @@ export function LoginPage() {
} }
return ( return (
<div className="flex min-h-screen items-center justify-center bg-slate-100 px-4"> <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-slate-50 via-brand-50 to-slate-100 px-4">
<div className="w-full max-w-md rounded-lg border border-slate-200 bg-white p-8 shadow-sm"> {/* Subtle decorative orbs */}
<div className="mb-6 text-center"> <div className="pointer-events-none absolute -left-32 -top-32 h-96 w-96 rounded-full bg-brand-200/40 blur-3xl" />
<h1 className="text-2xl font-bold text-brand-700">SOLUTION ERP</h1> <div className="pointer-events-none absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-brand-300/30 blur-3xl" />
<p className="mt-1 text-sm text-slate-500">Trang quản trị</p>
<div className="relative w-full max-w-md rounded-2xl border border-slate-200/70 bg-white/90 p-10 shadow-xl backdrop-blur">
<div className="mb-8 flex flex-col items-center text-center">
<img src="/logo.png" alt="Solutions" className="h-14 w-auto" />
<div className="mt-4 text-xs font-semibold uppercase tracking-[0.2em] text-brand-600">
ERP · Hệ thống quản trị
</div>
<div className="mt-1 text-sm text-slate-500">Đăng nhập để tiếp tục</div>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-1.5"> <div className="space-y-1.5">

8
fe-user/index.html
View File

@ -1,10 +1,14 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="vi">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>fe-user</title> <meta name="theme-color" content="#1F7DC1" />
<meta name="description" content="Solutions ERP — Quản lý hợp đồng nhà cung cấp" />
<title>Solutions ERP</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

7
fe-user/public/favicon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 375 B

BIN
fe-user/public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

7
fe-user/src/components/Layout.tsx
View File

@ -14,9 +14,10 @@ export function Layout() {
return ( return (
<div className="flex h-screen"> <div className="flex h-screen">
<aside className="flex w-64 flex-col border-r border-slate-200 bg-white"> <aside className="flex w-64 flex-col border-r border-slate-200 bg-white">
<div className="flex h-14 items-center border-b border-slate-200 px-6"> <div className="flex h-16 items-center border-b border-slate-200 px-5">
<Link to="/inbox" className="text-base font-bold text-brand-700"> <Link to="/inbox" className="flex items-center gap-2.5">
SOLUTION ERP <img src="/logo.png" alt="Solutions" className="h-8 w-auto" />
<span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">ERP</span>
</Link> </Link>
</div> </div>
<nav className="flex-1 space-y-1 p-3"> <nav className="flex-1 space-y-1 p-3">

44
fe-user/src/index.css
View File

@ -1,11 +1,26 @@
@import "tailwindcss"; @import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap");
@theme { @theme {
--color-brand-50: #ecfdf5; /* Solutions brand palette (derived from logo #1F7DC1) */
--color-brand-500: #059669; --color-brand-50: #f0f7fc;
--color-brand-600: #047857; --color-brand-100: #dbeaf7;
--color-brand-700: #065f46; --color-brand-200: #b8d5ef;
--font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --color-brand-300: #8bbae3;
--color-brand-400: #5499d3;
--color-brand-500: #2e85c7;
--color-brand-600: #1f7dc1; /* exact logo blue */
--color-brand-700: #1b6aa3;
--color-brand-800: #175685;
--color-brand-900: #144868;
/* Accent red from ® mark */
--color-accent-500: #dc2626;
--color-accent-600: #b91c1c;
--font-sans: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
} }
html, body, #root { html, body, #root {
@ -17,4 +32,23 @@ body {
background-color: #f8fafc; background-color: #f8fafc;
color: #0f172a; color: #0f172a;
font-family: var(--font-sans); font-family: var(--font-sans);
font-feature-settings: "cv11", "ss01", "ss03";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
} }

16
fe-user/src/pages/LoginPage.tsx
View File

@ -42,11 +42,17 @@ export function LoginPage() {
} }
return ( return (
<div className="flex min-h-screen items-center justify-center bg-slate-100 px-4"> <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-slate-50 via-brand-50 to-slate-100 px-4">
<div className="w-full max-w-md rounded-lg border border-slate-200 bg-white p-8 shadow-sm"> <div className="pointer-events-none absolute -left-32 -top-32 h-96 w-96 rounded-full bg-brand-200/40 blur-3xl" />
<div className="mb-6 text-center"> <div className="pointer-events-none absolute -bottom-32 -right-32 h-96 w-96 rounded-full bg-brand-300/30 blur-3xl" />
<h1 className="text-2xl font-bold text-brand-700">SOLUTION ERP</h1>
<p className="mt-1 text-sm text-slate-500">Quản lý hợp đồng nhà cung cấp</p> <div className="relative w-full max-w-md rounded-2xl border border-slate-200/70 bg-white/90 p-10 shadow-xl backdrop-blur">
<div className="mb-8 flex flex-col items-center text-center">
<img src="/logo.png" alt="Solutions" className="h-14 w-auto" />
<div className="mt-4 text-xs font-semibold uppercase tracking-[0.2em] text-brand-600">
ERP · Quản lý hợp đồng
</div>
<div className="mt-1 text-sm text-slate-500">Đăng nhập để tiếp tục</div>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-1.5"> <div className="space-y-1.5">