From 1aadbd9c4f70ae895ce81ded3b513d717de144ba Mon Sep 17 00:00:00 2001
From: ayeshoali <ayeshoali@gmail.com>
Date: Thu, 10 Nov 2022 19:06:33 +0500
Subject: [PATCH 1/2] style: icons for responses to endorse and mark as
 answered added

---
 .../comments/comment/CommentHeader.jsx        | 46 ++++++++++++++-----
 .../comments/comment/CommentHeader.test.jsx   |  4 +-
 src/discussions/common/AuthorLabel.jsx        |  1 -
 .../common/EndorsedAlertBanner.jsx            |  2 +-
 src/discussions/messages.js                   |  2 +-
 src/discussions/utils.js                      | 13 ++++--
 6 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/src/discussions/comments/comment/CommentHeader.jsx b/src/discussions/comments/comment/CommentHeader.jsx
index 33ccc700..c95a5b70 100644
--- a/src/discussions/comments/comment/CommentHeader.jsx
+++ b/src/discussions/comments/comment/CommentHeader.jsx
@@ -5,14 +5,17 @@ import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 
 import { injectIntl } from '@edx/frontend-platform/i18n';
-import { Avatar, Icon } from '@edx/paragon';
-import { CheckCircle, Verified } from '@edx/paragon/icons';
+import { logError } from '@edx/frontend-platform/logging';
+import {
+  Avatar, Icon,
+} from '@edx/paragon';
 
 import { AvatarOutlineAndLabelColors, ThreadType } from '../../../data/constants';
 import { AuthorLabel } from '../../common';
 import ActionsDropdown from '../../common/ActionsDropdown';
 import { useAlertBannerVisible } from '../../data/hooks';
 import { selectAuthorAvatars } from '../../posts/data/selectors';
+import { useActions } from '../../utils';
 import { commentShape } from './proptypes';
 
 function CommentHeader({
@@ -24,6 +27,21 @@ function CommentHeader({
   const colorClass = AvatarOutlineAndLabelColors[comment.authorLabel];
   const hasAnyAlert = useAlertBannerVisible(comment);
 
+  const actions = useActions({
+    ...comment,
+    postType,
+  });
+  const actionIcons = actions.find(({ action }) => action === 'endorsed');
+
+  const handleIcons = (action) => {
+    const actionFunction = actionHandlers[action];
+    if (actionFunction) {
+      actionFunction();
+    } else {
+      logError(`Unknown or unimplemented action ${action}`);
+    }
+  };
+
   return (
     <div className={classNames('d-flex flex-row justify-content-between', {
       'mt-2': hasAnyAlert,
@@ -47,15 +65,21 @@ function CommentHeader({
         />
       </div>
       <div className="d-flex align-items-center">
-        {comment.endorsed && (
-          <span className="btn-icon btn-icon-sm mr-1 align-items-center">
-            {
-              postType === 'question'
-                ? <Icon src={CheckCircle} className="text-success" data-testid="check-icon" />
-                : <Icon src={Verified} className="text-dark-500" data-testid="verified-icon" />
-            }
-          </span>
-        )}
+        <span className="btn-icon btn-icon-sm mr-1 align-items-center">
+          {actionIcons && (
+            <Icon
+              data-testid="check-icon"
+              onClick={
+                () => {
+                  handleIcons(actionIcons.action);
+                }
+              }
+              src={actionIcons.icon}
+              iconAs={Icon}
+              size="sm"
+            />
+          )}
+        </span>
         <ActionsDropdown
           commentOrPost={{
             ...comment,
diff --git a/src/discussions/comments/comment/CommentHeader.test.jsx b/src/discussions/comments/comment/CommentHeader.test.jsx
index 0e1ba4d5..0018378b 100644
--- a/src/discussions/comments/comment/CommentHeader.test.jsx
+++ b/src/discussions/comments/comment/CommentHeader.test.jsx
@@ -30,7 +30,7 @@ const mockComment = {
   author: 'abc123',
   authorLabel: 'ABC 123',
   endorsed: true,
-  editableFields: [],
+  editableFields: ['endorsed'],
 };
 
 describe('Comment Header', () => {
@@ -48,7 +48,7 @@ describe('Comment Header', () => {
 
   it('should render verified icon for endorsed discussion posts', () => {
     renderComponent(mockComment, 'discussion', {});
-    expect(screen.queryAllByTestId('verified-icon')).toHaveLength(1);
+    expect(screen.queryAllByTestId('check-icon')).toHaveLength(1);
   });
   it('should render check icon for endorsed question posts', () => {
     renderComponent(mockComment, 'question', {});
diff --git a/src/discussions/common/AuthorLabel.jsx b/src/discussions/common/AuthorLabel.jsx
index ea87c0ec..277cac21 100644
--- a/src/discussions/common/AuthorLabel.jsx
+++ b/src/discussions/common/AuthorLabel.jsx
@@ -46,7 +46,6 @@ function AuthorLabel({
     <div className={className}>
       <span
         className={classNames('mr-1 font-size-14 font-style-normal font-family-inter font-weight-500', {
-          'text-primary-500': !authorLabelMessage && !isRetiredUser,
           'text-gray-700': isRetiredUser,
         })}
         role="heading"
diff --git a/src/discussions/common/EndorsedAlertBanner.jsx b/src/discussions/common/EndorsedAlertBanner.jsx
index 8f0a9e11..442fb419 100644
--- a/src/discussions/common/EndorsedAlertBanner.jsx
+++ b/src/discussions/common/EndorsedAlertBanner.jsx
@@ -39,7 +39,7 @@ function EndorsedAlertBanner({
           )}
           </strong>
           <span className="d-flex align-items-center mr-1 flex-wrap">
-            <span className="mr-2">
+            <span className="mr-1">
               {intl.formatMessage(
                 isQuestion
                   ? messages.answeredLabel
diff --git a/src/discussions/messages.js b/src/discussions/messages.js
index e39fd662..0d84cd9c 100644
--- a/src/discussions/messages.js
+++ b/src/discussions/messages.js
@@ -63,7 +63,7 @@ const messages = defineMessages({
   },
   markAnsweredAction: {
     id: 'discussions.actions.markAnswered',
-    defaultMessage: 'Mark as Answered',
+    defaultMessage: 'Mark as answered',
     description: 'Action to mark a comment as answering a post',
   },
   unmarkAnsweredAction: {
diff --git a/src/discussions/utils.js b/src/discussions/utils.js
index a95a87c0..ff84c9d1 100644
--- a/src/discussions/utils.js
+++ b/src/discussions/utils.js
@@ -5,7 +5,9 @@ import { generatePath, useRouteMatch } from 'react-router';
 
 import { getConfig } from '@edx/frontend-platform';
 import {
-  Delete, Edit, Pin, QuestionAnswer, Report, VerifiedBadge,
+  CheckCircle,
+  CheckCircleOutline,
+  Delete, Edit, Pin, QuestionAnswer, Report, Verified, VerifiedOutline,
 } from '@edx/paragon/icons';
 
 import { InsertLink } from '../components/icons';
@@ -101,7 +103,7 @@ export const ACTIONS_LIST = [
   {
     id: 'endorse',
     action: ContentActions.ENDORSE,
-    icon: VerifiedBadge,
+    icon: VerifiedOutline,
     label: messages.endorseAction,
     conditions: {
       endorsed: false,
@@ -111,7 +113,7 @@ export const ACTIONS_LIST = [
   {
     id: 'unendorse',
     action: ContentActions.ENDORSE,
-    icon: VerifiedBadge,
+    icon: Verified,
     label: messages.unendorseAction,
     conditions: {
       endorsed: true,
@@ -121,7 +123,7 @@ export const ACTIONS_LIST = [
   {
     id: 'answer',
     action: ContentActions.ENDORSE,
-    icon: VerifiedBadge,
+    icon: CheckCircleOutline,
     label: messages.markAnsweredAction,
     conditions: {
       endorsed: false,
@@ -131,7 +133,7 @@ export const ACTIONS_LIST = [
   {
     id: 'unanswer',
     action: ContentActions.ENDORSE,
-    icon: VerifiedBadge,
+    icon: CheckCircle,
     label: messages.unmarkAnsweredAction,
     conditions: {
       endorsed: true,
@@ -183,6 +185,7 @@ export function useActions(content) {
         .every(condition => condition === true)
       : true
   );
+
   return ACTIONS_LIST.filter(
     ({
       action,

From b92e10e8ae7addec16af3ed665d39e67b5c36e5f Mon Sep 17 00:00:00 2001
From: ayeshoali <ayeshoali@gmail.com>
Date: Fri, 18 Nov 2022 18:42:55 +0500
Subject: [PATCH 2/2] fix: endorse icons colors changed to respective
 background

---
 .../comments/comment/CommentHeader.jsx        | 25 ++++++++++---------
 src/discussions/common/AuthorLabel.jsx        |  7 +++++-
 .../common/EndorsedAlertBanner.jsx            |  7 +++++-
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/discussions/comments/comment/CommentHeader.jsx b/src/discussions/comments/comment/CommentHeader.jsx
index c95a5b70..e28c79a4 100644
--- a/src/discussions/comments/comment/CommentHeader.jsx
+++ b/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,
diff --git a/src/discussions/common/AuthorLabel.jsx b/src/discussions/common/AuthorLabel.jsx
index 277cac21..e3ea2c60 100644
--- a/src/discussions/common/AuthorLabel.jsx
+++ b/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);
diff --git a/src/discussions/common/EndorsedAlertBanner.jsx b/src/discussions/common/EndorsedAlertBanner.jsx
index 442fb419..3e830412 100644
--- a/src/discussions/common/EndorsedAlertBanner.jsx
+++ b/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>