fix(PDYE-1136): boton iphone y flecha (#691)

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

Author: JaviMunita

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

@@ -73,9 +73,26 @@ export const CalendarDropdownContainer = ({
     <Box
       zIndex={4}
       className={`calendarDropdown ${hasNew && !onlyToCalendar ? 'hasNew' : ''}`}
+      width="30px"
+      height="30px"
       m={m}
       position="relative"
       sx={{
+        // Pseudo-elemento para la flecha
+        '&::after': {
+          content: '""',
+          position: 'absolute',
+          width: '0',
+          height: '0',
+          borderColor: `transparent transparent ${vars('colors-neutral-davysGrey') ?? '#5C5C5C'}
+          transparent`,
+          borderStyle: 'solid',
+          borderWidth: '0 11px 10px 11px',
+          top: isMobile ? '30px' : '30px',
+          right: isMobile ? '3px' : '15px',
+          display: isMenuOpen && !isMobile ? 'block' : 'none',
+          transform: isMobile ? 'none' : 'translateX(50%)',
+        },
         // Se genera pseudo elemento que actúa como ícono de notificación
         '&.hasNew::before': {
           background: vars('colors-secondary-pumpkin') ?? '#FF7A14',
@@ -99,10 +116,13 @@ export const CalendarDropdownContainer = ({
         '.chakra-menu__menu-list': {
           padding: '0',
           position: 'absolute',
+          left: isMobile ? 'auto' : '-30px',
+          top: isMobile ? '-6px !important' : 'auto',
           width: isMobile ? '100vw' : '500px',
           maxHeight: isMobile ? 'calc(100vh - 62px)' : 'auto',
           overflowY: isMobile ? 'auto' : 'hidden',
           background: 'white',
+          border: 'none',
           borderRadius: isMobile ? '0' : '10px',
           boxShadow: isMobile ? 'none' : 'rgba(47, 47, 47, 0.2) -1px 6px 40px 0px',
           animation: 'none !important',

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

@@ -24,27 +24,21 @@ export const GoToCalendar = ({
         background={vars('colors-main-blueGrey') ?? '#60798E'}
         border="1px solid transparent"
         borderRadius="100%"
-        height="30px!important"
-        width="30px!important"
+        height="30px !important"
+        width="30px !important"
+        padding="0 !important"
+        margin="0 !important"
         position="relative"
         _hover={{
           bg: 'rgba(96, 121, 142, 0.8)',
         }}
         sx={{
           '>span': {
+            display: 'grid',
             alignContent: 'center',
             h: '16px!important',
             justifyItems: 'center',
             lineHeight: '0',
-            m: '0!important',
-            p: '0!important',
-            w: '16px!important',
-            svg: {
-              h: '16px!important',
-              m: '0!important',
-              p: '0!important',
-              w: '16px!important',
-            },
           },
         }}
       >

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

@@ -3,36 +3,21 @@ import { vars } from '@theme'
 
 export const Header = ({ text, isMobile }: { text?: string; isMobile: boolean }): JSX.Element => {
   return (
-    <>
-      <Box
-        as="header"
-        bg={vars('colors-neutral-davysGrey') ?? '#5C5C5C'}
-        borderRadius={isMobile ? 'none' : '10px 10px 0 0'}
-        color={vars('colors-neutral-white') ?? '#FFFFFF'}
-        fontSize="14px"
-        fontWeight="500"
-        lineHeight="normal"
-        padding="16px"
-        position="absolute"
-        width={isMobile ? '100vw' : '100%'}
-        top={0}
-        zIndex="1"
-      >
-        {text ?? 'Próximas fechas importantes de tus cursos'}
-      </Box>
-      <Box
-        className="arrow"
-        aria-hidden
-        borderBottom={`12px solid ${vars('colors-neutral-davysGrey') ?? '#5C5C5C'}`}
-        borderLeft="14px solid transparent"
-        borderRight="14px solid transparent"
-        display={isMobile ? 'none' : 'block'}
-        height="0"
-        position="fixed"
-        right={isMobile ? '71px' : '-437px'}
-        top={isMobile ? '54px' : '-9px'}
-        width="0"
-      />
-    </>
+    <Box
+      as="header"
+      bg={vars('colors-neutral-davysGrey') ?? '#5C5C5C'}
+      borderRadius={isMobile ? 'none' : '10px 10px 0 0'}
+      color={vars('colors-neutral-white') ?? '#FFFFFF'}
+      fontSize="14px"
+      fontWeight="500"
+      lineHeight="normal"
+      padding="16px"
+      position="absolute"
+      width={isMobile ? '100vw' : '100%'}
+      top={0}
+      zIndex="1"
+    >
+      {text ?? 'Próximas fechas importantes de tus cursos'}
+    </Box>
   )
 }