diff --git a/.circleci/config.yml b/.circleci/config.yml index f1bef51ca6..bfdcfb9c40 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -354,7 +354,7 @@ workflows: filters: branches: only: - - free + - new-leaderboards-theme # This is beta env for production soft releases - "build-prod-beta": context : org-global diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap index 7d868e9f5a..99ce90f051 100644 --- a/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap +++ b/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap @@ -30,7 +30,7 @@ exports[`Matches shallow shapshot 1`] = ` style={null} >
@@ -116,7 +116,7 @@ class ChallengeHistoryModal extends Component { challengesOrdered.map(challenge => ( diff --git a/src/shared/components/Leaderboard/ChallengeHistoryModal/styles.scss b/src/shared/components/Leaderboard/ChallengeHistoryModal/styles.scss index 47735ffd91..0dbd5754aa 100644 --- a/src/shared/components/Leaderboard/ChallengeHistoryModal/styles.scss +++ b/src/shared/components/Leaderboard/ChallengeHistoryModal/styles.scss @@ -15,7 +15,8 @@ $light-gray: #d4d4d4; padding: 80px 78px; @media (max-width: 768px) { - width: 80%; + width: 90%; + padding: 30px 15px; } h3 { @@ -99,6 +100,10 @@ $light-gray: #d4d4d4; line-height: 51px; text-decoration: underline; + @media (max-width: 768px) { + line-height: 30px; + } + &:hover { text-decoration: none; } diff --git a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx index 3a0f5f2de3..59950a792a 100644 --- a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx +++ b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx @@ -35,10 +35,12 @@ import { getRatingColor } from 'utils/tc'; 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 const THEME = { Default: 'defaultStyles', TCO20: 'tco20Styles', + TCO22: 'tco22Styles', }; /** @@ -79,7 +81,7 @@ export default function LeaderboardTable(props) { photoUrl ? ( diff --git a/src/shared/components/Leaderboard/LeaderboardTable/themes/tco22.scss b/src/shared/components/Leaderboard/LeaderboardTable/themes/tco22.scss new file mode 100644 index 0000000000..137c13cf07 --- /dev/null +++ b/src/shared/components/Leaderboard/LeaderboardTable/themes/tco22.scss @@ -0,0 +1,206 @@ +@import '~styles/mixins'; +$table-cell-padding: 2px; +$table-border-color: #d4d4d4; +$table-bg-hover: #f5f5f5; + +.LeaderboardTable { + /* Table basic styling (heavily 'inspired' by Bootstrap) */ + @include roboto-regular; + + background-color: transparent; + width: 100%; + margin: 30px auto 20px auto; + + th { + @include roboto-bold; + + text-align: left; + } + // Table cell sizing + td, + th { + &[class*="col-"] { + position: static; + float: none; + display: table-cell; + } + } + // Cells + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: $table-cell-padding; + line-height: 45px; + vertical-align: top; + border-top: 1px solid $table-border-color; + color: #47474f; + font-size: 20px; + font-weight: 400; + + @include xs-to-sm { + line-height: 25px; + } + } + } + } + // Bottom align for column headings + > thead > tr > th { + vertical-align: bottom; + border-bottom: 1px solid $table-border-color; + color: #888894; + font-size: 20px; + font-weight: 500; + line-height: 24px; + padding: 19px 8px; + } + + // Hover effect + > tbody > tr:hover { + background-color: $table-bg-hover; + } + // hide the table head on extra-small devices + > thead { + @include sm { + display: none; + } + } + + // cell alignment + > tbody tr td, + > thead tr th { + vertical-align: middle; + text-align: center; + } + + // Remove top border from thead by default + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } + } + + /* Column specific styling */ + .col-rank { + text-align: center; + width: 80px; + text-transform: uppercase; + color: #2a2a2a; + font-family: Roboto, sans-serif; + font-size: 16px; + font-weight: 400; + + @include sm { + width: 40px; + } + } + + .col-avatar { + text-align: center; + width: 80px; + + @include md-to-xl { + line-height: 0; + } + + @include sm { + width: 40px; + } + } + + .col-avatar .leaderboard-avatar { + display: inline-block; + height: 34px; + width: 34px; + overflow: hidden; + + svg { + border-radius: 50%; + max-width: 100%; + } + } + + .col-handle { + text-align: left; + + .handle-link, + a { + color: #0d61bf; + font-weight: 500; + font-size: 16px; + text-decoration: underline; + + &:hover { + color: #0d61bf; + cursor: pointer; + text-decoration: none; + } + } + } + + .col-handleHeader { + text-align: left; + } + + .col-handle .winnings-info { + @include roboto-light; + + color: #999; + font-size: 13px; + // display only on small screens + display: none; + + @include sm { + display: block; + } + + span { + display: block; + } + } + + .col-fulfillment { + text-align: center; + text-transform: uppercase; + } + + .col-points { + text-align: center; + } + + /* Table responsiveness */ + // Hide 'Fulfillment', 'Challenges' and 'Points' columns on small screens + .col-fulfillment, + .col-challenges, + .col-points { + width: 33%; + color: #2a2a2a; + font-family: Roboto, sans-serif; + font-size: 16px; + font-weight: 400; + + @include sm { + display: none !important; + } + } +} + +.table-header { + .col-handleHeader, + .col-rank, + .col-fulfillment, + .col-challenges, + .col-points { + color: #2a2a2a; + font-family: Roboto, sans-serif; + font-size: 14px; + font-weight: 500; + letter-spacing: 0.5px; + text-transform: uppercase; + } +} diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx index d9c76034ee..7084d23b41 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx +++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx @@ -35,6 +35,7 @@ import { getRatingColor } from 'utils/tc'; 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 /** * Object used to add a CSS modifier (PodiumSpot--first) that will @@ -65,6 +66,12 @@ const CUSTOM_STYLES = { 3: avatarStyles['tco20-3'], 4: avatarStyles['tco20-4'], }, + TCO22: { + 1: avatarStyles['tco22-1'], + 2: avatarStyles['tco22-2'], + 3: avatarStyles['tco22-3'], + 4: avatarStyles['tco22-4'], + }, }; /** @@ -80,6 +87,7 @@ const DISPLAY_RANKING = { const THEME = { Default: 'defaultStyles', TCO20: 'tco20Styles', + TCO22: 'tco22Styles', }; /** @@ -180,13 +188,13 @@ export default function PodiumSpot(props) { } { isCopilot ? ( -
+
{fulfillment} fulfillment
) : null } -
+
{competitor['tco_leaderboard.challenge_count'] || competitor.challengecount} { isAlgo ? ( diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss index d2fd45982f..9f45f5f9be 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss @@ -64,6 +64,10 @@ $podium-border-color: #ededf2; } } + .stats-count { + color: #747480; + } + @include xs-to-sm { font-size: 12px; } diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss index bfbc594629..fffcb4919b 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss @@ -77,6 +77,19 @@ $podium-border-color: #ededf2; } } + .stats-count { + color: #747480; + font-size: 16px; + font-weight: 400; + line-height: 25px; + display: flex; + margin-bottom: 4px; + + .value { + margin-right: 5px; + } + } + @include xs-to-sm { font-size: 12px; } diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss new file mode 100644 index 0000000000..319e1bd11e --- /dev/null +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss @@ -0,0 +1,172 @@ +@import '~styles/mixins'; +$podium-border-color: #ededf2; + +.PodiumSpot { + border-radius: 12px; + padding: 22px 17px 12px; + display: flex; + width: auto; + box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1); + min-width: 300px; + + .leaderboard-avatar { + display: inline-block; + position: relative; + margin-bottom: 12px; + margin-right: 23px; + overflow: visible; + } + + .ranking { + @include roboto-black; + + border-radius: 20px; + 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 { + display: block; + } + + .winnings-info { + color: #56565d; + font-size: 18px; + display: flex; + justify-content: center; + flex-direction: column; + + .stats, + .stats-count { + color: #747480; + font-size: 16px; + font-weight: 400; + line-height: 25px; + display: flex; + margin-bottom: 4px; + + .value-title { + color: #2a2a2a; + font-family: Barlow, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 26px; + text-align: left; + white-space: nowrap; + } + + .value { + color: #2a2a2a; + font-family: Barlow, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 20px; + text-align: left; + margin-right: 6px; + } + + 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: 400; + line-height: 36px; + text-align: left; + text-decoration: none; + margin-top: -6px; + margin-bottom: 5px; + + &:hover { + text-decoration: none; + } + } + + .handle-link:hover { + cursor: pointer; + } +} + +.PodiumSpot--first { + border-bottom: 8px solid #ffd84d; + + .ranking { + background-color: #ffd84d; + color: #2a2a2a; + } +} + +.PodiumSpot--second { + border-bottom: 8px solid #7f7f7f; + + .ranking { + background-color: #7f7f7f; + color: #fff; + } +} + +.PodiumSpot--third { + border-bottom: 8px solid #d98f64; + + .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: 79px; + width: 79px; + } +} diff --git a/src/shared/components/Leaderboard/avatarStyles.scss b/src/shared/components/Leaderboard/avatarStyles.scss index 34baecdc3d..175ba5c201 100644 --- a/src/shared/components/Leaderboard/avatarStyles.scss +++ b/src/shared/components/Leaderboard/avatarStyles.scss @@ -12,6 +12,12 @@ border-color: rgba(0, 0, 0, 0.05); } +.default-tco22 { + @include avatar; + + border-color: #fff; +} + .gold { @include avatar; @@ -44,3 +50,12 @@ height: 100%; width: 100%; } + +.tco22-1, +.tco22-2, +.tco22-3, +.tco22-4 { + border-radius: 50%; + height: 100%; + width: 100%; +} diff --git a/src/shared/containers/tco/Leaderboard/themes/styles.scss b/src/shared/containers/tco/Leaderboard/themes/styles.scss index f913880a91..0612fc39d3 100644 --- a/src/shared/containers/tco/Leaderboard/themes/styles.scss +++ b/src/shared/containers/tco/Leaderboard/themes/styles.scss @@ -3,7 +3,7 @@ .Leaderboard { padding: 0; margin: 40px auto; - max-width: $screen-md; + max-width: 940px; } .Leaderboard .section-title {
- + {challenge.challenge_name || challenge['challenge.challenge_name'] || challenge['tco_leaderboard.challenge_id'] || challenge.challenge_id}