chore: change background color of dashboard to light gray

nkowaokwu · May 5, 2024 · 927b696 · 927b696
1 parent 406f49f
commit 927b696
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/src/pages/dashboard/components/DashboardNavigationMenu.tsx b/src/pages/dashboard/components/DashboardNavigationMenu.tsx
@@ -53,14 +53,12 @@ const DashboardNavigationMenu = () => {
   return (
     <Box className="w-full">
       <Box className="relative">
-        <Box
-          ref={setNavigationHoverSlider}
-          className="absolute transition-all bg-gray-200 rounded"
-          height={10}
-          zIndex={-1}
-        />
-        <Box className="absolute transition-all bg-black" height="3px" bottom="0" />
-        <UnorderedList listStyleType="none" m={0} className="flex flex-row items-center">
+        <UnorderedList
+          listStyleType="none"
+          m={0}
+          className="flex flex-row items-center relative"
+          zIndex={1}
+        >
           {navigationOptions.map(({ label, route }, index) => (
             <ListItem
               key={label}
@@ -84,6 +82,14 @@ const DashboardNavigationMenu = () => {
             </ListItem>
           ))}
         </UnorderedList>
+        <Box
+          ref={setNavigationHoverSlider}
+          className="absolute transition-all bg-gray-200 rounded"
+          pointerEvents="none"
+          height={10}
+          top={0}
+          zIndex={0}
+        />
       </Box>
     </Box>
   );

diff --git a/src/pages/dashboard/layout.tsx b/src/pages/dashboard/layout.tsx
@@ -41,14 +41,14 @@ const DashboardLayout = ({
   }
 
   return (
-    <Box className="flex flex-row overflow-y-hidden	overflow-x-hidden w-full">
+    <Box className="flex flex-row overflow-y-hidden	overflow-x-hidden w-full h-screen bg-gray-100">
       <Box className="w-full">
-        <Box className="w-full p-2" borderBottomColor="gray.200" borderBottomWidth="1px">
+        <Box className="w-full p-2 bg-white" borderBottomColor="gray.200" borderBottomWidth="1px">
           <DashboardMenu />
           <DashboardNavigationMenu />
         </Box>
         <AuthManager>
-          <SlideFade in offsetX="-20px" offsetY="0px" className="w-full p-4">
+          <SlideFade in offsetX="-20px" offsetY="0px" className="w-full h-full p-4">
             {developer ? children({ developer }) : null}
           </SlideFade>
         </AuthManager>