colored handles init

Author: kkartunov

src/shared/components/Leaderboard/LeaderboardTable/index.jsx

@@ -29,6 +29,7 @@ import { Avatar } from 'topcoder-react-ui-kit';
 import { config } from 'topcoder-react-utils';
 import _ from 'lodash';
 import DefaultAvatar from 'assets/images/default-avatar-photo.svg';
+import { getRatingColor } from 'utils/tc';
 
 
 import avatarStyles from '../avatarStyles.scss';
@@ -68,6 +69,7 @@ export default function LeaderboardTable(props) {
       const fulfillment = competitor['tco_leaderboard.fulfillment']
         ? (parseFloat(competitor['tco_leaderboard.fulfillment']) * 100).toFixed(2).replace(/[.,]00$/, '')
         : competitor.fulfillment;
+      const rating = competitor['member_profile_basic.max_rating'];
       return (
         <tr key={competitor.rank}>
           <td styleName={`${stylesName}.col-rank`}>{competitor.rank}</td>
@@ -91,11 +93,16 @@ export default function LeaderboardTable(props) {
                 <div
                   styleName={`${stylesName}.handle-link`}
                   onClick={() => onUsernameClick(competitor)}
+                  style={{ color: rating ? getRatingColor(rating) : null }}
                 >
                   {competitor['member_profile_basic.handle'] || competitor.handle}
                 </div>
               ) : (
-                <a href={`${window.origin}/members/${competitor['member_profile_basic.handle'] || competitor.handle}/`} target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`}>
+                <a
+                  href={`${window.origin}/members/${competitor['member_profile_basic.handle'] || competitor.handle}/`}
+                  target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`}
+                  style={{ color: rating ? getRatingColor(rating) : null }}
+                >
                   {competitor['member_profile_basic.handle'] || competitor.handle}
                 </a>
               )

src/shared/components/Leaderboard/PodiumSpot/index.jsx

@@ -30,6 +30,7 @@ import { Avatar } from 'topcoder-react-ui-kit';
 import { config } from 'topcoder-react-utils';
 import _ from 'lodash';
 import DefaultAvatar from 'assets/images/default-avatar-photo.svg';
+import { getRatingColor } from 'utils/tc';
 
 import avatarStyles from '../avatarStyles.scss';
 import defaultStyles from './themes/styles.scss'; // eslint-disable-line
@@ -110,7 +111,7 @@ export default function PodiumSpot(props) {
   const fulfillment = competitor['tco_leaderboard.fulfillment']
     ? (parseFloat(competitor['tco_leaderboard.fulfillment']) * 100).toFixed(2).replace(/[.,]00$/, '')
     : competitor.fulfillment;
-
+  const rating = competitor['member_profile_basic.max_rating'];
   return (
     <div styleName={rootStyle}>
       <span styleName={`${stylesName}.leaderboard-avatar`}>
@@ -159,6 +160,7 @@ export default function PodiumSpot(props) {
                   <div
                     styleName={`${stylesName}.handle-link`}
                     onClick={() => onUsernameClick(competitor)}
+                    style={{ color: rating ? getRatingColor(rating) : null }}
                   >
                     {competitor['member_profile_basic.handle'] || competitor.handle}
                   </div>
@@ -167,6 +169,7 @@ export default function PodiumSpot(props) {
                     styleName={`${stylesName}.profile-link`}
                     href={`${window.origin}/members/${competitor['member_profile_basic.handle'] || competitor.handle}/`}
                     target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`}
+                    style={{ color: rating ? getRatingColor(rating) : null }}
                   >
                     {competitor['member_profile_basic.handle'] || competitor.handle}
                   </a>

src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss

@@ -3,7 +3,7 @@ $podium-border-color: #ededf2;
 
 .PodiumSpot {
   border-radius: 6px;
-  padding: 23px 15px;
+  padding: 23px 25px;
   display: flex;
   width: auto;
 
@@ -19,12 +19,14 @@ $podium-border-color: #ededf2;
     @include roboto-black;
 
     border-radius: 20px;
-    padding: 3px 9px;
+    padding: 4px 9px 3px;
     display: inline-block;
     position: absolute;
     right: 0;
     bottom: -10px;
     font-size: 15px;
+    width: 30px;
+    height: 30px;
   }
 
   .winnings-info span {
@@ -91,13 +93,13 @@ $podium-border-color: #ededf2;
   .handle-link,
   a.profile-link {
     color: #0d61bf;
-    font-family: Barlow, sans-serif;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 19px;
+    font-family: Roboto, sans-serif;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 24px;
     text-align: left;
     text-decoration: underline;
-    margin-bottom: 13px;
+    margin-bottom: 14px;
 
     &:hover {
       text-decoration: none;
@@ -110,38 +112,38 @@ $podium-border-color: #ededf2;
 }
 
 .PodiumSpot--first {
-  background-color: #ffd84d;
+  background-color: #f4f4f4;
 
   .ranking {
-    background-color: #2a2a2a;
-    color: #fff;
+    background-color: #ffd84c;
+    color: #2a2a2a;
   }
 }
 
 .PodiumSpot--second {
-  background-color: #d4d4d4;
+  background-color: #f4f4f4;
 
   .ranking {
-    background-color: #2a2a2a;
-    color: #fff;
+    background-color: #716d66;
+    color: #2a2a2a;
   }
 }
 
 .PodiumSpot--third {
-  background-color: #f1a87d;
+  background-color: #f4f4f4;
 
   .ranking {
-    background-color: #2a2a2a;
-    color: #fff;
+    background-color: #844d29;
+    color: #2a2a2a;
   }
 }
 
 .PodiumSpot--fourth {
-  background-color: #8dccd4;
+  background-color: #f4f4f4;
 
   .ranking {
-    background-color: #2a2a2a;
-    color: #fff;
+    background-color: #844d29;
+    color: #2a2a2a;
   }
 }
 
@@ -152,7 +154,7 @@ $podium-border-color: #ededf2;
   margin-top: 0;
 
   .leaderboard-avatar {
-    height: 79px;
-    width: 79px;
+    height: 110px;
+    width: 110px;
   }
 }