updating MobileMenu components

daviteixeira-dev · Sep 10, 2023 · a627e38 · a627e38
1 parent d56cdbb
commit a627e38
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/src/components/MobileMenu/MobileMenu.jsx b/src/components/MobileMenu/MobileMenu.jsx
@@ -34,15 +34,15 @@ const MobileMenu = () => {
                 <DrawerContent>
                     <DrawerCloseButton color="whiteAlpha.900" />
 
-                    <DrawerHeader backgroundColor="black">
+                    <DrawerHeader backgroundColor="blackAlpha.900">
                         <DesktopMenuLogo size="100%" />
                     </DrawerHeader>
 
                     <DrawerBody backgroundColor="blackAlpha.900">
                         <MobileMenuList />
                     </DrawerBody>
 
-                    <DrawerFooter backgroundColor="black">
+                    <DrawerFooter backgroundColor="blackAlpha.900">
                         <Button variant='outline' colorScheme="whiteAlpha" onClick={onClose}>
                             Fechar
                         </Button>

diff --git a/src/components/MobileMenu/MobileMenuItens.jsx b/src/components/MobileMenu/MobileMenuItens.jsx
@@ -5,17 +5,21 @@ import { Link as ReactRouterLink } from 'react-router-dom';
 
 const MobileMenuItens = ( props ) => {
     return (
-        <ListItem
-            fontSize="1.5rem"
-            padding=".5rem 1rem"
-            borderRadius=".3rem"
-            color="whiteAlpha.900"
-            backgroundColor="gray.900"
-        >
-            <ChakraLink as={ReactRouterLink} to={props.path}>
+        <ChakraLink as={ReactRouterLink} to={props.path}>
+            <ListItem
+                fontSize="1.2rem"
+                padding=".5rem 1rem"
+                borderRadius=".3rem"
+                fontWeight="semibold"
+                marginBottom="1.5rem"
+                color="whiteAlpha.900"
+                textTransform="uppercase"
+                backgroundColor="blackAlpha.900"
+                borderBottom="3px solid #3182ce"
+            >
                 {props.value}
-            </ChakraLink>
-        </ListItem>
+            </ListItem>
+        </ChakraLink>
     );
 };
 

diff --git a/src/components/MobileMenu/MobileMenuList.jsx b/src/components/MobileMenu/MobileMenuList.jsx
@@ -24,7 +24,7 @@ const MobileMenuList = () => {
             display="flex"
             listStyleType="none"
             flexDirection="column"
-            justifyContent="space-evenly"
+            justifyContent="start"
         >
             {
                 mobileMenuItens.map((item, index) => (