fix(ui): fix ui icons and readability

This commit is contained in:
shafin-r
2025-11-12 15:38:07 +06:00
parent d1947e8e6e
commit 11108ad8cf
12 changed files with 108 additions and 122 deletions

View File

@ -44,35 +44,39 @@ const SettingsPage = () => {
<UserCircle2 size={30} color="#113768" />
</button>
</section>
<section className="flex flex-col gap-4">
<div className="flex gap-4 items-center">
<Avatar className="bg-[#113768] w-20 h-20">
<AvatarFallback className="text-3xl text-white">
{user?.username
? user.username.charAt(0).toUpperCase()
: ""}
</AvatarFallback>
</Avatar>
<div className="flex flex-col items-start">
<h1 className="font-semibold text-2xl">{user?.full_name}</h1>
<h3 className=" text-md">{user?.email}</h3>
</div>
<section className="flex items-center gap-4 bg-blue-100 border-1 border-blue-300/40 rounded-2xl py-5 px-4">
<Avatar className="bg-[#113768] w-20 h-20">
<AvatarFallback className="text-3xl text-white">
{user?.username
? user.username.charAt(0).toUpperCase()
: "User"}
</AvatarFallback>
</Avatar>
<div className="flex flex-col items-start">
<h1 className="font-semibold text-2xl flex gap-1 items-center">
{user?.full_name}
</h1>
<h3 className=" text-md">{user?.email}</h3>
</div>
</section>
<section className="flex flex-col gap-8">
<button
onClick={() => router.push("/settings/verify")}
className="flex justify-between"
>
<div className="flex items-center gap-4">
<BadgeCheck size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Verify your account
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</button>
<div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
{!user?.is_verified && (
<>
<button
onClick={() => router.push("/settings/verify")}
className="flex justify-between"
>
<div className="flex items-center gap-4">
<BadgeCheck size={30} color="#113768" />
<h3 className="text-md font-medium text-[#113768]">
Verify your account
</h3>
</div>
<ChevronRight size={30} color="#113768" />
</button>
<div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
</>
)}
<button
onClick={() => router.push("/profile")}
className="flex justify-between"