fix: update icons to match mockups better (#94)

Temporary icons were in use while certain icons were unavailable in Paragon. They have now been updated to use more appropriate icons.

package.json

@@ -36,16 +36,16 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-platform": "1.15.1",
-    "@edx/paragon": "19.6.0",
-    "@reduxjs/toolkit": "1.6.2",
-    "@tinymce/tinymce-react": "3.13.0",
+    "@edx/frontend-platform": "1.15.4",
+    "@edx/paragon": "19.10.1",
+    "@reduxjs/toolkit": "1.8.0",
+    "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
     "classnames": "2.3.1",
-    "core-js": "3.19.1",
+    "core-js": "3.21.1",
     "formik": "2.2.9",
     "lodash.snakecase": "4.1.1",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
     "raw-loader": "4.0.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -59,17 +59,17 @@
     "yup": "0.31.1"
   },
   "devDependencies": {
-    "@edx/frontend-build": "9.1.1",
-    "@testing-library/jest-dom": "5.15.0",
-    "@testing-library/react": "12.1.2",
+    "@edx/frontend-build": "9.1.2",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.4",
     "@testing-library/user-event": "13.5.0",
     "axios-mock-adapter": "1.20.0",
     "codecov": "3.8.3",
-    "es-check": "6.1.1",
+    "es-check": "6.2.1",
     "eslint-plugin-simple-import-sort": "7.0.0",
     "glob": "7.2.0",
     "husky": "7.0.4",
-    "jest": "27.3.1",
+    "jest": "27.5.1",
     "reactifex": "1.1.1",
     "rosie": "2.1.0"
   }

src/discussions/common/ActionsDropdown.jsx

@@ -6,7 +6,7 @@ import { logError } from '@edx/frontend-platform/logging';
 import {
   Button, Dropdown, Icon, IconButton, ModalPopup,
 } from '@edx/paragon';
-import { MoreVert } from '@edx/paragon/icons';
+import { MoreHoriz } from '@edx/paragon/icons';
 
 import { ContentActions } from '../../data/constants';
 import { commentShape } from '../comments/comment/proptypes';
@@ -37,7 +37,7 @@ function ActionsDropdown({
         <IconButton
           onClick={() => setOpen(!isOpen)}
           alt={intl.formatMessage(messages.actionsAlt)}
-          src={MoreVert}
+          src={MoreHoriz}
           iconAs={Icon}
           disabled={disabled}
         />

src/discussions/common/AlertBanner.jsx

@@ -5,10 +5,8 @@ import { useSelector } from 'react-redux';
 import * as timeago from 'timeago.js';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert, Icon } from '@edx/paragon';
-import {
-  CheckCircle, Error, Institution, School, Verified,
-} from '@edx/paragon/icons';
+import { Alert } from '@edx/paragon';
+import { CheckCircle, Error, Verified } from '@edx/paragon/icons';
 
 import { ThreadType } from '../../data/constants';
 import { commentShape } from '../comments/comment/proptypes';
@@ -25,7 +23,6 @@ function AlertBanner({
   const isQuestion = postType === ThreadType.QUESTION;
   const classes = isQuestion ? 'bg-success-500 text-white' : 'bg-dark-500 text-white';
   const iconClass = isQuestion ? CheckCircle : Verified;
-  const endorsedByLabels = { Staff: 'Staff', 'Community TA': 'TA' };
   const userIsPrivileged = useSelector(selectUserIsPrivileged);
   const { reasonCodesEnabled } = useSelector(selectModerationSettings);
   return (
@@ -44,35 +41,15 @@ function AlertBanner({
                 : messages.endorsed,
             )}
             </strong>
-            <span className="d-flex align-items-center">
-              {intl.formatMessage(
-                isQuestion
-                  ? messages.answeredLabel
-                  : messages.endorsedLabel,
-              )}
-              <span className="mx-2">{content.endorsedBy}</span>
-
-              {content.endorsedByLabel === 'Staff' ? (
-                <Icon
-                  style={{
-                    width: '1rem',
-                    height: '1rem',
-                  }}
-                  src={Institution}
-                />
-              ) : (
-                <Icon
-                  style={{
-                    width: '1rem',
-                    height: '1rem',
-                  }}
-                  src={School}
-                />
-              )}
-
-              <span className="mr-3" data-testid="endorsed-by-label">
-                {endorsedByLabels[content.endorsedByLabel]}
+            <span className="d-flex align-items-center mr-1">
+              <span className="mr-2">
+                {intl.formatMessage(
+                  isQuestion
+                    ? messages.answeredLabel
+                    : messages.endorsedLabel,
+                )}
               </span>
+              <AuthorLabel author={content.endorsedBy} authorLabel={content.endorsedByLabel} />
               {timeago.format(content.endorsedAt, intl.locale)}
             </span>
           </div>

src/discussions/common/AuthorLabel.jsx

@@ -3,44 +3,55 @@ import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Icon } from '@edx/paragon';
 import { Institution, School } from '@edx/paragon/icons';
 
+import messages from '../messages';
+
 function AuthorLabel({
+  intl,
   author,
   authorLabel,
   linkToProfile,
 }) {
+  let icon = null;
+  let authorLabelMessage = null;
+  if (authorLabel === 'Staff') {
+    icon = Institution;
+    authorLabelMessage = intl.formatMessage(messages.authorLabelStaff);
+  }
+  if (authorLabel === 'Community TA') {
+    icon = School;
+    authorLabelMessage = intl.formatMessage(messages.authorLabelTA);
+  }
   const labelContents = (
     <>
-      {author}
-      {authorLabel === 'Staff' && (
-      <Icon
-        style={{
-          width: '1rem',
-          height: '1rem',
-        }}
-        src={Institution}
-      />
+      <span className="mr-1">{author}</span>
+      {icon && (
+        <Icon
+          style={{
+            width: '1rem',
+            height: '1rem',
+          }}
+          src={icon}
+        />
       )}
-      {authorLabel === 'Community TA' && (
-      <Icon
-        style={{
-          width: '1rem',
-          height: '1rem',
-        }}
-        src={School}
-      />
+      {authorLabelMessage && (
+        <span className="mr-3 ml-1">
+          {authorLabelMessage}
+        </span>
       )}
     </>
   );
-  const className = classNames('d-flex align-items-center', { 'text-success-700': Boolean(authorLabel) });
+  const className = classNames('d-flex align-items-center');
   return linkToProfile
     ? React.createElement('a', { href: '#nowhere', className }, labelContents)
     : React.createElement('div', { className }, labelContents);
 }
 
 AuthorLabel.propTypes = {
+  intl: intlShape,
   author: PropTypes.string.isRequired,
   authorLabel: PropTypes.string,
   linkToProfile: PropTypes.bool,
@@ -51,4 +62,4 @@ AuthorLabel.defaultProps = {
   authorLabel: null,
 };
 
-export default AuthorLabel;
+export default injectIntl(AuthorLabel);

src/discussions/messages.js

@@ -133,6 +133,16 @@ const messages = defineMessages({
     defaultMessage: 'Empty',
     description: 'Alt-text for image showing empty state',
   },
+  authorLabelStaff: {
+    id: 'discussions.authors.label.staff',
+    defaultMessage: 'Staff',
+    description: 'A label for staff users displayed next to their username.',
+  },
+  authorLabelTA: {
+    id: 'discussions.authors.label.ta',
+    defaultMessage: 'TA',
+    description: 'A label for community TAs displayed next to their username.',
+  },
 });
 
 export default messages;

src/discussions/posts/post/PostFooter.jsx

@@ -9,7 +9,7 @@ import {
   Badge, Icon, IconButton, OverlayTrigger, Tooltip,
 } from '@edx/paragon';
 import {
-  Locked, Person, QuestionAnswer, StarFilled, StarOutline,
+  Locked, People, QuestionAnswerOutline, StarFilled, StarOutline,
 } from '@edx/paragon/icons';
 
 import { updateExistingThread } from '../data/thunks';
@@ -52,7 +52,7 @@ function PostFooter({
       {preview && post.commentCount > 1
         && (
           <>
-            <Icon src={QuestionAnswer} className="mx-2 my-0" />
+            <Icon src={QuestionAnswerOutline} className="mx-2 my-0" />
             <span style={{ minWidth: '2rem' }}>
               {post.commentCount}
             </span>
@@ -75,7 +75,7 @@ function PostFooter({
                 >
                   <Icon
                     data-testid="cohort-icon"
-                    src={Person}
+                    src={People}
                     className="text-gray-500"
                     style={{
                       width: '1em',

src/discussions/posts/post/PostLink.jsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Badge, Icon } from '@edx/paragon';
-import { Pin } from '@edx/paragon/icons';
+import { Bookmark } from '@edx/paragon/icons';
 
 import { Routes, ThreadType } from '../../../data/constants';
 import AuthorLabel from '../../common/AuthorLabel';
@@ -38,8 +38,8 @@ function PostLink({
       to={linkUrl}
     >
       {post.pinned && (
-        <div className="d-flex flex-fill justify-content-end mr-4 text-light-500">
-          <Icon src={Pin} className="position-absolute" />
+        <div className="d-flex flex-fill justify-content-end mr-4 text-light-500 p-0">
+          <Icon src={Bookmark} className="position-absolute mt-n1" />
         </div>
       )}
       <div

src/discussions/topics/topic-group/topic/Topic.jsx

@@ -2,11 +2,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { generatePath, useParams } from 'react-router';
+import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 
 import { Icon } from '@edx/paragon';
-import { Error as ErrorIcon, Help, Post as PostIcon } from '@edx/paragon/icons';
+import { Error as ErrorIcon, Help, PostOutline } from '@edx/paragon/icons';
 
 import { Routes } from '../../../../data/constants';
 import { discussionsPath } from '../../../utils';
@@ -20,7 +20,7 @@ function Topic({ topic }) {
   const icons = [
     {
       key: 'discussions',
-      icon: PostIcon,
+      icon: PostOutline,
       count: topic.threadCounts?.discussion || 0,
     },
     {