fix(PDYE-1297): reajuste fondo, borde y posicion boton (#732)

Co-authored-by: Javiera Munita <javiera.munita@eclass.cl>

Author: JaviMunita

src/molecules/NavBarButtons/NavBarButton.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@chakra-ui/react'
+import { Box, useMediaQuery } from '@chakra-ui/react'
 
 import { vars } from '@theme'
 import { HelpIcon } from '@/molecules/NavBarButtons/Icons/HelpIcon'
@@ -29,6 +29,8 @@ export const NavBarButton = ({
   onClick,
   type,
 }: ButtonProps): JSX.Element => {
+  const [isMobile] = useMediaQuery('(max-width: 640px)')
+
   const buttonType = {
     accessibility: {
       icon: <Accessibility />,
@@ -62,11 +64,14 @@ export const NavBarButton = ({
       id={isAccessibility ? 'UserWayButton' : ''}
       onClick={isAccessibility ? triggerWidget : onClick}
       sx={{
+        background: 'none !important',
+        border: '1px transparent !important',
         cursor: 'pointer',
         display: 'flex',
         gap: '8px',
         h: '30px',
         maxH: '30px',
+        p: '0',
 
         _hover: {
           '.nav-bar-icon': {
@@ -110,7 +115,7 @@ export const NavBarButton = ({
       }}
     >
       <Box className="nav-bar-icon">{buttonType[type].icon}</Box>
-      <Box className="nav-bar-text">{buttonType[type].text}</Box>
+      {!isMobile && <Box className="nav-bar-text">{buttonType[type].text}</Box>}
     </Box>
   )
 }

src/organisms/Calendar/Dropdown/CalendarDropdown/CalendarDropdownContainer.tsx

@@ -77,7 +77,7 @@ export const CalendarDropdownContainer = ({
           content: '""',
           display: isMenuOpen ? 'block' : 'none',
           height: '0',
-          left: '14%',
+          left: '11%',
           position: 'absolute',
           top: '30px',
           transform: 'translateX(-50%)',
@@ -109,13 +109,13 @@ export const CalendarDropdownContainer = ({
           border: 'none',
           borderRadius: isMobile ? '0' : '10px',
           boxShadow: isMobile ? 'none' : 'rgba(47, 47, 47, 0.2) -1px 6px 40px 0px',
-          left: isMobile ? 'auto' : '-30px',
+          left: isMobile ? 'auto' : '34pxpx',
           maxHeight: isMobile ? 'calc(100vh - 62px)' : 'auto',
           opacity: '1 !important',
           overflowY: isMobile ? 'auto' : 'hidden',
           padding: '0',
           position: 'absolute',
-          top: isMobile ? '-6px !important' : 'auto',
+          top: isMobile ? '-6px !important' : '1px',
           transform: 'none !important',
           transition: 'none !important',
           width: isMobile ? '100vw' : '500px',

src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx

@@ -18,6 +18,8 @@ export const GoToCalendar = ({ text, onlyToCalendar, onClick }: IGoToCalendar):
       onClick={() => onlyToCalendar && onClick && onClick()}
       position="relative"
       sx={{
+        background: 'none',
+        border: '1px transparent',
         _hover: {
           '.nav-bar-icon': {
             bg: hoverBg,