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 JalaliDatePicker from "../components/ui/JalaliDatePicker"
import { toast } from "sonner" import { toast } from "sonner"
import { Modal } from "../components/Modal" import { Modal } from "../components/Modal"
import { Input } from "../components/ui/input"
import { TextAreaInput } from "../components/ui/TextAreaInput"
export interface UserProfile { export interface UserProfile {
id?: string; id?: string;
@@ -244,7 +246,7 @@ export default function Profile() {
<div className="space-y-1"> <div className="space-y-1">
<span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.firstName || 'First Name'}</span> <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.firstName || 'First Name'}</span>
{isEditing ? ( {isEditing ? (
<input <Input
type="text" type="text"
value={formData.first_name || ""} value={formData.first_name || ""}
onChange={(e) => setFormData({ ...formData, first_name: e.target.value })} onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
@@ -259,7 +261,7 @@ export default function Profile() {
<div className="space-y-1"> <div className="space-y-1">
<span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.lastName || 'Last Name'}</span> <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.lastName || 'Last Name'}</span>
{isEditing ? ( {isEditing ? (
<input <Input
type="text" type="text"
value={formData.last_name || ""} value={formData.last_name || ""}
onChange={(e) => setFormData({ ...formData, last_name: e.target.value })} onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
@@ -282,7 +284,7 @@ export default function Profile() {
<div className="space-y-1"> <div className="space-y-1">
<span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.email || 'Email'}</span> <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.email || 'Email'}</span>
{isEditing ? ( {isEditing ? (
<input <Input
type="email" type="email"
value={formData.email || ""} value={formData.email || ""}
onChange={(e) => setFormData({ ...formData, email: e.target.value })} 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"> <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> <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.profile?.description || 'Description'}</span>
{isEditing ? ( {isEditing ? (
<textarea <TextAreaInput
rows={4} rows={4}
value={formData.description || ""} value={formData.description || ""}
onChange={(e) => setFormData({ ...formData, description: e.target.value })} 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"> <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"> <Button variant="outline" onClick={handleCancelEdit} disabled={isSaving} className="flex items-center gap-2">
<X className="h-4 w-4" /> <X className="h-4 w-4" />
{t.cancel || 'Cancel'} {t.actions?.cancel || 'Cancel'}
</Button> </Button>
<Button onClick={handleSaveProfile} disabled={isSaving} className="flex items-center gap-2 bg-blue-600 text-white hover:bg-blue-700"> <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" /> <Check className="h-4 w-4" />
@@ -372,7 +374,7 @@ export default function Profile() {
onClick={() => setIsPicModalOpen(false)} onClick={() => setIsPicModalOpen(false)}
disabled={isSaving} disabled={isSaving}
> >
{t.profile?.cancel || t.cancel || 'Cancel'} {t.actions?.cancel || 'Cancel'}
</Button> </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" : "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} ref={fileInputRef}
type="file" type="file"
accept="image/*" accept="image/*"