diff --git a/.circleci/config.yml b/.circleci/config.yml index 995225c5c7..8de8280254 100644 --- 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 index 5ebefb6402..3bf6fc11dd 100644 --- 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`] = ` >
Avatar Photo \ No newline at end of file +Avatar Photo \ No newline at end of file diff --git a/src/shared/components/Leaderboard/ChallengeHistoryModal/styles.scss b/src/shared/components/Leaderboard/ChallengeHistoryModal/styles.scss index a0eb6e36df..47735ffd91 100644 --- 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 index 9b46aa65d1..73b59f37fc 100644 --- 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 ( {competitor.rank} @@ -91,11 +93,16 @@ export default function LeaderboardTable(props) {
onUsernameClick(competitor)} + style={{ color: rating ? getRatingColor(rating) : null }} > {competitor['member_profile_basic.handle'] || competitor.handle}
) : ( -
+ {competitor['member_profile_basic.handle'] || competitor.handle} ) diff --git a/src/shared/components/Leaderboard/LeaderboardTable/themes/tco20.scss b/src/shared/components/Leaderboard/LeaderboardTable/themes/tco20.scss index a77a4a8e4a..8d95038696 100644 --- 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 index 295af66f51..4ddc665316 100644 --- 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 index ad1795e42e..5e7e001e66 100644 --- 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 (
@@ -159,6 +160,7 @@ export default function PodiumSpot(props) {
onUsernameClick(competitor)} + style={{ color: rating ? getRatingColor(rating) : null }} > {competitor['member_profile_basic.handle'] || competitor.handle}
@@ -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} diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss index d600b90d3c..bfbc594629 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss @@ -11,7 +11,7 @@ $podium-border-color: #ededf2; display: inline-block; position: relative; margin-bottom: 12px; - margin-right: 20px; + margin-right: 11px; overflow: visible; } @@ -19,12 +19,16 @@ $podium-border-color: #ededf2; @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 index 8c14fb9c08..f913880a91 100644 --- 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 index 73a0f84699..e1d27d30a0 100644 --- 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 */,