fixed:#1887 Event and Holiday Calendar View

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,8 @@
   flex-grow: 1;
 }
 
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: var(--mobile-breakpoint)) {
+  /* --mobile-breakpoint: 768px */
   .event_list {
     display: none;
   }
@@ -331,7 +333,7 @@
   }
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: var(--small-mobile-breakpoint)) {
   .btn__more {
     font-size: 12px;
   }
@@ -344,7 +346,22 @@
   gap: 10px;
   margin-top: 35px;
 }
+.base_card {
+  flex: 1;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: var(--card-shadow);
+}
 
+.holidays_card {
+  composes: base_card;
+  background-color: var(--holiday-card-bg);
+}
+
+.events_card {
+  composes: base_card;
+  background-color: #ffffff;
+}
 .card__holidays {
   background-color: rgba(246, 242, 229, 1);
   display: flex;
@@ -421,3 +438,126 @@
   background: rgba(146, 200, 141, 0.5);
   border-radius: 10px;
 }
+
+.baseIndicator {
+  border-radius: 5px;
+  width: 20px;
+  height: 12px;
+  display: inline-block;
+}
+
+.holidayText {
+  font-size: 14px;
+  color: #555555;
+}
+.eventsLegend {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.listContainer {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.holidayIndicator {
+  composes: baseIndicator;
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+.holidayText {
+  font-size: 14px;
+  color: #555555;
+}
+.eventsLegend {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+:root {
+  /* Holiday colors */
+  --color-holiday-indicator: rgba(0, 0, 0, 0.15);
+  --color-holiday-date: rgba(255, 152, 0, 1);
+  --mobile-breakpoint: 700px;
+  /* Text colors */
+  --color-text-primary: rgba(51, 51, 51, 1);
+  --color-text-secondary: rgba(85, 85, 85, 1);
+}
+.organizationIndicator {
+  composes: baseIndicator;
+  background-color: rgba(82, 172, 255, 0.5);
+}
+
+.legendText {
+  font-size: 14px;
+  color: #555555;
+}
+@media only screen and (max-width: var(--mobile-breakpoint)) {
+  .listContainer,
+  .eventsLegend {
+    gap: 4px;
+  }
+
+  .holidayIndicator,
+  .organizationIndicator {
+    width: 16px;
+    height: 10px;
+  }
+
+  .holidayText,
+  .legendText {
+    font-size: 12px;
+  }
+}
+.card_title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-color-primary);
+  margin-bottom: 15px;
+}
+
+.card_list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.card_list_item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: var(--text-color-secondary);
+}
+
+.holiday_date {
+  font-weight: 500;
+  color: var(--holiday-date-color);
+}
+
+.calendar_infocards {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 20px;
+  background-color: var(--grey-bg-color);
+}
+.legend {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.userEvents__color {
+  background-color: rgba(139, 195, 74, 1);
+  border-radius: 5px;
+  width: 20px;
+  height: 12px;
+  display: inline-block;
+}