3dtours/travelplanning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: thay đổi màu theme tổi của timeline hành trình

Browse Source
This commit is contained in:
3dtours
2026-06-24 10:40:59 +07:00
parent 13cd68707e
commit b998833371
2 changed files with 142 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ItineraryTimeline.tsx
+34 -34
View File
@@ -335,11 +335,11 @@ export const ItineraryTimeline = ({
</div> </div>
<button <button
onClick={() => onAddLocation?.(leg.id, true)} onClick={() => onAddLocation?.(leg.id, true)}
className="flex-1 bg-blue-50/20 p-4 rounded-xl border border-dashed border-blue-100 hover:border-blue-400 hover:bg-blue-50 transition-all flex items-center justify-between group" className="flex-1 bg-blue-50/20 dark:bg-slate-800/20 p-4 rounded-xl border border-dashed border-blue-100 dark:border-slate-700 hover:border-blue-400 dark:hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-slate-800/40 transition-all flex items-center justify-between group"
> >
<div className="text-left"> <div className="text-left">
<span className="inline-block px-2 py-0.5 bg-blue-50 text-blue-600 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm xuất phát</span> <span className="inline-block px-2 py-0.5 bg-blue-50 dark:bg-slate-700 text-blue-600 dark:text-blue-300 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm xuất phát</span>
<h3 className="font-bold text-gray-400 text-sm italic">Nhấn để ghim điểm bắt đầu cho Tour...</h3> <h3 className="font-bold text-gray-400 dark:text-slate-400 text-sm italic">Nhấn để ghim điểm bắt đầu cho Tour...</h3>
</div> </div>
<Plus className="w-5 h-5 text-blue-500 group-hover:scale-110 transition-transform" /> <Plus className="w-5 h-5 text-blue-500 group-hover:scale-110 transition-transform" />
</button> </button>
@@ -350,17 +350,17 @@ export const ItineraryTimeline = ({
{legIdx === legs.length - 1 && !legs.some((l: any) => l.locations.some((loc: any) => loc.plannedEnd && new Date(loc.plannedEnd).getTime() === 0)) && ( {legIdx === legs.length - 1 && !legs.some((l: any) => l.locations.some((loc: any) => loc.plannedEnd && new Date(loc.plannedEnd).getTime() === 0)) && (
<div className="relative flex group mb-6 opacity-80 hover:opacity-100 transition-opacity"> <div className="relative flex group mb-6 opacity-80 hover:opacity-100 transition-opacity">
<div className="z-10 mt-1.5 mr-4"> <div className="z-10 mt-1.5 mr-4">
<div className="w-8 h-8 bg-white rounded-full border-2 border-dashed border-red-200 flex items-center justify-center text-red-400"> <div className="w-8 h-8 bg-white dark:bg-slate-800 rounded-full border-2 border-dashed border-red-200 dark:border-red-700 flex items-center justify-center text-red-400">
<Flag className="w-4 h-4" /> <Flag className="w-4 h-4" />
</div> </div>
</div> </div>
<button <button
onClick={() => onAddLocation?.(leg.id, false, true)} onClick={() => onAddLocation?.(leg.id, false, true)}
className="flex-1 bg-red-50/20 p-4 rounded-xl border border-dashed border-red-100 hover:border-red-400 hover:bg-red-50 transition-all flex items-center justify-between group" className="flex-1 bg-red-50/20 dark:bg-red-900/20 p-4 rounded-xl border border-dashed border-red-100 dark:border-red-700 hover:border-red-400 dark:hover:border-red-400 hover:bg-red-50 dark:hover:bg-red-900/40 transition-all flex items-center justify-between group"
> >
<div className="text-left"> <div className="text-left">
<span className="inline-block px-2 py-0.5 bg-red-50 text-red-600 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span> <span className="inline-block px-2 py-0.5 bg-red-50 dark:bg-red-700 text-red-600 dark:text-red-300 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm kết thúc</span>
<h3 className="font-bold text-gray-400 text-sm italic">Nhấn để ghim điểm kết thúc cho Tour...</h3> <h3 className="font-bold text-gray-400 dark:text-slate-400 text-sm italic">Nhấn để ghim điểm kết thúc cho Tour...</h3>
</div> </div>
<Plus className="w-5 h-5 text-red-500 group-hover:scale-110 transition-transform" /> <Plus className="w-5 h-5 text-red-500 group-hover:scale-110 transition-transform" />
</button> </button>
@@ -558,14 +558,14 @@ export const ItineraryTimeline = ({
<div className="flex flex-col gap-3 pb-20 mt-8"> <div className="flex flex-col gap-3 pb-20 mt-8">
<button <button
onClick={handleDeclareLegs} onClick={handleDeclareLegs}
className="w-full py-4 rounded-2xl bg-white text-blue-600 border-2 border-dashed border-blue-200 hover:bg-blue-50 transition-all flex items-center justify-center gap-2 text-sm font-bold" className="w-full py-4 rounded-2xl bg-white dark:bg-slate-800 text-blue-600 dark:text-blue-300 border-2 border-dashed border-blue-200 dark:border-slate-700 hover:bg-blue-50 dark:hover:bg-slate-700 transition-all flex items-center justify-center gap-2 text-sm font-bold"
> >
<List className="w-5 h-5" /> <List className="w-5 h-5" />
{legs.length > 0 ? "Khai báo lại số lượng chặng" : "Bắt đầu bằng việc khai báo số chặng"} {legs.length > 0 ? "Khai báo lại số lượng chặng" : "Bắt đầu bằng việc khai báo số chặng"}
</button> </button>
<button <button
onClick={handleAddLeg} onClick={handleAddLeg}
className="w-full py-4 rounded-2xl bg-blue-600 text-white shadow-lg shadow-blue-100 hover:bg-blue-700 transition-all flex items-center justify-center gap-2 text-sm font-bold" className="w-full py-4 rounded-2xl bg-blue-600 dark:bg-blue-700 text-white shadow-lg shadow-blue-100 hover:bg-blue-700 transition-all flex items-center justify-center gap-2 text-sm font-bold"
> >
<Plus className="w-5 h-5" /> Thêm chặng lẻ vào cuối <Plus className="w-5 h-5" /> Thêm chặng lẻ vào cuối
</button> </button>
@@ -575,30 +575,30 @@ export const ItineraryTimeline = ({
{/* Modal Khai báo số chặng (Popover) */} {/* Modal Khai báo số chặng (Popover) */}
{isLegCountModalOpen && ( {isLegCountModalOpen && (
<div className="fixed inset-0 z-[4000] flex items-center justify-center p-4"> <div className="fixed inset-0 z-[4000] flex items-center justify-center p-4">
<div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsLegCountModalOpen(false)} /> <div className="absolute inset-0 bg-gray-900/60 dark:bg-slate-950/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsLegCountModalOpen(false)} />
<div className="relative w-full max-w-sm bg-white rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200"> <div className="relative w-full max-w-sm bg-white dark:bg-slate-900 rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-black text-gray-900">Số chặng lộ trình</h3> <h3 className="text-xl font-black text-gray-900 dark:text-white">Số chặng lộ trình</h3>
<button onClick={() => setIsLegCountModalOpen(false)} className="p-2 hover:bg-gray-100 rounded-full transition-colors"> <button onClick={() => setIsLegCountModalOpen(false)} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-full transition-colors">
<X className="w-5 h-5 text-gray-400" /> <X className="w-5 h-5 text-gray-400 dark:text-slate-400" />
</button> </button>
</div> </div>
<p className="text-sm text-gray-500 mb-6 leading-relaxed"> <p className="text-sm text-gray-500 dark:text-slate-400 mb-6 leading-relaxed">
Bạn muốn chia chuyến đi này thành bao nhiêu chặng nhỏ? (Tối đa 20 chặng) Bạn muốn chia chuyến đi này thành bao nhiêu chặng nhỏ? (Tối đa 20 chặng)
</p> </p>
<div className="flex items-center justify-center gap-6 mb-8"> <div className="flex items-center justify-center gap-6 mb-8">
<button <button
onClick={() => setTempLegCount(Math.max(1, tempLegCount - 1))} onClick={() => setTempLegCount(Math.max(1, tempLegCount - 1))}
className="w-12 h-12 rounded-2xl border-2 border-gray-100 flex items-center justify-center text-2xl font-bold text-gray-400 hover:border-blue-200 hover:text-blue-600 transition-all" className="w-12 h-12 rounded-2xl border-2 border-gray-100 dark:border-slate-700 flex items-center justify-center text-2xl font-bold text-gray-400 dark:text-slate-400 hover:border-blue-200 dark:hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition-all"
> >
- -
</button> </button>
<span className="text-4xl font-black text-blue-600 w-12 text-center">{tempLegCount}</span> <span className="text-4xl font-black text-blue-600 dark:text-blue-400 w-12 text-center">{tempLegCount}</span>
<button <button
onClick={() => setTempLegCount(Math.min(20, tempLegCount + 1))} onClick={() => setTempLegCount(Math.min(20, tempLegCount + 1))}
className="w-12 h-12 rounded-2xl border-2 border-gray-100 flex items-center justify-center text-2xl font-bold text-gray-400 hover:border-blue-200 hover:text-blue-600 transition-all" className="w-12 h-12 rounded-2xl border-2 border-gray-100 dark:border-slate-700 flex items-center justify-center text-2xl font-bold text-gray-400 dark:text-slate-400 hover:border-blue-200 dark:hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition-all"
> >
+ +
</button> </button>
@@ -606,7 +606,7 @@ export const ItineraryTimeline = ({
<button <button
onClick={confirmDeclareLegs} onClick={confirmDeclareLegs}
className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 transition-all active:scale-95" className="w-full py-4 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 dark:shadow-blue-950 transition-all active:scale-95"
> >
Xác nhận Xác nhận
</button> </button>
@@ -617,58 +617,58 @@ export const ItineraryTimeline = ({
{/* Modal Chỉnh sửa Chặng (Popover) */} {/* Modal Chỉnh sửa Chặng (Popover) */}
{isEditModalOpen && ( {isEditModalOpen && (
<div className="fixed inset-0 z-[4000] flex items-center justify-center p-4"> <div className="fixed inset-0 z-[4000] flex items-center justify-center p-4">
<div className="absolute inset-0 bg-gray-900/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsEditModalOpen(false)} /> <div className="absolute inset-0 bg-gray-900/60 dark:bg-slate-950/60 backdrop-blur-sm animate-in fade-in duration-200" onClick={() => setIsEditModalOpen(false)} />
<div className="relative w-full max-w-md bg-white rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200"> <div className="relative w-full max-w-md bg-white dark:bg-slate-900 rounded-[32px] shadow-2xl p-8 animate-in zoom-in-95 duration-200">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h3 className="text-xl font-black text-gray-900">Chỉnh sửa Chặng</h3> <h3 className="text-xl font-black text-gray-900 dark:text-white">Chỉnh sửa Chặng</h3>
<button onClick={() => setIsEditModalOpen(false)} className="p-2 hover:bg-gray-100 rounded-full transition-colors"> <button onClick={() => setIsEditModalOpen(false)} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-800 rounded-full transition-colors">
<X className="w-5 h-5 text-gray-400" /> <X className="w-5 h-5 text-gray-400 dark:text-slate-400" />
</button> </button>
</div> </div>
<div className="space-y-5"> <div className="space-y-5">
<div> <div>
<label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Tên chặng</label> <label className="block text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">Tên chặng</label>
<input <input
type="text" type="text"
value={editingLegData.note} value={editingLegData.note}
onChange={(e) => setEditingLegData({ ...editingLegData, note: e.target.value })} onChange={(e) => setEditingLegData({ ...editingLegData, note: e.target.value })}
placeholder="VD: Ngày 1: Khởi hành" placeholder="VD: Ngày 1: Khởi hành"
className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm" className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
/> />
</div> </div>
<div> <div>
<label className="flex items-center gap-2 text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1"> <label className="flex items-center gap-2 text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">
<AlignLeft className="w-3 h-3" /> Mô tả chi tiết <AlignLeft className="w-3 h-3" /> Mô tả chi tiết
</label> </label>
<textarea <textarea
value={editingLegData.description} value={editingLegData.description}
onChange={(e) => setEditingLegData({ ...editingLegData, description: e.target.value })} onChange={(e) => setEditingLegData({ ...editingLegData, description: e.target.value })}
placeholder="Mô tả các hoạt động chính trong chặng này..." placeholder="Mô tả các hoạt động chính trong chặng này..."
className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm min-h-[120px] resize-none" className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm min-h-[120px] resize-none text-gray-800 dark:text-white"
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="flex items-center gap-2 text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1"> <label className="flex items-center gap-2 text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">
<CalendarIcon className="w-3 h-3" /> Bắt đầu <CalendarIcon className="w-3 h-3" /> Bắt đầu
</label> </label>
<input <input
type="date" type="date"
value={editingLegData.startDate} value={editingLegData.startDate}
onChange={(e) => setEditingLegData({ ...editingLegData, startDate: e.target.value })} onChange={(e) => setEditingLegData({ ...editingLegData, startDate: e.target.value })}
className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm" className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
/> />
</div> </div>
<div> <div>
<label className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2 ml-1">Kết thúc</label> <label className="block text-xs font-black text-gray-400 dark:text-slate-400 uppercase tracking-widest mb-2 ml-1">Kết thúc</label>
<input <input
type="date" type="date"
value={editingLegData.endDate} value={editingLegData.endDate}
onChange={(e) => setEditingLegData({ ...editingLegData, endDate: e.target.value })} onChange={(e) => setEditingLegData({ ...editingLegData, endDate: e.target.value })}
className="w-full px-5 py-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm" className="w-full px-5 py-4 bg-gray-50 dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm text-gray-800 dark:text-white"
/> />
</div> </div>
</div> </div>
@@ -677,13 +677,13 @@ export const ItineraryTimeline = ({
<div className="grid grid-cols-2 gap-3 mt-8"> <div className="grid grid-cols-2 gap-3 mt-8">
<button <button
onClick={() => setIsEditModalOpen(false)} onClick={() => setIsEditModalOpen(false)}
className="py-4 bg-gray-100 hover:bg-gray-200 text-gray-600 font-bold rounded-2xl transition-all active:scale-95" className="py-4 bg-gray-100 dark:bg-slate-800 hover:bg-gray-200 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-300 font-bold rounded-2xl transition-all active:scale-95"
> >
Hủy Hủy
</button> </button>
<button <button
onClick={saveLegEdit} onClick={saveLegEdit}
className="py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 transition-all active:scale-95" className="py-4 bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold rounded-2xl shadow-lg shadow-blue-100 dark:shadow-blue-950 transition-all active:scale-95"
> >
Lưu thay đổi Lưu thay đổi
</button> </button>
frontend/src/index.css
+11 -12
View File
@@ -17,8 +17,8 @@
--border: #e5e7eb; /* Light Border */ --border: #e5e7eb; /* Light Border */
--border-light: #f3f4f6; /* Light Border Alt */ --border-light: #f3f4f6; /* Light Border Alt */
--text-primary: #28536b; /* Yale Blue (High contrast text) */ --text-primary: #0596e4; /* Yale Blue (High contrast text) */
--text-secondary: #7ea8be; /* Steel Blue */ --text-secondary: #74a8c4; /* Steel Blue */
--text-accent: #c2948a; /* Rosy Taupe */ --text-accent: #c2948a; /* Rosy Taupe */
--text-muted: #9ca3af; /* Muted Text */ --text-muted: #9ca3af; /* Muted Text */
--text-disabled: #d1d5db; /* Disabled Text */ --text-disabled: #d1d5db; /* Disabled Text */
@@ -49,18 +49,17 @@
/* ============ DARK THEME ============ */ /* ============ DARK THEME ============ */
:root.dark { :root.dark {
/* Dark Theme Variables - Vintage Grape & Bondi Blue */ /* Dark Theme Variables - Vintage Grape & Bondi Blue */
--background: #4b658b; /* Vintage Grape */ --background: #1e293b; /* Dark slate-800 */
--background-alt: #2d253f; /* Dark Alt */ --background-alt: #0f172a; /* Dark slate-900 */
--surface: #515d74; /* Dusty Grape */ --surface: #1e293b; /* Dark slate-800 */
--surface-muted: #626186; /* Surface Muted */ --surface-muted: #334155; /* Dark slate-700 */
--surface-hover: #5f6b7e; /* Surface Hover */ --surface-hover: #334155; /* Dark slate-700 */
--border: #626186; /* Border */ --border: #334155; /* Dark slate-700 */
--border-light: #525174; /* Border Light */ --border-light: #1e293b; /* Dark slate-800 */
/* FIX LỖI 1: Thay đổi #173757 thành #f8fafc để chữ có màu trắng sữa chuẩn tương phản cao */ --text-primary: #f8fafc; /* Soft White */
--text-primary: #f8fafc; /* Soft White chính thức */ --text-secondary: #cbd5e1; /* Light gray */
--text-secondary: #cbd5e1; /* Sửa lại xám sáng để nhìn rõ hơn #6b6b6b cũ */
--text-accent: #bce784; /* Lime Cream */ --text-accent: #bce784; /* Lime Cream */
--text-muted: #94a3b8; /* Muted Slate */ --text-muted: #94a3b8; /* Muted Slate */
--text-disabled: #64748b; /* Disabled Text */ --text-disabled: #64748b; /* Disabled Text */