From 290b41b398d31252eb3f4d956fca05984409b4ca Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Tue, 17 Nov 2020 16:32:28 +0200 Subject: [PATCH 1/4] colored handles init --- .../Leaderboard/LeaderboardTable/index.jsx | 9 +++- .../Leaderboard/PodiumSpot/index.jsx | 5 ++- .../Leaderboard/PodiumSpot/themes/tco20.scss | 44 ++++++++++--------- 3 files changed, 35 insertions(+), 23 deletions(-) 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/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..958d411d67 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss +++ b/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; } } From 880b34c317882de1dd76994d038767b3b111c4ac Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 3 Dec 2020 10:44:52 +0200 Subject: [PATCH 2/4] Final fixes #4722 --- .../__snapshots__/LeaderboardTable.jsx.snap | 20 +++++++++ src/assets/images/default-avatar-photo.svg | 2 +- .../ChallengeHistoryModal/styles.scss | 2 - .../Leaderboard/PodiumSpot/themes/tco20.scss | 43 ++++++++++--------- src/shared/utils/tc.js | 2 +- 5 files changed, 45 insertions(+), 24 deletions(-) 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/PodiumSpot/themes/tco20.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss index 958d411d67..949ba9c1b7 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss @@ -3,7 +3,7 @@ $podium-border-color: #ededf2; .PodiumSpot { border-radius: 6px; - padding: 23px 25px; + padding: 23px 15px; display: flex; width: auto; @@ -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,14 +19,16 @@ $podium-border-color: #ededf2; @include roboto-black; border-radius: 20px; - padding: 4px 9px 3px; - display: inline-block; + display: flex; + padding: 0; + align-items: center; + justify-content: center; position: absolute; right: 0; bottom: -10px; font-size: 15px; - width: 30px; - height: 30px; + width: 28px; + height: 28px; } .winnings-info span { @@ -93,13 +95,14 @@ $podium-border-color: #ededf2; .handle-link, a.profile-link { color: #0d61bf; - font-family: Roboto, sans-serif; - font-size: 20px; - font-weight: 500; + font-family: Barlow, sans-serif; + font-size: 16px; + font-weight: 600; line-height: 24px; text-align: left; text-decoration: underline; - margin-bottom: 14px; + margin-top: 11px; + margin-bottom: 13px; &:hover { text-decoration: none; @@ -115,8 +118,8 @@ $podium-border-color: #ededf2; background-color: #f4f4f4; .ranking { - background-color: #ffd84c; - color: #2a2a2a; + background-color: #ffd84d; + color: #fff; } } @@ -124,8 +127,8 @@ $podium-border-color: #ededf2; background-color: #f4f4f4; .ranking { - background-color: #716d66; - color: #2a2a2a; + background-color: #746b65; + color: #fff; } } @@ -133,8 +136,8 @@ $podium-border-color: #ededf2; background-color: #f4f4f4; .ranking { - background-color: #844d29; - color: #2a2a2a; + background-color: #854e29; + color: #fff; } } @@ -142,8 +145,8 @@ $podium-border-color: #ededf2; background-color: #f4f4f4; .ranking { - background-color: #844d29; - color: #2a2a2a; + background-color: #1e94a3; + color: #fff; } } @@ -154,7 +157,7 @@ $podium-border-color: #ededf2; margin-top: 0; .leaderboard-avatar { - height: 110px; - width: 110px; + height: 79px; + width: 79px; } } 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 */, From e927041bac8b857273550f208f61943b4cf22fee Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Thu, 3 Dec 2020 10:47:04 +0200 Subject: [PATCH 3/4] ci: on test --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 086cb438b1..0a2a683bef 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -237,7 +237,7 @@ workflows: filters: branches: only: - - free + - color-handles-leaderboards # This is alternate dev env for parallel testing - "build-qa": context : org-global From 6be98f82fc038adc4fdca81526562f4ccca88fef Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 4 Dec 2020 11:02:40 +0200 Subject: [PATCH 4/4] Final fixes for #4722 --- .../Leaderboard/LeaderboardTable/themes/tco20.scss | 8 ++++---- src/shared/components/Leaderboard/Podium/styles.scss | 2 +- .../components/Leaderboard/PodiumSpot/themes/tco20.scss | 2 +- src/shared/containers/tco/Leaderboard/themes/styles.scss | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) 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/themes/tco20.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss index 949ba9c1b7..bfbc594629 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss @@ -95,7 +95,7 @@ $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: 24px; 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; }