fix: updated post actions dropdown design

src/discussions/common/AlertBanner.jsx

@@ -8,14 +8,13 @@ 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 AlertBar from './AlertBar';
+import AuthorLabel from './AuthorLabel';
 
 function AlertBanner({
   intl,
@@ -30,8 +29,6 @@ function AlertBanner({
   const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsGroupTa
     || userIsGlobalStaff || userIsContentAuthor
   );
-  const editByLabelColor = AvatarOutlineAndLabelColors[content.editByLabel];
-  const closedByLabelColor = AvatarOutlineAndLabelColors[content.closedByLabel];
 
   return (
     <>
@@ -43,22 +40,40 @@ function AlertBanner({
       {reasonCodesEnabled && canSeeLastEditOrClosedAlert && (
         <>
           {content.lastEdit?.reason && (
-            <AlertBar
-              message={messages.editedBy}
-              author={content.lastEdit.editorUsername}
-              authorLabel={content.editByLabel}
-              labelColor={editByLabelColor && `text-${editByLabelColor}`}
-              reason={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>
           )}
           {content.closed && (
-          <AlertBar
-            message={messages.closedBy}
-            author={content.closedBy}
-            authorLabel={content.closedByLabel}
-            labelColor={closedByLabelColor && `text-${closedByLabelColor}`}
-            reason={content.closeReason}
-          />
+            <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>
           )}
         </>
       )}

src/discussions/common/AlertBar.jsx

@@ -1,60 +0,0 @@
-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,8 +315,6 @@ header {
 #courseTabsNavigation {
   font-size: 18px;
   font-family: Inter, Helvetica Neue, Arial, sans-serif;
-  z-index: 3;
-  background-color: #fff;
 
   .container-xl {
     padding-left: 31px;
@@ -338,7 +336,7 @@ header {
 
 .header-action-bar {
   background-color: #fff;
-  z-index: 3;
+  z-index: 2;
   box-shadow: 0px 2px 4px rgb(0 0 0 / 15%), 0px 2px 8px rgb(0 0 0 / 15%);
   position: sticky;
   top: 0;
@@ -416,7 +414,7 @@ header {
   max-width: fit-content;
   margin-left: auto;
   margin-top: -2.063rem;
-  z-index: 2;
+  z-index: 1;
   right: 32px;
 }
 
@@ -520,13 +518,3 @@ header {
   font-size: 18px;
   line-height: 28px;
 }
-
-.usabilla_live_button_container{
-  right: 0px !important;
-}
-
-.learning-header{
-  z-index: 4;
-  position: relative;
-  background-color: #fff;
-}