[FIX] Events Page Violates The Figma Style Guide

src/components/EventCalendar/EventCalendar.tsx

@@ -198,11 +198,11 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
     }
   };
 
-  const handleTodayButton = (): void => {
-    setCurrentYear(today.getFullYear());
-    setCurrentMonth(today.getMonth());
-    setCurrentDate(today.getDate());
-  };
+  // const handleTodayButton = (): void => {
+  //   setCurrentYear(today.getFullYear());
+  //   setCurrentMonth(today.getMonth());
+  //   setCurrentDate(today.getDate());
+  // };
 
   const timezoneString = `UTC${
     new Date().getTimezoneOffset() > 0 ? '-' : '+'
@@ -348,7 +348,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
                     {months[parseInt(holiday.date.slice(0, 2), 10) - 1]}{' '}
                     {holiday.date.slice(3)}
                   </span>
-                  <span>{holiday.name}</span>
+                  <span className={styles.holiday_name}>{holiday.name}</span>
                 </li>
               ))}
             </ul>
@@ -357,21 +357,21 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
           <div className={styles.events_card} role="region" aria-label="Events">
             <h3 className={styles.card_title}>Events</h3>
             <div className={styles.legend}>
-              <div className={styles.list_container}>
-                <span className={styles.holidayIndicator}></span>
-                <span className={styles.holidayText}>Holidays</span>
-              </div>
               <div className={styles.eventsLegend}>
                 <span className={styles.organizationIndicator}></span>
                 <span className={styles.legendText}>
                   Events Created by Organization
                 </span>
               </div>
-              <div className={styles.eventsLegend}>
+              {/* <div className={styles.eventsLegend}>
                 <span className={styles.userEvents__color}></span>
                 <span className={styles.legendText}>
                   Events Created by User
                 </span>
+              </div> */}
+              <div className={styles.list_container_holidays}>
+                <span className={styles.holidayIndicator}></span>
+                <span className={styles.holidayText}>Holidays</span>
               </div>
             </div>
           </div>
@@ -547,15 +547,16 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
           >
             <ChevronRight />
           </Button>
-          <div>
+          {/* <div>
             <Button
               className={styles.editButton}
               onClick={handleTodayButton}
               data-testid="today"
+
             >
               Today
             </Button>
-          </div>
+          </div> */}
         </div>
       )}
       <div className={`${styles.calendar__scroll} customScroll`}>

src/components/EventCalendar/EventHeader.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Button, Form } from 'react-bootstrap';
-import { Search } from '@mui/icons-material';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
+import AddIcon from '@mui/icons-material/Add';
 import styles from '../../style/app.module.css';
 import { ViewType } from '../../screens/OrganizationEvents/OrganizationEvents';
 import { useTranslation } from 'react-i18next';
@@ -35,7 +36,10 @@ function eventHeader({
   });
 
   return (
-    <div className={styles.calendarEventHeader}>
+    <div
+      className={styles.calendarEventHeader}
+      data-testid="calendarEventHeader"
+    >
       <div className={styles.calendar__header}>
         <div className={styles.input}>
           <Form.Control
@@ -57,12 +61,13 @@ function eventHeader({
           />
           <Button
             className={styles.searchButton}
+            data-testid="searchButton"
             style={{ marginBottom: '10px' }}
           >
-            <Search />
+            <SearchOutlinedIcon />
           </Button>
         </div>
-        <div className={styles.flex_grow}></div>
+        {/* <div className={styles.flex_grow}></div> */}
         <div className={styles.space}>
           <SortingButton
             title={t('viewType')}
@@ -88,14 +93,25 @@ function eventHeader({
             className={styles.dropdown}
             buttonLabel={t('eventType')}
           />
-          <Button
-            variant="success"
-            className={styles.dropdown}
-            onClick={showInviteModal}
-            data-testid="createEventModalBtn"
-          >
-            Create Event
-          </Button>
+          <div className={styles.selectTypeEventHeader}>
+            <Button
+              variant="success"
+              className={styles.dropdown}
+              onClick={showInviteModal}
+              data-testid="createEventModalBtn"
+            >
+              <div className="">
+                <AddIcon
+                  sx={{
+                    fontSize: '25px',
+                    marginBottom: '2px',
+                    marginRight: '2px',
+                  }}
+                />
+                <span>Create</span>
+              </div>
+            </Button>
+          </div>
         </div>
       </div>
     </div>

src/components/EventCalendar/constants.js

@@ -13,7 +13,15 @@ export const holidays = [
   },
   { name: 'Christmas Day', date: '12-25', month: 'December' }, // December 25th
 ];
-export const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+export const weekdays = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+];
 export const months = [
   'January',
   'February',

src/components/HolidayCards/HolidayCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './HolidayCard.module.css';
+import styles from './../../style/app.module.css';
 
 // Props for the HolidayCard component
 interface InterfaceHolidayList {
@@ -14,7 +14,7 @@ interface InterfaceHolidayList {
  */
 const HolidayCard = (props: InterfaceHolidayList): JSX.Element => {
   /*istanbul ignore next*/
-  return <div className={styles.card}>{props?.holidayName}</div>;
+  return <div className={styles.holidayCard}>{props?.holidayName}</div>;
 };
 
 export default HolidayCard;

src/screens/UserPortal/Events/Events.tsx

@@ -222,7 +222,7 @@ export default function events(): JSX.Element {
   return (
     <>
       <div className={`d-flex flex-row`}>
-        <div className={`${styles.mainContainer}`}>
+        <div className={`${styles.mainContainerEvent}`}>
           <EventHeader
             viewType={viewType}
             showInviteModal={showInviteModal}