add indicator for completed challenges in users top challenges in leaderboard (#2635)

Author: CollinBeczak

src/pages/Leaderboard/CardLeaderboard.jsx

@@ -8,6 +8,7 @@ import { Link } from "react-router-dom";
 import AsAvatarUser from "../../interactions/User/AsAvatarUser";
 import messages from "./Messages";
 import "./Leaderboard.scss";
+import SvgSymbol from "../../components/SvgSymbol/SvgSymbol";
 
 class CardLeaderboard extends Component {
   state = {
@@ -28,9 +29,27 @@ class CardLeaderboard extends Component {
     const topChallengeItems = this.props.suppressTopChallenges
       ? null
       : _map(leader.topChallenges.slice(0, this.props.maxTopChallenges), (challenge) => (
-          <li key={challenge.id}>
-            <Link to={`/browse/challenges/${challenge.id}`} title={challenge.name}>
+          <li
+            key={challenge.id}
+            className={
+              challenge.status === 5
+                ? "mr-text-green-lighter mr-flex mr-items-center mr-justify-center"
+                : "mr-flex mr-items-center mr-justify-center"
+            }
+          >
+            <Link
+              to={`/browse/challenges/${challenge.id}`}
+              title={challenge.name}
+              className="mr-flex mr-items-center mr-justify-center"
+            >
               {_truncate(challenge.name, { length: 35 })}
+              {challenge.status === 5 && (
+                <SvgSymbol
+                  sym="check-circled-icon"
+                  viewBox="0 0 20 20"
+                  className="mr-fill-current mr-w-4 mr-h-4 mr-ml-2 mr-text-green"
+                />
+              )}
             </Link>
           </li>
         ));

src/pages/Leaderboard/RowLeaderboard.jsx

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import { Component } from "react";
 import { FormattedMessage, FormattedNumber } from "react-intl";
 import { Link } from "react-router-dom";
+import SvgSymbol from "../../components/SvgSymbol/SvgSymbol";
 import AsAvatarUser from "../../interactions/User/AsAvatarUser";
 import messages from "./Messages";
 import "./Leaderboard.scss";
@@ -32,6 +33,13 @@ class RowLeaderboard extends Component {
             <Link to={`/browse/challenges/${challenge.id}`} title={challenge.name}>
               {_truncate(challenge.name, { length: 35 })}
             </Link>
+            {challenge.status === 5 ? (
+              <SvgSymbol
+                sym="check-icon"
+                viewBox="0 0 20 20"
+                className="mr-fill-current mr-w-4 mr-h-4"
+              />
+            ) : null}
           </li>
         ));