notkshitij/CropCompass
1
1
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Activity

Fix:Improved CSS of the side bar

Browse Source
This commit is contained in:
Atharva
2025-02-23 03:24:09 +05:30
parent ec2f1a939b
commit 5cde4a3b45
2 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/.gitignore
+1
View File
@@ -7,6 +7,7 @@ yarn-error.log*
pnpm-debug.log* pnpm-debug.log*
lerna-debug.log* lerna-debug.log*
package-lock.json
node_modules node_modules
dist dist
dist-ssr dist-ssr
Frontend/src/pages/UserPanel/MainUserPanel.jsx
+45 -40
View File
@@ -27,7 +27,7 @@ const MainUserPanel = () => {
//console.log("User Logged out data is : ", data); //console.log("User Logged out data is : ", data);
if (data.success == true) { if (data.success === true) {
navigate("/user/login"); navigate("/user/login");
} }
}; };
@@ -35,8 +35,8 @@ const MainUserPanel = () => {
const user = useSelector((store) => store.user); const user = useSelector((store) => store.user);
return ( return (
<> <>
<div className="container mx-auto p-4 "> <div className="container mx-auto p-4">
<div className="flex items-center mb-4 md:hidden "> <div className="flex items-center mb-4 md:hidden">
<img <img
src={`${user.avatar}`} src={`${user.avatar}`}
alt="Profile Picture" alt="Profile Picture"
@@ -45,86 +45,92 @@ const MainUserPanel = () => {
<span className="text-lg font-medium">Hello, {user.name}</span> <span className="text-lg font-medium">Hello, {user.name}</span>
</div> </div>
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
<div className="w-1.5/12 bg-white md:w-3/12 rounded-lg shadow p-4"> {/* Updated Sidebar */}
<div className="hidden md:flex items-center mb-4"> <div className="w-full md:w-1/4 bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg p-6">
<div className="hidden md:flex items-center mb-6">
<img <img
src={`${user.avatar}`} src={`${user.avatar}`}
alt="Profile Picture" alt="Profile Picture"
className="rounded-full w-10 h-10 mr-2" className="w-12 h-12 rounded-full mr-3 border-2 border-green-500"
/> />
<span className="text-lg font-medium">Hello, {user.name}</span> <span className="text-xl font-semibold text-gray-800">
Hello, {user.name}
</span>
</div> </div>
<ul className="list-none"> <ul className="space-y-4">
<li className="py-2 border-b border-gray-200"> <li>
<Link to={"/user/dashboard"} className="flex items-center"> <Link
<IoIosHome className="text-xl font-bold text-gray-700" /> to={"/user/dashboard"}
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block"> className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
>
<IoIosHome className="text-2xl text-green-600" />
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
Dashboard Dashboard
</span> </span>
</Link> </Link>
</li> </li>
<li className="py-2 border-b border-gray-200"> <li>
<Link <Link
to={"/user/dashboard/scheduledmeetings"} to={"/user/dashboard/scheduledmeetings"}
className="flex items-center" className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
> >
<RiCalendarScheduleLine className="text-xl text-gray-700" /> <RiCalendarScheduleLine className="text-2xl text-green-600" />
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block"> <span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
Scheduled Meeting Scheduled Meeting
</span> </span>
</Link> </Link>
</li> </li>
<li className="py-2 border-b border-gray-200"> <li>
<Link <Link
to={"/user/dashboard/history"} to={"/user/dashboard/history"}
className="flex items-center" className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
> >
<MdHistory className="text-xl text-gray-700" /> <MdHistory className="text-2xl text-green-600" />
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block"> <span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
History History
</span> </span>
</Link> </Link>
</li> </li>
<li className="py-2 border-b border-gray-200"> <li>
<Link <Link
to={"/user/dashboard/notifications"} to={"/user/dashboard/notifications"}
className="flex items-center" className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
> >
<IoIosNotifications className="text-xl text-gray-700" /> <IoIosNotifications className="text-2xl text-green-600" />
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block"> <span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
Notifications Notifications
</span> </span>
</Link> </Link>
</li> </li>
<li className="py-2 border-b border-gray-200"> <li>
<Link <Link
to={"/user/dashboard/feedback"} to={"/user/dashboard/feedback"}
className="flex items-center" className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
> >
<MdFeedback className="text-xl text-gray-700" /> <MdFeedback className="text-2xl text-green-600" />
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block"> <span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
Feedback and Ratings Feedback and Ratings
</span> </span>
</Link> </Link>
</li> </li>
<li className="py-2 border-b border-gray-200"> <li>
<Link <Link
to={"/user/dashboard/support"} to={"/user/dashboard/support"}
className="flex items-center" className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
> >
<MdOutlineSupportAgent className="text-xl text-gray-700" /> <MdOutlineSupportAgent className="text-2xl text-green-600" />
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block"> <span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
Support Support
</span> </span>
</Link> </Link>
</li> </li>
<li className="py-2 border-b border-gray-200"> <li>
<Link <Link
to={"/user/dashboard/settings"} to={"/user/dashboard/settings"}
className="flex items-center" className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
> >
<IoSettings className="text-xl text-gray-700" /> <IoSettings className="text-2xl text-green-600" />
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block"> <span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
Settings Settings
</span> </span>
</Link> </Link>
@@ -147,7 +153,7 @@ const MainUserPanel = () => {
<span className="sr-only">Open user menu</span> <span className="sr-only">Open user menu</span>
<BsThreeDotsVertical className="text-lg" /> <BsThreeDotsVertical className="text-lg" />
</button> </button>
{/* <!-- Dropdown menu --> */} {/* Dropdown menu */}
<div <div
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
id="user-dropdown" id="user-dropdown"
@@ -156,7 +162,7 @@ const MainUserPanel = () => {
<span className="block text-sm text-gray-900 dark:text-white"> <span className="block text-sm text-gray-900 dark:text-white">
Bonnie Green Bonnie Green
</span> </span>
<span className="block text-sm text-gray-500 truncate dark:text-gray-400"> <span className="block text-sm text-gray-500 truncate dark:text-gray-400">
name@flowbite.com name@flowbite.com
</span> </span>
</div> </div>
@@ -228,13 +234,12 @@ const MainUserPanel = () => {
className="rounded-full w-24 h-24 mx-auto" className="rounded-full w-24 h-24 mx-auto"
/> />
<h4 className="text-lg font-medium mt-2">{user.name}</h4> <h4 className="text-lg font-medium mt-2">{user.name}</h4>
{/* <span className="text-gray-500 text-sm">@thomasdox</span> */}
<p className="text-gray-500 text-sm mt-2"> <p className="text-gray-500 text-sm mt-2">
Join on {user.createdAt && user.createdAt.substring(0, 10)} Join on {user.createdAt && user.createdAt.substring(0, 10)}
</p> </p>
<p className="text-gray-500 text-sm mt-2"> <p className="text-gray-500 text-sm mt-2">
{user.description == null && {user.description == null &&
"I am a Senior Software Engineer at Google and also mentored 50+ students to get there dream job."} "I am a Senior Software Engineer at Google and also mentored 50+ students to get their dream job."}
</p> </p>
<div className="flex justify-center mt-4"> <div className="flex justify-center mt-4">
<button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2"> <button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">