Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(profile): improve profile's UI and UX

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-03-15 02:05:32 +08:00
parent 22f8f71976
commit 0dddaa8185
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/Profile.tsx
View File

@@ -12,6 +12,8 @@ import { Camera, Edit2, Trash2, User as UserIcon, UploadCloud, X, Check } from "
import JalaliDatePicker from "../components/ui/JalaliDatePicker"
import { toast } from "sonner"
import { Modal } from "../components/Modal"
import { Input } from "../components/ui/input"
import { TextAreaInput } from "../components/ui/TextAreaInput"
export interface UserProfile {
id?: string;
@@ -244,7 +246,7 @@ export default function Profile() {
<div className="space-y-1">
<span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.firstName || 'First Name'}</span>
{isEditing ? (
<input
<Input
type="text"
value={formData.first_name || ""}
onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
@@ -259,7 +261,7 @@ export default function Profile() {
<div className="space-y-1">
<span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.lastName || 'Last Name'}</span>
{isEditing ? (
<input
<Input
type="text"
value={formData.last_name || ""}
onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
@@ -282,7 +284,7 @@ export default function Profile() {
<div className="space-y-1">
<span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.email || 'Email'}</span>
{isEditing ? (
<input
<Input
type="email"
value={formData.email || ""}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
@@ -327,7 +329,7 @@ export default function Profile() {
<div className="space-y-1 md:col-span-2">
<span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.description || 'Description'}</span>
{isEditing ? (
<textarea
<TextAreaInput
rows={4}
value={formData.description || ""}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
@@ -345,7 +347,7 @@ export default function Profile() {
<div className="mt-8 pt-4 border-t border-slate-100 dark:border-slate-800 flex justify-end items-center gap-3">
<Button variant="outline" onClick={handleCancelEdit} disabled={isSaving} className="flex items-center gap-2">
<X className="h-4 w-4" />
{t.cancel || 'Cancel'}
{t.actions?.cancel || 'Cancel'}
</Button>
<Button onClick={handleSaveProfile} disabled={isSaving} className="flex items-center gap-2 bg-blue-600 text-white hover:bg-blue-700">
<Check className="h-4 w-4" />
@@ -372,7 +374,7 @@ export default function Profile() {
onClick={() => setIsPicModalOpen(false)}
disabled={isSaving}
>
{t.profile?.cancel || t.cancel || 'Cancel'}
{t.actions?.cancel || 'Cancel'}
</Button>
}
>
@@ -390,7 +392,7 @@ export default function Profile() {
: "border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800/80"
}`}
>
<input
<Input
ref={fileInputRef}
type="file"
accept="image/*"