From 2e2e8efd0332fbb5afc882282e4beec8da820c23 Mon Sep 17 00:00:00 2001
From: Nikhil Raj <125121367+hustlernik@users.noreply.github.com>
Date: Sun, 29 Dec 2024 16:14:21 +0530
Subject: [PATCH] [REFACTOR] CSS for PostCard.tsx (#3006)

* refactor css for PostCard.tsx

* code coverage issue fix

* css optimise

* Update src/style/app.module.css

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .../UserPortal/PostCard/PostCard.module.css   | 183 -----------------
 .../UserPortal/PostCard/PostCard.tsx          |  18 +-
 src/style/app.module.css                      | 187 ++++++++++++++++++
 3 files changed, 193 insertions(+), 195 deletions(-)
 delete mode 100644 src/components/UserPortal/PostCard/PostCard.module.css

diff --git a/src/components/UserPortal/PostCard/PostCard.module.css b/src/components/UserPortal/PostCard/PostCard.module.css
deleted file mode 100644
index e8edc2d82c..0000000000
--- a/src/components/UserPortal/PostCard/PostCard.module.css
+++ /dev/null
@@ -1,183 +0,0 @@
-.cardStyles {
-  width: 20rem;
-  background-color: white;
-  padding: 0;
-  border: none !important;
-  outline: none !important;
-}
-
-.cardHeader {
-  display: flex;
-  width: 100%;
-  padding-inline: 0;
-  padding-block: 0;
-  flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
-  background-color: white;
-  border-bottom: 1px solid #dddddd;
-}
-
-.creator {
-  display: flex;
-  width: 100%;
-  padding-inline: 1rem;
-  padding-block: 0;
-  flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
-}
-.creator p {
-  margin-bottom: 0;
-  font-weight: 500;
-}
-.creator svg {
-  width: 2rem;
-  height: 2rem;
-}
-
-.customToggle {
-  padding: 0;
-  background: none;
-  border: none;
-  margin-right: 1rem;
-  --bs-btn-active-bg: none;
-}
-.customToggle svg {
-  color: black;
-}
-
-.customToggle::after {
-  content: none;
-}
-.customToggle:hover,
-.customToggle:focus,
-.customToggle:active {
-  background: none;
-  border: none;
-}
-.customToggle svg {
-  color: black;
-}
-
-.cardBody div {
-  padding: 0.5rem;
-}
-
-.imageContainer {
-  max-width: 100%;
-}
-
-.cardTitle {
-  --max-lines: 1;
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--max-lines);
-
-  font-size: 1.3rem !important;
-  font-weight: 600;
-}
-
-.date {
-  font-weight: 600;
-}
-
-.cardText {
-  --max-lines: 2;
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--max-lines);
-
-  padding-top: 0;
-  font-weight: 300;
-  margin-top: 0.7rem !important;
-  text-align: justify;
-}
-
-.viewBtn {
-  display: flex;
-  justify-content: flex-end;
-  margin: 0.5rem;
-}
-.viewBtn Button {
-  padding-inline: 1rem;
-}
-
-.cardActions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 1px;
-  justify-content: flex-end;
-}
-
-.cardActionBtn {
-  background-color: rgba(0, 0, 0, 0);
-  padding: 0;
-  border: none;
-  color: black;
-}
-
-.cardActionBtn:hover {
-  background-color: ghostwhite;
-  border: none;
-  color: black !important;
-}
-
-.creatorNameModal {
-  display: flex;
-  flex-direction: row;
-  gap: 5px;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.modalActions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 1rem;
-  margin: 5px 0px;
-}
-
-.textModal {
-  margin-top: 10px;
-}
-
-.colorPrimary {
-  background: #31bb6b;
-  color: white;
-  cursor: pointer;
-}
-
-.commentContainer {
-  overflow: auto;
-  max-height: 18rem;
-  padding-bottom: 1rem;
-}
-
-.modalFooter {
-  background-color: white;
-  position: absolute;
-  width: calc(100% - 1rem);
-  padding-block: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid #dddddd;
-  bottom: 0;
-  right: 0.5rem;
-  margin-left: 1rem;
-}
-
-.inputArea {
-  border: none;
-  outline: none;
-  background-color: #f1f3f6;
-}
-
-.postImage {
-  height: 300px;
-  object-fit: cover;
-}
diff --git a/src/components/UserPortal/PostCard/PostCard.tsx b/src/components/UserPortal/PostCard/PostCard.tsx
index f8fcdaebca..1ac693b85a 100644
--- a/src/components/UserPortal/PostCard/PostCard.tsx
+++ b/src/components/UserPortal/PostCard/PostCard.tsx
@@ -33,7 +33,7 @@ import {
 import CommentCard from '../CommentCard/CommentCard';
 import { errorHandler } from 'utils/errorHandler';
 import useLocalStorage from 'utils/useLocalstorage';
-import styles from './PostCard.module.css';
+import styles from './../../../style/app.module.css';
 import UserDefault from '../../../assets/images/defaultImg.png';
 
 interface InterfaceCommentCardProps {
@@ -121,13 +121,12 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
             postId: props.id,
           },
         });
-        /* istanbul ignore next */
+
         if (data) {
           setLikes((likes) => likes - 1);
           setIsLikedByUser(false);
         }
       } catch (error: unknown) {
-        /* istanbul ignore next */
         toast.error(error as string);
       }
     } else {
@@ -137,13 +136,12 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
             postId: props.id,
           },
         });
-        /* istanbul ignore next */
+
         if (data) {
           setLikes((likes) => likes + 1);
           setIsLikedByUser(true);
         }
       } catch (error: unknown) {
-        /* istanbul ignore next */
         toast.error(error as string);
       }
     }
@@ -205,7 +203,6 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
         },
       });
 
-      /* istanbul ignore next */
       if (createEventData) {
         setCommentInput('');
         setNumComments((numComments) => numComments + 1);
@@ -228,7 +225,6 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
         setComments([...comments, newComment]);
       }
     } catch (error: unknown) {
-      /* istanbul ignore next */
       errorHandler(t, error);
     }
   };
@@ -247,7 +243,6 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
       toggleEditPost();
       toast.success(tCommon('updatedSuccessfully', { item: 'Post' }) as string);
     } catch (error: unknown) {
-      /* istanbul ignore next */
       errorHandler(t, error);
     }
   };
@@ -264,7 +259,6 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
       props.fetchPosts(); // Refresh the posts
       toast.success('Successfully deleted the Post.');
     } catch (error: unknown) {
-      /* istanbul ignore next */
       errorHandler(t, error);
     }
   };
@@ -272,7 +266,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
   return (
     <Col key={props.id} className="d-flex justify-content-center my-2">
       <Card className={`${styles.cardStyles}`}>
-        <Card.Header className={`${styles.cardHeader}`}>
+        <Card.Header className={`${styles.cardHeaderPostCard}`}>
           <div className={`${styles.creator}`}>
             <AccountCircleIcon className="my-2" />
             <p>{postCreator}</p>
@@ -316,7 +310,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
           }
         />
         <Card.Body className="pb-0">
-          <Card.Title className={`${styles.cardTitle}`}>
+          <Card.Title className={`${styles.cardTitlePostCard}`}>
             {props.title}
           </Card.Title>
           <Card.Subtitle style={{ color: '#808080' }}>
@@ -355,7 +349,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
           </div>
           <div className="w-50 p-2 position-relative">
             <div className="d-flex justify-content-between align-items-center">
-              <div className={`${styles.cardHeader} p-0`}>
+              <div className={`${styles.cardHeaderPostCard} p-0`}>
                 <AccountCircleIcon className="my-2" />
                 <p>{postCreator}</p>
               </div>
diff --git a/src/style/app.module.css b/src/style/app.module.css
index a61f00d97a..43e1e5a08c 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -31,6 +31,7 @@
   --tablerow-bg-color: #eff1f7;
   --row-background: var(--bs-white, white);
   --font-size-header: 16px;
+  --input-area-color: #f1f3f6;
   --date-picker-background: #f2f2f2;
   --grey-bg-color-dark: #707070;
 }
@@ -3680,6 +3681,192 @@ button[data-testid='createPostBtn'] {
   padding-bottom: 2rem;
 }
 
+/* PostCard.tsx */
+
+.cardStyles {
+  width: 100%;
+  max-width: 20rem;
+  background-color: var(--bs-white);
+  padding: 0;
+  border: none !important;
+  outline: none !important;
+}
+
+.cardHeaderPostCard {
+  display: flex;
+  width: 100%;
+  padding-inline: 0;
+  padding-block: 0;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+  background-color: var(--bs-white);
+  border-bottom: 1px solid var(--input-shadow-color);
+}
+
+.creator {
+  display: flex;
+  width: 100%;
+  padding-inline: 1rem;
+  padding-block: 0;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+.creator p {
+  margin-bottom: 0;
+  font-weight: 500;
+}
+.creator svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.customToggle {
+  padding: 0;
+  background: none;
+  border: none;
+  margin-right: 1rem;
+}
+.customToggle svg {
+  color: var(--bs-black);
+}
+
+.customToggle::after {
+  content: none;
+}
+.customToggle:hover,
+.customToggle:focus,
+.customToggle:active {
+  background: none;
+  border: none;
+}
+.cardBodyPostCard div {
+  padding: 0.5rem;
+}
+
+.imageContainerPostCard {
+  max-width: 100%;
+}
+
+.cardTitlePostCard {
+  --max-lines: 1;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--max-lines);
+
+  font-size: 1.3rem !important;
+  font-weight: 600;
+}
+
+.date {
+  font-weight: 600;
+}
+
+.cardText {
+  --max-lines: 2;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--max-lines);
+  padding-top: 0;
+  font-weight: 300;
+  margin-top: 0.7rem !important;
+  text-align: left;
+}
+.viewBtn {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0.5rem;
+}
+.viewBtn Button {
+  padding-inline: 1rem;
+}
+.cardActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1px;
+  justify-content: flex-end;
+}
+
+.cardActionBtn {
+  background-color: rgba(0, 0, 0, 0);
+  padding: 0;
+  border: none;
+  color: black;
+  transition: all 0.2s ease-in-out;
+  border-radius: 4px;
+}
+
+.cardActionBtn:hover,
+.cardActionBtn:focus-visible {
+  background-color: ghostwhite;
+  border: none;
+  color: black !important;
+  outline: 2px solid var(--subtle-blue-grey);
+  outline-offset: 2px;
+}
+
+.cardActionBtn:active {
+  transform: scale(0.95);
+  background-color: var(--grey-bg-color);
+}
+
+.creatorNameModal {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.modalActions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+  margin: 5px 0px;
+}
+
+.textModal {
+  margin-top: 10px;
+}
+
+.colorPrimary {
+  background: var(--subtle-blue-grey);
+  color: var(--bs-white);
+  cursor: pointer;
+}
+
+.commentContainer {
+  overflow: auto;
+  max-height: 18rem;
+  padding-bottom: 1rem;
+}
+
+.modalFooter {
+  background-color: var(--bs-white);
+  width: 100%;
+  padding-block: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--input-shadow-color);
+}
+
+.inputArea {
+  border: none;
+  outline: none;
+  background-color: var(--input-area-color);
+}
+
+.postImage {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+}
+
 /* Events.tsx */
 
 .borderNone {