refactor: fixed comment sort dropdown issue

* fix: changed the title of new edx provider

* fix: added role for editedby and closedby user

* refactor: added left margin for endorsed time

* refactor: added AlertBar component to avoid duplicate code

---------

Co-authored-by: sundasnoreen12 <sundasnoreen12@ggmail.com>

src/discussions/common/ActionsDropdown.jsx

@@ -75,7 +75,7 @@ function ActionsDropdown({
           placement="bottom-end"
         >
           <div
-            className="bg-white p-1 shadow d-flex flex-column"
+            className="bg-white shadow d-flex flex-column"
             data-testid="actions-dropdown-modal-popup"
           >
             {actions.map(action => (
@@ -91,9 +91,15 @@ function ActionsDropdown({
                     close();
                     handleActions(action.action);
                   }}
-                  className="d-flex justify-content-start py-1.5 mr-4"
+                  className="d-flex justify-content-start actions-dropdown-item"
                 >
-                  <Icon src={action.icon} className="mr-1" /> {intl.formatMessage(action.label)}
+                  <Icon
+                    src={action.icon}
+                    className="icon-size-24"
+                  />
+                  <span className="font-weight-normal font-xl ml-2">
+                    {intl.formatMessage(action.label)}
+                  </span>
                 </Dropdown.Item>
               </React.Fragment>
             ))}

src/discussions/common/AlertBanner.jsx

@@ -8,13 +8,14 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
 import { Report } from '@edx/paragon/icons';
 
+import { AvatarOutlineAndLabelColors } from '../../data/constants';
 import {
   selectModerationSettings, selectUserHasModerationPrivileges, selectUserIsGroupTa, selectUserIsStaff,
 } from '../data/selectors';
 import { commentShape } from '../post-comments/comments/comment/proptypes';
 import messages from '../post-comments/messages';
 import { postShape } from '../posts/post/proptypes';
-import AuthorLabel from './AuthorLabel';
+import AlertBar from './AlertBar';
 
 function AlertBanner({
   intl,
@@ -29,6 +30,8 @@ function AlertBanner({
   const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsGroupTa
     || userIsGlobalStaff || userIsContentAuthor
   );
+  const editByLabelColor = AvatarOutlineAndLabelColors[content.editByLabel];
+  const closedByLabelColor = AvatarOutlineAndLabelColors[content.closedByLabel];
 
   return (
     <>
@@ -40,40 +43,22 @@ function AlertBanner({
       {reasonCodesEnabled && canSeeLastEditOrClosedAlert && (
         <>
           {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-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-size-8 font-style text-light-700"
-                  style={{ lineHeight: '15px' }}
-                >
-                  {intl.formatMessage(messages.fullStop)}
-                </span>
-                {intl.formatMessage(messages.reason)}:&nbsp;{content.lastEdit.reason}
-              </div>
-            </Alert>
+            <AlertBar
+              message={messages.editedBy}
+              author={content.lastEdit.editorUsername}
+              authorLabel={content.editByLabel}
+              labelColor={editByLabelColor && `text-${editByLabelColor}`}
+              reason={content.lastEdit.reason}
+            />
           )}
           {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-style">
-                {intl.formatMessage(messages.closedBy)}
-                <span className="ml-1 ">
-                  <AuthorLabel author={content.closedBy} linkToProfile postOrComment />
-                </span>
-                <span
-                  className="mx-1.5 font-size-8 font-style text-light-700"
-                  style={{ lineHeight: '15px' }}
-                >
-                  {intl.formatMessage(messages.fullStop)}
-                </span>
-
-                {content.closeReason && (`${intl.formatMessage(messages.reason)}: ${content.closeReason}`)}
-
-              </div>
-            </Alert>
+          <AlertBar
+            message={messages.closedBy}
+            author={content.closedBy}
+            authorLabel={content.closedByLabel}
+            labelColor={closedByLabelColor && `text-${closedByLabelColor}`}
+            reason={content.closeReason}
+          />
           )}
         </>
       )}

src/discussions/common/AlertBar.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Alert } from '@edx/paragon';
+
+import messages from '../post-comments/messages';
+import AuthorLabel from './AuthorLabel';
+
+function AlertBar({
+  intl,
+  message,
+  author,
+  authorLabel,
+  labelColor,
+  reason,
+}) {
+  return (
+    <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-style">
+        {intl.formatMessage(message)}
+        <span className="ml-1">
+          <AuthorLabel
+            author={author}
+            authorLabel={authorLabel}
+            labelColor={labelColor}
+            linkToProfile
+            postOrComment
+          />
+        </span>
+        <span
+          className="mr-1.5 font-size-8 font-style text-light-700"
+          style={{ lineHeight: '15px' }}
+        >
+          {intl.formatMessage(messages.fullStop)}
+        </span>
+        {reason && (`${intl.formatMessage(messages.reason)}: ${reason}`)}
+      </div>
+    </Alert>
+  );
+}
+
+AlertBar.propTypes = {
+  intl: intlShape.isRequired,
+  message: PropTypes.string,
+  author: PropTypes.string,
+  authorLabel: PropTypes.string,
+  labelColor: PropTypes.string,
+  reason: PropTypes.string,
+};
+
+AlertBar.defaultProps = {
+  message: '',
+  author: '',
+  authorLabel: '',
+  labelColor: '',
+  reason: '',
+};
+
+export default injectIntl(AlertBar);

src/index.scss

@@ -315,6 +315,8 @@ header {
 #courseTabsNavigation {
   font-size: 18px;
   font-family: Inter, Helvetica Neue, Arial, sans-serif;
+  z-index: 3;
+  background-color: #fff;
 
   .container-xl {
     padding-left: 31px;
@@ -336,7 +338,7 @@ header {
 
 .header-action-bar {
   background-color: #fff;
-  z-index: 2;
+  z-index: 3;
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   position: sticky;
   top: 0;
@@ -414,7 +416,7 @@ header {
   max-width: fit-content;
   margin-left: auto;
   margin-top: -2.063rem;
-  z-index: 1;
+  z-index: 2;
   right: 32px;
 }
 
@@ -502,3 +504,29 @@ header {
     padding-left: 1rem;
   }
 }
+
+.icon-size-24 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.actions-dropdown-item {
+  padding: 12px 16px;
+  height: 48px;
+  width: 304px;
+}
+
+.font-xl {
+  font-size: 18px;
+  line-height: 28px;
+}
+
+.usabilla_live_button_container{
+  right: 0px !important;
+}
+
+.learning-header{
+  z-index: 4;
+  position: relative;
+  background-color: #fff;
+}