From e2d895a22a0f8cba14ad597bf6bde26b561aee8f Mon Sep 17 00:00:00 2001
From: gauravsingh94 <gauravrajputsingh94@gmail.com>
Date: Wed, 3 Jan 2024 23:17:29 +0530
Subject: [PATCH] Fixed-Issue-#1266 Bug Report When a new post is added, the
 latest post section in the organization's dashboard becomes distorted Updated

---
 .../OrganizationDashCards/CardItem.module.css | 32 ++++++---
 .../OrganizationDashCards/CardItem.tsx        | 67 ++++++++-----------
 2 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/src/components/OrganizationDashCards/CardItem.module.css b/src/components/OrganizationDashCards/CardItem.module.css
index 05f3ee09f3..c329ab3c1b 100644
--- a/src/components/OrganizationDashCards/CardItem.module.css
+++ b/src/components/OrganizationDashCards/CardItem.module.css
@@ -2,16 +2,20 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 0.75rem 0;
+  background-color: #f1f3f68f;
+  border-radius: 8px;
+  padding: 16px;
+  margin-top: 20px;
 }
 
 .cardItem .iconWrapper {
   position: relative;
-  height: 40px;
-  width: 40px;
+  height: 52px;
+  width: 52px;
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-left: 18px;
 }
 
 .cardItem .iconWrapper .themeOverlay {
@@ -22,7 +26,7 @@
   bottom: 0;
   left: 0;
   opacity: 0.12;
-  border-radius: 50%;
+  border-radius: 4px;
 }
 
 .cardItem .iconWrapper .dangerOverlay {
@@ -33,11 +37,12 @@
   bottom: 0;
   left: 0;
   opacity: 0.12;
-  border-radius: 50%;
+  border-radius: 4px;
 }
 
 .cardItem .title {
-  font-size: 1rem;
+  font-size: 15px;
+  font-weight: 600;
   flex: 1;
   margin-right: 0.3rem;
   word-wrap: break-word;
@@ -48,13 +53,14 @@
 }
 
 .cardItem .time {
-  font-size: 0.9rem;
-  color: var(--bs-secondary);
+  font-size: 0.8rem;
+  font-weight: 300;
+  color: #808080;
 }
 
 .cardItem .creator {
-  font-size: 1rem;
-  color: rgb(33, 208, 21);
+  font-size: 0.8rem;
+  color: black;
 }
 
 .rightCard {
@@ -64,3 +70,9 @@
   justify-content: center;
   flex-direction: column;
 }
+
+.content {
+  display: flex;
+  flex-direction: column;
+  max-width: 60%;
+}
diff --git a/src/components/OrganizationDashCards/CardItem.tsx b/src/components/OrganizationDashCards/CardItem.tsx
index bcaaea68c5..b9f9cb4e7b 100644
--- a/src/components/OrganizationDashCards/CardItem.tsx
+++ b/src/components/OrganizationDashCards/CardItem.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { ReactComponent as EventsIcon } from 'assets/svgs/events.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 UserIcon } from 'assets/svgs/user.svg';
 import dayjs from 'dayjs';
 import styles from './CardItem.module.css';
 import { PersonAddAlt1Rounded } from '@mui/icons-material';
@@ -37,48 +35,37 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
             )
           )}
         </div>
-        <span className={styles.title}>{`${title}`}</span>
+        <div className={styles.content}>
+          <span className={styles.title}>{`${title}`}</span>
 
-        <div className={styles.rightCard}>
-          {creator && (
-            <small className={styles.creator}>
-              <UserIcon
-                title="Post Creator"
-                fill="var(--bs-primary)"
-                width={20}
-                height={20}
-              />{' '}
-              {'  '}
-              <a>
-                {creator.firstName} {creator.lastName}
-              </a>
-            </small>
-          )}
+          <div className={styles.rightCard}>
+            {time && (
+              <span className={styles.time}>
+                <span>Posted on: </span>
+                {dayjs(time).format('D MMM YYYY')}
+              </span>
+            )}
+            {creator && (
+              <small className={styles.creator}>
+                <span>Author: </span>
+                <a>
+                  {creator.firstName} {creator.lastName}
+                </a>
+              </small>
+            )}
 
-          {location && (
-            <span className={styles.location}>
-              <MarkerIcon
-                title="Event Location"
-                fill="var(--bs-primary)"
-                width={20}
-                height={20}
-              />{' '}
-              {location}
-            </span>
-          )}
-          {time && (
-            <span className={styles.time}>
-              {type === 'Event' && (
-                <DateIcon
-                  title="Event Date"
-                  fill="#4cd964"
+            {location && (
+              <span className={styles.location}>
+                <MarkerIcon
+                  title="Event Location"
+                  fill="var(--bs-primary)"
                   width={20}
                   height={20}
-                />
-              )}{' '}
-              {dayjs(time).format('MMM D, YYYY')}
-            </span>
-          )}
+                />{' '}
+                {location}
+              </span>
+            )}
+          </div>
         </div>
       </div>
     </>