- {renderPodium(competitors)}
+
+ {renderPodium(renderComps)}
);
}
diff --git a/src/shared/components/Leaderboard/Podium/styles.scss b/src/shared/components/Leaderboard/Podium/themes/default.scss
similarity index 100%
rename from src/shared/components/Leaderboard/Podium/styles.scss
rename to src/shared/components/Leaderboard/Podium/themes/default.scss
diff --git a/src/shared/components/Leaderboard/Podium/themes/tco23.scss b/src/shared/components/Leaderboard/Podium/themes/tco23.scss
new file mode 100644
index 0000000000..cbde4c5ef1
--- /dev/null
+++ b/src/shared/components/Leaderboard/Podium/themes/tco23.scss
@@ -0,0 +1,60 @@
+/* stylelint-disable no-descending-specificity */
+@import '~styles/mixins';
+
+.Podium {
+ @include roboto-regular;
+
+ line-height: 1.42;
+ margin: 88px auto 40px auto;
+ text-align: center;
+
+ @include sm {
+ margin: 32px auto 24px auto;
+ }
+
+ &::before,
+ &::after {
+ content: " ";
+ display: table;
+ }
+
+ &::after {
+ clear: both;
+ }
+}
+
+.PodiumWrap {
+ display: flex;
+ justify-content: center !important;
+
+ @include xs-to-sm {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .podium-column:nth-child(2) {
+ @include md-to-xl {
+ margin-top: -16px;
+ }
+ }
+
+ .podium-column:nth-child(3) {
+ @include md-to-xl {
+ margin-top: 16px;
+ }
+ }
+}
+
+.Podium .podium-column {
+ display: inline-block;
+ margin-right: 52px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ @include xs-to-sm {
+ margin-bottom: 15px;
+ margin-right: 0;
+ }
+}
diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx
index 7084d23b41..ad49696a8a 100644
--- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx
+++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx
@@ -36,6 +36,7 @@ import avatarStyles from '../avatarStyles.scss';
import defaultStyles from './themes/styles.scss'; // eslint-disable-line
import tco20Styles from './themes/tco20.scss'; // eslint-disable-line
import tco22Styles from './themes/tco22.scss'; // eslint-disable-line
+import tco23Styles from './themes/tco23.scss'; // eslint-disable-line
/**
* Object used to add a CSS modifier (PodiumSpot--first) that will
@@ -72,6 +73,12 @@ const CUSTOM_STYLES = {
3: avatarStyles['tco22-3'],
4: avatarStyles['tco22-4'],
},
+ TCO23: {
+ 1: avatarStyles['tco23-1'],
+ 2: avatarStyles['tco23-2'],
+ 3: avatarStyles['tco23-3'],
+ 4: avatarStyles['tco23-4'],
+ },
};
/**
@@ -88,6 +95,14 @@ const THEME = {
Default: 'defaultStyles',
TCO20: 'tco20Styles',
TCO22: 'tco22Styles',
+ TCO23: 'tco23Styles',
+};
+
+const DISPLAY_RANKING_NUM = {
+ 1: '1ST',
+ 2: '2ND',
+ 3: '3RD',
+ 4: '4TH',
};
/**
@@ -111,8 +126,7 @@ export default function PodiumSpot(props) {
const stylesName = THEME[themeName];
let photoUrl = competitor['member_profile_basic.photo_url'] || competitor.avatar;
if (photoUrl) {
- photoUrl = `${config.CDN.PUBLIC}/avatar/${
- encodeURIComponent(photoUrl)}?size=160`;
+ photoUrl = `${config.CDN.PUBLIC}/avatar/${encodeURIComponent(photoUrl)}?size=160`;
}
let rootStyle = `${stylesName}.PodiumSpot`;
if (PODIUM_ITEM_MODIFIER[competitor.rank]) rootStyle += ` ${stylesName}.PodiumSpot--${PODIUM_ITEM_MODIFIER[competitor.rank]}`;
@@ -120,7 +134,92 @@ export default function PodiumSpot(props) {
? (parseFloat(competitor['tco_leaderboard.fulfillment']) * 100).toFixed(2).replace(/[.,]00$/, '')
: competitor.fulfillment;
const rating = competitor['member_profile_basic.max_rating'];
- return (
+ return themeName === 'TCO23' ? (
+
+ {
+ competitor.rank <= 4 &&
{`${DISPLAY_RANKING_NUM[competitor.rank]} PLACE`}
+ }
+ {
+ onUsernameClick ? (
+
onUsernameClick(competitor)}
+ style={{ color: rating !== undefined ? getRatingColor(rating) : null }}
+ >
+ {competitor['member_profile_basic.handle'] || competitor.handle}
+
+ ) : (
+
+ {competitor['member_profile_basic.handle'] || competitor.handle}
+
+ )
+ }
+
4 ? 4 : competitor.rank]}`}>
+
+
+ {
+ photoUrl ? (
+
+ ) :
+ }
+ {DISPLAY_RANKING[competitor.rank]}
+
+
+ {
+ isCopilot ? (
+
+ {fulfillment}
+ fulfillment
+
+ ) : null
+ }
+
+ {competitor['tco_leaderboard.challenge_count'] || competitor.challengecount}
+ {
+ isAlgo ? (
+ # of matches
+ ) : (
+ challenges
+ )
+ }
+
+
+ {formatPoints(competitor['tco_leaderboard.tco_points'] || competitor.points)}
+ points
+
+ {
+ isAlgo ? (
+
+ {competitor['tco_leaderboard.total_score'] || competitor['srm_tco19.score']}
+ total score
+
+ ) : null
+ }
+
+
+
+ ) : (
{
diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss
new file mode 100644
index 0000000000..663879a3f2
--- /dev/null
+++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss
@@ -0,0 +1,223 @@
+/* stylelint-disable no-descending-specificity */
+@import '~styles/mixins';
+$podium-border-color: #ededf2;
+
+.PodiumSpot {
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ width: auto;
+ box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
+ min-width: 392px;
+ justify-content: center;
+ align-items: center;
+ padding-top: 36px;
+ overflow: hidden;
+
+ @include sm {
+ min-width: 320px;
+ }
+
+ .leaderboard-avatar {
+ display: inline-block;
+ position: relative;
+ margin: 0;
+ overflow: visible;
+ }
+
+ .ranking {
+ display: none;
+ }
+
+ .winnings-info span {
+ display: block;
+ }
+
+ .winnings-info {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ margin-top: 24px;
+
+ .stats {
+ color: white;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 22px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-right: 40px;
+
+ @include sm {
+ margin-right: 16px;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ .value-title {
+ text-align: left;
+ white-space: nowrap;
+ }
+
+ .value {
+ font-size: 24px !important;
+ font-weight: 700;
+ line-height: 23px !important;
+ text-align: left;
+ }
+
+ span {
+ font-size: 16px !important;
+ line-height: 25px !important;
+ }
+ }
+
+ .stats-count {
+ .value-title,
+ .value {
+ color: #7f7f7f;
+ font-family: Roboto, sans-serif;
+ font-weight: 500;
+ }
+ }
+
+ @include xs-to-sm {
+ font-size: 12px;
+ }
+
+ @include md-to-lg {
+ font-size: 14px;
+ }
+ }
+
+ a.profile-link {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .handle-link,
+ a.profile-link {
+ color: #0d61bf;
+ font-family: Roboto, sans-serif;
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 32px;
+ text-align: left;
+ text-decoration: none;
+ cursor: pointer;
+ margin-bottom: 16px;
+ }
+
+ .place {
+ @include barlow-condensed-semi-bold;
+
+ font-size: 44px;
+ font-weight: 500;
+ line-height: 44px;
+ text-transform: uppercase;
+ margin-bottom: 8px;
+ color: #2a2a2a;
+ }
+
+ .wave-wrap--first,
+ .wave-wrap--second,
+ .wave-wrap--third,
+ .wave-wrap--fourth {
+ position: relative;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 120px;
+ padding-bottom: 36px;
+
+ .leaderboard-avatar {
+ margin-top: -120px;
+ border: 3px solid white;
+ border-radius: 50%;
+ height: 152px;
+ width: 152px;
+ background-color: #fff;
+
+ img {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ margin: 0;
+ }
+
+ svg {
+ margin: 0;
+ border-radius: 50%;
+ background-color: #fff;
+ }
+ }
+
+ svg {
+ margin-top: -1px;
+ }
+ }
+
+ .wave-wrap--first {
+ background-color: #2a2a2a;
+ }
+
+ .wave-wrap--second {
+ background-color: #219174;
+ }
+
+ .wave-wrap--third {
+ background-color: #16679a;
+ }
+
+ .wave-wrap--fourth {
+ .stats {
+ color: #2a2a2a;
+ }
+ }
+}
+
+.PodiumSpot--first {
+ .ranking {
+ background-color: #ffd84d;
+ color: #2a2a2a;
+ }
+}
+
+.PodiumSpot--second {
+ .ranking {
+ background-color: #7f7f7f;
+ color: #fff;
+ }
+}
+
+.PodiumSpot--third {
+ .ranking {
+ background-color: #d98f64;
+ color: #fff;
+ }
+}
+
+.PodiumSpot--fourth {
+ .ranking {
+ background-color: #1e94a3;
+ color: #fff;
+ }
+}
+
+.PodiumSpot--first,
+.PodiumSpot--second,
+.PodiumSpot--third,
+.PodiumSpot--fourth {
+ margin-top: 0;
+
+ .leaderboard-avatar {
+ height: 152px;
+ width: 152px;
+ }
+}
diff --git a/src/shared/components/Leaderboard/avatarStyles.scss b/src/shared/components/Leaderboard/avatarStyles.scss
index 175ba5c201..c84446b00d 100644
--- a/src/shared/components/Leaderboard/avatarStyles.scss
+++ b/src/shared/components/Leaderboard/avatarStyles.scss
@@ -59,3 +59,12 @@
height: 100%;
width: 100%;
}
+
+.tco23-1,
+.tco23-2,
+.tco23-3,
+.tco23-4 {
+ border-radius: 50%;
+ height: 100%;
+ width: 100%;
+}
diff --git a/src/shared/components/ProfilePage/Header/index.jsx b/src/shared/components/ProfilePage/Header/index.jsx
index 5862718418..8a932cfd7e 100644
--- a/src/shared/components/ProfilePage/Header/index.jsx
+++ b/src/shared/components/ProfilePage/Header/index.jsx
@@ -51,7 +51,7 @@ const ProfileHeader = ({ getLookerDone, lookerInfo, info }) => {
};
const tooltipContent = (
- verified member
+ This member is compliant with Topcoder policies
and is a trusted member of the Topcoder community.
);
diff --git a/src/shared/containers/tco/Leaderboard/themes/styles.scss b/src/shared/containers/tco/Leaderboard/themes/styles.scss
index 0612fc39d3..4e71a38abf 100644
--- a/src/shared/containers/tco/Leaderboard/themes/styles.scss
+++ b/src/shared/containers/tco/Leaderboard/themes/styles.scss
@@ -3,7 +3,10 @@
.Leaderboard {
padding: 0;
margin: 40px auto;
- max-width: 940px;
+
+ @include sm {
+ padding: 0 16px;
+ }
}
.Leaderboard .section-title {