Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Update agent dashboard UI by replacing icons, adding new SVG assets, and refining component styles and layout.

Browse Source
This commit is contained in:
pradeepkumar
2026-01-18 20:28:09 +05:30
parent 0e47040c10
commit 132efa70cf
7 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/(agent)/agent/dashboard/component/ExperienceSection.tsx
View File

@@ -27,6 +27,8 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
<li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">{experience.years}</li>
</ul>
</div>
{/* Horizontal divider */}
<div className="w-full h-0 border-t-[0.1px] border-solid border-[#00293D]" />
<div>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Number of contract closed</p>
<ul className="list-disc list-inside">
@@ -56,7 +58,7 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Areas in expertise &amp; Years</p>
<div className="flex flex-wrap gap-2">
{experience.expertiseYears.slice(0, 4).map((item, idx) => (
<Tag key={idx} variant="orange">
<Tag key={idx} variant="light">
{item.area} – {item.years}
</Tag>
))}
@@ -64,12 +66,12 @@ export function ExperienceSection({ experience }: ExperienceSectionProps) {
</div>
</div>
<div>
<p className="font-bold text-[#00293d] text-sm mb-3">Certifications</p>
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Certifications</p>
<ul className="space-y-3">
{experience.certifications.map((cert, idx) => (
<li key={idx} className="text-[#00293d] text-sm">
<span>• {cert.name}</span>
<p className="text-[#5ba4a4] text-xs ml-3">{cert.org}</p>
<li key={idx}>
<span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">• {cert.name}</span>
<p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] opacity-50 ml-3">{cert.org}</p>
</li>
))}
</ul>

2
src/app/(agent)/agent/dashboard/component/InfoCard.tsx
View File

@@ -10,7 +10,7 @@ export function InfoCard({ title, content, icon }: InfoCardProps) {
return (
<div className="bg-white rounded-[10px] shadow-[0px_10px_20px_0px_rgba(217,217,217,0.5)] p-6 text-center">
<div className="flex justify-center mb-3">{icon}</div>
{title && <h4 className="font-bold text-[#00293d] text-sm mb-3 font-fractul">{title}</h4>}
{title && <h4 className="font-semibold text-[#00293D] text-[14px] leading-[19px] mb-3 font-serif">{title}</h4>}
<div className="text-[#00293d] text-sm font-serif">{content}</div>
</div>
);

2
src/app/(agent)/agent/dashboard/component/SpecializationSection.tsx
View File

@@ -19,7 +19,7 @@ export function SpecializationSection({ specialization }: SpecializationSectionP
return (
<div className="bg-[#e8e8e8] rounded-[20px] p-8">
<div className="text-center mb-8">
<h2 className="text-xl font-bold text-[#00293d] font-serif">Specialization</h2>
<h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px]">Specialization</h2>
<p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
</div>
<div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">

28
src/app/(agent)/agent/dashboard/page.tsx
View File

@@ -136,46 +136,46 @@ export default function AgentDashboard() {
title="Availability"
icon={
<Image
src="/assets/icons/clock-icon.svg"
src="/assets/icons/availability-clock-icon.svg"
alt="Availability"
width={32}
height={32}
width={28}
height={31}
/>
}
content={
<div>
<p className="font-semibold mb-2">{agentData.availability.type}</p>
<p className="font-semibold font-serif text-[14px] leading-[19px] text-[#00293D] mb-2">{agentData.availability.type}</p>
<div className="space-y-1">
{agentData.availability.days.map((day) => (
<p key={day}>{day}</p>
<p key={day} className="font-normal font-serif text-[14px] leading-[19px] text-[#00293D]">{day}</p>
))}
</div>
</div>
}
/>
<InfoCard
title="Preferred work environment"
title=""
icon={
<Image
src="/assets/icons/location-large-icon.svg"
src="/assets/icons/work-environment-icon.svg"
alt="Work environment"
width={32}
height={32}
width={28}
height={28}
/>
}
content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
content={<p className="font-serif font-semibold text-[14px] leading-[19px] text-[#00293D]">{agentData.preferredWorkEnvironment}</p>}
/>
<InfoCard
title=""
icon={
<Image
src="/assets/icons/star-icon.svg"
src="/assets/icons/testimonial-star-icon.svg"
alt="Testimonial"
width={32}
height={32}
width={28}
height={28}
/>
}
content={<p className="text-sm leading-relaxed italic">&ldquo;{agentData.testimonialHighlight}&rdquo;</p>}
content={<p className="text-[14px] font-semibold font-serif leading-[19px] text-center text-[#00293D]">&ldquo;{agentData.testimonialHighlight}&rdquo;</p>}
/>
</div>