fix: response and comment UI (#244)

* fix: response and comment UI

* fix: revert inIframe conidition

src/discussions/comments/comment/Reply.jsx

@@ -75,7 +75,7 @@ function Reply({
             }}
           />
         </div>
-        <div className="rounded bg-light-300 px-4 pb-2 pt-2.5 flex-fill">
+        <div className="bg-light-300 px-4 pb-2 pt-2.5 flex-fill">
           <div className="d-flex flex-row justify-content-between align-items-center mb-0.5">
             <AuthorLabel author={reply.author} authorLabel={reply.authorLabel} labelColor={colorClass && `text-${colorClass}`} linkToProfile />
             <ActionsDropdown

src/discussions/comments/messages.js

@@ -171,6 +171,11 @@ const messages = defineMessages({
     defaultMessage: '{count} replies for the response added',
     description: 'Text added for screen reader to understand nesting replies.',
   },
+  time: {
+    id: 'discussion.comment.time',
+    defaultMessage: '{time} ago',
+    description: 'Time text for endorse banner',
+  },
 });
 
 export default messages;

src/discussions/common/EndorsedAlertBanner.jsx

@@ -11,12 +11,14 @@ import { ThreadType } from '../../data/constants';
 import { commentShape } from '../comments/comment/proptypes';
 import messages from '../comments/messages';
 import AuthorLabel from './AuthorLabel';
+import timeLocale from './time-locale';
 
 function EndorsedAlertBanner({
   intl,
   content,
   postType,
 }) {
+  timeago.register('time-locale', timeLocale);
   const isQuestion = postType === ThreadType.QUESTION;
   const classes = isQuestion ? 'bg-success-500 text-white' : 'bg-dark-500 text-white';
   const iconClass = isQuestion ? CheckCircle : Verified;
@@ -45,7 +47,7 @@ function EndorsedAlertBanner({
               )}
             </span>
             <AuthorLabel author={content.endorsedBy} authorLabel={content.endorsedByLabel} linkToProfile />
-            {timeago.format(content.endorsedAt, intl.locale)}
+            {intl.formatMessage(messages.time, { time: timeago.format(content.endorsedAt, 'time-locale') })}
           </span>
         </div>
       </Alert>

src/discussions/posts/post/PostLink.jsx

@@ -45,83 +45,84 @@ function PostLink({
   const postReported = post.abuseFlagged || post.abuseFlaggedCount;
 
   return (
-
-    <Link
-      className="discussion-post list-group-item list-group-item-action p-0 text-decoration-none text-gray-900"
-      to={linkUrl}
-      onClick={() => isSelected(post.id)}
-      style={{ lineHeight: '21px' }}
-      aria-current={isSelected(post.id) ? 'page' : undefined}
-      role="option"
-      tabindex={(isSelected(post.id) || idx === 0) ? 0 : -1}
-    >
-      {showDivider && <div className="p-1 bg-light-400" /> }
-      <div
-        className={
+    <>
+      {showDivider && <div className="p-1 bg-light-400" />}
+      <Link
+        className="discussion-post list-group-item list-group-item-action p-0 text-decoration-none text-gray-900"
+        to={linkUrl}
+        onClick={() => isSelected(post.id)}
+        style={{ lineHeight: '21px' }}
+        aria-current={isSelected(post.id) ? 'page' : undefined}
+        role="option"
+        tabindex={(isSelected(post.id) || idx === 0) ? 0 : -1}
+      >
+        <div
+          className={
             classNames('d-flex flex-row pt-2.5 pb-2 px-4 border-primary-500',
               { 'bg-light-300': post.read })
           }
-        style={post.id === postId ? {
-          borderRightWidth: '4px',
-          borderRightStyle: 'solid',
-        } : null}
-      >
-        <PostAvatar post={post} authorLabel={post.authorLabel} fromPostLink read={post.read} />
-        <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
-          <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 font-weight-500">
-              <div
-                className={
+          style={post.id === postId ? {
+            borderRightWidth: '4px',
+            borderRightStyle: 'solid',
+          } : null}
+        >
+          <PostAvatar post={post} authorLabel={post.authorLabel} fromPostLink read={post.read} />
+          <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
+            <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 font-weight-500">
+                <div
+                  className={
                     classNames('text-truncate font-weight-500 font-size-14 text-primary-500 font-style-normal font-family-inter',
                       { 'font-weight-bolder': !post.read })
                   }
-              >
-                {post.title}
+                >
+                  {post.title}
+                </div>
+
+                {showAnsweredBadge && (
+                <Badge variant="success" className="font-weight-500 ml-auto badge-padding">
+                  {intl.formatMessage(messages.answered)}
+                  <span className="sr-only">{' '}answered</span>
+                </Badge>
+                )}
+
+                {postReported && (
+                <Badge
+                  variant="danger"
+                  data-testid="reported-post"
+                  className={`font-weight-500 badge-padding ${showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
+                >
+                  {intl.formatMessage(messages.contentReported)}
+                  <span className="sr-only">{' '}reported</span>
+                </Badge>
+                )}
+
+                {post.pinned && (
+                <Icon src={PushPin} className={`icon-size ${postReported || showAnsweredBadge ? 'ml-2' : 'ml-auto'}`} />
+                )}
               </div>
-
-              {showAnsweredBadge && (
-              <Badge variant="success" className="font-weight-500 ml-auto badge-padding">
-                {intl.formatMessage(messages.answered)}
-                <span className="sr-only">{' '}answered</span>
-              </Badge>
-              )}
-
-              {postReported && (
-              <Badge
-                variant="danger"
-                data-testid="reported-post"
-                className={`font-weight-500 badge-padding ${showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
-              >
-                {intl.formatMessage(messages.contentReported)}
-                <span className="sr-only">{' '}reported</span>
-              </Badge>
-              )}
-
-              {post.pinned && (
-              <Icon src={PushPin} className={`icon-size ${postReported || showAnsweredBadge ? 'ml-2' : 'ml-auto'}`} />
-              )}
+            </div>
+            <AuthorLabel
+              author={post.author || intl.formatMessage(messages.anonymous)}
+              authorLabel={post.authorLabel}
+              labelColor={authorLabelColor && `text-${authorLabelColor}`}
+              linkToProfile={!learnerTab && post.author}
+            />
+            <div
+              className="text-truncate text-primary-500 font-weight-normal font-size-14 font-style-normal font-family-inter"
+              style={{ maxHeight: '1.5rem' }}
+            >
+              {isPostPreviewAvailable(post.previewBody)
+                ? post.previewBody
+                : intl.formatMessage(messages.postWithoutPreview)}
+            </div>
+            <div className="mt-1">
+              <PostFooter post={post} preview intl={intl} />
             </div>
           </div>
-          <AuthorLabel
-            author={post.author || intl.formatMessage(messages.anonymous)}
-            authorLabel={post.authorLabel}
-            labelColor={authorLabelColor && `text-${authorLabelColor}`}
-            linkToProfile={!learnerTab && post.author}
-          />
-          <div
-            className="text-truncate text-primary-500 font-weight-normal font-size-14 font-style-normal font-family-inter"
-            style={{ maxHeight: '1.5rem' }}
-          >
-            {isPostPreviewAvailable(post.previewBody)
-              ? post.previewBody
-              : intl.formatMessage(messages.postWithoutPreview)}
-          </div>
-          <div className="mt-1">
-            <PostFooter post={post} preview intl={intl} />
-          </div>
         </div>
-      </div>
-    </Link>
+      </Link>
+    </>
   );
 }