feat: update UI components and styles for improved user experience
- Removed obsolete PDF file from the mock directory. - Updated index.html to change the favicon and title for the application. - Deleted unused vite.svg file and replaced it with shapes.svg. - Enhanced App component layout and styling. - Refined Form1 component with better spacing and updated styles. - Improved Form2 component to enhance item selection UI and responsiveness. - Updated Form4 component to improve loan display and interaction. - Enhanced Header component styling for better visibility. - Refined LoginForm component for a more modern look. - Updated Object component styles for better text visibility. - Improved Sidebar component layout and item display. - Updated global CSS for better touch target improvements. - Enhanced Layout component for better responsiveness and structure. - Updated main.tsx to change toast notification theme. - Updated tailwind.config.js to include index.html for Tailwind CSS processing.
This commit is contained in:
@@ -10,28 +10,29 @@ type LayoutProps = {
|
||||
|
||||
const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
|
||||
return (
|
||||
<div className="min-h-screen flex bg-gradient-to-r from-blue-50 via-white to-blue-100">
|
||||
{/* Sidebar */}
|
||||
<div className="hidden md:block">
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen flex bg-slate-50 text-slate-800">
|
||||
{/* Main */}
|
||||
<main className="flex-1 flex flex-col items-center py-10 px-4 md:py-14">
|
||||
<div className="w-full max-w-3xl">
|
||||
<Header onLogout={onLogout} />
|
||||
</div>
|
||||
<div className="w-full max-w-3xl bg-white/90 shadow-2xl rounded-3xl p-6 md:p-10 ring-1 ring-blue-100">
|
||||
{children}
|
||||
<main className="flex-1 flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8">
|
||||
{/* Sidebar on mobile appears inline on top; on desktop it's a sticky column */}
|
||||
<div className="w-full max-w-5xl md:flex md:gap-6">
|
||||
<div className="block md:hidden mb-3">
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block md:shrink-0 md:w-72">
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="w-full">
|
||||
<Header onLogout={onLogout} />
|
||||
</div>
|
||||
<div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Mobile sidebar at bottom */}
|
||||
<div className="fixed bottom-4 left-4 right-4 md:hidden z-10">
|
||||
<div className="bg-white/95 backdrop-blur rounded-2xl shadow-xl ring-1 ring-blue-100 p-4">
|
||||
<Sidebar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user