fix: endorse icons colors changed to respective background

src/discussions/comments/comment/CommentHeader.jsx

@@ -10,7 +10,7 @@ import {
   Avatar, Icon,
 } from '@edx/paragon';
 
-import { AvatarOutlineAndLabelColors, ThreadType } from '../../../data/constants';
+import { AvatarOutlineAndLabelColors, EndorsementStatus, ThreadType } from '../../../data/constants';
 import { AuthorLabel } from '../../common';
 import ActionsDropdown from '../../common/ActionsDropdown';
 import { useAlertBannerVisible } from '../../data/hooks';
@@ -31,7 +31,7 @@ function CommentHeader({
     ...comment,
     postType,
   });
-  const actionIcons = actions.find(({ action }) => action === 'endorsed');
+  const actionIcons = actions.find(({ action }) => action === EndorsementStatus.ENDORSED);
 
   const handleIcons = (action) => {
     const actionFunction = actionHandlers[action];
@@ -41,7 +41,6 @@ function CommentHeader({
       logError(`Unknown or unimplemented action ${action}`);
     }
   };
-
   return (
     <div className={classNames('d-flex flex-row justify-content-between', {
       'mt-2': hasAnyAlert,
@@ -65,21 +64,23 @@ function CommentHeader({
         />
       </div>
       <div className="d-flex align-items-center">
+
+        {actionIcons && (
         <span className="btn-icon btn-icon-sm mr-1 align-items-center">
-          {actionIcons && (
-            <Icon
-              data-testid="check-icon"
-              onClick={
+          <Icon
+            data-testid="check-icon"
+            onClick={
                 () => {
                   handleIcons(actionIcons.action);
                 }
               }
-              src={actionIcons.icon}
-              iconAs={Icon}
-              size="sm"
-            />
-          )}
+            src={actionIcons.icon}
+            className={['endorse', 'unendorse'].includes(actionIcons.id) ? 'text-dark-500' : 'text-success-500'}
+            size="sm"
+          />
         </span>
+        )}
+
         <ActionsDropdown
           commentOrPost={{
             ...comment,

src/discussions/common/AuthorLabel.jsx

@@ -20,6 +20,7 @@ function AuthorLabel({
   authorLabel,
   linkToProfile,
   labelColor,
+  alert,
 }) {
   const location = useLocation();
   const { courseId } = useContext(DiscussionContext);
@@ -47,6 +48,7 @@ function AuthorLabel({
       <span
         className={classNames('mr-1 font-size-14 font-style-normal font-family-inter font-weight-500', {
           'text-gray-700': isRetiredUser,
+          'text-primary-500': !authorLabelMessage && !isRetiredUser && !alert,
         })}
         role="heading"
         aria-level="2"
@@ -65,7 +67,8 @@ function AuthorLabel({
       {authorLabelMessage && (
         <span
           className={classNames('mr-1 font-size-14 font-style-normal font-family-inter font-weight-500', {
-            'text-primary-500': !authorLabelMessage,
+            'text-primary-500': !authorLabelMessage && !isRetiredUser && !alert,
+            'text-gray-700': isRetiredUser,
           })}
           style={{ marginLeft: '2px' }}
         >
@@ -96,12 +99,14 @@ AuthorLabel.propTypes = {
   authorLabel: PropTypes.string,
   linkToProfile: PropTypes.bool,
   labelColor: PropTypes.string,
+  alert: PropTypes.bool,
 };
 
 AuthorLabel.defaultProps = {
   linkToProfile: false,
   authorLabel: null,
   labelColor: '',
+  alert: false,
 };
 
 export default injectIntl(AuthorLabel);

src/discussions/common/EndorsedAlertBanner.jsx

@@ -46,7 +46,12 @@ function EndorsedAlertBanner({
                   : messages.endorsedLabel,
               )}
             </span>
-            <AuthorLabel author={content.endorsedBy} authorLabel={content.endorsedByLabel} linkToProfile />
+            <AuthorLabel
+              author={content.endorsedBy}
+              authorLabel={content.endorsedByLabel}
+              linkToProfile
+              alert={content.endorsed}
+            />
             {intl.formatMessage(messages.time, { time: timeago.format(content.endorsedAt, 'time-locale') })}
           </span>
         </div>