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

refactor: Cập nhật các thành phần UI để sử dụng các lớp Tailwind CSS ngữ nghĩa cho việc tạo chủ đề tốt hơn và xóa tài liệu thiết kế.

Browse Source
This commit is contained in:
Ho Ngoc Hai
2026-01-05 11:01:49 +07:00
parent ffebc9399d
commit dfa045e06c
15 changed files with 186 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web-client/src/app/(auth)/forgot-password/page.tsx
View File

@@ -129,7 +129,7 @@ export default function ForgotPasswordPage() {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="text-white"
className="text-text-primary"
>
<path
d="M12 2L14.4 9.6H22L15.8 14.2L18.2 21.8L12 17.2L5.8 21.8L8.2 14.2L2 9.6H9.6L12 2Z"
@@ -138,7 +138,7 @@ export default function ForgotPasswordPage() {
</svg>
</div>
</div>
<h1 className="text-4xl font-bold tracking-tight text-white mb-2">
<h1 className="text-4xl font-bold tracking-tight text-text-primary mb-2">
{t('auth.forgotPassword.title')}
</h1>
<p className="text-text-secondary">
@@ -148,7 +148,7 @@ export default function ForgotPasswordPage() {
</p>
</div>
<div className="glass-card p-8 shadow-glass-xl border-glass-hover/20">
<div className="glass-card p-8 shadow-glass-xl border-border-primary">
{isSuccess ? (
// EN: Success state - show confirmation message
// VI: Trạng thái thành công - hiển thị thông báo xác nhận
@@ -200,7 +200,7 @@ export default function ForgotPasswordPage() {
<button
type="button"
className="w-full text-sm text-text-tertiary hover:text-white transition-colors"
className="w-full text-sm text-text-tertiary hover:text-text-primary transition-colors"
onClick={() => {
setIsSuccess(false);
setSubmittedEmail('');

6
apps/web-client/src/app/(auth)/login/page.tsx
View File

@@ -129,7 +129,7 @@ export default function LoginPage() {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="text-white"
className="text-text-primary"
>
<path
d="M12 2L14.4 9.6H22L15.8 14.2L18.2 21.8L12 17.2L5.8 21.8L8.2 14.2L2 9.6H9.6L12 2Z"
@@ -138,13 +138,13 @@ export default function LoginPage() {
</svg>
</div>
</div>
<h1 className="text-4xl font-bold tracking-tight text-white mb-2">
<h1 className="text-4xl font-bold tracking-tight text-text-primary mb-2">
{t('auth.login.title')}
</h1>
<p className="text-text-secondary">{t('auth.login.description')}</p>
</div>
<div className="glass-card p-8 shadow-glass-xl border-glass-hover/20">
<div className="glass-card p-8 shadow-glass-xl border-border-primary">
<form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
{/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
{apiError && (

6
apps/web-client/src/app/(auth)/register/page.tsx
View File

@@ -246,7 +246,7 @@ export default function RegisterPage() {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="text-white"
className="text-text-primary"
>
<path
d="M12 2L14.4 9.6H22L15.8 14.2L18.2 21.8L12 17.2L5.8 21.8L8.2 14.2L2 9.6H9.6L12 2Z"
@@ -255,7 +255,7 @@ export default function RegisterPage() {
</svg>
</div>
</div>
<h1 className="text-4xl font-bold tracking-tight text-white mb-2">
<h1 className="text-4xl font-bold tracking-tight text-text-primary mb-2">
{t('auth.register.createAccount')}
</h1>
<p className="text-text-secondary">
@@ -263,7 +263,7 @@ export default function RegisterPage() {
</p>
</div>
<div className="glass-card p-8 shadow-glass-xl border-glass-hover/20">
<div className="glass-card p-8 shadow-glass-xl border-border-primary">
<form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
{/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
{apiError && (

46
apps/web-client/src/app/page.tsx
View File

@@ -72,7 +72,7 @@ export default function Home() {
/>
{/* Hero Section */}
<main className="min-h-screen bg-black text-white">
<main className="min-h-screen bg-bg-primary text-text-primary">
<div className="container mx-auto px-6">
{/* Hero Content */}
<div className="flex flex-col items-center justify-center min-h-screen text-center space-y-12">
@@ -84,17 +84,17 @@ export default function Home() {
{/* Search Input */}
<div className="max-w-2xl mx-auto">
<div className="relative">
<div className="absolute inset-0 bg-white/10 backdrop-blur-sm rounded-full border border-white/20" />
<div className="absolute inset-0 bg-glass backdrop-blur-sm rounded-full border border-glass" />
<div className="relative flex items-center">
<input
type="text"
placeholder="What do you want to know?"
className="w-full px-6 py-4 bg-transparent text-white placeholder-white/60 rounded-full focus:outline-none text-lg"
className="w-full px-6 py-4 bg-transparent text-text-primary placeholder:text-text-tertiary rounded-full focus:outline-none text-lg"
/>
<Button
variant="ghost"
size="sm"
className="absolute right-2 p-2 hover:bg-white/20 rounded-full"
className="absolute right-2 p-2 hover:bg-glass-hover rounded-full"
>
<Search className="h-5 w-5" />
</Button>
@@ -108,31 +108,31 @@ export default function Home() {
<section className="py-24">
<div className="text-center mb-16">
<div className="inline-flex items-center space-x-2 mb-4">
<span className="text-white/60 text-sm font-medium">[</span>
<span className="text-white text-sm font-medium">Products</span>
<span className="text-white/60 text-sm font-medium">]</span>
<span className="text-text-tertiary text-sm font-medium">[</span>
<span className="text-text-secondary text-sm font-medium">Products</span>
<span className="text-text-tertiary text-sm font-medium">]</span>
</div>
<h2 className="text-4xl md:text-5xl font-bold">AI for all humanity</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Grok Card */}
<div className="bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 p-8 hover:bg-white/10 transition-all duration-300 group">
<div className="bg-bg-secondary backdrop-blur-sm rounded-2xl border border-border-primary p-8 hover:bg-glass-hover transition-all duration-300 group">
<div className="flex flex-col space-y-6">
<div className="flex items-center justify-between">
<h3 className="text-2xl font-bold">Grok</h3>
<div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center group-hover:bg-white/20 transition-colors">
<div className="w-12 h-12 bg-glass-subtle rounded-full flex items-center justify-center group-hover:bg-glass-hover transition-colors">
<ArrowRight className="h-5 w-5" />
</div>
</div>
<p className="text-white/80 leading-relaxed">
<p className="text-text-secondary leading-relaxed">
Grok is your cosmic guide, now accessible on grok.com, iOS, and Android. Explore the universe with AI.
</p>
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
className="text-white hover:bg-white/20"
className="text-text-secondary hover:bg-glass-hover"
onPress={() => window.location.href = '/chat'}
>
Use now
@@ -142,22 +142,22 @@ export default function Home() {
</div>
{/* API Card */}
<div className="bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 p-8 hover:bg-white/10 transition-all duration-300 group">
<div className="bg-bg-secondary backdrop-blur-sm rounded-2xl border border-border-primary p-8 hover:bg-glass-hover transition-all duration-300 group">
<div className="flex flex-col space-y-6">
<div className="flex items-center justify-between">
<h3 className="text-2xl font-bold">API</h3>
<div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center group-hover:bg-white/20 transition-colors">
<div className="w-12 h-12 bg-glass-subtle rounded-full flex items-center justify-center group-hover:bg-glass-hover transition-colors">
<Code className="h-5 w-5" />
</div>
</div>
<p className="text-white/80 leading-relaxed">
<p className="text-text-secondary leading-relaxed">
Supercharge your applications with Grok's enhanced speed, precision, and multilingual capabilities.
</p>
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
className="text-white hover:bg-white/20"
className="text-text-secondary hover:bg-glass-hover"
onPress={() => window.location.href = '/api'}
>
Build now
@@ -167,22 +167,22 @@ export default function Home() {
</div>
{/* Developer Docs Card */}
<div className="bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 p-8 hover:bg-white/10 transition-all duration-300 group">
<div className="bg-bg-secondary backdrop-blur-sm rounded-2xl border border-border-primary p-8 hover:bg-glass-hover transition-all duration-300 group">
<div className="flex flex-col space-y-6">
<div className="flex items-center justify-between">
<h3 className="text-2xl font-bold">Developer Docs</h3>
<div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center group-hover:bg-white/20 transition-colors">
<div className="w-12 h-12 bg-glass-subtle rounded-full flex items-center justify-center group-hover:bg-glass-hover transition-colors">
<Globe className="h-5 w-5" />
</div>
</div>
<p className="text-white/80 leading-relaxed">
<p className="text-text-secondary leading-relaxed">
Learn how to quickly install Grok at the heart of your applications and explore guides covering common use cases.
</p>
<div className="flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
className="text-white hover:bg-white/20"
className="text-text-secondary hover:bg-glass-hover"
onPress={() => window.location.href = '/docs'}
>
Learn more
@@ -197,16 +197,16 @@ export default function Home() {
{isAuthenticated && user && (
<section className="py-24">
<div className="max-w-md mx-auto">
<div className="bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 p-8 text-center">
<div className="w-20 h-20 bg-white/10 rounded-2xl flex items-center justify-center mx-auto mb-6 text-3xl font-bold">
<div className="bg-bg-secondary backdrop-blur-sm rounded-2xl border border-border-primary p-8 text-center">
<div className="w-20 h-20 bg-glass-subtle rounded-2xl flex items-center justify-center mx-auto mb-6 text-3xl font-bold">
{user.email?.[0].toUpperCase()}
</div>
<h3 className="text-xl font-bold mb-2">Welcome back</h3>
<p className="text-white/60 mb-6">{user.email}</p>
<p className="text-text-tertiary mb-6">{user.email}</p>
<Button
variant="ghost"
size="sm"
className="text-white border border-white/20 hover:bg-white/10 w-full"
className="text-text-secondary border border-border-primary hover:bg-glass-hover w-full"
onPress={() => window.location.href = '/chat'}
>
Continue to Chat