Avatar Photo
\ No newline at end of file
+
\ 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 */,