Refactor User Dashboard layout to improve responsiveness and visual consistency. Update button styles for better alignment and flexibility in different screen sizes.

This commit is contained in:
iamkiddy 2025-11-13 11:17:17 +00:00
parent c0ff0386a0
commit f4c3fe0c51

View File

@ -134,7 +134,7 @@ export default function UserDashboard() {
{/* Main Content */}
<main className="container mx-auto px-4 sm:px-6 lg:px-8 space-y-6 pt-20 sm:pt-24 pb-8">
{/* Welcome Section */}
<div className="flex items-center justify-between mb-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
<div>
<h1 className={`text-2xl font-semibold mb-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>
Welcome Back!
@ -144,18 +144,18 @@ export default function UserDashboard() {
</p>
</div>
<div className="flex items-center gap-3">
<Link href="/user/settings">
<Link href="/user/settings" className="flex-1 sm:flex-initial">
<Button
variant="outline"
className={isDark ? 'hover:bg-gray-800 border-gray-700 text-gray-300' : 'hover:bg-gray-100'}
className={`w-full sm:w-auto ${isDark ? 'hover:bg-gray-800 border-gray-700 text-gray-300' : 'hover:bg-gray-100'}`}
>
<Settings className="w-4 h-4 mr-2" />
Settings
</Button>
</Link>
<Link href="/book-now">
<Link href="/book-now" className="flex-1 sm:flex-initial">
<Button
className="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
className="w-full sm:w-auto bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
>
<CalendarPlus className="w-4 h-4 mr-2" />
Book Appointment