fix(PDYE-1230): correcciones version mobile evento (#715)

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

Author: JaviMunita

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

@@ -1,4 +1,4 @@
-import { BtnSecondary } from '@/molecules'
+import { BtnPrimary } from '@/molecules'
 import { Box } from '@chakra-ui/react'
 import { vars } from '@theme'
 
@@ -50,9 +50,9 @@ export const Events = ({
             },
           }}
         >
-          <BtnSecondary onClick={redirecToCalendar} m="72px 0 0 24px" id="RedirectButton">
+          <BtnPrimary onClick={redirecToCalendar} m="72px 0 0 24px" id="RedirectButton">
             {text?.buttonCalendar ?? 'Ir a Mi Calendario'}
-          </BtnSecondary>
+          </BtnPrimary>
         </Box>
       )}
       <EventsGroup

src/organisms/Calendar/EventsList/EventsList.tsx

@@ -1,6 +1,4 @@
-import { Calendar } from '@/atoms/Icons/Calendar'
-import { Clock } from '@/atoms/Icons/Clock'
-import { Box, useMediaQuery } from '@chakra-ui/react'
+import { Box } from '@chakra-ui/react'
 import { vars } from '@theme'
 
 import { NotificationIcon } from './NotificationIcon'
@@ -34,7 +32,6 @@ export const EventsList = ({
   type,
   unitName,
 }: IEventList): JSX.Element => {
-  const [isMobile] = useMediaQuery('(max-width: 580px)')
   const border = `1px solid ${vars('colors-neutral-platinum') ?? '#E8E8E8'}`
 
   const initOrEnd = [
@@ -61,30 +58,34 @@ export const EventsList = ({
 
   return (
     <Box className="eventsList" borderTop={border} p="16px 24px" display="flex" gap="12px">
-      {!isMobile && (
+      <Box
+        bg={color}
+        minW="80px"
+        minH="80px"
+        maxW="80px"
+        maxH="80px"
+        borderRadius="4px"
+        p="8px"
+        display="flex"
+        flexDirection="column"
+        justifyContent="space-around"
+      >
+        <Box as="span" sx={dateTextStyle}>
+          {day}
+        </Box>
+        <Box as="span" sx={dateTextStyle}>
+          {date}
+        </Box>
         <Box
-          bg={color}
-          minW="80px"
-          minH="80px"
-          maxW="80px"
-          maxH="80px"
-          borderRadius="4px"
-          p="8px"
-          display="flex"
-          flexDirection="column"
-          justifyContent="space-around"
+          as="span"
+          fontSize="14px"
+          fontWeight="700"
+          color={vars('colors-neutral-white')}
+          lineHeight="normal"
         >
-          <Box as="span" sx={dateTextStyle}>
-            {day}
-          </Box>
-          <Box as="span" sx={dateTextStyle}>
-            {date}
-          </Box>
-          <Box as="span" fontSize="14px" fontWeight="700" color={vars('colors-neutral-white')}>
-            {time}
-          </Box>
+          {time}
         </Box>
-      )}
+      </Box>
 
       <Box display="flex" flexDirection="column" gap="8px" w="100%">
         <Box
@@ -93,46 +94,19 @@ export const EventsList = ({
           justifyContent="space-between"
           alignItems="center"
           fontSize="16px"
-          fontWeight={isMobile ? '400' : '700'}
+          fontWeight="700"
         >
           {name} {hasNotification && <NotificationIcon />}
         </Box>
 
-        {isMobile && (
-          <Box lineHeight="normal" sx={{ '>svg': { marginRight: '4px' } }}>
-            <Calendar />
-            <Box
-              as="span"
-              verticalAlign="middle"
-              p="0 8px 0 0"
-              borderRight={`1px solid ${vars('colors-neutral-platinum')}`}
-              mr="8px"
-            >
-              {day} {date}
-            </Box>
-            <Clock />
-            <Box as="span" verticalAlign="middle">
-              {time}
-            </Box>
-          </Box>
-        )}
-
         {showCourse && !initOrEnd && (
-          <Box display="flex" gap="4px" alignItems="baseline">
-            {isMobile && (
-              <Box minH="10px" minW="10px" maxH="10px" maxW="10px" bg={color} borderRadius="50%" />
-            )}
-
-            <Box as="span" sx={detailTextStyle}>
-              <strong>{text ? `${text}:` : 'Curso:'}</strong> {courseName}
-            </Box>
+          <Box as="span" sx={detailTextStyle}>
+            <strong>{text ? `${text}:` : 'Curso:'}</strong> {courseName}
           </Box>
         )}
 
         {showUnit && !initOrEnd && (
           <Box display="flex" gap="4px" alignItems="baseline">
-            {isMobile && <Box height="10px" width="10px" bg={color} borderRadius="50%" />}
-
             <Box as="span" sx={detailTextStyle}>
               {unitName}
             </Box>