From 0dddaa8185ae8f6f7f66e3e47cadfa2515213186 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 15 Mar 2026 02:05:32 +0800
Subject: [PATCH] fix(profile): improve profile's UI and UX

---
 src/pages/Profile.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index e9831bd..c3799f1 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -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/*"