From 97f60d94f6edaede34d4714dc0b1fadcbcddc166 Mon Sep 17 00:00:00 2001
From: "adeel.tajamul" <adeel.tajamul@arbisoft.com>
Date: Wed, 18 May 2022 19:26:02 +0500
Subject: [PATCH] fix: updated post summary

---
 src/components/icons/Help.js                  | 16 ++++++++
 src/components/icons/index.js                 |  1 +
 src/data/constants.js                         |  2 +-
 src/discussions/common/AuthorLabel.jsx        |  4 +-
 src/discussions/common/time-locale.js         | 19 +++++++++
 src/discussions/posts/post/LikeButton.jsx     |  4 +-
 src/discussions/posts/post/PostFooter.jsx     | 22 +++++++---
 .../posts/post/PostFooter.test.jsx            |  8 ++--
 src/discussions/posts/post/PostHeader.jsx     | 40 ++++++++++---------
 src/discussions/posts/post/PostLink.jsx       | 12 +++---
 src/discussions/posts/post/messages.js        |  2 +-
 src/index.scss                                | 16 ++++++++
 12 files changed, 105 insertions(+), 41 deletions(-)
 create mode 100644 src/components/icons/Help.js
 create mode 100644 src/discussions/common/time-locale.js

diff --git a/src/components/icons/Help.js b/src/components/icons/Help.js
new file mode 100644
index 00000000..72fcd68b
--- /dev/null
+++ b/src/components/icons/Help.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { _extends } from './common';
+
+export default function Help(props) {
+  return /* #__PURE__ */React.createElement('svg', _extends({
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+  }, props), /* #__PURE__ */React.createElement('path', {
+    d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z',
+    fill: '#2D494E',
+  }));
+}
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
index f2e74acb..6948c86c 100644
--- a/src/components/icons/index.js
+++ b/src/components/icons/index.js
@@ -1,3 +1,4 @@
+export { default as Help } from './Help';
 export { default as QuestionAnswer } from './QuestionAnswer';
 export { default as QuestionAnswerOutline } from './QuestionAnswerOutline';
 export { default as StarFilled } from './StarFilled';
diff --git a/src/data/constants.js b/src/data/constants.js
index e3646279..3869b2b6 100644
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -74,7 +74,7 @@ export const RequestStatus = {
  * @enum {string}
  */
 export const AvatarBorderAndLabelColors = {
-  Staff: 'warning-700',
+  Staff: 'staff-color',
   'Community TA': 'success-700',
 };
 
diff --git a/src/discussions/common/AuthorLabel.jsx b/src/discussions/common/AuthorLabel.jsx
index 7f08bfa0..157a86bd 100644
--- a/src/discussions/common/AuthorLabel.jsx
+++ b/src/discussions/common/AuthorLabel.jsx
@@ -28,7 +28,7 @@ function AuthorLabel({
   }
   const labelContents = (
     <>
-      <span className="mr-1">{author}</span>
+      <span className="mr-1 font-weight-normal font-size-14">{author}</span>
       {icon && (
         <Icon
           style={{
@@ -39,7 +39,7 @@ function AuthorLabel({
         />
       )}
       {authorLabelMessage && (
-        <span className="mr-3 ml-1">
+        <span className="mr-3 ml-1 font-weight-normal font-size-14">
           {authorLabelMessage}
         </span>
       )}
diff --git a/src/discussions/common/time-locale.js b/src/discussions/common/time-locale.js
new file mode 100644
index 00000000..4e955aaa
--- /dev/null
+++ b/src/discussions/common/time-locale.js
@@ -0,0 +1,19 @@
+// eslint-disable-next-line no-unused-vars
+export default function timeLocale(number, index, totalSec) {
+  return [
+    ['just now', 'right now'],
+    ['%ss', 'in %s seconds'],
+    ['1m', 'in 1 minute'],
+    ['%sm', 'in %s minutes'],
+    ['1h', 'in 1 hour'],
+    ['%sh', 'in %s hours'],
+    ['1d', 'in 1 day'],
+    ['%sd', 'in %s days'],
+    ['1w', 'in 1 week'],
+    ['%sw', 'in %s weeks'],
+    ['1M', 'in 1 month'],
+    ['%sM', 'in %s months'],
+    ['1y', 'in 1 year'],
+    ['%sy', 'in %s years'],
+  ][index];
+}
diff --git a/src/discussions/posts/post/LikeButton.jsx b/src/discussions/posts/post/LikeButton.jsx
index 9cb0066d..14d54582 100644
--- a/src/discussions/posts/post/LikeButton.jsx
+++ b/src/discussions/posts/post/LikeButton.jsx
@@ -24,7 +24,7 @@ function LikeButton({
   };
 
   return (
-    <div className="d-flex align-items-center align-content-center mr-4.5">
+    <div className="d-flex align-items-center align-content-center mr-4">
       <OverlayTrigger
         overlay={(
           <Tooltip id={`like-${count}-tooltip`}>
@@ -34,7 +34,7 @@ function LikeButton({
       >
         <IconButton
           onClick={handleClick}
-          className="p-3 mr-2 mt-1"
+          className="p-3 mr-1.5"
           alt="Like"
           iconAs={Icon}
           size="inline"
diff --git a/src/discussions/posts/post/PostFooter.jsx b/src/discussions/posts/post/PostFooter.jsx
index aa7d11c8..237c8b68 100644
--- a/src/discussions/posts/post/PostFooter.jsx
+++ b/src/discussions/posts/post/PostFooter.jsx
@@ -18,6 +18,7 @@ import {
   StarFilled,
   StarOutline,
 } from '../../../components/icons';
+import timeLocale from '../../common/time-locale';
 import { updateExistingThread } from '../data/thunks';
 import LikeButton from './LikeButton';
 import messages from './messages';
@@ -29,6 +30,7 @@ function PostFooter({
   preview,
 }) {
   const dispatch = useDispatch();
+  timeago.register('time-locale', timeLocale);
   return (
     <div className="d-flex align-items-center">
       <LikeButton
@@ -51,15 +53,14 @@ function PostFooter({
           alt="Follow"
           iconAs={Icon}
           size="inline"
-          className="mx-2.5 my-0 mt-1.5"
           src={post.following ? StarFilled : StarOutline}
         />
       </OverlayTrigger>
       {preview && post.commentCount > 1
         && (
           <>
-            <Icon src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline} className="mx-2 my-0 mt-2" />
-            <span style={{ minWidth: '2rem' }}>
+            <Icon src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline} className="ml-4 mr-2 my-0 mt-1.5" />
+            <span style={{ minWidth: '1rem' }}>
               {post.commentCount}
             </span>
           </>
@@ -82,19 +83,28 @@ function PostFooter({
                   <Icon
                     data-testid="cohort-icon"
                     src={People}
-                    className="text-gray-500"
                     style={{
                       width: '1em',
                       height: '1em',
+                      color: 'black',
                     }}
                   />
                 </OverlayTrigger>
-                <span className="text-gray-500 mx-1">·</span>
+                <span
+                  className="text-light-700 mx-1.5 ml-1.5 font-weight-500"
+                  style={{
+                    height: '1.5rem',
+                    width: '0.31rem',
+                    fontSize: '16px',
+                  }}
+                >
+                  ·
+                </span>
               </>
             ) : null
         }
         <span title={post.createdAt} className="text-gray-500">
-          {timeago.format(post.createdAt, intl.locale)}
+          {timeago.format(post.createdAt, 'time-locale')}
         </span>
         {!preview && post.closed
           && (
diff --git a/src/discussions/posts/post/PostFooter.test.jsx b/src/discussions/posts/post/PostFooter.test.jsx
index 646b2f9d..27af98bd 100644
--- a/src/discussions/posts/post/PostFooter.test.jsx
+++ b/src/discussions/posts/post/PostFooter.test.jsx
@@ -62,19 +62,19 @@ describe('PostFooter', () => {
 
   it("shows 'x new' badge for new comments", () => {
     renderComponent(mockPost);
-    expect(screen.getByText('2 new')).toBeTruthy();
+    expect(screen.getByText('2 New')).toBeTruthy();
   });
 
   it("doesn't have 'new' badge when there are 0 new comments", () => {
     renderComponent({ ...mockPost, unreadCommentCount: 0 });
-    expect(screen.queryByText('2 new')).toBeFalsy();
-    expect(screen.queryByText('0 new')).toBeFalsy();
+    expect(screen.queryByText('2 New')).toBeFalsy();
+    expect(screen.queryByText('0 New')).toBeFalsy();
   });
 
   it("doesn't has 'new' badge when the new-unread item is the post itself", () => {
     // commentCount === 1 means it's just the post without any further comments
     renderComponent({ ...mockPost, unreadCommentCount: 1, commentCount: 1 });
-    expect(screen.queryByText('1 new')).toBeFalsy();
+    expect(screen.queryByText('1 New')).toBeFalsy();
   });
 
   it('has the cohort icon only when group information is present', () => {
diff --git a/src/discussions/posts/post/PostHeader.jsx b/src/discussions/posts/post/PostHeader.jsx
index 0d466e51..089089e1 100644
--- a/src/discussions/posts/post/PostHeader.jsx
+++ b/src/discussions/posts/post/PostHeader.jsx
@@ -5,8 +5,8 @@ import { useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Avatar, Badge, Icon } from '@edx/paragon';
-import { Help } from '@edx/paragon/icons';
 
+import { Help } from '../../../components/icons';
 import { AvatarBorderAndLabelColors, ThreadType } from '../../../data/constants';
 import { ActionsDropdown, AuthorLabel } from '../../common';
 import { selectAuthorAvatars } from '../data/selectors';
@@ -17,24 +17,26 @@ export function PostAvatar({ post, authorLabel, fromPostLink }) {
   const authorAvatars = useSelector(selectAuthorAvatars(post.author));
   const borderColor = AvatarBorderAndLabelColors[authorLabel];
   return (
-    <div className="mr-3">
-      {post.type === ThreadType.QUESTION && (
-      <Icon
-        src={Help}
-        className="position-absolute bg-white rounded-circle"
-        style={{
-          width: '1.75rem',
-          height: '1.75rem',
-        }}
-      />
-      )}
-      <Avatar
-        size={fromPostLink ? 'sm' : 'md'}
-        className={`${borderColor && `border-${borderColor}`} ${post.type === ThreadType.QUESTION ? 'mt-2.5 ml-2.5' : ''}`}
-        style={{ borderWidth: '2px' }}
-        alt={post.author}
-        src={authorAvatars?.imageUrlSmall}
-      />
+    <div style={{ width: '3.75rem' }} className="d-flex pr-2.5">
+      <div className="ml-auto mr-auto">
+        {post.type === ThreadType.QUESTION && (
+        <Icon
+          src={Help}
+          className="position-absolute bg-white rounded-circle"
+          style={{
+            width: '1.75rem',
+            height: '1.75rem',
+          }}
+        />
+        )}
+        <Avatar
+          size={fromPostLink ? 'sm' : 'md'}
+          className={`${borderColor && `border-${borderColor}`} ${post.type === ThreadType.QUESTION ? 'mt-2.5 ml-2.5' : ''}`}
+          style={{ borderWidth: '2px', height: '1.5rem', width: '1.5rem' }}
+          alt={post.author}
+          src={authorAvatars?.imageUrlSmall}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/discussions/posts/post/PostLink.jsx b/src/discussions/posts/post/PostLink.jsx
index 1ed1cd43..58b91f5a 100644
--- a/src/discussions/posts/post/PostLink.jsx
+++ b/src/discussions/posts/post/PostLink.jsx
@@ -40,7 +40,7 @@ function PostLink({
     <Link
       className="discussion-post list-group-item list-group-item-action p-0 text-decoration-none text-gray-900 mw-100"
       to={linkUrl}
-      style={{ lineHeight: '21px' }}
+      style={{ lineHeight: '21px', height: '7.5rem' }}
     >
       {post.pinned && (
         <div className="d-flex flex-fill justify-content-end mr-4 text-light-500 p-0">
@@ -48,7 +48,7 @@ function PostLink({
         </div>
       )}
       <div
-        className={classNames('d-flex flex-row flex-fill mw-100 p-2.5 border-primary-500', { 'bg-light-300': post.read })}
+        className={classNames('d-flex flex-row flex-fill mw-100 p-2.5 pr-4 border-primary-500', { 'bg-light-300': post.read })}
         style={post.id === postId ? {
           borderRightWidth: '4px',
           borderRightStyle: 'solid',
@@ -58,13 +58,13 @@ function PostLink({
         <div className="d-flex flex-column" style={{ width: 'calc(100% - 4rem)' }}>
           <div className="align-items-center d-flex flex-row flex-fill">
             <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
-              <div className="d-flex align-items-center pb-0 mb-0 flex-fill" style={{ fontWeight: 500 }}>
-                <div className="flex-fill text-truncate">
+              <div className="d-flex align-items-center pb-0 mb-0 flex-fill font-weight-500">
+                <div className="flex-fill text-truncate text-primary-500 font-weight-500 font-size-14">
                   {post.title}
                 </div>
                 {showAnsweredBadge
                   && (
-                    <div className="ml-auto mr-2">
+                    <div className="ml-auto">
                       <Badge variant="success">{intl.formatMessage(messages.answered)}</Badge>
                     </div>
                   )}
@@ -82,7 +82,7 @@ function PostLink({
               />
             </div>
           </div>
-          <div className="text-truncate" style={{ 'max-height': '1.6em' }}>
+          <div className="text-truncate text-primary-500 font-weight-normal font-size-14" style={{ 'max-height': '1.6em' }}>
             <MathJax math={post.rawBody} />
           </div>
           <PostFooter post={post} preview intl={intl} />
diff --git a/src/discussions/posts/post/messages.js b/src/discussions/posts/post/messages.js
index e3a4edf5..adfdbb12 100644
--- a/src/discussions/posts/post/messages.js
+++ b/src/discussions/posts/post/messages.js
@@ -98,7 +98,7 @@ const messages = defineMessages({
   },
   newLabel: {
     id: 'discussions.post.label.new',
-    defaultMessage: '{count} new',
+    defaultMessage: '{count} New',
     description: 'Label shown on the badge indicating new comments/posts like "3 new"',
   },
   editedBy: {
diff --git a/src/index.scss b/src/index.scss
index 973532fb..a6746e91 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -13,3 +13,19 @@ $fa-font-path: "~font-awesome/fonts";
     max-width: 100%;
   }
 }
+
+.text-staff-color {
+  color: #998200;
+}
+
+.border-staff-color {
+  border-color: #998200;
+}
+
+.font-size-14 {
+  font-size: 14px;
+}
+
+.font-weight-500 {
+  font-weight: 500;
+}
\ No newline at end of file