WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added dark mode feature to right sidebar

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2024-02-28 11:20:29 +01:00
parent fc2a78dde7
commit c4c1bf6ca1
3 changed files with 166 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dashboards/AccountDashboard.jsx
+7 -7
View File
@@ -40,7 +40,7 @@ const AccountDashboard = ({ className, bannerList }) => {
);
})}
</div>
<div className="w-full grid-cols-1 md:grid-cols-2 xxl:grid-cols-3 grid items-center justify-center gap-2 md:gap-4">
<div className="w-full grid-cols-1 md:grid-cols-2 2xl::grid-cols-3 grid items-center justify-center gap-2 md:gap-4">
{getLowerBanner?.map((props, idx) => {
let image = getImage(props);
@@ -67,7 +67,7 @@ export default AccountDashboard;
const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
return (
<div className="flex flex-col shadow-md rounded-xl">
<div className="flex flex-col shadow-md rounded-xl dark:border-[#5356fb29]">
<Link to={link_path} key={key} className="h-[12rem] rounded-t-xl">
<img
src={image}
@@ -75,8 +75,8 @@ const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
className="w-full h-full rounded-t-xl object-cover"
/>
</Link>
<div className="h-[7rem] rounded-b-xl bg-white">
<div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2">
<div className="h-[7rem] rounded-b-xl bg-white dark:bg-dark-white">
<div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2 dark:text-white">
<Link to={link_path} className="font-bold text-lg">
{title}
</Link>
@@ -84,7 +84,7 @@ const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
{desc}
</Link>
</div>
<div className="flex justify-between w-full px-2 items-center">
<div className="flex justify-between w-full px-2 items-center pt-[0.2rem]">
<Link to={link_path} className="text-slate-300 font-semibold text-sm">
{btn}
</Link>
@@ -103,11 +103,11 @@ const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
return (
<div
key={key}
className="flex flex-col bg-white shadow-md h-full rounded-xl"
className="flex flex-col bg-white shadow-md h-full rounded-xl dark:border-[#5356fb29] dark:bg-dark-white"
>
<div className="w-full flex justify-between border-b border-slate-300 p-2">
<div className="h-[130px] flex justify-between items-center">
<div className="px-2 flex flex-col gap-2">
<div className="px-2 flex flex-col gap-2 dark:text-white">
<Link to={link_path} className="text-lg font-bold">
{title}
</Link>