New Event Calendars for Admin and User Portals with working functiona…

…lities (PalisadoesFoundation#1867) * added * minor * fixed tests * minor * .. * minor * patches * ..
akhilender-bongirwar · Apr 4, 2024 · fa0dbc2 · fa0dbc2
1 parent 9250541
commit fa0dbc2
Show file tree

Hide file tree

Showing 13 changed files with 423 additions and 210 deletions.
diff --git a/public/index.html b/public/index.html
@@ -7,6 +7,17 @@
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+      referrerpolicy="no-referrer"
+    />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
     <title>Talawa Admin</title>
   </head>

diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css
@@ -2,6 +2,9 @@
   font-family: sans-serif;
   font-size: 1.2rem;
   margin-bottom: 20px;
+  background: rgb(255, 255, 255);
+  border-radius: 10px;
+  padding: 5px;
 }
 .calendar__header {
   display: flex;
@@ -16,7 +19,16 @@
 .calendar__header_month {
   margin: 0.5rem;
   color: #707070;
-  font-weight: bold;
+  font-weight: 800;
+  font-size: 55px;
+  display: flex;
+  gap: 23px;
+  flex-direction: row;
+}
+.calendar__header_month div {
+  font-weight: 400;
+  color: black;
+  font-family: Outfit;
 }
 .space {
   flex: 1;
@@ -25,15 +37,19 @@
   justify-content: space-around;
 }
 .button {
+  border-radius: 100px;
   color: #707070;
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgba(194, 247, 182, 0);
   font-weight: bold;
   border: 0px;
+  font-size: 20px;
 }
+
 .calendar__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   background-color: black;
+  font-family: Outfit;
   height: 60px;
 }
 .calendar__scroll {
@@ -44,8 +60,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #fff;
-  background-color: #31bb6b;
+  background-color: white;
   font-weight: 600;
 }
 .calendar__days {
@@ -98,16 +113,21 @@
   background-color: #ffffff;
   padding-left: 0.3rem;
   padding-right: 0.3rem;
+  border-radius: 10px;
+  margin: 5px;
   background-color: white;
   border: 1px solid #8d8d8d55;
   color: #4b4b4b;
   font-weight: 600;
-  height: 8rem;
+  height: 9rem;
   position: relative;
 }
+.day_weekends {
+  background-color: rgba(49, 187, 107, 0.2);
+}
 .day__outside {
-  background-color: #eeeded;
-  color: #898989;
+  background-color: white;
+  color: #89898996;
 }
 .day__selected {
   background-color: #007bff;
@@ -120,7 +140,7 @@
   color: #31bb6b;
 }
 .day__events {
-  background-color: #def6e1;
+  background-color: white;
 }
 .btn__today {
   transition: ease-in all 200ms;
@@ -181,23 +201,19 @@
   padding-top: 10px;
   padding-bottom: 10px;
 }
-/* .selectType {
-  padding: 16px 10px 16px 10px;
-  border-radius: 10px;
-} */
 .btn__more {
   border: 0px;
   font-size: 14px;
   background-color: initial;
-  color: #ffffff;
+  color: #262727;
   font-weight: 600;
   transition: all 200ms;
   position: relative;
   display: block;
   margin: 2px;
 }
 .btn__more:hover {
-  color: #3ce080;
+  color: #454645;
 }
 
 .expand_event_list {
@@ -249,3 +265,78 @@
     font-size: 12px;
   }
 }
+
+.calendar__infocards {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 35px;
+}
+.card__holidays {
+  background-color: rgba(246, 242, 229, 1);
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  font-family: Outfit;
+  border-radius: 20px;
+  padding: 30px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.month__holidays {
+  display: flex;
+  flex-direction: column;
+}
+.holiday__data {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+.holiday__date {
+  font-size: 20px;
+  color: rgba(234, 183, 86, 1);
+  font-weight: 700;
+}
+.holiday__name {
+  font-size: 20px;
+  margin-left: 35px;
+}
+.card__events {
+  background-color: rgba(244, 244, 244, 1);
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  font-family: Outfit;
+  border-radius: 20px;
+  padding: 30px;
+}
+.innercard__events {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+.innercard__events p {
+  margin-bottom: 0;
+}
+.orgEvent__color {
+  height: 15px;
+  width: 40px;
+  background-color: rgba(82, 172, 255, 0.5);
+  border-radius: 10px;
+}
+.holidays__color {
+  height: 15px;
+  width: 40px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 10px;
+}
+
+.userEvents__color {
+  height: 15px;
+  width: 40px;
+  background: rgba(146, 200, 141, 0.5);
+  border-radius: 10px;
+}
diff --git a/src/components/EventCalendar/EventCalendar.test.tsx b/src/components/EventCalendar/EventCalendar.test.tsx
@@ -13,6 +13,7 @@ import {
 import i18nForTest from 'utils/i18nForTest';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import styles from './EventCalendar.module.css';
+import { weekdays } from './constants';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 const eventData = [
@@ -91,8 +92,8 @@ const link = new StaticMockLink(MOCKS, true);
 
 describe('Calendar', () => {
   it('renders weekdays', () => {
-    render(<Calendar eventData={eventData} />);
-    const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    render(<Calendar eventData={eventData} viewType={ViewType.MONTH} />);
+
     weekdays.forEach((weekday) => {
       expect(screen.getByText(weekday)).toBeInTheDocument();
     });
@@ -125,17 +126,10 @@ describe('Calendar', () => {
       month: 'long',
     });
     const currentYear = new Date().getFullYear();
-    const expectedText = `${new Date().getDate()} ${currentMonth} ${currentYear}`;
+    const expectedText = ` ${currentYear} ${currentMonth}`;
     expect(currentDateElement.textContent).toContain(expectedText);
   });
 
-  it('should highlight the selected date when clicked', () => {
-    const { getByText } = render(<Calendar eventData={eventData} />);
-    const selectedDate = getByText('15');
-    fireEvent.click(selectedDate);
-    expect(selectedDate).toHaveClass(styles.day);
-  });
-
   it('Should show prev and next month on clicking < & > buttons', () => {
     //testing previous month button
     render(