6-Fix-Event-Calendar-Legends

eliis-front-end/src/App.css

@@ -1,12 +1,16 @@
-/* App.css */
 .sidebar {
     width: 200px;
     background-color: #fff;
   }
 
-  .content {
-    display: flex;
-    background-color: #fbfbfb;
-    min-height: calc(100vh - 65px);
-  }
-
+.content {
+  display: flex;
+  background-color: #fbfbfb;
+  min-height: calc(100vh - 65px);
+}
+
+.Full {
+  padding: 0.75rem;
+  width: 100%;
+  display: flex;
+}

eliis-front-end/src/App.js

@@ -52,8 +52,10 @@ function App() {
 function EventCalendarPage() {
   return (
     <>
+    <div className='Full'>
       <EventCalendarHeader />
       <CalendarS />
+    </div>
     </>
   );
 }

eliis-front-end/src/components/event-calender/Event-Calendar.css

@@ -1,35 +1,19 @@
-/* Add this to your CSS or use inline styles */
-
-.sidebar-container {
+/* Common styles */
+.flex {
   display: flex;
 }
 
-.event-calendar-header {
-  flex-grow: 1;
-  padding: 20px;
-  border-right: 2px solid #ccc;
-}
-
-/* Event-Calendar.css */
-.type-menu {
-  list-style: none;
-}
-
-.gap-2 {
-  gap: 0.5rem;
+.flex-col {
+  flex-direction: column;
 }
 
 .items-center {
   align-items: center;
 }
 
-.flex {
-  display: flex;
-}
-
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
 .font-bold {
@@ -41,70 +25,65 @@
   line-height: 1rem;
 }
 
-.p-1 {
-  padding: 0.25rem;
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.w-6 {
+  width: 1.5rem;
 }
 
-.bg-primary {
+.h-6 {
+  height: 1.5rem;
+}
+
+/* Background colors */
+.bg-Coral {
   --tw-bg-opacity: 1;
   background-color: rgb(247 158 128 / var(--tw-bg-opacity));
 }
-.bg-pink {
+
+.bg-Olive-Green {
+  background-color: rgb(166, 194, 100);
+}
+
+.bg-Rose-Pink {
   --tw-bg-opacity: 1;
   background-color: rgb(224 130 177 / var(--tw-bg-opacity));
 }
 
-.bg-red {
+.bg-Tomato-Red {
   --tw-bg-opacity: 1;
   background-color: rgb(235 94 93 / var(--tw-bg-opacity));
 }
 
-.bg-fadedPink {
+.bg-Muted-Pink {
   --tw-bg-opacity: 1;
   background-color: rgb(204 121 121 / var(--tw-bg-opacity));
 }
 
-.bg-yellow {
+.bg-Mustard-Yellow {
   --tw-bg-opacity: 1;
   background-color: rgb(239 173 78 / var(--tw-bg-opacity));
 }
 
-.bg-teal {
+.bg-Teal {
   --tw-bg-opacity: 1;
   background-color: rgb(115 202 194 / var(--tw-bg-opacity));
 }
 
-.bg-blue {
+.bg-Sky-Blue {
   --tw-bg-opacity: 1;
   background-color: rgb(92 192 222 / var(--tw-bg-opacity));
 }
 
-.border-red {
-  --tw-border-opacity: 1;
-  border-color: rgb(235 94 93 / var(--tw-border-opacity));
-}
-.border {
-  border-width: 1px;
-}
-
-.rounded-full {
-  border-radius: 9999px;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.w-6 {
-  width: 1.5rem;
-}
-
-.h-6 {
-  height: 1.5rem;
-}
-
-.flex {
-  display: flex;
+/* Special style for white background with red border */
+.bg-White-Red-Outline {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255, 255, 255, var(--tw-bg-opacity));
+  border: 1px solid red;
 }
-
-

eliis-front-end/src/components/event-calender/Event-Calendar.js

@@ -1,37 +1,40 @@
 import React from 'react';
 import Icon from '@mdi/react';
-import { mdiCheckCircle } from '@mdi/js';
+import { mdiCheck } from '@mdi/js';
 import './Event-Calendar.css';
 
+const typeMenu = [
+  { color: 'Coral', label: 'Education project' },
+  { color: 'Olive-Green', label: 'Theatre/Concert' },
+  { color: 'Rose-Pink', label: 'Meeting' },
+  { color: 'Tomato-Red', label: 'Training' },
+  { color: 'Muted-Pink', label: 'Joint event' },
+  { color: 'Mustard-Yellow', label: 'Class event' },
+  { color: 'Teal', label: 'Learning activity' },
+  { color: 'Sky-Blue', label: 'Other event' },
+  { color: 'White-Red-Outline', label: 'Public holiday' },
+];
+
 const EventCalendarHeader = () => {
   return (
-    <div className="event-calendar-header">
-      <h1>Event Calendar</h1>
-      <div className='type-menu gap-2'>
-        <h2>Types</h2>
+    <div className="flex flex-col gap-2">
+      <h1 className='text-3xl'>Event Calendar</h1>
+      <h3>Types</h3>
         {typeMenu.map((item, index) => (
           <div key={index} className="flex items-center gap-2">
-            <span className={`rounded-full p-1 flex items-center justify-center font-bold w-6 h-6 text-xs bg-${item.color} text-white`}>
-              <Icon path={mdiCheckCircle} size={1} color="currentColor" />
+            <span className={`rounded-full p-1 flex items-center justify-center font-bold w-6 h-6 text-xs bg-${item.color} text-${index === typeMenu.length - 1 ? 'black' : 'white'}`}>
+              <Icon 
+                path={mdiCheck} 
+                size={1} 
+                color="currentColor"
+              />
             </span>
             <span data-testid={item.label}>{item.label}</span>
           </div>
         ))}
-      </div>
     </div>
   );
 }
 
-const typeMenu = [
-  { color: 'primary', label: 'Education project' },
-  { color: 'secondary', label: 'Theatre/Concert' },
-  { color: 'pink', label: 'Meeting' },
-  { color: 'red', label: 'Training' },
-  { color: 'fadedPink', label: 'Joint event' },
-  { color: 'yellow', label: 'Class event' },
-  { color: 'teal', label: 'Learning activity' },
-  { color: 'blue', label: 'Other event' },
-  { color: 'grey-500', label: 'Public holiday' },
-];
 
 export default EventCalendarHeader;