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>
2023-02-09 16:08:22 +05:00
parent 3d8353dc87
commit f9ca375853
19 changed files with 136 additions and 124 deletions
--- 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)}
--- 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 && (
--- 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)}
--- 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}
              />
            )}
--- 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)}
--- 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,
          })}
--- 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}
--- 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>
--- 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' }} />
--- 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>
--- 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>
--- 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>
  );
 }
--- 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,
--- 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>

--- 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' }}
        >
--- 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}
--- 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>
--- 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>
  );
--- 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;
+}