Updated the Upcoming Events list UI on the Organization dashboard. (#…

…1366) * Updated the Upcoming Events list UI of the Organization Dashboard. * Updated the logo on the dashboard * Updated the CSS and the logo styling. * Updated the location logo on the Organization Dashboard. * Fixed the Failing tests. * Updated the names of the svgs.
PalisadoesFoundation · Jan 15, 2024 · f5fa13d · f5fa13d
1 parent 642fc3a
commit f5fa13d
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 18 deletions.
diff --git a/src/assets/svgs/cardItemDate.svg b/src/assets/svgs/cardItemDate.svg
diff --git a/src/assets/svgs/cardItemEvent.svg b/src/assets/svgs/cardItemEvent.svg
diff --git a/src/assets/svgs/cardItemLocation.svg b/src/assets/svgs/cardItemLocation.svg
diff --git a/src/components/OrganizationDashCards/CardItem.module.css b/src/components/OrganizationDashCards/CardItem.module.css
@@ -2,7 +2,9 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 0.75rem 0;
+  border: 1px solid var(--bs-gray-200);
+  border-radius: 8px;
+  margin-top: 20px;
 }
 
 .cardItem .iconWrapper {
@@ -39,6 +41,22 @@
 .cardItem .title {
   font-size: 1rem;
   flex: 1;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  margin-left: 3px;
+}
+
+.cardItem .location {
+  font-size: 0.9rem;
+  color: var(--bs-primary);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
 }
 
 .cardItem .time {
@@ -53,8 +71,11 @@
 
 .rightCard {
   display: flex;
-  gap: 5px;
+  gap: 7px;
   min-width: 170px;
   justify-content: center;
   flex-direction: column;
+  margin-left: 10px;
+  overflow-x: hidden;
+  width: 210px;
 }
diff --git a/src/components/OrganizationDashCards/CardItem.test.tsx b/src/components/OrganizationDashCards/CardItem.test.tsx
@@ -9,15 +9,20 @@ describe('Testing the Organization Card', () => {
     const props: InterfaceCardItem = {
       type: 'Event',
       title: 'Event Title',
-      time: '2023-09-03',
+      startdate: '2023-09-13',
+      enddate: '2023-09-14',
       location: 'Event Location',
     };
 
     render(<CardItem {...props} />);
 
     expect(screen.getByText(/Event Title/i)).toBeInTheDocument();
     expect(
-      screen.getByText(dayjs(props.time).format('MMM D, YYYY'))
+      screen.getByText(
+        `${dayjs(props.startdate).format('MMM D, YYYY')} - ${dayjs(
+          props.enddate
+        ).format('MMM D, YYYY')}`
+      )
     ).toBeInTheDocument();
     expect(screen.getByText(/Event Location/i)).toBeInTheDocument();
   });

diff --git a/src/components/OrganizationDashCards/CardItem.tsx b/src/components/OrganizationDashCards/CardItem.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { ReactComponent as EventsIcon } from 'assets/svgs/events.svg';
+import { ReactComponent as EventsIcon } from 'assets/svgs/cardItemEvent.svg';
 import { ReactComponent as PostsIcon } from 'assets/svgs/post.svg';
-import { ReactComponent as MarkerIcon } from 'assets/svgs/location.svg';
-import { ReactComponent as DateIcon } from 'assets/svgs/date.svg';
+import { ReactComponent as MarkerIcon } from 'assets/svgs/cardItemLocation.svg';
+import { ReactComponent as DateIcon } from 'assets/svgs/cardItemDate.svg';
 import { ReactComponent as UserIcon } from 'assets/svgs/user.svg';
 import dayjs from 'dayjs';
 import styles from './CardItem.module.css';
@@ -12,15 +12,17 @@ export interface InterfaceCardItem {
   type: 'Event' | 'Post' | 'MembershipRequest';
   title: string;
   time?: string;
+  startdate?: string;
+  enddate?: string;
   creator?: any;
   location?: string;
 }
 
 const cardItem = (props: InterfaceCardItem): JSX.Element => {
-  const { creator, type, title, time, location } = props;
+  const { creator, type, title, startdate, time, enddate, location } = props;
   return (
     <>
-      <div className={`${styles.cardItem} border-bottom`}>
+      <div className={`${styles.cardItem} border-bottom py-3 pe-5 ps-4`}>
         <div className={`${styles.iconWrapper} me-3`}>
           <div className={styles.themeOverlay} />
           {type == 'Event' ? (
@@ -37,7 +39,6 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
             )
           )}
         </div>
-        <span className={styles.title}>{`${title}`}</span>
 
         <div className={styles.rightCard}>
           {creator && (
@@ -55,23 +56,45 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
             </small>
           )}
 
+          {title && (
+            <span
+              className={`${styles.title} fst-normal fw-semibold --bs-black`}
+            >
+              {title}
+            </span>
+          )}
+
           {location && (
-            <span className={styles.location}>
+            <span className={`${styles.location} fst-normal fw-semibold`}>
               <MarkerIcon
                 title="Event Location"
-                fill="var(--bs-primary)"
-                width={20}
-                height={20}
+                stroke="var(--bs-primary)"
+                width={22}
+                height={22}
               />{' '}
               {location}
             </span>
           )}
-          {time && (
-            <span className={styles.time}>
+          {type == 'Event' && startdate && (
+            <span className={`${styles.time} fst-normal fw-semibold`}>
               {type === 'Event' && (
                 <DateIcon
                   title="Event Date"
-                  fill="#4cd964"
+                  fill="var(--bs-gray-600)"
+                  width={20}
+                  height={20}
+                />
+              )}{' '}
+              {dayjs(startdate).format('MMM D, YYYY')} -{' '}
+              {dayjs(enddate).format('MMM D, YYYY')}
+            </span>
+          )}
+          {type == 'Post' && time && (
+            <span className={`${styles.time} fst-normal fw-semibold`}>
+              {type === 'Post' && (
+                <DateIcon
+                  title="Event Date"
+                  fill="var(--bs-gray-600)"
                   width={20}
                   height={20}
                 />

diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.module.css b/src/screens/OrganizationDashboard/OrganizationDashboard.module.css
@@ -4,6 +4,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 10px;
 }
 
 .cardHeader .cardTitle {

diff --git a/src/screens/OrganizationDashboard/OrganizationDashboard.tsx b/src/screens/OrganizationDashboard/OrganizationDashboard.tsx
@@ -242,7 +242,8 @@ function organizationDashboard(): JSX.Element {
                             <CardItem
                               type="Event"
                               key={event._id}
-                              time={event.startDate}
+                              startdate={event.startDate}
+                              enddate={event.endDate}
                               title={event.title}
                               location={event.location}
                             />