changed acc to the bot 2

PalisadoesFoundation · Dec 1, 2024 · ba21ae5 · ba21ae5
1 parent d141177
commit ba21ae5
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 49 deletions.
diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css
@@ -276,7 +276,8 @@
   padding: 5px;
   width: fit-content;
   display: flex;
-  flex-direction: row;
+  align-items: center;
+  gap: var(--indicator-spacing);
 }
 
 .event_list_hour {
@@ -316,7 +317,7 @@
   flex-grow: 1;
 }
 
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: var(--mobile-breakpoint)) {
   .event_list {
     display: none;
   }
@@ -421,20 +422,17 @@
   background: rgba(146, 200, 141, 0.5);
   border-radius: 10px;
 }
-.list_container_new {
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  gap: var(--indicator-spacing);
-}
 
-.holidayIndicator {
-  background-color: var(--holiday-indicator-color);
+.baseIndicator {
   border-radius: 5px;
   width: 20px;
   height: 12px;
   display: inline-block;
 }
+.holidayIndicator {
+  composes: baseIndicator;
+  background-color: var(--holiday-indicator-color);
+}
 
 .commonText {
   font-size: 14px;
@@ -452,11 +450,8 @@
 }
 
 .organizationIndicator {
+  composes: baseIndicator;
   background-color: var(--organization-indicator-color);
-  border-radius: 5px;
-  width: 20px;
-  height: 12px;
-  display: inline-block;
 }
 
 .legendText {
@@ -466,7 +461,7 @@
   .list_container_new,
   .eventsLegend {
     gap: 4px;
-  }
+}
 
   .holidayIndicator,
   .organizationIndicator {
@@ -487,8 +482,14 @@
   --holiday-indicator-color: rgba(0, 0, 0, 0.15);
   --organization-indicator-color: rgba(82, 172, 255, 0.5);
   --indicator-spacing: 8px;
+  --mobile-breakpoint: 700px;
+  --user-indicator-color: rgba(139, 195, 74, 1);
+  --holiday-card-bg: #fff8e1;
+  --holiday-date-color: #ff9800;
+  --text-color-primary: #333333;
+  --text-color-secondary: #555555;
+  --card-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
 }
-
 .container {
   display: flex;
   flex-direction: row;
@@ -504,7 +505,7 @@
   padding: 20px;
   background-color: #fff8e1;
   border-radius: 10px;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--card-shadow);
 }
 
 .card_title {
@@ -539,7 +540,7 @@
   padding: 20px;
   background-color: #ffffff;
   border-radius: 10px;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--card-shadow);
 }
 
 .legend {
@@ -555,14 +556,10 @@
 }
 
 .user_indicator {
+  composes: baseIndicator;
   background-color: rgba(139, 195, 74, 1);
-  border-radius: 5px;
-  width: 20px;
-  height: 12px;
-  display: inline-block;
 }
 
 .user_legend_text {
-  font-size: 14px;
-  color: #555555;
+  composes: commonText;
 }
diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx
@@ -1,7 +1,7 @@
 import EventListCard from 'components/EventListCard/EventListCard';
 import dayjs from 'dayjs';
+import React, { useMemo, useState, useEffect } from 'react';
 import Button from 'react-bootstrap/Button';
-import React, { useState, useEffect } from 'react';
 import styles from './EventCalendar.module.css';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 import { ViewType } from 'screens/OrganizationEvents/OrganizationEvents';
@@ -221,7 +221,13 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
         setExpanded(index);
       }
     };
-
+    const filteredHolidays = useMemo(
+      () =>
+        holidays?.filter(
+          (holiday) => dayjs(holiday.date, 'MM-DD').month() === currentMonth,
+        ),
+      [holidays, currentMonth],
+    );
     /*istanbul ignore next*/
     const allDayEventsList: JSX.Element[] =
       events
@@ -323,20 +329,9 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
           <div className={styles.holidays_card}>
             <h3 className={styles.card_title}>Holidays</h3>
             <ul className={styles.holiday_list}>
-              {holidays
-                ?.filter(
-                  (holiday) =>
-                    dayjs(holiday.date, 'MM-DD').month() === currentMonth,
-                )
-                .map((holiday, index) => (
-                  <li key={index} className={styles.holiday_item}>
-                    <span className={styles.holiday_date}>
-                      {months[parseInt(holiday.date.slice(0, 2), 10) - 1]}{' '}
-                      {holiday.date.slice(3)}
-                    </span>
-                    <span>{holiday.name}</span>
-                  </li>
-                ))}
+              {filteredHolidays?.map((holiday, index) => (
+                <li key={index}>{holiday.name}</li>
+              ))}
             </ul>
           </div>
           <div className={styles.events_card}>
@@ -475,15 +470,11 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
                 }
               >
                 <div>{holidayList}</div>
-                {(() => {
-                  if (expanded === index) {
-                    return allEventsList;
-                  } else if (holidayList?.length > 0) {
-                    return allEventsList?.slice(0, 1);
-                  } else {
-                    return allEventsList?.slice(0, 2);
-                  }
-                })()}
+                {expanded === index
+                  ? allEventsList
+                  : holidayList?.length > 0
+                    ? allEventsList?.slice(0, 1)
+                    : allEventsList?.slice(0, 2)}
               </div>
               {(allEventsList?.length > 2 ||
                 (windowWidth <= 700 && allEventsList?.length > 0)) && (