fix(PDYE-1136): ajustes visuales menu dropdown (#675)

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

Author: JaviMunita

package-lock.json

@@ -8,12 +8,14 @@ export const CalendarDropdown = ({
   now,
   events,
   loading,
+  m,
 }: ICalendarDropdown): JSX.Element => {
   const date = new Date(now)
   const isoDate = date.toISOString()
 
   return (
     <CalendarDropdownContainer
+      m={m}
       events={events}
       loading={loading}
       now={isoDate}

src/organisms/Calendar/Dropdown/CalendarDropdown.tsx

@@ -15,6 +15,7 @@ export const CalendarDropdownContainer = ({
   now,
   redirectToCalendar,
   courseColors: colors,
+  m,
 }: ICalendarDropdown): JSX.Element => {
   const [isMobile] = useMediaQuery('(max-width: 577px)')
   const { closeAndMarkSeen, empty, hasNew, ...all } = useParseEvents(events, now)
@@ -32,6 +33,33 @@ export const CalendarDropdownContainer = ({
     }
   }, [isMenuOpen])
 
+  // Función que oculta el contenido de fondo al abrir el menú en formato mobile.
+  // Para el caso de v8 se usa el id del contenedor y para CV la clase.
+  // En ambos casos es un cambio que se aplica sólo cuando el menú está abierto y en dispositivos móviles.
+  useEffect(() => {
+    const viewContainer = document.getElementById('ViewContainer')
+
+    if (viewContainer) {
+      // Si existe #ViewContainer, lo ocultamos o mostramos
+      viewContainer.style.display = isMenuOpen ? 'none' : ''
+    } else {
+      // Si #ViewContainer no existe, aplicamos la lógica de .main
+      const mainElement = document.querySelector('.main')
+      if (!mainElement) return
+
+      const firstChild = mainElement.firstElementChild
+      if (!firstChild || !(firstChild instanceof HTMLElement)) return
+
+      const headerElement = firstChild.querySelector('header.header')
+      if (!headerElement) return
+
+      const targetElement = headerElement.nextElementSibling
+      if (!targetElement || !(targetElement instanceof HTMLElement)) return
+
+      targetElement.style.display = isMenuOpen ? 'none' : ''
+    }
+  }, [isMenuOpen])
+
   const onClose = (): void => {
     closeAndMarkSeen()
     setMenuOpen(false)
@@ -41,7 +69,7 @@ export const CalendarDropdownContainer = ({
     <Box
       zIndex={4}
       className="calendarDropdown"
-      mr="24px"
+      m={m}
       position="relative"
       sx={{
         '>div': {
@@ -57,6 +85,7 @@ export const CalendarDropdownContainer = ({
           width: isMobile ? '100vw' : '500px',
           maxHeight: isMobile ? 'calc(100vh - 62px)' : 'auto',
           overflowY: isMobile ? 'auto' : 'hidden',
+          background: 'white',
           borderRadius: isMobile ? '0' : '10px',
           boxShadow: isMobile ? 'none' : 'rgba(47, 47, 47, 0.2) -1px 6px 40px 0px',
           animation: 'none !important',
@@ -66,6 +95,7 @@ export const CalendarDropdownContainer = ({
         },
         '.chakra-menu__group__title': {
           fontSize: '18px',
+          fontWeight: '700',
           lineHeight: '31px',
           margin: '32px 0 0',
           padding: '0 0 8px 24px',

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

@@ -1,4 +1,5 @@
 import { Box } from '@chakra-ui/react'
+import { vars } from '@theme'
 
 import { NoEventsIcon } from '../Icons/NoEventsIcon'
 
@@ -12,7 +13,11 @@ export const Empty = ({ text }: { text?: string }): JSX.Element => {
       padding="104px 0px 64px"
     >
       <NoEventsIcon />
-      <Box fontSize="20px" fontWeight={700} color="#2F2F2F">
+      <Box
+        fontSize="20px"
+        fontWeight="700"
+        color={vars('colors-neutral-darkCharcoal') || '#2F2F2F'}
+      >
         {text ?? 'Aún no tienes eventos en tu calendario'}
       </Box>
     </Box>

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

@@ -1,6 +1,7 @@
 import { BtnSecondary } from '@/molecules'
 import { Box, MenuGroup } from '@chakra-ui/react'
 import { Key } from 'react'
+import { vars } from '@theme'
 
 import { EventsList } from '../../../EventsList/EventsList'
 import { Text } from '../../types'
@@ -34,7 +35,7 @@ export const Events = ({
       pb="32px"
       sx={{
         '.calendar-events-group': {
-          borderBottom: '1px solid #E8E8E8',
+          borderBottom: `1px solid ${vars('colors-neutral-platinum')}` ?? '1px solid #E8E8E8',
         },
       }}
     >
@@ -50,7 +51,7 @@ export const Events = ({
             },
           }}
         >
-          <BtnSecondary onClick={redirecToCalendar} m="72px 0 0 24px">
+          <BtnSecondary onClick={redirecToCalendar} m="72px 0 0 24px" id="RedirectButton">
             {text?.buttonCalendar ?? 'Ir a Mi Calendario'}
           </BtnSecondary>
         </Box>
@@ -99,7 +100,7 @@ const EventsGroup = ({ title, events, text, colors }: EventsGroupProps): JSX.Ele
       className="calendar-events-group"
       _focus={{
         background: 'none !important',
-        border: '1px solid #0189FF',
+        border: `1px solid ${vars('colors-icon-deepSkyBlue')}` ?? '1px solid #0189FF',
       }}
       sx={{
         '.chakra-menu__menuitem > div': {
@@ -119,7 +120,7 @@ const EventsGroup = ({ title, events, text, colors }: EventsGroupProps): JSX.Ele
           }) => {
             return (
               <Box // Una vez que el evento se comporte como link, se debe cambiar Box a MenuItem y aplicar el efecto de focus
-                bg="#FFFFFF"
+                bg={vars('colors-neutral-white') ?? '#FFFFFF'}
                 border="none"
                 cursor="default"
                 padding="0"

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

@@ -1,4 +1,5 @@
 import { MenuButton } from '@chakra-ui/react'
+import { vars } from '@theme'
 
 import { CalendarButtonIcon } from '../Icons/CalendarButtonIcon'
 import { NotificationIcon } from '../../../EventsList/NotificationIcon'
@@ -14,14 +15,15 @@ export const GoToCalendar = ({ hasNew, text, tooltipDisabled }: IGoToCalendar):
   return (
     <NewTooltip label={text ?? 'Calendario'} m="2px 0 0 0" isDisabled={tooltipDisabled}>
       <MenuButton
-        background="#60798E"
+        background={vars('colors-main-blueGrey') ?? '#60798E'}
         border="1px solid transparent"
         borderRadius="100%"
         height="30px"
         width="30px"
         position="relative"
         sx={{
           '>span': {
+            lineHeight: '0',
             justifyItems: 'center',
             alignContent: 'center',
           },

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

@@ -1,13 +1,14 @@
 import { Box } from '@chakra-ui/react'
+import { vars } from '@theme'
 
 export const Header = ({ text, isMobile }: { text?: string; isMobile: boolean }): JSX.Element => {
   return (
     <>
       <Box
         as="header"
-        bg="#5C5C5C"
+        bg={vars('colors-neutral-davysGrey') ?? '#5C5C5C'}
         borderRadius={isMobile ? 'none' : '10px 10px 0 0'}
-        color="#FFFFFF"
+        color={vars('colors-neutral-white') ?? '#FFFFFF'}
         fontSize="14px"
         fontWeight="500"
         lineHeight="normal"
@@ -22,7 +23,7 @@ export const Header = ({ text, isMobile }: { text?: string; isMobile: boolean })
       <Box
         className="arrow"
         aria-hidden
-        borderBottom="12px solid #5C5C5C"
+        borderBottom={`12px solid ${vars('colors-neutral-davysGrey')}` ?? '12px solid #5C5C5C'}
         borderLeft="14px solid transparent"
         borderRight="14px solid transparent"
         display={isMobile ? 'none' : 'block'}

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

@@ -1,5 +1,5 @@
 export const CalendarButtonIcon = (): JSX.Element => (
-  <svg width={16} height={16} fill="none">
+  <svg width="16px" height="16px" fill="none">
     <path
       fill="#fff"
       d="M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm-1 12H2V5h12v9Z"