fix(PDYE-1230): evento mobile (#712)

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

Author: JaviMunita

src/organisms/Calendar/EventsList/EventsList.tsx

@@ -1,4 +1,6 @@
-import { Box } from '@chakra-ui/react'
+import { Calendar } from '@/atoms/Icons/Calendar'
+import { Clock } from '@/atoms/Icons/Clock'
+import { Box, useMediaQuery } from '@chakra-ui/react'
 import { vars } from '@theme'
 
 import { NotificationIcon } from './NotificationIcon'
@@ -29,6 +31,7 @@ export const EventsList = ({
   text,
   type,
 }: IEventList): JSX.Element => {
+  const [isMobile] = useMediaQuery('(max-width: 580px)')
   const border = `1px solid ${vars('colors-neutral-platinum') ?? '#E8E8E8'}`
 
   const initOrEnd = [
@@ -47,28 +50,30 @@ export const EventsList = ({
 
   return (
     <Box className="eventsList" borderTop={border} p="16px 24px" display="flex" gap="12px">
-      <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 as="span" fontSize="14px" fontWeight="700" color={vars('colors-neutral-white')}>
-          {time}
+      {!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 as="span" fontSize="14px" fontWeight="700" color={vars('colors-neutral-white')}>
+            {time}
+          </Box>
         </Box>
-      </Box>
+      )}
 
       <Box display="flex" flexDirection="column" gap="8px">
         <Box
@@ -77,13 +82,43 @@ export const EventsList = ({
           justifyContent="space-between"
           alignItems="center"
           fontSize="16px"
-          fontWeight="700"
+          fontWeight={isMobile ? '400' : '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>
+        )}
+
         {showsCourseName && !initOrEnd && (
-          <Box display="flex" alignItems="center" gap="4px" lineHeight="19px">
-            <Box as="span" color={vars('colors-neutral-gray') ?? '#808080'} fontSize="14px">
+          <Box display="flex" gap="4px" alignItems="center">
+            {isMobile && <Box height="10px" width="10px" bg={color} borderRadius="50%" />}
+
+            <Box
+              as="span"
+              color={vars('colors-neutral-gray') ?? '#808080'}
+              fontSize="14px"
+              display="flex"
+              alignItems="center"
+              gap="4px"
+              lineHeight="normal"
+            >
               <strong>{text ? `${text}:` : 'Curso:'}</strong> {courseName}
             </Box>
           </Box>