Redesign of Posts screen for talawa user portal.

public/locales/en.json

@@ -885,12 +885,21 @@
     "noMembers": "No Members to show"
   },
   "postCard": {
+    "edit": "Edit",
+    "delete": "Delete",
     "likes": "Likes",
     "comments": "Comments"
   },
   "home": {
+    "posts": "Posts",
+    "post": "Post",
+    "title": "Title",
+    "textArea": "Something on your mind?",
     "feed": "Feed",
-    "pinnedPosts": "View Pinned Posts",
+    "loading": "Loading",
+    "pinnedPosts": "Pinned Posts",
+    "yourFeed": "Your Feed",
+    "nothingToShowHere": "Nothing to show here",
     "somethingOnYourMind": "Something on your mind?",
     "addPost": "Add Post",
     "startPost": "Start a post",

src/components/UserPortal/CommentCard/CommentCard.module.css

@@ -1,13 +1,11 @@
 .mainContainer {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  padding: 10px;
+  width: auto;
+  overflow: hidden;
   background-color: white;
+  margin-top: 1rem;
+  padding: 0.5rem;
+  border: 1px solid #dddddd;
   border-radius: 10px;
-  box-shadow: 2px 2px 8px 0px #c8c8c8;
-  overflow: hidden;
-  margin-top: 10px;
 }
 
 .personDetails {

src/components/UserPortal/CommentCard/CommentCard.tsx

@@ -8,6 +8,7 @@ import { toast } from 'react-toastify';
 import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
 import ThumbUpOffAltIcon from '@mui/icons-material/ThumbUpOffAlt';
 import useLocalStorage from 'utils/useLocalstorage';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 
 interface InterfaceCommentCardProps {
   id: string;
@@ -80,7 +81,10 @@ function commentCard(props: InterfaceCommentCardProps): JSX.Element {
   return (
     <div className={styles.mainContainer}>
       <div className={styles.personDetails}>
-        <b>{creatorName}</b>
+        <div className="d-flex align-items-center gap-2">
+          <AccountCircleIcon className="my-2" />
+          <b>{creatorName}</b>
+        </div>
         <span>{props.text}</span>
         <div className={`${styles.cardActions}`}>
           <Button

src/components/UserPortal/PostCard/PostCard.module.css

@@ -1,31 +1,131 @@
-.cardActions {
+.cardStyles {
+  height: 28rem;
+  max-height: 30rem;
+  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;
-  gap: 1px;
+  background-color: white;
+  border-bottom: 1px solid #dddddd;
 }
 
-.cardActionBtn {
-  background-color: rgba(0, 0, 0, 0);
+.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;
 }
 
-.cardActionBtn:hover {
-  background-color: ghostwhite;
+.customToggle::after {
+  content: none;
+}
+.customToggle:hover,
+.customToggle:focus,
+.customToggle:active {
+  background: none;
   border: none;
-  color: black !important;
+}
+.customToggle svg {
+  color: black;
+}
+
+.cardBody div {
+  padding: 0.5rem;
 }
 
 .imageContainer {
   max-width: 100%;
 }
 
-.cardHeader {
+.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;
-  gap: 10px;
   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 {
@@ -40,7 +140,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 1px;
+  gap: 1rem;
   margin: 5px 0px;
 }
 
@@ -53,3 +153,28 @@
   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;
+}