From 6d36b8283f964faef6db3c2686efef5b6d403719 Mon Sep 17 00:00:00 2001
From: Narek Vardzelyan <narekcat@gmail.com>
Date: Thu, 16 Apr 2020 20:51:22 +0400
Subject: [PATCH] Fix show best rating color in profile.

---
 .../components/ProfilePage/Header/index.jsx   |  4 ++--
 .../components/ProfilePage/Header/styles.scss | 20 +++++++++++++++++++
 src/shared/components/ProfilePage/index.jsx   |  7 ++++++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/ProfilePage/Header/index.jsx b/src/shared/components/ProfilePage/Header/index.jsx
index c070adfa76..51e716b1cd 100644
--- a/src/shared/components/ProfilePage/Header/index.jsx
+++ b/src/shared/components/ProfilePage/Header/index.jsx
@@ -7,7 +7,7 @@ import { noop, get } from 'lodash';
 import moment from 'moment';
 import ReactSVG from 'react-svg';
 
-import { getRatingColor } from 'utils/tc';
+import { getRatingLevel } from 'utils/tc';
 import { config, isomorphy } from 'topcoder-react-utils';
 
 import CopilotIcon from 'assets/images/profile/ico-track-copilot.svg';
@@ -63,7 +63,7 @@ class ProfileHeader extends React.Component {
           { imageUrl ? <img src={imageUrl} onError={this.loadImageError} styleName="profile-circle" alt="Member Portait" /> : <ReactSVG path={assets('./ico-user-default.svg')} /> }
         </div>
         <div styleName="info">
-          <h1 style={{ color: getRatingColor(get(info, 'maxRating.rating', 0)) }} styleName="handle">
+          <h1 styleName={`handle level-${getRatingLevel(get(info, 'maxRating.rating', 0))}`}>
             {info.handle}
           </h1>
           <h3 styleName="location-challenges">
diff --git a/src/shared/components/ProfilePage/Header/styles.scss b/src/shared/components/ProfilePage/Header/styles.scss
index e0dfffbc16..547dd3006d 100644
--- a/src/shared/components/ProfilePage/Header/styles.scss
+++ b/src/shared/components/ProfilePage/Header/styles.scss
@@ -39,6 +39,26 @@
       line-height: 34px;
 
       @include sofia-pro-medium;
+
+      &.level-1 {
+        color: $tc-level-1;
+      }
+
+      &.level-2 {
+        color: $tc-level-2;
+      }
+
+      &.level-3 {
+        color: $tc-level-3;
+      }
+
+      &.level-4 {
+        color: $tc-level-4;
+      }
+
+      &.level-5 {
+        color: $tc-level-5;
+      }
     }
 
     h3.tenure {
diff --git a/src/shared/components/ProfilePage/index.jsx b/src/shared/components/ProfilePage/index.jsx
index a87cfc8ac2..92195ee203 100644
--- a/src/shared/components/ProfilePage/index.jsx
+++ b/src/shared/components/ProfilePage/index.jsx
@@ -119,7 +119,6 @@ class ProfilePage extends React.Component {
       copilot,
       externalAccounts,
       externalLinks,
-      info,
       skills: propSkills,
       stats,
       lookupData,
@@ -131,6 +130,12 @@ class ProfilePage extends React.Component {
       skillsExpanded,
     } = this.state;
 
+    let { info } = this.props;
+
+    if (_.isNull(_.get(info, 'maxRating.rating', 0)) && !_.isEmpty(stats)) {
+      info = _.assign(info, { maxRating: stats[0].maxRating });
+    }
+
     // get country
     let country = '';
     if (_.has(lookupData, 'countries') && lookupData.countries.length > 0) {