chamomind/elearning
6
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

Fix: Sync colors for light/dark mode consistency

Browse source
This commit is contained in:
supalerk-ar66 2026-01-14 11:36:28 +07:00
parent e7ea035a9e
commit 6239159099
12 changed files with 445 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

47
Frontend-Learner/pages/dashboard/profile.vue
View file

@ -121,12 +121,12 @@ const saveProfile = () => {
:first-name="userData.firstName"
:last-name="userData.lastName"
size="128"
class="border-4 border-[#1e293b] shadow-2xl bg-slate-800"
class="border-4 border-white dark:border-[#1e293b] shadow-2xl bg-slate-800"
/>
<div class="absolute bottom-2 right-2 bg-emerald-500 w-5 h-5 rounded-full border-4 border-[#1e293b]"/>
<div class="absolute bottom-2 right-2 bg-emerald-500 w-5 h-5 rounded-full border-4 border-white dark:border-[#1e293b]"/>
</div>
<div class="pb-2">
<h2 class="text-3xl font-black text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
<h2 class="text-3xl font-black text-slate-900 dark:text-white mb-1">{{ userData.firstName }} {{ userData.lastName }}</h2>
</div>
</div>
@ -158,7 +158,7 @@ const saveProfile = () => {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
</button>
<h2 class="text-2xl font-black text-white">แก้ไขข้อมูลส่วนตัว</h2>
<h2 class="text-2xl font-black text-slate-900 dark:text-white">แก้ไขข้อมูลส่วนตัว</h2>
</div>
<!-- Avatar Upload Section -->
@ -169,7 +169,7 @@ const saveProfile = () => {
:first-name="userData.firstName"
:last-name="userData.lastName"
size="112"
class="rounded-3xl border-2 border-white/5 bg-slate-800 group-hover:opacity-50 transition-all"
class="rounded-3xl border-2 border-slate-200 dark:border-white/5 bg-slate-800 group-hover:opacity-50 transition-all"
/>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@ -180,8 +180,8 @@ const saveProfile = () => {
<input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
</div>
<div class="text-center md:text-left">
<h3 class="font-black text-white mb-2">รูปโปรไฟล์ของคุณ</h3>
<p class="text-xs text-slate-500 mb-4 uppercase tracking-widest font-bold">Recommended: Square image, max 2MB</p>
<h3 class="font-black text-slate-900 dark:text-white mb-2">รูปโปรไฟล์ของคุณ</h3>
<p class="text-xs text-slate-500 mb-4 uppercase tracking-widest font-bold">เฉพาะไฟล์ png , jpg</p>
<button class="btn-upload" @click="triggerUpload">อัปโหลดรูปใหม่</button>
</div>
</div>
@ -189,7 +189,7 @@ const saveProfile = () => {
<!-- Form Inputs -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-300">คำนำหน้า</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">คำนำหน้า</label>
<select v-model="userData.prefix" class="premium-input w-full">
<option>นาย</option>
<option>นาง</option>
@ -198,7 +198,7 @@ const saveProfile = () => {
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-300">ชื่อ</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">ชื่อ</label>
<input
v-model="userData.firstName"
type="text"
@ -209,7 +209,7 @@ const saveProfile = () => {
<span v-if="errors.firstName" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.firstName }}</span>
</div>
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-300">นามสกุล</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">นามสกุล</label>
<input
v-model="userData.lastName"
type="text"
@ -221,7 +221,7 @@ const saveProfile = () => {
</div>
</div>
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-300">อีเมล</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">อีเมล</label>
<input
v-model="userData.email"
type="email"
@ -232,7 +232,7 @@ const saveProfile = () => {
<span v-if="errors.email" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.email }}</span>
</div>
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-300">เบอร์โทรศัพท์</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">เบอร์โทรศัพท์</label>
<input
v-model="userData.phone"
type="text"
@ -245,15 +245,15 @@ const saveProfile = () => {
</div>
<!-- Security Section -->
<div class="border-t border-white/5 pt-10 mb-10">
<h3 class="text-lg font-black text-white mb-6">ความปลอดภัย</h3>
<div class="border-t border-slate-200 dark:border-white/5 pt-10 mb-10">
<h3 class="text-lg font-black text-slate-900 dark:text-white mb-6">ความปลอดภัย</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-300">รหัสผ่านปัจจุบัน</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">รหัสผ่านปัจจุบัน</label>
<input type="password" class="premium-input w-full" placeholder="••••••••">
</div>
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-300">รหัสผ่านใหม่</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">รหัสผ่านใหม่</label>
<input
v-model="passwordForm.newPassword"
type="password"
@ -264,7 +264,7 @@ const saveProfile = () => {
<span v-if="errors.newPassword" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.newPassword }}</span>
</div>
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-300">ยืนยันรหัสผ่านใหม่</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">ยืนยันรหัสผ่านใหม่</label>
<input
v-model="passwordForm.confirmPassword"
type="password"
@ -292,21 +292,24 @@ const saveProfile = () => {
}
.card-premium {
background: #1e293b;
@apply bg-white dark:bg-[#1e293b] border-slate-200 dark:border-white/5;
border-radius: 2.5rem;
border: 1px solid rgba(255, 255, 255, 0.05);
border-width: 1px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}
.dark .card-premium {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.info-group .label {
@apply text-xs font-black uppercase tracking-widest text-slate-300 block mb-2;
@apply text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300 block mb-2;
}
.info-group .value {
@apply text-lg font-bold text-white;
@apply text-lg font-bold text-slate-900 dark:text-white;
}
.premium-input {
@apply bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-white/10 rounded-2xl px-6 py-3.5 text-slate-900 dark:text-white focus:border-blue-500 outline-none transition-all placeholder:text-slate-400;
@apply bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-2xl px-6 py-3.5 text-slate-900 dark:text-white focus:border-blue-500 outline-none transition-all placeholder:text-slate-400;
}
.btn-premium-edit {