issue 4552 fix

Author: PrakashDurlabhji

src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx

@@ -6,6 +6,7 @@
 import React from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
+import { getRatingLevel } from 'utils/tc';
 import moment from 'moment';
 
 import ArrowNext from '../../../../../assets/images/arrow-next.svg';
@@ -17,7 +18,7 @@ import SubmissionHistoryRow from './SubmissionHistoryRow';
 import './style.scss';
 
 export default function SubmissionRow({
-  isMM, openHistory, member, submissions, score, toggleHistory, colorStyle,
+  isMM, openHistory, member, submissions, score, toggleHistory,
   isReviewPhaseComplete, finalRank, provisionalRank, onShowPopup, rating,
 }) {
   const {
@@ -74,15 +75,15 @@ export default function SubmissionRow({
           ) : null
         }
         <div styleName="col-2 col">
-          <span styleName="col" style={colorStyle}>
+          <span styleName={`col level-${getRatingLevel(rating)}`}>
             {rating || '-'}
           </span>
           <a
             styleName="col"
             href={`${window.origin}/members/${member}`}
             target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`}
             rel="noopener noreferrer"
-            style={colorStyle}
+            styleName={`level-${getRatingLevel(rating)}`}
           >
             {member || '-'}
           </a>
@@ -164,7 +165,6 @@ export default function SubmissionRow({
 
 SubmissionRow.defaultProps = {
   toggleHistory: () => {},
-  colorStyle: {},
   score: {},
   isReviewPhaseComplete: false,
   finalRank: null,
@@ -205,7 +205,6 @@ SubmissionRow.propTypes = {
   }),
   rating: PT.number,
   toggleHistory: PT.func,
-  colorStyle: PT.shape(),
   isReviewPhaseComplete: PT.bool,
   finalRank: PT.number,
   provisionalRank: PT.number,

src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss

@@ -193,3 +193,23 @@
   margin: 10px 10px 0 10px;
   padding-top: 5px;
 }
+
+.level-1 {
+  color: $member-gray !important;
+}
+
+.level-2 {
+  color: $member-green !important;
+}
+
+.level-3 {
+  color: $member-blue !important;
+}
+
+.level-4 {
+  color: $member-yellow !important;
+}
+
+.level-5 {
+  color: $member-red !important;
+}

src/shared/components/challenge-detail/Submissions/index.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import PT from 'prop-types';
 import moment from 'moment';
 import { isMM as checkIsMM } from 'utils/challenge';
+import { getRatingLevel } from 'utils/tc';
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import { config } from 'topcoder-react-utils';
@@ -316,7 +317,7 @@ class SubmissionsComponent extends React.Component {
               href={`${window.origin}/members/${s.createdBy}`}
               target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`}
               rel="noopener noreferrer"
-              style={_.get(s, 'colorStyle')}
+              styleName={`level-${getRatingLevel(_.get(s.registrant, 'rating', 0))}`}
             >
               {s.createdBy}
             </a>
@@ -707,7 +708,7 @@ class SubmissionsComponent extends React.Component {
               <div key={s.createdBy + s.created} styleName="row">
                 {
                   !isF2F && !isBugHunt && (
-                    <div styleName="col-2" style={s.colorStyle}>
+                    <div styleName={`col-2 level-${getRatingLevel(_.get(s.registrant, 'rating', 0))}`}  >
                       { (s.registrant && !_.isNil(s.registrant.rating)) ? s.registrant.rating : '-'}
                     </div>
                   )
@@ -717,8 +718,7 @@ class SubmissionsComponent extends React.Component {
                     href={`${window.origin}/members/${s.createdBy}`}
                     target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`}
                     rel="noopener noreferrer"
-                    styleName="handle"
-                    style={s.colorStyle}
+                    styleName={`handle level-${getRatingLevel(_.get(s.registrant, 'rating', 0))}`}
                   >
                     {s.createdBy}
                   </a>

src/shared/components/challenge-detail/Submissions/style.scss

@@ -355,3 +355,23 @@
   margin-top: 25px !important;
   align-self: center;
 }
+
+.level-1 {
+  color: $member-gray !important;
+}
+
+.level-2 {
+  color: $member-green !important;
+}
+
+.level-3 {
+  color: $member-blue !important;
+}
+
+.level-4 {
+  color: $member-yellow !important;
+}
+
+.level-5 {
+  color: $member-red !important;
+}