From f9ca375853ad0a3e4de26ee051a8fd8e236bf920 Mon Sep 17 00:00:00 2001
From: ayesha waris <73840786+ayeshoali@users.noreply.github.com>
Date: Thu, 9 Feb 2023 16:08:22 +0500
Subject: [PATCH] style:  in-context discussions style updates (#426)

* style: change size of postactionbar in incontext discussions

* style: change postfilterbar text color and style

* style: change side bar icon sizes accoording to figma

* style: change margin for post aacording to figmaa

* style: change add a post style aaccording to figma

* refactor: remove unnecessary spaces

* refactor: use lineheight24 aand fontstyle class

---------

Co-authored-by: Mehak Nasir <67791278+mehaknasir@users.noreply.github.com>
---
 src/components/PostPreviewPane.jsx            |  5 +-
 src/discussions/comments/CommentsView.jsx     | 24 +++-------
 src/discussions/comments/comment/Comment.jsx  | 11 ++---
 src/discussions/comments/comment/Reply.jsx    |  4 +-
 src/discussions/common/AlertBanner.jsx        |  8 ++--
 src/discussions/common/AuthorLabel.jsx        |  6 +--
 src/discussions/common/HoverCard.jsx          |  2 +-
 .../discussions-home/DiscussionsHome.jsx      |  4 +-
 src/discussions/learners/LearnerPostsView.jsx |  2 +-
 .../learners/learner/LearnerCard.jsx          |  2 +-
 .../posts/post-actions-bar/PostActionsBar.jsx | 26 +++++-----
 .../posts/post-editor/PostEditor.jsx          | 40 ++++++++--------
 .../posts/post-filter-bar/PostFilterBar.jsx   |  3 +-
 src/discussions/posts/post/LikeButton.jsx     |  2 +-
 src/discussions/posts/post/Post.jsx           |  4 +-
 src/discussions/posts/post/PostHeader.jsx     | 12 ++++-
 src/discussions/posts/post/PostLink.jsx       | 17 +++----
 .../posts/post/PostSummaryFooter.jsx          | 47 +++++--------------
 src/index.scss                                | 41 +++++++++++++++-
 19 files changed, 136 insertions(+), 124 deletions(-)

diff --git a/src/components/PostPreviewPane.jsx b/src/components/PostPreviewPane.jsx
index 5126e65d..dba69d84 100644
--- a/src/components/PostPreviewPane.jsx
+++ b/src/components/PostPreviewPane.jsx
@@ -33,13 +33,12 @@ function PostPreviewPane({
         </div>
       )}
       <div className="d-flex justify-content-end">
-        {!showPreviewPane
-        && (
+        {!showPreviewPane && (
           <Button
             variant="link"
             size="sm"
             onClick={() => setShowPreviewPane(true)}
-            className={`text-primary-500 p-0 ${editExisting && 'mb-4.5'}`}
+            className={`text-primary-500 font-style p-0 ${editExisting && 'mb-4.5'}`}
             style={{ lineHeight: '26px' }}
           >
             {intl.formatMessage(messages.showPreviewButton)}
diff --git a/src/discussions/comments/CommentsView.jsx b/src/discussions/comments/CommentsView.jsx
index e347e5d6..4b2f167f 100644
--- a/src/discussions/comments/CommentsView.jsx
+++ b/src/discussions/comments/CommentsView.jsx
@@ -3,7 +3,6 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
-import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -88,10 +87,9 @@ function DiscussionCommentsView({
 
   const handleDefinition = (message, commentsLength) => (
     <div
-      className="mx-4 my-14px text-gray-700 font-style-normal font-family-inter"
+      className="mx-4 my-14px text-gray-700 font-style"
       role="heading"
       aria-level="2"
-      style={{ lineHeight: '24px' }}
     >
       {intl.formatMessage(message, { num: commentsLength })}
     </div>
@@ -114,11 +112,7 @@ function DiscussionCommentsView({
           onClick={handleLoadMoreResponses}
           variant="link"
           block="true"
-          className="px-4 mt-3 py-0 mb-2 font-style-normal font-family-inter font-weight-500 font-size-14"
-          style={{
-            lineHeight: '24px',
-            border: '0px',
-          }}
+          className="px-4 mt-3 border-0 line-height-24 py-0 mb-2 font-style font-weight-500 font-size-14"
           data-testid="load-more-comments"
         >
           {intl.formatMessage(messages.loadMoreResponses)}
@@ -154,11 +148,8 @@ function DiscussionCommentsView({
                     <Button
                       variant="plain"
                       block="true"
-                      className="card mb-4 px-0 py-10px mt-2 font-style-normal font-family-inter font-weight-500 font-size-14 text-primary-500"
-                      style={{
-                        lineHeight: '24px',
-                        border: '0px',
-                      }}
+                      className="card mb-4 px-0 border-0 py-10px mt-2 font-style font-weight-500
+                      line-height-24 font-size-14 text-primary-500"
                       onClick={() => setAddingResponse(true)}
                       data-testid="add-response"
                     >
@@ -234,7 +225,7 @@ function CommentsView({ intl }) {
             <div className="px-4 py-1.5 bg-white">
               <Button
                 variant="plain"
-                className="px-0 font-weight-light text-primary-500"
+                className="px-0 line-height-24 py-0 my-1.5 border-0 font-weight-normal font-style text-primary-500"
                 iconBefore={ArrowBack}
                 onClick={() => history.push(discussionsPath(PostsPages[page], {
                   courseId, learnerUsername, category, topicId,
@@ -261,10 +252,7 @@ function CommentsView({ intl }) {
         )
       )}
       <div
-        className={classNames('discussion-comments d-flex flex-column card border-0', {
-          'post-card-margin post-card-padding': !enableInContextSidebar,
-          'post-card-padding rounded-0 border-0 mb-4': enableInContextSidebar,
-        })}
+        className="discussion-comments d-flex flex-column card border-0 post-card-margin post-card-padding"
       >
         <Post post={thread} handleAddResponseButton={() => setAddingResponse(true)} />
         {!thread.closed && (
diff --git a/src/discussions/comments/comment/Comment.jsx b/src/discussions/comments/comment/Comment.jsx
index 99864bd7..4c748689 100644
--- a/src/discussions/comments/comment/Comment.jsx
+++ b/src/discussions/comments/comment/Comment.jsx
@@ -152,7 +152,7 @@ function Comment({
             )
             : (
               <HTMLLoader
-                cssClassName="comment-body html-loader text-break mt-14px font-style-normal font-family-inter text-primary-500"
+                cssClassName="comment-body html-loader text-break mt-14px font-style text-primary-500"
                 componentId="comment"
                 htmlNode={comment.renderedBody}
                 testId={comment.id}
@@ -182,7 +182,7 @@ function Comment({
               onClick={handleLoadMoreComments}
               variant="link"
               block="true"
-              className="font-size-14 font-style-normal font-family-inter pt-10px border-0 font-weight-500 pb-0"
+              className="font-size-14 font-style pt-10px border-0 font-weight-500 pb-0"
               data-testid="load-more-comments-responses"
               style={{
                 lineHeight: '20px',
@@ -208,12 +208,9 @@ function Comment({
                 {!isClosedPost && userCanAddThreadInBlackoutDate && (inlineReplies.length >= 5)
                   && (
                     <Button
-                      className="d-flex flex-grow mt-2 font-size-14 font-style-normal font-family-inter font-weight-500 text-primary-500"
+                      className="d-flex flex-grow mt-2 font-size-14 font-style font-weight-500 text-primary-500"
                       variant="plain"
-                      style={{
-                        lineHeight: '24px',
-                        height: '36px',
-                      }}
+                      style={{ height: '36px' }}
                       onClick={() => setReplying(true)}
                     >
                       {intl.formatMessage(messages.addComment)}
diff --git a/src/discussions/comments/comment/Reply.jsx b/src/discussions/comments/comment/Reply.jsx
index a0a15438..a614b331 100644
--- a/src/discussions/comments/comment/Reply.jsx
+++ b/src/discussions/comments/comment/Reply.jsx
@@ -120,7 +120,7 @@ function Reply({
               postCreatedAt={reply.createdAt}
               postOrComment
             />
-            <div className="ml-auto d-flex" style={{ lineHeight: '24px' }}>
+            <div className="ml-auto d-flex">
               <ActionsDropdown
                 commentOrPost={{
                   ...reply,
@@ -137,7 +137,7 @@ function Reply({
               <HTMLLoader
                 componentId="reply"
                 htmlNode={reply.renderedBody}
-                cssClassName="html-loader text-break font-style-normal pb-1 font-family-inter text-primary-500"
+                cssClassName="html-loader text-break font-style text-primary-500"
                 testId={reply.id}
               />
             )}
diff --git a/src/discussions/common/AlertBanner.jsx b/src/discussions/common/AlertBanner.jsx
index 659c1234..8bd5f6a6 100644
--- a/src/discussions/common/AlertBanner.jsx
+++ b/src/discussions/common/AlertBanner.jsx
@@ -41,13 +41,13 @@ function AlertBanner({
         <>
           {content.lastEdit?.reason && (
             <Alert variant="info" className="px-3 shadow-none mb-1 py-10px bg-light-200">
-              <div className="d-flex align-items-center flex-wrap text-gray-700 font-family-inter">
+              <div className="d-flex align-items-center flex-wrap text-gray-700 font-style">
                 {intl.formatMessage(messages.editedBy)}
                 <span className="ml-1 mr-3">
                   <AuthorLabel author={content.lastEdit.editorUsername} linkToProfile postOrComment />
                 </span>
                 <span
-                  className="mx-1.5 font-family-inter font-size-8 font-style-normal text-light-700"
+                  className="mx-1.5 font-size-8 font-style text-light-700"
                   style={{ lineHeight: '15px' }}
                 >
                   {intl.formatMessage(messages.fullStop)}
@@ -58,13 +58,13 @@ function AlertBanner({
           )}
           {content.closed && (
             <Alert variant="info" className="px-3 shadow-none mb-1 py-10px bg-light-200">
-              <div className="d-flex align-items-center flex-wrap text-gray-700 font-family-inter">
+              <div className="d-flex align-items-center flex-wrap text-gray-700 font-style">
                 {intl.formatMessage(messages.closedBy)}
                 <span className="ml-1 ">
                   <AuthorLabel author={content.closedBy} linkToProfile postOrComment />
                 </span>
                 <span
-                  className="mx-1.5 font-family-inter font-size-8 font-style-normal text-light-700"
+                  className="mx-1.5 font-size-8 font-style text-light-700"
                   style={{ lineHeight: '15px' }}
                 >
                   {intl.formatMessage(messages.fullStop)}
diff --git a/src/discussions/common/AuthorLabel.jsx b/src/discussions/common/AuthorLabel.jsx
index 45c2e03a..bf149941 100644
--- a/src/discussions/common/AuthorLabel.jsx
+++ b/src/discussions/common/AuthorLabel.jsx
@@ -51,10 +51,10 @@ function AuthorLabel({
     && linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
 
   const labelContents = (
-    <div className={className} style={{ lineHeight: '24px' }}>
+    <div className={className}>
       {!alert && (
         <span
-          className={classNames('mr-1.5 font-size-14 font-style-normal font-family-inter font-weight-500', {
+          className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
             'text-gray-700': isRetiredUser,
             'text-primary-500': !authorLabelMessage && !isRetiredUser,
           })}
@@ -91,7 +91,7 @@ function AuthorLabel({
       </OverlayTrigger>
       {authorLabelMessage && (
         <span
-          className={classNames('mr-1.5 font-size-14 font-style-normal font-family-inter font-weight-500', {
+          className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
             'text-primary-500': showTextPrimary,
             'text-gray-700': isRetiredUser,
           })}
diff --git a/src/discussions/common/HoverCard.jsx b/src/discussions/common/HoverCard.jsx
index 62901051..9608a58f 100644
--- a/src/discussions/common/HoverCard.jsx
+++ b/src/discussions/common/HoverCard.jsx
@@ -40,7 +40,7 @@ function HoverCard({
         <div className="d-flex">
           <Button
             variant="tertiary"
-            className={classNames('px-2.5 py-2 border-0 font-style-normal font-family-inter text-gray-700 font-size-12',
+            className={classNames('px-2.5 py-2 border-0 font-style text-gray-700 font-size-12',
               { 'w-100': enableInContextSidebar })}
             onClick={() => handleResponseCommentButton()}
             disabled={isClosedPost}
diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx
index 69636155..2623ffca 100644
--- a/src/discussions/discussions-home/DiscussionsHome.jsx
+++ b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -87,7 +87,7 @@ export default function DiscussionsHome() {
         >
           <div
             className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
-              'pl-4 pr-2.5 py-1.5': enableInContextSidebar,
+              'pl-4 pr-3 py-0': enableInContextSidebar,
             })}
           >
             {!enableInContextSidebar && <Route path={Routes.DISCUSSIONS.PATH} component={NavigationBar} />}
@@ -120,7 +120,7 @@ export default function DiscussionsHome() {
                 path={[Routes.POSTS.PATH, Routes.POSTS.ALL_POSTS, Routes.LEARNERS.POSTS]}
                 render={routeProps => <EmptyPosts {...routeProps} subTitleMessage={messages.emptyAllPosts} />}
               />
-              {isRedirectToLearners && <Route path={Routes.LEARNERS.PATH} component={EmptyLearners} /> }
+              {isRedirectToLearners && <Route path={Routes.LEARNERS.PATH} component={EmptyLearners} />}
             </Switch>
           )}
         </div>
diff --git a/src/discussions/learners/LearnerPostsView.jsx b/src/discussions/learners/LearnerPostsView.jsx
index 6a11cee7..71e96dc8 100644
--- a/src/discussions/learners/LearnerPostsView.jsx
+++ b/src/discussions/learners/LearnerPostsView.jsx
@@ -88,7 +88,7 @@ function LearnerPostsView({ intl }) {
           onClick={() => history.push(discussionsPath(Routes.LEARNERS.PATH, { courseId })(location))}
           alt={intl.formatMessage(messages.back)}
         />
-        <div className="text-primary-500 font-style-normal font-family-inter font-weight-bold py-2.5">
+        <div className="text-primary-500 font-style font-weight-bold py-2.5">
           {intl.formatMessage(messages.activityForLearner, { username: capitalize(username) })}
         </div>
         <div style={{ padding: '18px' }} />
diff --git a/src/discussions/learners/learner/LearnerCard.jsx b/src/discussions/learners/learner/LearnerCard.jsx
index 46164aff..ea59f090 100644
--- a/src/discussions/learners/learner/LearnerCard.jsx
+++ b/src/discussions/learners/learner/LearnerCard.jsx
@@ -40,7 +40,7 @@ function LearnerCard({
           <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
             <div className="d-flex align-items-center flex-fill">
               <div
-                className="text-truncate font-weight-500 font-size-14 text-primary-500 font-style-normal font-family-inter"
+                className="text-truncate font-weight-500 font-size-14 text-primary-500 font-style"
               >
                 {learner.username}
               </div>
diff --git a/src/discussions/posts/post-actions-bar/PostActionsBar.jsx b/src/discussions/posts/post-actions-bar/PostActionsBar.jsx
index b66ec467..d5dbe05a 100644
--- a/src/discussions/posts/post-actions-bar/PostActionsBar.jsx
+++ b/src/discussions/posts/post-actions-bar/PostActionsBar.jsx
@@ -42,17 +42,17 @@ function PostActionsBar({
           : <Search />
       )}
       {enableInContextSidebar && (
-        <h4 className="d-flex flex-grow-1 font-weight-bold my-0 py-0 align-self-center">
+        <h4 className="d-flex flex-grow-1 font-weight-bold font-style my-0 py-10px align-self-center">
           {intl.formatMessage(messages.title)}
         </h4>
       )}
-      {loadingStatus === RequestStatus.SUCCESSFUL && userCanAddThreadInBlackoutDate
-      && (
+      {loadingStatus === RequestStatus.SUCCESSFUL && userCanAddThreadInBlackoutDate && (
         <>
           {!enableInContextSidebar && <div className="border-right border-light-400 mx-3" />}
           <Button
             variant={enableInContextSidebar ? 'plain' : 'brand'}
-            className={classNames('my-0', { 'p-0': enableInContextSidebar })}
+            className={classNames('my-0 font-style border-0 line-height-24',
+              { 'px-3 py-10px border-0': enableInContextSidebar })}
             onClick={() => dispatch(showPostEditor())}
             size={enableInContextSidebar ? 'md' : 'sm'}
           >
@@ -62,13 +62,17 @@ function PostActionsBar({
       )}
       {enableInContextSidebar && (
         <>
-          <div className="border-right border-light-300 mr-2 ml-3.5 my-2" />
-          <IconButton
-            src={Close}
-            iconAs={Icon}
-            onClick={handleCloseInContext}
-            alt={intl.formatMessage(messages.close)}
-          />
+          <div className="border-right border-light-300 mr-3 ml-1.5 my-10px" />
+          <div className="justify-content-center mt-2.5 mx-3px">
+            <IconButton
+              src={Close}
+              iconAs={Icon}
+              onClick={handleCloseInContext}
+              alt={intl.formatMessage(messages.close)}
+              iconClassNames="spinner-dimentions"
+              className="spinner-dimentions"
+            />
+          </div>
         </>
       )}
     </div>
diff --git a/src/discussions/posts/post-editor/PostEditor.jsx b/src/discussions/posts/post-editor/PostEditor.jsx
index 4c93cfbf..d443fd0d 100644
--- a/src/discussions/posts/post-editor/PostEditor.jsx
+++ b/src/discussions/posts/post-editor/PostEditor.jsx
@@ -54,9 +54,9 @@ function DiscussionPostType({
   value,
   type,
   selected,
-  description,
   icon,
 }) {
+  const { enableInContextSidebar } = useContext(DiscussionContext);
   // Need to use regular label since Form.Label doesn't support overriding htmlFor
   return (
     <label htmlFor={`post-type-${value}`} className="d-flex p-0 my-0 mr-3">
@@ -66,12 +66,11 @@ function DiscussionPostType({
           'border-primary': selected,
           'border-light-400': !selected,
         })}
-        style={{ cursor: 'pointer', width: '14.25rem' }}
+        style={{ cursor: 'pointer', width: `${enableInContextSidebar ? '10.021rem' : '14.25rem'}` }}
       >
-        <Card.Section className="py-3 px-10px d-flex flex-column align-items-center">
+        <Card.Section className="px-4 py-3 d-flex flex-column align-items-center">
           <span className="text-primary-300 mb-0.5">{icon}</span>
-          <span className="text-gray-700 mb-0.5">{type}</span>
-          <span className="x-small text-gray-500">{description}</span>
+          <span className="text-gray-700">{type}</span>
         </Card.Section>
       </Card>
     </label>
@@ -82,7 +81,6 @@ DiscussionPostType.propTypes = {
   value: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
   selected: PropTypes.bool.isRequired,
-  description: PropTypes.string.isRequired,
   icon: PropTypes.element.isRequired,
 };
 
@@ -270,7 +268,7 @@ function PostEditor({
         resetForm,
       }) => (
         <Form className="m-4 card p-4 post-form" onSubmit={handleSubmit}>
-          <h4 className="mb-4" style={{ lineHeight: '16px' }}>
+          <h4 className="mb-4 font-style font-size-16" style={{ lineHeight: '16px' }}>
             {editExisting
               ? intl.formatMessage(messages.editPostHeading)
               : intl.formatMessage(messages.addPostHeading)}
@@ -444,7 +442,7 @@ function PostEditor({
 
           <PostPreviewPane htmlNode={values.comment} isPost editExisting={editExisting} />
 
-          <div className="d-flex flex-row mt-n4 w-75 text-primary">
+          <div className="d-flex flex-row mt-n4 w-75 text-primary font-style">
             {!editExisting && (
               <>
                 <Form.Group>
@@ -461,18 +459,18 @@ function PostEditor({
                   </Form.Checkbox>
                 </Form.Group>
                 {allowAnonymousToPeers && (
-                <Form.Group>
-                  <Form.Checkbox
-                    name="anonymousToPeers"
-                    checked={values.anonymousToPeers}
-                    onChange={handleChange}
-                    onBlur={handleBlur}
-                  >
-                    <span className="font-size-14">
-                      {intl.formatMessage(messages.anonymousToPeersPost)}
-                    </span>
-                  </Form.Checkbox>
-                </Form.Group>
+                  <Form.Group>
+                    <Form.Checkbox
+                      name="anonymousToPeers"
+                      checked={values.anonymousToPeers}
+                      onChange={handleChange}
+                      onBlur={handleBlur}
+                    >
+                      <span className="font-size-14">
+                        {intl.formatMessage(messages.anonymousToPeersPost)}
+                      </span>
+                    </Form.Checkbox>
+                  </Form.Group>
                 )}
               </>
             )}
@@ -498,7 +496,7 @@ function PostEditor({
           </div>
         </Form>
       )
-    }
+      }
     </Formik>
   );
 }
diff --git a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
index 18312104..249a1b78 100644
--- a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
+++ b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
@@ -71,7 +71,6 @@ function PostFilterBar({
   const currentFilters = useSelector(selectThreadFilters());
   const { status } = useSelector(state => state.cohorts);
   const cohorts = useSelector(selectCourseCohorts);
-
   const [isOpen, setOpen] = useState(false);
 
   const selectedCohort = useMemo(() => cohorts.find(cohort => (
@@ -138,7 +137,7 @@ function PostFilterBar({
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
-        <span className="text-primary-700 pr-4">
+        <span className="text-primary-500 pr-4 font-style">
           {intl.formatMessage(messages.sortFilterStatus, {
             own: false,
             type: currentFilters.postType,
diff --git a/src/discussions/posts/post/LikeButton.jsx b/src/discussions/posts/post/LikeButton.jsx
index fa9b9392..2702f324 100644
--- a/src/discussions/posts/post/LikeButton.jsx
+++ b/src/discussions/posts/post/LikeButton.jsx
@@ -41,7 +41,7 @@ function LikeButton({
           iconClassNames="like-icon-dimentions"
         />
       </OverlayTrigger>
-      <div className="font-family-inter font-style-normal">
+      <div className="font-style">
         {(count && count > 0) ? count : null}
       </div>
 
diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
index 8b972a3b..ef5f74b5 100644
--- a/src/discussions/posts/post/Post.jsx
+++ b/src/discussions/posts/post/Post.jsx
@@ -136,12 +136,12 @@ function Post({
       )}
       <AlertBanner content={post} />
       <PostHeader post={post} />
-      <div className="d-flex mt-14px text-break font-style-normal font-family-inter text-primary-500">
+      <div className="d-flex mt-14px text-break font-style text-primary-500">
         <HTMLLoader htmlNode={post.renderedBody} componentId="post" cssClassName="html-loader" testId={post.id} />
       </div>
       {topicContext && topic && (
         <div
-          className={classNames('mt-14px mb-1 font-style-normal font-family-inter font-size-12',
+          className={classNames('mt-14px mb-1 font-style font-size-12',
             { 'w-100': enableInContextSidebar })}
           style={{ lineHeight: '20px' }}
         >
diff --git a/src/discussions/posts/post/PostHeader.jsx b/src/discussions/posts/post/PostHeader.jsx
index cf455872..16036f67 100644
--- a/src/discussions/posts/post/PostHeader.jsx
+++ b/src/discussions/posts/post/PostHeader.jsx
@@ -108,7 +108,17 @@ function PostHeader({
                   && <Badge variant="success">{intl.formatMessage(messages.answered)}</Badge>}
               </div>
             )
-            : <h5 className="mb-0 font-style-normal font-family-inter text-primary-500" style={{ lineHeight: '21px' }} aria-level="1" tabIndex="-1" accessKey="h">{post.title}</h5>}
+            : (
+              <h5
+                className="mb-0 font-style text-primary-500"
+                style={{ lineHeight: '21px' }}
+                aria-level="1"
+                tabIndex="-1"
+                accessKey="h"
+              >
+                {post.title}
+              </h5>
+            )}
           <AuthorLabel
             author={post.author || intl.formatMessage(messages.anonymous)}
             authorLabel={post.authorLabel}
diff --git a/src/discussions/posts/post/PostLink.jsx b/src/discussions/posts/post/PostLink.jsx
index 5feadbc7..53248aa6 100644
--- a/src/discussions/posts/post/PostLink.jsx
+++ b/src/discussions/posts/post/PostLink.jsx
@@ -74,15 +74,15 @@ function PostLink({
                 <Truncate lines={1} className="mr-1.5" whiteSpace>
                   <span
                     class={
-                        classNames('font-weight-500 font-size-14 text-primary-500 font-style-normal font-family-inter align-bottom',
-                          { 'font-weight-bolder': !read })
-                      }
+                      classNames('font-weight-500 font-size-14 text-primary-500 font-style align-bottom',
+                        { 'font-weight-bolder': !read })
+                    }
                   >
                     {post.title}
                   </span>
                   <span class="align-bottom"> </span>
                   <span
-                    class="text-gray-700 font-weight-normal font-size-14 font-style-normal font-family-inter align-bottom"
+                    class="text-gray-700 font-weight-normal font-size-14 font-style align-bottom"
                   >
                     {isPostPreviewAvailable(post.previewBody)
                       ? post.previewBody
@@ -107,10 +107,11 @@ function PostLink({
                 )}
 
                 {post.pinned && (
-                <Icon
-                  src={PushPin}
-                  className={`post-summary-icons-dimensions text-gray-700 ${canSeeReportedBadge || showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
-                />
+                  <Icon
+                    src={PushPin}
+                    className={`post-summary-icons-dimensions text-gray-700
+                    ${canSeeReportedBadge || showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
+                  />
                 )}
               </div>
             </div>
diff --git a/src/discussions/posts/post/PostSummaryFooter.jsx b/src/discussions/posts/post/PostSummaryFooter.jsx
index 302eaa9b..14ac87fc 100644
--- a/src/discussions/posts/post/PostSummaryFooter.jsx
+++ b/src/discussions/posts/post/PostSummaryFooter.jsx
@@ -9,16 +9,10 @@ import {
   Badge, Icon, OverlayTrigger, Tooltip,
 } from '@edx/paragon';
 import {
-  Locked,
+  StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
 } from '@edx/paragon/icons';
 
-import {
-  People,
-  QuestionAnswer,
-  QuestionAnswerOutline,
-  StarFilled,
-  StarOutline, ThumbUpFilled, ThumbUpOutline,
-} from '../../../components/icons';
+import { People, QuestionAnswer, QuestionAnswerOutline } from '../../../components/icons';
 import timeLocale from '../../common/time-locale';
 import { selectUserHasModerationPrivileges } from '../../data/selectors';
 import messages from './messages';
@@ -32,9 +26,8 @@ function PostSummaryFooter({
 }) {
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   timeago.register('time-locale', timeLocale);
-
   return (
-    <div className="d-flex align-items-center text-gray-700">
+    <div className="d-flex align-items-center text-gray-700" style={{ height: '24px' }}>
       <div className="d-flex align-items-center mr-4.5">
         <OverlayTrigger
           overlay={(
@@ -43,11 +36,11 @@ function PostSummaryFooter({
             </Tooltip>
           )}
         >
-          <Icon src={post.voted ? ThumbUpFilled : ThumbUpOutline} className="post-summary-icons-dimensions mr-0.5">
+          <Icon src={post.voted ? ThumbUpFilled : ThumbUpOutline} className="post-summary-like-dimensions mr-0.5">
             <span className="sr-only">{' '}{intl.formatMessage(post.voted ? messages.likedPost : messages.postLikes)}</span>
           </Icon>
         </OverlayTrigger>
-        <div className="font-family-inter font-style-normal">
+        <div className="font-style">
           {(post.voteCount && post.voteCount > 0) ? post.voteCount : null}
         </div>
       </div>
@@ -60,12 +53,14 @@ function PostSummaryFooter({
         )}
       >
         <Icon src={post.following ? StarFilled : StarOutline} className="post-summary-icons-dimensions mr-0.5">
-          <span className="sr-only">{' '}{ intl.formatMessage(post.following ? messages.srOnlyFollowDescription : messages.srOnlyUnFollowDescription)}</span>
+          <span className="sr-only">
+            {' '}{intl.formatMessage(post.following ? messages.srOnlyFollowDescription : messages.srOnlyUnFollowDescription)}
+          </span>
         </Icon>
       </OverlayTrigger>
 
       {preview && post.commentCount > 1 && (
-        <div className="d-flex align-items-center ml-4.5">
+        <div className="d-flex align-items-center ml-4.5 text-gray-700 font-style font-size-12">
           <OverlayTrigger
             overlay={(
               <Tooltip id={`follow-${post.id}-tooltip`}>
@@ -73,7 +68,10 @@ function PostSummaryFooter({
               </Tooltip>
             )}
           >
-            <Icon src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline} className="post-summary-icons-dimensions mr-0.5">
+            <Icon
+              src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline}
+              className="post-summary-comment-count-dimensions mr-0.5"
+            >
               <span className="sr-only">{' '} {intl.formatMessage(messages.activity)}</span>
             </Icon>
           </OverlayTrigger>
@@ -108,25 +106,6 @@ function PostSummaryFooter({
         <span title={post.createdAt} className="text-gray-700 post-summary-timestamp">
           {timeago.format(post.createdAt, 'time-locale')}
         </span>
-        {!preview && post.closed
-          && (
-            <OverlayTrigger
-              overlay={(
-                <Tooltip id={`closed-${post.id}-tooltip`}>
-                  {intl.formatMessage(messages.postClosed)}
-                </Tooltip>
-              )}
-            >
-              <Icon
-                src={Locked}
-                style={{
-                  width: '1rem',
-                  height: '1rem',
-                }}
-                className="ml-3 post-summary-icons-dimensions"
-              />
-            </OverlayTrigger>
-          )}
       </div>
     </div>
   );
diff --git a/src/index.scss b/src/index.scss
index 4d0d6bdd..e7b4862b 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -41,6 +41,10 @@ $fa-font-path: "~font-awesome/fonts";
   outline: #EAE6E5 solid 2px;
 }
 
+.font-size-16 {
+  font-size: 16px;
+}
+
 .font-size-14 {
   font-size: 14px;
 }
@@ -90,6 +94,16 @@ $fa-font-path: "~font-awesome/fonts";
   width: 16px !important;
 }
 
+.post-summary-comment-count-dimensions {
+  height: 15.39px;
+  width: 15.5px
+}
+
+.post-summary-like-dimensions {
+  height: 16px;
+  width: 17px
+}
+
 .post-summary-timestamp {
   font-size: 12px !important;
   line-height: 20px !important;
@@ -130,6 +144,11 @@ $fa-font-path: "~font-awesome/fonts";
   margin-left: 2px;
 }
 
+.mx-3px {
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
 .mt-14px {
   margin-top: 14px;
 }
@@ -186,9 +205,14 @@ $fa-font-path: "~font-awesome/fonts";
   padding-right: 10px;
 }
 
+.py-2px {
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+}
+
 .question-icon-size {
-  width: 1.4581rem;
-  height: 1.4581rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
 .question-icon-position {
@@ -432,3 +456,16 @@ header {
 .MJX-TEX {
   white-space: normal;
 }
+
+.font-style {
+  font-family: "Inter";
+  font-style: normal;
+}
+
+.in-context-navbar {
+  line-height: 44px;
+}
+
+.line-height-24 {
+  line-height: 24px;
+}