From 174cf1a98990c561c9fe4ad74b8fb8ab25e5ea23 Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Wed, 30 Jun 2021 13:36:06 +0300 Subject: [PATCH 1/4] new leaderboards theme init --- .../ChallengeHistoryModal/index.jsx | 2 +- .../Leaderboard/LeaderboardTable/index.jsx | 6 +- .../LeaderboardTable/themes/tco22.scss | 206 ++++++++++++++++++ .../Leaderboard/PodiumSpot/index.jsx | 10 +- .../Leaderboard/PodiumSpot/themes/styles.scss | 6 +- .../Leaderboard/PodiumSpot/themes/tco20.scss | 4 + .../Leaderboard/PodiumSpot/themes/tco22.scss | 174 +++++++++++++++ .../components/Leaderboard/avatarStyles.scss | 9 + .../tco/Leaderboard/themes/styles.scss | 2 +- 9 files changed, 414 insertions(+), 5 deletions(-) create mode 100644 src/shared/components/Leaderboard/LeaderboardTable/themes/tco22.scss create mode 100644 src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss diff --git a/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx b/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx index 2110e1fc1f..54cb05077b 100644 --- a/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx +++ b/src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx @@ -44,7 +44,7 @@ class ChallengeHistoryModal extends Component { competitor={competitor} isCopilot={isCopilot} isAlgo={isAlgo} - themeName="TCO20" + themeName="TCO22" /> diff --git a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx index 3a0f5f2de3..bc5367a600 100644 --- a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx +++ b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx @@ -23,7 +23,7 @@ * - isTopGear: Topgear leaderboards have special fileds */ -import React from 'react'; +import React, { useState } from 'react'; import PT from 'prop-types'; import { Avatar } from 'topcoder-react-ui-kit'; import { config } from 'topcoder-react-utils'; @@ -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', }; /** @@ -58,6 +60,8 @@ export default function LeaderboardTable(props) { isAlgo, themeName, } = props; + const [order, setOrder] = useState(''); + const [field, setOrderField] = useState(''); const stylesName = THEME[themeName]; const renderTableRows = comps => ( comps.map((competitor) => { 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..dde109ae11 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', }; /** @@ -186,7 +194,7 @@ export default function PodiumSpot(props) { ) : 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..423dcc166e 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss @@ -40,7 +40,7 @@ $podium-border-color: #ededf2; display: flex; justify-content: space-around; - .stats { + .stats, { color: #747480; font-size: 15px; font-weight: 400; @@ -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..3ac77daeb8 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss @@ -77,6 +77,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/tco22.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss new file mode 100644 index 0000000000..ebf9f580bd --- /dev/null +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss @@ -0,0 +1,174 @@ +@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; + } + .value { + 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..a5f7761d6d 100644 --- a/src/shared/components/Leaderboard/avatarStyles.scss +++ b/src/shared/components/Leaderboard/avatarStyles.scss @@ -44,3 +44,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 { From 6be534a97a30c81efafd8345ed121d41bfdf219f Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 16 Jul 2021 11:03:12 +0300 Subject: [PATCH 2/4] wrap up TCO leaderboards fixes --- .../Leaderboard/__snapshots__/PodiumSpot.jsx.snap | 4 ++-- .../Leaderboard/ChallengeHistoryModal/index.jsx | 2 +- .../Leaderboard/ChallengeHistoryModal/styles.scss | 7 ++++++- .../components/Leaderboard/LeaderboardTable/index.jsx | 4 +--- src/shared/components/Leaderboard/PodiumSpot/index.jsx | 2 +- .../components/Leaderboard/PodiumSpot/themes/styles.scss | 2 +- .../components/Leaderboard/PodiumSpot/themes/tco20.scss | 9 +++++++++ .../components/Leaderboard/PodiumSpot/themes/tco22.scss | 2 -- 8 files changed, 21 insertions(+), 11 deletions(-) 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} >
(
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 bc5367a600..020eff82e4 100644 --- a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx +++ b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx @@ -23,7 +23,7 @@ * - isTopGear: Topgear leaderboards have special fileds */ -import React, { useState } from 'react'; +import React from 'react'; import PT from 'prop-types'; import { Avatar } from 'topcoder-react-ui-kit'; import { config } from 'topcoder-react-utils'; @@ -60,8 +60,6 @@ export default function LeaderboardTable(props) { isAlgo, themeName, } = props; - const [order, setOrder] = useState(''); - const [field, setOrderField] = useState(''); const stylesName = THEME[themeName]; const renderTableRows = comps => ( comps.map((competitor) => { diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx index dde109ae11..7084d23b41 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx +++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx @@ -188,7 +188,7 @@ export default function PodiumSpot(props) { } { isCopilot ? ( -
+
{fulfillment} fulfillment
diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss index 423dcc166e..9f45f5f9be 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss @@ -40,7 +40,7 @@ $podium-border-color: #ededf2; display: flex; justify-content: space-around; - .stats, { + .stats { color: #747480; font-size: 15px; font-weight: 400; diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss index 3ac77daeb8..fffcb4919b 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss @@ -79,6 +79,15 @@ $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 { diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss index ebf9f580bd..319e1bd11e 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss @@ -83,8 +83,6 @@ $podium-border-color: #ededf2; .value-title, .value { color: #7f7f7f; - } - .value { font-family: Roboto, sans-serif; font-weight: 500; } From 49704a16757e2d7d8a46f6e7a9fb6c0290e5709f Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 16 Jul 2021 11:05:20 +0300 Subject: [PATCH 3/4] ci: on qa --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From 072d830f77eae3b4ae5828539d2cd767d0e05bab Mon Sep 17 00:00:00 2001 From: Kiril Kartunov Date: Fri, 16 Jul 2021 14:06:50 +0300 Subject: [PATCH 4/4] final tweaks leaderboards tco22 --- .../components/Leaderboard/LeaderboardTable/index.jsx | 2 +- src/shared/components/Leaderboard/avatarStyles.scss | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx index 020eff82e4..59950a792a 100644 --- a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx +++ b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx @@ -81,7 +81,7 @@ export default function LeaderboardTable(props) { photoUrl ? ( diff --git a/src/shared/components/Leaderboard/avatarStyles.scss b/src/shared/components/Leaderboard/avatarStyles.scss index a5f7761d6d..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;
- + {challenge.challenge_name || challenge['challenge.challenge_name'] || challenge['tco_leaderboard.challenge_id'] || challenge.challenge_id}