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

feat: Introduce alwaysShow prop for MobileBackButton to control visibility and apply minor UI refinements to specialization cards and chat header.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-27 06:47:53 +05:30
parent d598637380
commit 317f7e7402
6 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(agent)/agent/edit/page.tsx
View File

@@ -366,7 +366,7 @@ export default function EditProfilePage() {
return ( return (
<div> <div>
<MobileBackButton label="Back" fallbackHref="/agent/dashboard" /> <MobileBackButton label="Back" fallbackHref="/agent/dashboard" alwaysShow />
<div className="flex gap-6 h-[calc(100vh-180px)]"> <div className="flex gap-6 h-[calc(100vh-180px)]">
{/* Left Sidebar - Quick Links */} {/* Left Sidebar - Quick Links */}
<div className="w-[220px] flex-shrink-0 hidden lg:block h-full overflow-y-auto scrollbar-thin"> <div className="w-[220px] flex-shrink-0 hidden lg:block h-full overflow-y-auto scrollbar-thin">

2
src/app/(user)/user/profile/[id]/page.tsx
View File

@@ -278,7 +278,7 @@ export default function AgentProfileView() {
return ( return (
<div className="max-w-7xl mx-auto px-4 lg:px-8 py-6 space-y-6"> <div className="max-w-7xl mx-auto px-4 lg:px-8 py-6 space-y-6">
<MobileBackButton label="Back" fallbackHref="/user/profiles" /> <MobileBackButton label="Back" fallbackHref="/user/profiles" alwaysShow />
{/* Main Layout - Responsive: Column on mobile, Row on desktop */} {/* Main Layout - Responsive: Column on mobile, Row on desktop */}
<div className="flex flex-col lg:flex-row gap-6 lg:items-stretch"> <div className="flex flex-col lg:flex-row gap-6 lg:items-stretch">
{/* Left Sidebar - Status & Contact */} {/* Left Sidebar - Status & Contact */}

2
src/app/support/chat/page.tsx
View File

@@ -277,7 +277,7 @@ export default function SupportChatPage() {
{/* Chat Area */} {/* Chat Area */}
<main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-8 w-full flex flex-col"> <main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 pb-8 w-full flex flex-col">
{/* Chat Header */} {/* Chat Header */}
<div className="border border-[#00293d]/10 rounded-t-[15px] px-6 py-4 flex items-center gap-3 bg-[#00293d]"> <div className="border border-[#00293d]/10 rounded-t-[15px] px-6 py-4 flex items-center gap-3 bg-[#648188]">
<Image <Image
src="/assets/icons/chat-icon.svg" src="/assets/icons/chat-icon.svg"
alt="" alt=""

5
src/components/layout/MobileBackButton.tsx
View File

@@ -5,9 +5,10 @@ import { useRouter } from 'next/navigation';
interface MobileBackButtonProps { interface MobileBackButtonProps {
label?: string; label?: string;
fallbackHref?: string; fallbackHref?: string;
alwaysShow?: boolean;
} }
export function MobileBackButton({ label, fallbackHref }: MobileBackButtonProps) { export function MobileBackButton({ label, fallbackHref, alwaysShow = false }: MobileBackButtonProps) {
const router = useRouter(); const router = useRouter();
const handleBack = () => { const handleBack = () => {
@@ -23,7 +24,7 @@ export function MobileBackButton({ label, fallbackHref }: MobileBackButtonProps)
return ( return (
<button <button
onClick={handleBack} onClick={handleBack}
className="lg:hidden flex items-center gap-2 mb-4 hover:opacity-70 transition-opacity cursor-pointer" className={`${alwaysShow ? 'flex' : 'lg:hidden flex'} items-center gap-2 mb-4 hover:opacity-70 transition-opacity cursor-pointer`}
> >
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#00293D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/> <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#00293D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>

2
src/components/profile/SpecializationCard.tsx
View File

@@ -29,7 +29,7 @@ export function SpecializationCard({
}; };
return ( return (
<div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625] h-full"> <div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625]">
<div className="flex justify-center mb-3">{icon}</div> <div className="flex justify-center mb-3">{icon}</div>
<h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4> <h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
<div className="flex-1"> <div className="flex-1">

4
src/components/profile/SpecializationSection.tsx
View File

@@ -29,7 +29,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
{/* Top row - up to 3 cards */} {/* Top row - up to 3 cards */}
{topRowFields.length > 0 && ( {topRowFields.length > 0 && (
<div className={`flex flex-col lg:grid lg:items-stretch gap-6 mb-6 ${ <div className={`flex flex-col lg:grid lg:items-start gap-6 mb-6 ${
topRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' : topRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
topRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' : topRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
'lg:grid-cols-3' 'lg:grid-cols-3'
@@ -54,7 +54,7 @@ export function SpecializationSection({ fieldsData }: SpecializationSectionProps
{/* Bottom row - remaining cards */} {/* Bottom row - remaining cards */}
{bottomRowFields.length > 0 && ( {bottomRowFields.length > 0 && (
<div className={`flex flex-col lg:grid lg:items-stretch gap-6 ${ <div className={`flex flex-col lg:grid lg:items-start gap-6 ${
bottomRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' : bottomRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
bottomRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' : bottomRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
'lg:grid-cols-3' 'lg:grid-cols-3'