fix: Discussions UI fixes on mobile resolutions (#690)

* fix: redirection to learners tab in inContext view

* fix: changed username to simple text for incontext view

* test: username is not clickable in incontext view

---------

Co-authored-by: ayesha waris <73840786+ayesha-waris@users.noreply.github.com>
Co-authored-by: sohailfatima <23100065@lums.edu.pk>
Co-authored-by: Fatima Sohail <68312464+sohailfatima@users.noreply.github.com>
Co-authored-by: Awais Ansari <79941147+awais-ansari@users.noreply.github.com>

src/components/NavigationBar/navBar.scss

@@ -1,10 +1,11 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@import "~@edx/brand/paragon/fonts.scss";
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@edx/paragon/scss/core/core.scss";
+@import "~@edx/brand/paragon/overrides.scss";
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
+
 .course-tabs-navigation {
   border-bottom: solid 1px #eaeaea;
 

src/components/TinyMCEEditor.jsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { Editor } from '@tinymce/tinymce-react';
-import { useParams } from 'react-router';
+import { useLocation, useParams } from 'react-router';
 // TinyMCE so the global var exists
 // eslint-disable-next-line no-unused-vars,import/no-extraneous-dependencies
 import tinymce from 'tinymce/tinymce';
@@ -45,10 +45,11 @@ import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';
 const TinyMCEEditor = (props) => {
   // note that skin and content_css is disabled to avoid the normal
   // loading process and is instead loaded as a string via content_style
-
+  const locationObj = useLocation();
   const { courseId, postId } = useParams();
   const [showImageWarning, setShowImageWarning] = useState(false);
   const intl = useIntl();
+  const enableInContextSidebar = Boolean(new URLSearchParams(locationObj.search).get('inContextSidebar') !== null);
 
   /* istanbul ignore next */
   const setup = useCallback((editor) => {
@@ -99,6 +100,29 @@ const TinyMCEEditor = (props) => {
     contentStyle = '';
   }
 
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (enableInContextSidebar) {
+      const checkToxDialogVisibility = () => {
+        const toxDialog = document.querySelector('.tox-dialog');
+        if (toxDialog) {
+          toxDialog.style.alignSelf = 'start';
+          toxDialog.style.marginTop = '50px';
+        }
+      };
+
+      const observer = new MutationObserver(checkToxDialogVisibility);
+
+      // Observe changes to the entire document
+      observer.observe(document, { childList: true, subtree: true });
+
+      // Clean up the observer when the component unmounts
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [enableInContextSidebar]);
+
   return (
     <>
       <Editor

src/data/constants.js

@@ -1,6 +1,9 @@
 import { getConfig } from '@edx/frontend-platform';
 
 export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;
+export const getFullUrl = (path) => (
+  new URL(`${getConfig().PUBLIC_PATH.replace(/\/$/, '')}/${path}`, window.location.origin).href
+);
 
 /**
  * Enum for thread types.
@@ -137,7 +140,7 @@ export const DiscussionProvider = {
   OPEN_EDX: 'openedx',
 };
 
-const BASE_PATH = `${getConfig().PUBLIC_PATH}:courseId`;
+const BASE_PATH = '/:courseId';
 
 export const Routes = {
   DISCUSSIONS: {

src/discussions/common/AuthorLabel.jsx

@@ -28,7 +28,7 @@ const AuthorLabel = ({
 }) => {
   timeago.register('time-locale', timeLocale);
   const intl = useIntl();
-  const { courseId } = useContext(DiscussionContext);
+  const { courseId, enableInContextSidebar } = useContext(DiscussionContext);
   let icon = null;
   let authorLabelMessage = null;
 
@@ -47,11 +47,11 @@ const AuthorLabel = ({
   const className = classNames('d-flex align-items-center', { 'mb-0.5': !postOrComment }, labelColor);
 
   const showUserNameAsLink = useShowLearnersTab()
-    && linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
+    && linkToProfile && author && author !== intl.formatMessage(messages.anonymous) && !enableInContextSidebar;
 
   const authorName = useMemo(() => (
     <span
-      className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+      className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
         'text-gray-700': isRetiredUser,
         'text-primary-500': !authorLabelMessage && !isRetiredUser,
       })}
@@ -100,7 +100,7 @@ const AuthorLabel = ({
       {postCreatedAt && (
         <span
           title={postCreatedAt}
-          className={classNames('font-family-inter align-content-center', {
+          className={classNames('align-content-center', {
             'text-white': alert,
             'text-gray-500': !alert,
           })}
@@ -114,7 +114,7 @@ const AuthorLabel = ({
 
   return showUserNameAsLink
     ? (
-      <div className={className}>
+      <div className={`${className} flex-wrap`}>
         <Link
           data-testid="learner-posts-link"
           id="learner-posts-link"
@@ -127,7 +127,7 @@ const AuthorLabel = ({
         {labelContents}
       </div>
     )
-    : <div className={className}>{authorName}{labelContents}</div>;
+    : <div className={`${className} flex-wrap`}>{authorName}{labelContents}</div>;
 };
 
 AuthorLabel.propTypes = {

src/discussions/common/AuthorLabel.test.jsx

@@ -21,11 +21,11 @@ let store;
 let axiosMock;
 let container;
 
-function renderComponent(author, authorLabel, linkToProfile, labelColor) {
+function renderComponent(author, authorLabel, linkToProfile, labelColor, enableInContextSidebar) {
   const wrapper = render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <DiscussionContext.Provider value={{ courseId }}>
+        <DiscussionContext.Provider value={{ courseId, enableInContextSidebar }}>
           <AuthorLabel
             author={author}
             authorLabel={authorLabel}
@@ -79,9 +79,9 @@ describe('Author label', () => {
     );
 
     it(
-      `it is "${!linkToProfile && 'not'}" clickable when linkToProfile is ${!!linkToProfile}`,
+      `it is "${(!linkToProfile) && 'not'}" clickable when linkToProfile is ${!!linkToProfile} and enableInContextSidebar is false`,
       async () => {
-        renderComponent(author, authorLabel, linkToProfile, labelColor);
+        renderComponent(author, authorLabel, linkToProfile, labelColor, false);
 
         if (linkToProfile) {
           expect(screen.queryByTestId('learner-posts-link')).toBeInTheDocument();
@@ -91,6 +91,15 @@ describe('Author label', () => {
       },
     );
 
+    it(
+      'it is not clickable when enableInContextSidebar is true',
+      async () => {
+        renderComponent(author, authorLabel, linkToProfile, labelColor, true);
+
+        expect(screen.queryByTestId('learner-posts-link')).not.toBeInTheDocument();
+      },
+    );
+
     it(
       `it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
       async () => {

src/discussions/common/EndorsedAlertBanner.jsx

@@ -43,7 +43,7 @@ const EndorsedAlertBanner = ({
                 height: '20px',
               }}
             />
-            <strong className="ml-2 font-family-inter">
+            <strong className="ml-2">
               {intl.formatMessage(isQuestion ? messages.answer : messages.endorsed)}
             </strong>
           </div>

src/discussions/discussions-home/DiscussionSidebar.jsx

@@ -55,7 +55,7 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
         'd-none': !displaySidebar,
         'd-flex overflow-auto box-shadow-centered-1': displaySidebar,
         'w-100': !isOnDesktop,
-        'sidebar-desktop-width': isOnDesktop && !isOnXLDesktop,
+        'w-25 sidebar-desktop-width': isOnDesktop && !isOnXLDesktop,
         'w-25 sidebar-XL-width': isOnXLDesktop,
         'min-content-height': !enableInContextSidebar,
       })}

src/discussions/post-comments/PostCommentsView.test.jsx

@@ -465,6 +465,20 @@ describe('ThreadView', () => {
       assertLastUpdateData({ pinned: false });
     });
 
+    it('should allow copying a link to the post', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+      const post = await screen.findByTestId('post-thread-1');
+      const hoverCard = within(post).getByTestId('hover-card-thread-1');
+      Object.assign(navigator, { clipboard: { writeText: jest.fn() } });
+      await act(async () => {
+        fireEvent.click(within(hoverCard).getByRole('button', { name: /actions menu/i }));
+      });
+      await act(async () => {
+        fireEvent.click(within(hoverCard).getByRole('button', { name: /copy link/i }));
+      });
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(`http://localhost/${courseId}/posts/${discussionPostId}`);
+    });
+
     it('should allow reporting the post', async () => {
       await waitFor(() => renderComponent(discussionPostId));
       const post = await screen.findByTestId('post-thread-1');

src/discussions/post-comments/comments/CommentsView.jsx

@@ -36,7 +36,7 @@ const CommentsView = ({ endorsed }) => {
 
   const handleDefinition = useCallback((message, commentsLength) => (
     <div
-      className="mx-4 my-14px text-gray-700 font-style"
+      className="comment-line mx-4 my-14px text-gray-700 font-style"
       role="heading"
       aria-level="2"
     >

src/discussions/post-comments/comments/comment/Reply.jsx

@@ -131,7 +131,7 @@ const Reply = ({ responseId }) => {
           className="bg-light-300 pl-4 pt-2.5 pr-2.5 pb-10px flex-fill"
           style={{ borderRadius: '0rem 0.375rem 0.375rem' }}
         >
-          <div className="d-flex flex-row justify-content-between" style={{ height: '24px' }}>
+          <div className="d-flex flex-row justify-content-between">
             <AuthorLabel
               author={author}
               authorLabel={authorLabel}

src/discussions/posts/data/__factories__/threads.factory.js

@@ -26,6 +26,7 @@ Factory.define('thread')
       'type',
       'voted',
       'pinned',
+      'copy_link',
     ],
     author: 'test_user',
     author_label: 'Staff',

src/discussions/posts/post-editor/PostTypeCard.jsx

@@ -19,9 +19,9 @@ const PostTypeCard = ({
     <label htmlFor={`post-type-${value}`} className="d-flex p-0 my-0 mr-3">
       <Form.Radio value={value} id={`post-type-${value}`} className="sr-only">{type}</Form.Radio>
       <Card
-        className={classNames('border-2 shadow-none', {
-          'border-primary': selected,
-          'border-light-400': !selected,
+        className={classNames('shadow-none', {
+          'border-primary-500-2': selected,
+          'border-light-400-2': !selected,
         })}
         style={{ cursor: 'pointer', width: `${enableInContextSidebar ? '10.021rem' : '14.25rem'}` }}
       >

src/discussions/posts/post/Post.jsx

@@ -11,7 +11,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Hyperlink, useToggle } from '@edx/paragon';
 
 import HTMLLoader from '../../../components/HTMLLoader';
-import { ContentActions } from '../../../data/constants';
+import { ContentActions, getFullUrl } from '../../../data/constants';
 import { selectorForUnitSubsection, selectTopicContext } from '../../../data/selectors';
 import { AlertBanner, Confirmation } from '../../common';
 import { DiscussionContext } from '../../common/context';
@@ -37,7 +37,7 @@ const Post = ({ handleAddResponseButton }) => {
   const location = useLocation();
   const history = useHistory();
   const dispatch = useDispatch();
-  const courseId = useSelector((state) => state.config.id);
+  const { courseId } = useContext(DiscussionContext);
   const topic = useSelector(selectTopic(topicId));
   const getTopicSubsection = useSelector(selectorForUnitSubsection);
   const topicContext = useSelector(selectTopicContext(topicId));
@@ -78,8 +78,7 @@ const Post = ({ handleAddResponseButton }) => {
   }, [closed, postId, reasonCodesEnabled, showClosePostModal]);
 
   const handlePostCopyLink = useCallback(() => {
-    const postURL = new URL(`${getConfig().PUBLIC_PATH}${courseId}/posts/${postId}`, window.location.origin);
-    navigator.clipboard.writeText(postURL.href);
+    navigator.clipboard.writeText(getFullUrl(`${courseId}/posts/${postId}`));
   }, [window.location.origin, postId, courseId]);
 
   const handlePostPin = useCallback(() => dispatch(

src/discussions/posts/post/PostLink.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unknown-property */
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
@@ -7,7 +6,7 @@ import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Badge, Icon, Truncate } from '@edx/paragon';
+import { Badge, Icon } from '@edx/paragon';
 import { CheckCircle } from '@edx/paragon/icons';
 
 import { PushPin } from '../../../components/icons';
@@ -87,48 +86,46 @@ const PostLink = ({
         />
         <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
           <div className="d-flex flex-column justify-content-start mw-100 flex-fill" style={{ marginBottom: '-3px' }}>
-            <div className="d-flex align-items-center pb-0 mb-0 flex-fill font-weight-500">
-              <Truncate lines={1} className="mr-1.5" whiteSpace>
-                <span
-                  class={
-                      classNames(
-                        'font-weight-500 font-size-14 text-primary-500 font-style align-bottom',
-                        { 'font-weight-bolder': !read },
-                      )
-                    }
+            <div className="d-flex align-items-center pb-0 mb-0 flex-fill">
+              <div className="text-truncate mr-1">
+                <span className={classNames(
+                  'font-weight-500 font-size-14 text-primary-500 font-style align-bottom mr-1',
+                  { 'font-weight-bolder': !read },
+                )}
                 >
                   {title}
                 </span>
-                <span class="align-bottom"> </span>
-                <span
-                  class="text-gray-700 font-weight-normal font-size-14 font-style align-bottom"
-                >
-                  {isPostPreviewAvailable(previewBody)
-                    ? previewBody
-                    : intl.formatMessage(messages.postWithoutPreview)}
+                <span className="text-gray-700 font-weight-normal font-size-14 font-style align-bottom">
+                  {isPostPreviewAvailable(previewBody) ? previewBody : intl.formatMessage(messages.postWithoutPreview)}
                 </span>
-              </Truncate>
+              </div>
               {showAnsweredBadge && (
-              <Icon src={CheckCircle} className="text-success font-weight-500 ml-auto badge-padding" data-testid="check-icon">
-                <span className="sr-only">{' '}answered</span>
-              </Icon>
+                <Icon
+                  data-testid="check-icon"
+                  src={CheckCircle}
+                  className="text-success font-weight-500 ml-auto badge-padding"
+                >
+                  <span className="sr-only">{' '}answered</span>
+                </Icon>
               )}
               {canSeeReportedBadge && (
-              <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>
+                <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>
               )}
               {pinned && (
-              <Icon
-                src={PushPin}
-                className={`post-summary-icons-dimensions text-gray-700
-                    ${canSeeReportedBadge || showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
-              />
+                <Icon
+                  src={PushPin}
+                  className={classNames('post-summary-icons-dimensions text-gray-700', {
+                    'ml-2': canSeeReportedBadge || showAnsweredBadge,
+                    'ml-auto': !canSeeReportedBadge && !showAnsweredBadge,
+                  })}
+                />
               )}
             </div>
           </div>

src/i18n/messages/fr_CA.json

@@ -11,7 +11,7 @@
   "discussions.topics.unnamed.subsection.label": "Sous-section sans nom",
   "discussions.subtopics.unnamed.topic.label": "Sujet sans nom",
   "discussions.topics.title": "Aucun sujet n'existe",
-  "discussions.topics.createTopic": "Veuillez contacter votre administrateur pour créer un sujet",
+  "discussions.topics.createTopic": "Veuillez contacter votre admin pour créer un sujet",
   "discussions.topics.nothing": "Rien ici encore",
   "discussions.topics.archived.label": "Archivé",
   "discussions.learner.reported": "{reported} signalé",
@@ -20,12 +20,12 @@
   "discussions.learner.loadMostLearners": "Afficher plus",
   "discussions.learner.back": "Retour",
   "discussions.learner.activityForLearner": "Activité pour {username}",
-  "discussions.learner.mostActivity": "La plupart des activités",
+  "discussions.learner.mostActivity": "Les plus actifs",
   "discussions.learner.reportedActivity": "Activité signalée",
   "discussions.learner.recentActivity": "Activité récente",
-  "discussions.learner.sortFilterStatus": "Tous les apprenants triés pas {sort, select,\n      flagged {reported activity}\n      activity {most activity}\n      other {{sort}}\n    }",
+  "discussions.learner.sortFilterStatus": "Tous les apprenants triés par {sort, select,\n      flagged {l'activité signalée}\n      activity {les plus actifs}\n      other {{sort}}\n    }",
   "discussion.learner.allActivity": "Toutes les activités",
-  "discussion.learner.posts": "Messages",
+  "discussion.learner.posts": "Publications",
   "discussions.actions.button.alt": "Menu Actions",
   "discussions.actions.copylink": "Copier le lien",
   "discussions.actions.edit": "Éditer",
@@ -39,15 +39,15 @@
   "discussions.actions.unreport": "Ne pas signaler",
   "discussions.actions.endorse": "Approuver",
   "discussions.actions.unendorse": "Ne plus approuver",
-  "discussions.actions.markAnswered": "Marquer comme répondu",
-  "discussions.actions.unMarkAnswered": "Décocher comme répondu",
+  "discussions.actions.markAnswered": "Marquer comme répondue",
+  "discussions.actions.unMarkAnswered": "Décocher comme répondue",
   "discussions.modal.confirmation.button.cancel": "Annuler",
-  "discussions.empty.allTopics": "Toutes les activités de discussion pour ces sujets apparaîtront ici.",
+  "discussions.empty.allTopics": "Toutes les activités de discussion pour ces sujets s'afficheront ici.",
   "discussions.empty.allPosts": "Toutes les activités de discussion pour votre cours s'afficheront ici.",
-  "discussions.empty.myPosts": "Les messages avec lesquels vous avez interagi s'afficheront ici.",
+  "discussions.empty.myPosts": "Les publications avec lesquelles vous avez interagi s'afficheront ici.",
   "discussions.empty.topic": "Toutes les activités de discussion pour ce sujet s'afficheront ici.",
   "discussions.empty.title": "Rien ici encore",
-  "discussions.empty.noPostSelected": "Aucun message sélectionné",
+  "discussions.empty.noPostSelected": "Aucune publication sélectionnée",
   "discussions.empty.noTopicSelected": "Aucun sujet sélectionné",
   "discussions.sidebar.noResultsFound": "Aucun résultat trouvé",
   "discussions.sidebar.differentKeywords": "Essayez de rechercher différents mots-clés",
@@ -55,9 +55,9 @@
   "discussions.sidebar.removeKeywordsOnly": "Essayez de rechercher différents mots-clés",
   "discussions.sidebar.removeFilters": "Essayez de retirer certains filtres",
   "discussions.empty.iconAlt": "Vide",
-  "discussions.authors.label.staff": "Équipe pédagogique",
+  "discussions.authors.label.staff": "Personnel",
   "discussions.authors.label.ta": "Assistant d'enseignement",
-  "discussions.learner.loadMostPosts": "Charger plus de messages",
+  "discussions.learner.loadMostPosts": "Charger plus de publications",
   "discussions.post.anonymous.author": "anonyme",
   "discussion.blackoutBanner.information": "La publication dans les discussions est désactivée par l'équipe du cours",
   "discussions.editor.image.warning.message": "Les images dont la largeur ou la hauteur est supérieure à 999 pixels ne seront pas visibles lorsque la publication, la réponse ou le commentaire est affiché à l'aide de discussions de cours en ligne",
@@ -65,30 +65,30 @@
   "discussions.editor.image.warning.dismiss": "Ok",
   "discussions.navigation.breadcrumbMenu.allTopics": "Sujets",
   "discussions.navigation.breadcrumbMenu.showAll": "Tout afficher",
-  "discussions.navigation.navigationBar.allPosts": "Tous les messages",
+  "discussions.navigation.navigationBar.allPosts": "Toutes les publications",
   "discussions.navigation.navigationBar.allTopics": "Sujets",
-  "discussions.navigation.navigationBar.myPosts": "Mes messages",
+  "discussions.navigation.navigationBar.myPosts": "Mes publications",
   "discussions.navigation.navigationBar.learners": "Apprenants",
   "discussions.comments.comment.addComment": "Ajouter un commentaire",
   "discussions.comments.comment.addResponse": "Ajouter une réponse",
   "discussions.comments.comment.abuseFlaggedMessage": "Contenu signalé au personnel pour examen",
   "discussions.actions.back.alt": "Retour à la liste",
-  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {No responses}\n      one {Showing # response}\n      other {Showing # responses}\n    }",
-  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {No endorsed responses}\n      one {Showing # endorsed response}\n      other {Showing # endorsed responses}\n    }",
+  "discussions.comments.comment.responseCount": "{num, plural,\n      =0 {Aucune réponse}\n      one {Affiche # réponse}\n      other {Affiche # réponses}\n    }",
+  "discussions.comments.comment.endorsedResponseCount": "{num, plural,\n      =0 {Aucune réponse approuvée}\n      one {Affiche # réponse approuvée}\n      other {Affiche # réponses approuvées}\n    }",
   "discussions.comments.comment.loadMoreComments": "Charger plus de commentaires",
   "discussions.comments.comment.loadMoreResponses": "Charger plus de réponses",
-  "discussions.comments.comment.visibility": "Ce message est visible par {group, select,\n         null {Everyone}\n         other {{group}}\n    }.",
+  "discussions.comments.comment.visibility": "Cette publication est visible par {group, select,\n         null {Tous}\n         other {{group}}\n    }.",
   "discussions.comments.comment.postedTime": "{postType, select,\n      discussion {Discussion}\n      question {Question}\n      other {{postType}}\n    } posted {relativeTime} by",
   "discussions.comments.comment.commentTime": "Publié {relativeTime}",
   "discussions.comments.comment.answer": "Réponse",
-  "discussions.comments.comment.answeredlabel": "Marqué comme répondu par",
+  "discussions.comments.comment.answeredlabel": "Marqué comme répondue par",
   "discussions.comments.comment.endorsed": "Approuvé",
   "discussions.comments.comment.endorsedlabel": "Approuvé par",
   "discussions.actions.label": "Menu Actions",
   "discussions.editor.submit": "Soumettre",
   "discussions.editor.submitting": "Soumission",
   "discussions.editor.cancel": "Annuler",
-  "discussions.editor.error.empty": "Le contenu du message ne peut pas être vide.",
+  "discussions.editor.error.empty": "Le contenu de la publication ne peut pas être vide.",
   "discussions.editor.delete.response.title": "Supprimer la réponse",
   "discussions.editor.delete.response.description": "Êtes-vous sûr de vouloir supprimer définitivement cette réponse?",
   "discussions.editor.delete.comment.title": "Supprimer le commentaire",
@@ -103,22 +103,22 @@
   "discussions.comment.comments.editedBy": "Édité par",
   "discussions.comment.comments.fullStop": "•",
   "discussions.comment.comments.reason": "Raison",
-  "discussions.post.closedBy": "Message fermé par",
+  "discussions.post.closedBy": "Publication fermée par",
   "discussion.comment.time": "il y a {time}",
   "discussion.thread.notFound": "Sujet introuvable",
-  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {Oldest first}\n      true {Newest first}\n      other {{sort}}\n    }",
+  "discussions.comment.sortFilterStatus": "{sort, select,\n      false {plus ancien d'abord}\n      true {plus récent d'abord}\n      other {{sort}}\n    }",
   "discussions.app.title": "Discussions",
-  "discussions.posts.actionBar.searchAllPosts": "Recherche dans les messages",
-  "discussions.posts.actionBar.search": "{page, select,\n      topics {Search topics}\n      posts {Search all posts}\n      learners {Search learners}\n      myPosts {Search all posts}\n      other {{page}}\n    }",
+  "discussions.posts.actionBar.searchAllPosts": "Recherche dans les publications",
+  "discussions.posts.actionBar.search": "{page, select,\n      topics {Recherche sujets}\n      posts {Recherche toutes publications}\n      learners {Recherche apprenants}\n      myPosts {Recherche mes publications}\n      other {{page}}\n    }",
   "discussions.actionBar.searchInfo": "Affichage des résultats {count} pour \"{text}\"",
   "discussions.actionBar.searchRewriteInfo": "Aucun résultat trouvé pour \"{searchString}\". Affichage des résultats {count} pour \"{textSearchRewrite}\".",
   "discussions.actionBar.searchInfoSearching": "Recherche...",
   "discussions.actionBar.clearSearch": "Effacer les résultats",
-  "discussion.posts.actionBar.add": "Ajouter un message",
+  "discussion.posts.actionBar.add": "Ajouter une publication",
   "discussion.posts.actionBar.close": "Fermer",
-  "discussions.post.editor.type": "Type de message",
-  "discussions.post.editor.addPostHeading": "Ajouter un message",
-  "discussions.post.editor.editPostHeading": "Modifier le message",
+  "discussions.post.editor.type": "Type de publication",
+  "discussions.post.editor.addPostHeading": "Ajouter une publication",
+  "discussions.post.editor.editPostHeading": "Modifier la publication",
   "discussions.post.editor.typeDescription": "Les questions soulèvent des problèmes auxquels il faut répondre. Les discussions partagent des idées et démarrent des conversations.",
   "discussions.post.editor.required": "Obligatoire",
   "discussions.post.editor.questionType": "Question",
@@ -126,16 +126,16 @@
   "discussions.post.editor.discussionType": "Discussion",
   "discussions.post.editor.discussionDescription": "Partagez des idées et démarrez des conversations",
   "discussions.post.editor.topicArea": "Secteur thématique",
-  "discussions.post.editor.topicAreaDescription": "Ajouter votre message à un sujet pertinent afin d'aider les autres à le trouver.",
+  "discussions.post.editor.topicAreaDescription": "Ajouter votre publication à un sujet pertinent afin d'aider les autres à la trouver.",
   "discussions.post.editor.cohortVisibility": "Visibilité de la cohorte",
   "discussions.post.editor.cohortVisibilityAllLearners": "Tous les apprenants",
-  "discussions.post.editor.title": "Titre du message",
+  "discussions.post.editor.title": "Titre de la publication",
   "discussions.post.editor.titleDescription": "Ajouter un titre clair et descriptif afin d'encourager la participation.",
-  "discussions.post.editor.title.error": "Le titre du message ne peut pas être vide.",
-  "discussions.post.editor.content.error": "Le contenu du message ne peut pas être vide.",
+  "discussions.post.editor.title.error": "Le titre de la publication ne peut pas être vide.",
+  "discussions.post.editor.content.error": "Le contenu de la publication ne peut pas être vide.",
   "discussions.post.editor.questionText": "Votre question ou idée (obligatoire)",
   "discussions.post.editor.preview": "Aperçu",
-  "discussions.post.editor.followPost": "Suivez ce message",
+  "discussions.post.editor.followPost": "Suivez cette publication",
   "discussions.post.editor.anonymousPost": "Publier anonymement",
   "discussions.post.editor.anonymousToPeersPost": "Publier anonymement à vos pairs",
   "discussions.editor.posts.editReasonCode": "Raison de la modification",
@@ -147,64 +147,64 @@
   "discussions.posts.filter.questions": "Questions",
   "discussions.posts.filter.message": "Statut : {filterBy}",
   "discussions.posts.status.filter.anyStatus": "Tout statut",
-  "discussions.posts.status.filter.unread": "Non lu",
-  "discussions.posts.status.filter.following": "Suivi",
-  "discussions.posts.status.filter.reported": "Signalé",
-  "discussions.posts.status.filter.unanswered": "Non répondu",
-  "discussions.posts.status.filter.unresponded": "Pas répondu",
-  "discussions.posts.filter.myPosts": "Mes messages",
+  "discussions.posts.status.filter.unread": "Non lues",
+  "discussions.posts.status.filter.following": "Suivies",
+  "discussions.posts.status.filter.reported": "Signalées",
+  "discussions.posts.status.filter.unanswered": "Sans réponses",
+  "discussions.posts.status.filter.unresponded": "Non répondues",
+  "discussions.posts.filter.myPosts": "Mes publications",
   "discussions.posts.filter.myDiscussions": "Mes discussions",
   "discussions.posts.filter.myQuestions": "Mes questions",
-  "discussions.posts.sort.message": "Trié par {sortBy}",
+  "discussions.posts.sort.message": "Triées par {sortBy}",
   "discussions.posts.sort.lastActivity": "Activité récente",
-  "discussions.posts.sort.commentCount": "La plupart des activités",
-  "discussions.posts.sort.voteCount": "La plupart des aimés",
-  "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {All}\n      true {Own}\n      other {{own}}\n    } {status, select,\n      statusAll {}\n      statusUnread {unread}\n      statusFollowing {followed}\n      statusReported {reported}\n      statusUnanswered {unanswered}\n      statusUnresponded {unresponded}\n      other {{status}}\n    } {type, select,\n      discussion {discussions}\n      question {questions}\n      all {posts}\n      other {{type}}\n    } {cohortType, select,\n        all {}\n        group {in {cohort}}\n        other {{cohortType}}\n    } sorted by {sort, select,\n      lastActivityAt {recent activity}\n      commentCount {most activity}\n      voteCount {most likes}\n      other {{sort}}\n    }",
+  "discussions.posts.sort.commentCount": "Les plus actives",
+  "discussions.posts.sort.voteCount": "Les plus aimées",
+  "discussions.posts.sort-filter.sortFilterStatus": "{own, select,\n      false {Toutes}\n      true {Own}\n      other {{own}}\n    } {type, select,\n      discussion {les discussions}\n      question {les questions}\n      all {les publications}\n      other {{type}}\n     } {status, select,\n      statusAll {}\n      statusUnread {non lues}\n      statusFollowing {suivies}\n      statusReported {signalées}\n      statusUnanswered {sans réponses}\n      statusUnresponded {non répondues}\n      other {{status}}\n    } {cohortType, select,\n        all {}\n        group {dans {cohort}}\n        other {{cohortType}}\n    } triées selon {sort, select,\n      lastActivityAt {les plus récentes}\n      commentCount {les plus actives}\n      voteCount {les plus aimées}\n      other {{sort}}\n    }",
   "discussions.post.author.anonymous": "anonyme",
   "discussions.post.addResponse": "Ajouter une réponse",
   "discussions.post.lastResponse": "Dernière réponse {time}",
-  "discussions.post.postedOn": "Publié {time} par {author} {authorLabel}",
-  "discussions.post.contentReported": "Signalé",
-  "discussions.post.following": "Suivi",
+  "discussions.post.postedOn": "Publiée {time} par {author} {authorLabel}",
+  "discussions.post.contentReported": "Signalées",
+  "discussions.post.following": "Suivies",
   "discussions.post.follow": "Suivre",
-  "discussions.post.followed": "Suivi",
-  "discussions.post.notFollowed": "Non suivi",
-  "discussions.post.answered": "Répondu",
+  "discussions.post.followed": "Suivies",
+  "discussions.post.notFollowed": "Non suivies",
+  "discussions.post.answered": "Répondues",
   "discussions.post.unFollow": "Ne plus suivre",
   "discussions.post.like": "Aime",
-  "discussions.post.removeLike": "Contrairement à",
-  "discussions.post.liked": "aimé",
+  "discussions.post.removeLike": "N'aime plus",
+  "discussions.post.liked": "aimées",
   "discussions.post.likes": "aime",
   "discussions.post.viewActivity": "Afficher l'activité",
   "discussions.post.activity": "Activité",
-  "discussions.post.closed": "Message fermé pour réponses et commentaires",
+  "discussions.post.closed": "Publication fermée pour réponses et commentaires",
   "discussions.post.relatedTo": "Relative à",
-  "discussions.editor.delete.post.title": "Supprimer le message",
-  "discussions.editor.delete.post.description": "Êtes-vous sûr de vouloir supprimer définitivement ce message?",
+  "discussions.editor.delete.post.title": "Supprimer la publication",
+  "discussions.editor.delete.post.description": "Êtes-vous sûr de vouloir supprimer définitivement cette publication?",
   "discussions.post.delete.confirmation.button.delete": "Supprimer",
   "discussions.editor.report.post.title": "Signaler un contenu inapproprié?",
   "discussions.editor.report.post.description": "L'équipe de modération de la discussion examinera ce contenu et prendra les mesures appropriées.",
-  "discussions.post.closePostModal.title": "Fermer le message",
-  "discussions.post.closePostModal.text": "Entrez une raison pour fermer ce message. Cela ne sera affiché qu'aux autres modérateurs.",
+  "discussions.post.closePostModal.title": "Fermer la publication",
+  "discussions.post.closePostModal.text": "Entrez une raison pour fermer cette publication. Cela ne sera affiché qu'aux autres modérateurs.",
   "discussions.post.closePostModal.reasonCodeInput": "Raison",
   "discussions.post.closePostModal.cancel": "Annuler",
-  "discussions.post.closePostModal.confirm": "Fermer le message",
+  "discussions.post.closePostModal.confirm": "Fermer la publication",
   "discussions.post.label.new": "{count} Nouveau",
-  "discussions.post.editedBy": "Édité par",
+  "discussions.post.editedBy": "Éditée par",
   "discussions.post.editReason": "Raison",
   "discussions.post.postWithoutPreview": "Aucun aperçu disponible",
-  "discussions.post.follow.description": "vous suivez ce message",
-  "discussions.post.unfollow.description": "vous ne suivez pas ce post",
-  "discussions.topics.sort.message": "Trié par {sortBy}",
+  "discussions.post.follow.description": "vous suivez cette publication",
+  "discussions.post.unfollow.description": "vous ne suivez pas cette publication",
+  "discussions.topics.sort.message": "Triées par {sortBy}",
   "discussions.topics.sort.lastActivity": "Activité récente",
-  "discussions.topics.sort.commentCount": "La plupart des activités",
+  "discussions.topics.sort.commentCount": "Les plus actives",
   "discussions.topics.sort.courseStructure": "Structure du cours",
   "discussions.topics.unnamed.label": "Catégorie sans nom",
   "discussions.subtopics.unnamed.label": "Sous-catégorie sans nom",
   "tour.action.advance": "Suivant",
   "tour.action.dismiss": "Rejeter",
   "tour.action.end": "D'accord",
-  "tour.body.notRespondedFilter": "Vous pouvez maintenant filtrer les discussions pour trouver les messages sans réponse.",
+  "tour.body.notRespondedFilter": "Vous pouvez maintenant filtrer les discussions pour trouver les publications sans réponses.",
   "tour.title.notRespondedFilter": "Nouvelle option de filtrage!",
   "tour.body.responseSortTour": "Les réponses et les commentaires sont désormais triés par les plus récents en premier. Veuillez utiliser cette option pour modifier l'ordre de tri",
   "tour.title.responseSortTour": "Triez les réponses!"

src/index.scss

@@ -1,7 +1,7 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@import "~@edx/brand/paragon/fonts.scss";
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@edx/paragon/scss/core/core.scss";
+@import "~@edx/brand/paragon/overrides.scss";
 
 @import "~@edx/frontend-component-footer/dist/footer";
 @import "~@edx/frontend-component-header/dist/index";
@@ -65,10 +65,6 @@ $fa-font-path: "~font-awesome/fonts";
   font-style: normal !important;
 }
 
-.font-family-inter {
-  font-family: "Inter";
-}
-
 .post-footer-icon-dimentions {
   width: 32px !important;
   height: 32px !important;
@@ -245,6 +241,10 @@ header {
 
 .sidebar-desktop-width {
   min-width: 29rem !important;
+
+  @include media-breakpoint-down(lg) {
+    min-width: 25rem !important;
+  }
 }
 
 .sidebar-XL-width {
@@ -255,8 +255,13 @@ header {
   background-color: #e9e6e4 !important;
 }
 
-.border-2 {
-  border: 2px solid #cccccc !important;
+.border-light-400-2 {
+  border: 2px solid $light-400 !important;
+  border-width: 2px !important;
+}
+
+.border-primary-500-2 {
+  border: 2px solid $primary-500 !important;
   border-width: 2px !important;
 }
 
@@ -278,7 +283,6 @@ header {
 
 header {
   line-height: 28px;
-  font-family: Inter, Helvetica Neue, Arial, sans-serif;
   font-size: 18px !important;
 
   .user-dropdown {
@@ -314,12 +318,10 @@ header {
 
 #courseTabsNavigation {
   font-size: 18px !important;
-  font-family: Inter, Helvetica Neue, Arial, sans-serif;
   z-index: 3;
   background-color: #fff;
 
   .container-xl {
-    padding-left: 31px;
     font-size: 1.125rem;
 
     .nav {
@@ -338,7 +340,7 @@ header {
 
 .header-action-bar {
   background-color: #fff;
-  z-index: 3;
+  z-index: 2 !important;
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   position: sticky;
   top: 0;
@@ -347,11 +349,19 @@ header {
     .nav-item:not(:last-child){
       .nav-link {
           border-right: 0;
+
+          @media screen and (max-width: 567px) {
+            border-right: solid 1px #e9e6e4;
+          }
       }
     }
   }
 }
 
+.tox-tinymce-aux {
+  z-index: 1 !important;
+}
+
 .breadcrumb-menu {
   z-index: 1;
 }
@@ -467,6 +477,10 @@ header {
       display: flex;
     }
   }
+
+  .pgn__avatar {
+    flex-shrink: 0;
+  }
 }
 
 .spinner-dimentions {
@@ -479,7 +493,6 @@ header {
 }
 
 .font-style {
-  font-family: "Inter";
   font-style: normal;
 }
 
@@ -496,6 +509,11 @@ header {
   z-index: 1;
 }
 
+.comment-line {
+  width: calc(100% - 180px);
+  line-height: 1;
+}
+
 .post-preview,
 .discussion-comments {
   blockquote {
@@ -537,3 +555,9 @@ header {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.author-name {
+  line-height: 1.5;
+  word-break: break-all;
+}
+