Merge pull request #5255 from topcoder-platform/develop

Release 2020/12/11 (v1.6.4)

Author: sushilshinde

.circleci/config.yml

@@ -237,7 +237,7 @@ workflows:
           filters:
             branches:
               only:                
-                - gig-apply-fixes
+                - hall-of-fame-fixes
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global      

__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

src/assets/images/default-avatar-photo.svg

@@ -36,7 +36,7 @@ export default function JobListCard({
           <IconBlackLocation /> {job.country}
         </div>
         <div styleName="icon-val">
-          <IconBlackPayment /> ${job.min_annual_salary} - ${job.max_annual_salary} / {getSalaryType(job.salary_type)}
+          <IconBlackPayment /> ${job.min_annual_salary} - {job.max_annual_salary} (USD) / {getSalaryType(job.salary_type)}
         </div>
         <div styleName="icon-val">
           <IconBlackDuration /> {getCustomField(job.custom_fields, 'Duration')}

src/shared/components/GUIKit/JobListCard/index.jsx

@@ -44,7 +44,7 @@ export default function GigDetails(props) {
   let skills = getCustomField(job.custom_fields, 'Technologies Required');
   if (skills !== 'n/a') skills = skills.split(',').join(', ');
   const hPerW = getCustomField(job.custom_fields, 'Hours per week');
-  const compens = job.min_annual_salary === job.max_annual_salary ? job.max_annual_salary : `${job.min_annual_salary} - ${job.max_annual_salary}`;
+  const compens = job.min_annual_salary === job.max_annual_salary ? job.max_annual_salary : `${job.min_annual_salary} - ${job.max_annual_salary} (USD)`;
 
   return (
     <div styleName="container">

src/shared/components/Gigs/GigDetails/index.jsx

@@ -34,6 +34,7 @@ function findTheme(track) {
     case 'DEVELOPMENT':
     case 'FIRST2FINISH':
     case 'MOD DASH':
+    case 'QA':
       return developmentAndFirst2finishTheme;
     case 'STUDIO':
     case 'UI DESIGN':

src/shared/components/HallOfFamePage/Finalists/index.jsx

@@ -1,7 +1,7 @@
 @import "~styles/mixins";
 
 .container {
-  align-items: center;
+  align-items: stretch;
   display: flex;
   justify-content: space-between;
 
@@ -15,7 +15,6 @@
 .fact {
   background-color: #fff;
   border-radius: 4px;
-  height: 330px;
   width: 360px;
 
   @include xs-to-lg {
@@ -48,10 +47,10 @@
   border-top: solid 4px #5cc900;
   color: #000;
   font-size: 15px;
-  height: 150px;
   line-height: 25px;
   padding: 15px;
   text-align: left;
+  margin-top: -3px;
 
   a,
   a:visited {

src/shared/components/HallOfFamePage/FunFacts/styles.scss

@@ -243,7 +243,7 @@ const HallOfFamePage = ({ eventId, hallOfFame }) => {
                                 {
                                   data.fields.spiritAwardWinners && (
                                     <div styleName="spirit-awards">
-                                      <h3>Spirit Award</h3>
+                                      <h3>SPIRIT AWARD WINNER</h3>
                                       <div styleName="spirit-awards-wrap">
                                         {
                                           _.map(

src/shared/components/HallOfFamePage/HoF.jsx

@@ -179,6 +179,7 @@
 
   img {
     min-height: 375px;
+    max-height: 100%;
     width: 100%;
   }
 
@@ -253,6 +254,7 @@
     margin: 0;
     padding: 0;
     width: 127px;
+    white-space: nowrap;
   }
 
   margin: 7px;
@@ -374,13 +376,23 @@
 }
 
 .spirit-awards {
-  margin-top: 50px;
+  margin: 40px auto 60px auto;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  border: 1px solid #e2c6f3;
+  border-radius: 4px;
+  width: 173px;
 
   h3 {
-    margin-bottom: 20px;
+    margin: 0;
+    background-color: #914da5;
+    border-radius: 4px 4px 0 0;
+    color: #fff;
+    font-family: Roboto, sans-serif;
+    font-size: 13px;
+    line-height: 30px;
+    text-align: center;
+    font-weight: bold;
   }
 
   .spirit-awards-wrap {
@@ -390,5 +402,9 @@
     a {
       font-size: 16px;
     }
+
+    p {
+      margin: 0;
+    }
   }
 }

src/shared/components/HallOfFamePage/styles.scss

@@ -63,8 +63,6 @@ $light-gray: #d4d4d4;
     img,
     svg {
       border-radius: 50%;
-      border-style: solid;
-      border-width: 3px;
       height: 100%;
       width: 100%;
     }

src/shared/components/Leaderboard/ChallengeHistoryModal/styles.scss

@@ -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/LeaderboardTable/index.jsx

@@ -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%;
     }
   }
 

src/shared/components/Leaderboard/LeaderboardTable/themes/tco20.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,

src/shared/components/Leaderboard/Podium/styles.scss

@@ -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/index.jsx

@@ -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;
   }
 }