diff --git a/payment-iq/app/components/sidebar/SideBarLink.tsx b/payment-iq/app/components/sidebar/SideBarLink.tsx index 9be46a7..15bb660 100644 --- a/payment-iq/app/components/sidebar/SideBarLink.tsx +++ b/payment-iq/app/components/sidebar/SideBarLink.tsx @@ -14,12 +14,13 @@ const LinkContainer = styled('div')(({ theme }) => ({ transition: 'background 0.2s ease-in-out', '&:hover': { - backgroundColor: 'yellow', + color: 'rgb(255, 255, 255)', + background: 'rgba(255, 255, 255, 0.08)', // backgroundColor: theme.palette.action.hover, cursor: 'pointer', }, })); - +// background-color: rgb(69, 190, 171); const LinkText = styled('span')({ marginLeft: '12px', fontWeight: 500, diff --git a/payment-iq/app/components/sidebar/Sidebar.tsx b/payment-iq/app/components/sidebar/Sidebar.tsx index 5c1ae28..3ae8cdf 100644 --- a/payment-iq/app/components/sidebar/Sidebar.tsx +++ b/payment-iq/app/components/sidebar/Sidebar.tsx @@ -9,7 +9,7 @@ import SidebarLink from './SideBarLink'; // Sidebar Container (styled using MUI System) export const Sidebar = styled('div')(({ theme }) => ({ width: '240px', - backgroundColor: 'black', + backgroundColor: 'rgb(69, 190, 171)', color: 'white', padding: theme.spacing(2), height: '100vh', @@ -53,7 +53,7 @@ const SidebarLayout = () => { return ( - Dashboard + PaymentIQ {SIDEBAR_LINKS.map((link) => (