fix: UI adjustments to post summary and post details (#110)

* fix: UI adjustments to post summary and details

src/data/constants.js

@@ -68,6 +68,16 @@ export const RequestStatus = {
   DENIED: 'denied',
 };
 
+/**
+ * Enum for author label and avatar border color classes.
+ * @readonly
+ * @enum {string}
+ */
+export const AvatarBorderAndLabelColors = {
+  Staff: 'warning-700',
+  'Community TA': 'success-700',
+};
+
 /**
  * Enum for thread ordering.
  * @readonly

src/discussions/comments/comment/CommentHeader.jsx

@@ -7,7 +7,7 @@ import { injectIntl } from '@edx/frontend-platform/i18n';
 import { Avatar, Icon } from '@edx/paragon';
 import { CheckCircle, Verified } from '@edx/paragon/icons';
 
-import { ThreadType } from '../../../data/constants';
+import { AvatarBorderAndLabelColors, ThreadType } from '../../../data/constants';
 import { AuthorLabel } from '../../common';
 import ActionsDropdown from '../../common/ActionsDropdown';
 import { selectAuthorAvatars } from '../../posts/data/selectors';
@@ -19,11 +19,17 @@ function CommentHeader({
   actionHandlers,
 }) {
   const authorAvatars = useSelector(selectAuthorAvatars(comment.author));
+  const colorClass = AvatarBorderAndLabelColors[comment.authorLabel];
   return (
     <div className="d-flex flex-row justify-content-between">
       <div className="align-items-center d-flex flex-row">
-        <Avatar className="m-2" alt={comment.author} src={authorAvatars?.imageUrlSmall} />
-        <AuthorLabel author={comment.author} authorLabel={comment.authorLabel} />
+        <Avatar
+          className={`m-2 ${colorClass && `border-${colorClass}`}`}
+          style={{ borderWidth: '2px' }}
+          alt={comment.author}
+          src={authorAvatars?.imageUrlSmall}
+        />
+        <AuthorLabel author={comment.author} authorLabel={comment.authorLabel} labelColor={colorClass && `text-${colorClass}`} />
       </div>
       <div className="d-flex align-items-center">
         {comment.endorsed && (postType === 'question'

src/discussions/comments/comment/Reply.jsx

@@ -7,7 +7,7 @@ import * as timeago from 'timeago.js';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Avatar, useToggle } from '@edx/paragon';
 
-import { ContentActions } from '../../../data/constants';
+import { AvatarBorderAndLabelColors, ContentActions } from '../../../data/constants';
 import {
   ActionsDropdown, AlertBanner, AuthorLabel, DeleteConfirmation,
 } from '../../common';
@@ -32,6 +32,7 @@ function Reply({
     [ContentActions.REPORT]: () => dispatch(editComment(reply.id, { flagged: !reply.abuseFlagged })),
   };
   const authorAvatars = useSelector(selectAuthorAvatars(reply.author));
+  const colorClass = AvatarBorderAndLabelColors[reply.authorLabel];
   return (
     <div className="d-flex my-2 flex-column" data-testid={`reply-${reply.id}`}>
       <DeleteConfirmation
@@ -50,11 +51,16 @@ function Reply({
       <div className="d-flex">
 
         <div className="d-flex m-3">
-          <Avatar alt={reply.author} src={authorAvatars?.imageUrlSmall} />
+          <Avatar
+            className={`m-2 ${colorClass && `border-${colorClass}`}`}
+            style={{ borderWidth: '2px' }}
+            alt={reply.author}
+            src={authorAvatars?.imageUrlSmall}
+          />
         </div>
         <div className="rounded bg-light-300 px-4 py-2 flex-fill">
           <div className="d-flex flex-row justify-content-between align-items-center">
-            <AuthorLabel author={reply.author} authorLabel={reply.authorLabel} />
+            <AuthorLabel author={reply.author} authorLabel={reply.authorLabel} labelColor={colorClass && `text-${colorClass}`} />
             <ActionsDropdown
               commentOrPost={{
                 ...reply,

src/discussions/common/AuthorLabel.jsx

@@ -14,6 +14,7 @@ function AuthorLabel({
   author,
   authorLabel,
   linkToProfile,
+  labelColor,
 }) {
   let icon = null;
   let authorLabelMessage = null;
@@ -44,7 +45,7 @@ function AuthorLabel({
       )}
     </>
   );
-  const className = classNames('d-flex align-items-center');
+  const className = classNames('d-flex align-items-center', labelColor);
   return linkToProfile
     ? React.createElement('a', { href: '#nowhere', className }, labelContents)
     : React.createElement('div', { className }, labelContents);
@@ -55,11 +56,13 @@ AuthorLabel.propTypes = {
   author: PropTypes.string.isRequired,
   authorLabel: PropTypes.string,
   linkToProfile: PropTypes.bool,
+  labelColor: PropTypes.string,
 };
 
 AuthorLabel.defaultProps = {
   linkToProfile: false,
   authorLabel: null,
+  labelColor: '',
 };
 
 export default injectIntl(AuthorLabel);

src/discussions/posts/post/LikeButton.jsx

@@ -36,7 +36,7 @@ function LikeButton(
       >
         <IconButton
           onClick={handleClick}
-          className="p-0 mr-2"
+          className="p-3 mr-2"
           alt="Like"
           iconAs={Icon}
           size="inline"

src/discussions/posts/post/PostFooter.jsx

@@ -24,7 +24,7 @@ function PostFooter({
 }) {
   const dispatch = useDispatch();
   return (
-    <div className="d-flex align-items-center">
+    <div className="d-flex align-items-center mt-3">
       <LikeButton
         count={post.voteCount}
         onClick={() => dispatch(updateExistingThread(post.id, { voted: !post.voted }))}

src/discussions/posts/post/PostHeader.jsx

@@ -7,16 +7,17 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Avatar, Badge, Icon } from '@edx/paragon';
 import { Help } from '@edx/paragon/icons';
 
-import { ThreadType } from '../../../data/constants';
+import { AvatarBorderAndLabelColors, ThreadType } from '../../../data/constants';
 import { ActionsDropdown, AuthorLabel } from '../../common';
 import { selectAuthorAvatars } from '../data/selectors';
 import messages from './messages';
 import { postShape } from './proptypes';
 
-export function PostAvatar({ post }) {
+export function PostAvatar({ post, authorLabel, fromPostLink }) {
   const authorAvatars = useSelector(selectAuthorAvatars(post.author));
+  const borderColor = AvatarBorderAndLabelColors[authorLabel];
   return (
-    <div className="mr-2">
+    <div className="mr-3">
       {post.type === ThreadType.QUESTION && (
       <Icon
         src={Help}
@@ -28,8 +29,9 @@ export function PostAvatar({ post }) {
       />
       )}
       <Avatar
-        size={post.type === ThreadType.QUESTION ? 'sm' : 'md'}
-        className={post.type === ThreadType.QUESTION ? 'mt-2.5 ml-2.5' : ''}
+        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}
       />
@@ -39,6 +41,13 @@ export function PostAvatar({ post }) {
 
 PostAvatar.propTypes = {
   post: postShape.isRequired,
+  authorLabel: PropTypes.string,
+  fromPostLink: PropTypes.bool,
+};
+
+PostAvatar.defaultProps = {
+  authorLabel: null,
+  fromPostLink: false,
 };
 
 function PostHeader({
@@ -48,10 +57,10 @@ function PostHeader({
   actionHandlers,
 }) {
   const showAnsweredBadge = preview && post.hasEndorsed && post.type === ThreadType.QUESTION;
-
+  const authorLabelColor = AvatarBorderAndLabelColors[post.authorLabel];
   return (
     <div className="d-flex flex-fill mw-100">
-      <PostAvatar post={post} />
+      <PostAvatar post={post} authorLabel={post.authorLabel} />
       <div className="align-items-center d-flex flex-row" style={{ width: 'calc(100% - 8rem)' }}>
         <div className="d-flex flex-column justify-content-start mw-100">
           {preview
@@ -65,7 +74,11 @@ function PostHeader({
               </div>
             )
             : <h3 className="mb-0">{post.title}</h3>}
-          <AuthorLabel author={post.author || intl.formatMessage(messages.anonymous)} authorLabel={post.authorLabel} />
+          <AuthorLabel
+            author={post.author || intl.formatMessage(messages.anonymous)}
+            authorLabel={post.authorLabel}
+            labelColor={authorLabelColor && `text-${authorLabelColor}`}
+          />
         </div>
       </div>
       {!preview

src/discussions/posts/post/PostLink.jsx

@@ -7,7 +7,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Badge, Icon } from '@edx/paragon';
 import { Bookmark } from '@edx/paragon/icons';
 
-import { Routes, ThreadType } from '../../../data/constants';
+import { AvatarBorderAndLabelColors, Routes, ThreadType } from '../../../data/constants';
 import AuthorLabel from '../../common/AuthorLabel';
 import { DiscussionContext } from '../../common/context';
 import { discussionsPath } from '../../utils';
@@ -32,6 +32,7 @@ function PostLink({
     postId: post.id,
   });
   const showAnsweredBadge = post.hasEndorsed && post.type === ThreadType.QUESTION;
+  const authorLabelColor = AvatarBorderAndLabelColors[post.authorLabel];
   return (
     <Link
       className="discussion-post list-group-item list-group-item-action p-0 text-decoration-none text-gray-900 mw-100"
@@ -49,11 +50,11 @@ function PostLink({
           borderRightStyle: 'solid',
         } : null}
       >
-        <PostAvatar post={post} />
+        <PostAvatar post={post} authorLabel={post.authorLabel} fromPostLink />
         <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="h4 d-flex align-items-center pb-0 mb-0 flex-fill">
+              <div className="d-flex align-items-center pb-0 mb-0 flex-fill" style={{ fontWeight: 500 }}>
                 <div className="flex-fill text-truncate">
                   {post.title}
                 </div>
@@ -73,6 +74,7 @@ function PostLink({
               <AuthorLabel
                 author={post.author || intl.formatMessage(messages.anonymous)}
                 authorLabel={post.authorLabel}
+                labelColor={authorLabelColor && `text-${authorLabelColor}`}
               />
             </div>
           </div>