Merge pull request #33 from edx/kshitij/post-ui-updates

feat: Show cohort info in posts [BD-38] [TNL-8694]

src/discussions/posts/post/LikeButton.jsx

@@ -26,7 +26,7 @@ function LikeButton(
   };
 
   return (
-    <div className="d-flex align-items-center align-content-center mr-2.5">
+    <div className="d-flex align-items-center align-content-center mr-4.5">
       <OverlayTrigger
         overlay={(
           <Tooltip>

src/discussions/posts/post/PostFooter.jsx

@@ -9,7 +9,7 @@ import {
   Icon, IconButton, OverlayTrigger, Tooltip,
 } from '@edx/paragon';
 import {
-  Locked, QuestionAnswer, StarFilled, StarOutline,
+  Locked, Person, QuestionAnswer, StarFilled, StarOutline,
 } from '@edx/paragon/icons';
 
 import { updateExistingThread } from '../data/thunks';
@@ -38,7 +38,7 @@ function PostFooter({
         )}
       >
         {preview
-          ? <Icon src={post.following ? StarFilled : StarOutline} />
+          ? <Icon src={post.following ? StarFilled : StarOutline} className="my-0 mr-4.5" />
           : (
             <IconButton
               onClick={() => {
@@ -56,13 +56,27 @@ function PostFooter({
       {preview
         && (
           <>
-            <Icon src={QuestionAnswer} className="mx-2" />
+            <Icon src={QuestionAnswer} className="mx-2 my-0" />
             <span style={{ minWidth: '2rem' }}>
               {post.commentCount}
             </span>
           </>
         )}
       <div className="d-flex flex-fill justify-content-end align-items-center">
+        {!preview
+          && (
+            <span className="text-gray-500 mr-4 d-flex align-items-center">
+              <Icon
+                src={Person}
+                className="mr-1"
+                style={{
+                  width: '1em',
+                  height: '1em',
+                }}
+              />
+              {post.groupName || intl.formatMessage(messages.visibleToAll)}
+            </span>
+          )}
         <span title={post.createdAt} className="text-gray-500">
           {timeago.format(post.createdAt, intl.locale)}
         </span>

src/discussions/posts/post/messages.js

@@ -47,7 +47,11 @@ const messages = defineMessages({
     defaultMessage: 'Post closed for responses and comments',
     description: 'Tooltip/alttext for icon displayed when post is closed',
   },
-
+  visibleToAll: {
+    id: 'discussions.post.cohort.everyone',
+    defaultMessage: 'Everyone',
+    description: 'Cohort visibility indicator for all people',
+  },
 });
 
 export default messages;