Merge pull request #5236 from topcoder-platform/color-handles-leaderboards

luizrrodrigues · web-flow · commit bc76bd88223f · 2020-12-11T02:19:02.000-03:00
Color handles leaderboards
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -237,7 +237,7 @@ workflows:
           filters:
             branches:
               only:                
-                - gig-apply-fixes
+                - free
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global      
diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap
@@ -56,6 +56,11 @@ exports[`Matches shallow shapshot 1`] = `
       >
         <a
           href="undefined/members/undefined/"
+          style={
+            Object {
+              "color": null,
+            }
+          }
           target="_blank"
         />
         <div
@@ -103,6 +108,11 @@ exports[`Matches shallow shapshot 1`] = `
       >
         <a
           href="undefined/members/undefined/"
+          style={
+            Object {
+              "color": null,
+            }
+          }
           target="_blank"
         />
         <div
@@ -150,6 +160,11 @@ exports[`Matches shallow shapshot 1`] = `
       >
         <a
           href="undefined/members/undefined/"
+          style={
+            Object {
+              "color": null,
+            }
+          }
           target="_blank"
         />
         <div
@@ -197,6 +212,11 @@ exports[`Matches shallow shapshot 1`] = `
       >
         <a
           href="undefined/members/undefined/"
+          style={
+            Object {
+              "color": null,
+            }
+          }
           target="_blank"
         />
         <div
diff --git a/src/assets/images/default-avatar-photo.svg b/src/assets/images/default-avatar-photo.svg
@@ -1 +1 @@
-<svg id="8e471583-8305-4307-a054-a2f0b1a60857" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33.00137"><title>Avatar Photo</title><circle cx="16.5" cy="16.5" r="16.5" fill="#f4f4f4"/><path d="M20.62195,21.60358C25.83386,11.7627,22.00336,6.5,16.501,6.5c-5.61164,0-9.34613,5.46478-4.121,15.10358,1.76343,3.252-1.90478,4.02044-5.62048,4.87841a5.1901,5.1901,0,0,0-2.43811,1.12269,16.44266,16.44266,0,0,0,24.35779-.00074,5.19154,5.19154,0,0,0-2.43677-1.122C22.445,25.60529,18.9104,24.83673,20.62195,21.60358Z" fill="#aaa"/></svg>
+<svg id="8e471583-8305-4307-a054-a2f0b1a60857" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33.00137"><title>Avatar Photo</title><circle cx="16.5" cy="16.5" r="16.5" fill="#e9e9e9"/><path d="M20.62195,21.60358C25.83386,11.7627,22.00336,6.5,16.501,6.5c-5.61164,0-9.34613,5.46478-4.121,15.10358,1.76343,3.252-1.90478,4.02044-5.62048,4.87841a5.1901,5.1901,0,0,0-2.43811,1.12269,16.44266,16.44266,0,0,0,24.35779-.00074,5.19154,5.19154,0,0,0-2.43677-1.122C22.445,25.60529,18.9104,24.83673,20.62195,21.60358Z" fill="#aaa"/></svg>
diff --git a/src/shared/components/Leaderboard/ChallengeHistoryModal/styles.scss b/src/shared/components/Leaderboard/ChallengeHistoryModal/styles.scss
@@ -63,8 +63,6 @@ $light-gray: #d4d4d4;
     img,
     svg {
       border-radius: 50%;
-      border-style: solid;
-      border-width: 3px;
       height: 100%;
       width: 100%;
     }
diff --git a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx b/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>
               )
diff --git a/src/shared/components/Leaderboard/LeaderboardTable/themes/tco20.scss b/src/shared/components/Leaderboard/LeaderboardTable/themes/tco20.scss
@@ -1,5 +1,5 @@
 @import '~styles/mixins';
-$table-cell-padding: 8px;
+$table-cell-padding: 2px;
 $table-border-color: #d4d4d4;
 $table-bg-hover: #f5f5f5;
 
@@ -115,13 +115,13 @@ $table-bg-hover: #f5f5f5;
 
   .col-avatar .leaderboard-avatar {
     display: inline-block;
-    height: 40px;
-    width: 40px;
+    height: 34px;
+    width: 34px;
     overflow: hidden;
 
     svg {
-      border: 3px solid rgba(0, 0, 0, 0.05);
       border-radius: 50%;
+      max-width: 100%;
     }
   }
 
diff --git a/src/shared/components/Leaderboard/Podium/styles.scss b/src/shared/components/Leaderboard/Podium/styles.scss
@@ -4,7 +4,7 @@
   @include roboto-regular;
 
   line-height: 1.42;
-  margin: 0 auto 40px auto;
+  margin: 0 auto 10px auto;
   text-align: center;
 
   &::before,
diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/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>
diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss
@@ -11,20 +11,24 @@ $podium-border-color: #ededf2;
     display: inline-block;
     position: relative;
     margin-bottom: 12px;
-    margin-right: 20px;
+    margin-right: 11px;
     overflow: visible;
   }
 
   .ranking {
     @include roboto-black;
 
     border-radius: 20px;
-    padding: 3px 9px;
-    display: inline-block;
+    display: flex;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
     position: absolute;
     right: 0;
     bottom: -10px;
     font-size: 15px;
+    width: 28px;
+    height: 28px;
   }
 
   .winnings-info span {
@@ -91,12 +95,13 @@ $podium-border-color: #ededf2;
   .handle-link,
   a.profile-link {
     color: #0d61bf;
-    font-family: Barlow, sans-serif;
+    font-family: Roboto, sans-serif;
     font-size: 16px;
     font-weight: 600;
-    line-height: 19px;
+    line-height: 24px;
     text-align: left;
     text-decoration: underline;
+    margin-top: 11px;
     margin-bottom: 13px;
 
     &:hover {
@@ -110,37 +115,37 @@ $podium-border-color: #ededf2;
 }
 
 .PodiumSpot--first {
-  background-color: #ffd84d;
+  background-color: #f4f4f4;
 
   .ranking {
-    background-color: #2a2a2a;
+    background-color: #ffd84d;
     color: #fff;
   }
 }
 
 .PodiumSpot--second {
-  background-color: #d4d4d4;
+  background-color: #f4f4f4;
 
   .ranking {
-    background-color: #2a2a2a;
+    background-color: #746b65;
     color: #fff;
   }
 }
 
 .PodiumSpot--third {
-  background-color: #f1a87d;
+  background-color: #f4f4f4;
 
   .ranking {
-    background-color: #2a2a2a;
+    background-color: #854e29;
     color: #fff;
   }
 }
 
 .PodiumSpot--fourth {
-  background-color: #8dccd4;
+  background-color: #f4f4f4;
 
   .ranking {
-    background-color: #2a2a2a;
+    background-color: #1e94a3;
     color: #fff;
   }
 }
diff --git a/src/shared/containers/tco/Leaderboard/themes/styles.scss b/src/shared/containers/tco/Leaderboard/themes/styles.scss
@@ -2,7 +2,7 @@
 
 .Leaderboard {
   padding: 0;
-  margin: 50px auto;
+  margin: 40px auto;
   max-width: $screen-md;
 }
 
diff --git a/src/shared/utils/tc.js b/src/shared/utils/tc.js
@@ -112,7 +112,7 @@ export const RATING_COLORS = [{
   color: '#616BD5' /* Blue */,
   limit: 1500,
 }, {
-  color: '#FCD617' /* Yellow */,
+  color: '#F2C900' /* Yellow */,
   limit: 2200,
 }, {
   color: '#EF3A3A' /* Red */,

Original file line number	Diff line number	Diff line change
`@@ -63,8 +63,6 @@ $light-gray: #d4d4d4;`
`63`	`63`	`img,`
`64`	`64`	`svg {`
`65`	`65`	`border-radius: 50%;`
`66`		`- border-style: solid;`
`67`		`- border-width: 3px;`
`68`	`66`	`height: 100%;`
`69`	`67`	`width: 100%;`
`70`	`68`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`
`3`	`3`	`.Leaderboard {`
`4`	`4`	`padding: 0;`
`5`		`- margin: 50px auto;`
	`5`	`+ margin: 40px auto;`
`6`	`6`	`max-width: $screen-md;`
`7`	`7`	`}`
`8`	`8`