From 94ee3a70b2a6cba33031781476bcde864991eef6 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Tue, 20 Sep 2022 12:27:38 +0700 Subject: [PATCH 01/18] fix: challenge status missing --- .../challenge-detail/Header/index.jsx | 72 ++++++++++++++++++- .../challenge-detail/Header/style.scss | 48 +++++++++++-- 2 files changed, 113 insertions(+), 7 deletions(-) diff --git a/src/shared/components/challenge-detail/Header/index.jsx b/src/shared/components/challenge-detail/Header/index.jsx index 9898b37059..de9b90b2fb 100644 --- a/src/shared/components/challenge-detail/Header/index.jsx +++ b/src/shared/components/challenge-detail/Header/index.jsx @@ -30,6 +30,10 @@ import TabSelector from './TabSelector'; import style from './style.scss'; +/* Holds day and hour range in ms. */ +const HOUR_MS = 60 * 60 * 1000; +const DAY_MS = 24 * HOUR_MS; + export default function ChallengeHeader(props) { const { isLoggedIn, @@ -128,6 +132,26 @@ export default function ChallengeHeader(props) { */ const hasSubmissions = !_.isEmpty(mySubmissions); + const openPhases = sortedAllPhases.filter(p => p.isOpen); + let nextPhase = openPhases[0]; + if (hasRegistered && openPhases[0] && openPhases[0].name === 'Registration') { + nextPhase = openPhases[1] || {}; + } + const nextDeadline = nextPhase && nextPhase.name; + + const deadlineEnd = moment(nextPhase && phaseEndDate(nextPhase)); + const currentTime = moment(); + + let timeLeft = deadlineEnd.isAfter(currentTime) + ? deadlineEnd.diff(currentTime) : 0; + + let format; + if (timeLeft > DAY_MS) format = 'D[d] H[h]'; + else if (timeLeft > HOUR_MS) format = 'H[h] m[min]'; + else format = 'm[min] s[s]'; + + timeLeft = moment.duration(timeLeft).format(format); + let relevantPhases = []; if (showDeadlineDetail) { @@ -202,6 +226,41 @@ export default function ChallengeHeader(props) { const checkpointCount = checkpoints && checkpoints.numberOfPassedScreeningSubmissions; + let nextDeadlineMsg; + switch ((status || '').toLowerCase()) { + case 'active': + nextDeadlineMsg = ( +
+ Next Deadline: + {' '} + { + + {nextDeadline || '-'} + + } +
+ ); + break; + case 'completed': + nextDeadlineMsg = ( +
+ The challenge is finished. +
+ ); + break; + default: + nextDeadlineMsg = ( +
+ Status: + ‌ + + {_.upperFirst(_.lowerCase(status))} + +
+ ); + break; + } + // Legacy MMs have a roundId field, but new MMs do not. // This is used to disable registration/submission for legacy MMs. const isLegacyMM = isMM(challenge) && Boolean(challenge.roundId); @@ -382,7 +441,18 @@ export default function ChallengeHeader(props) {
- Competition Timeline + {nextDeadlineMsg} + { + (status || '').toLowerCase() === 'active' + && ( +
+ Current Deadline Ends:{' '} + + {timeLeft} + +
+ ) + }
Date: Thu, 22 Sep 2022 21:19:33 +0700 Subject: [PATCH 02/18] fix: private challenge message --- src/shared/containers/ErrorMessage.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/shared/containers/ErrorMessage.jsx b/src/shared/containers/ErrorMessage.jsx index 5fb3ac3720..c6a2130908 100644 --- a/src/shared/containers/ErrorMessage.jsx +++ b/src/shared/containers/ErrorMessage.jsx @@ -20,6 +20,7 @@ function ErrorMessageContainer({ error, clearError }) { clearError()} /> ) : undefined } @@ -42,6 +43,7 @@ ErrorMessageContainer.propTypes = { error: PT.shape({ title: PT.string.isRequired, details: PT.string.isRequired, + support: PT.string.isRequired, }), }; From b1ce4e0071f3dbf83a36ef0266bcc32d16dcc322 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Fri, 23 Sep 2022 20:16:18 +0700 Subject: [PATCH 03/18] fix: active state on tabs --- .../challenge-detail/Header/TabSelector/style.scss | 9 +++++---- .../components/challenge-listing/ChallengeTab/style.scss | 5 +---- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/shared/components/challenge-detail/Header/TabSelector/style.scss b/src/shared/components/challenge-detail/Header/TabSelector/style.scss index f684f57548..3290cf9799 100644 --- a/src/shared/components/challenge-detail/Header/TabSelector/style.scss +++ b/src/shared/components/challenge-detail/Header/TabSelector/style.scss @@ -133,8 +133,8 @@ .challenge-view-selector { display: flex; flex-wrap: wrap; + border-radius: 4px 0; position: relative; - padding-bottom: 10px; border-bottom: silver solid 1px; gap: 16px; @@ -150,7 +150,7 @@ font-weight: 700; line-height: 20px; font-size: 14px; - margin: 10px 10px 0; + padding: 10px 16px; cursor: pointer; white-space: nowrap; position: relative; @@ -158,6 +158,7 @@ .challenge-selected-view { font-weight: 700 !important; + background: $color-blue-25; color: #2a2a2a; &::after { @@ -169,8 +170,8 @@ z-index: 100; display: block; position: absolute; - top: 30px; - left: 20%; + top: 40px; + left: 30%; } } diff --git a/src/shared/components/challenge-listing/ChallengeTab/style.scss b/src/shared/components/challenge-listing/ChallengeTab/style.scss index 575e052d7c..02f6f0b667 100644 --- a/src/shared/components/challenge-listing/ChallengeTab/style.scss +++ b/src/shared/components/challenge-listing/ChallengeTab/style.scss @@ -50,13 +50,10 @@ cursor: pointer; display: flex; justify-content: center; - - &:not(.active):hover { - background-color: #bae1f9; - } } .active { + background: $color-blue-25; color: $tc-black; font-weight: 700; From beb93bd4fe461b5bdc404181fd07fce4bbdf270d Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Fri, 23 Sep 2022 20:27:27 +0700 Subject: [PATCH 04/18] fix: remove Email button --- .../Specification/SideBar/ShareSocial.jsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx b/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx index a48b1fdcfa..ca48fae0f9 100644 --- a/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx +++ b/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx @@ -6,7 +6,6 @@ import React from 'react'; import TwitterIcon from '../../../../../assets/images/social/icon_twitter.svg'; import FacebookIcon from '../../../../../assets/images/social/icon_facebook.svg'; -import EmailIcon from '../../../../../assets/images/social/icon_email.svg'; import MoreIcon from '../../../../../assets/images/social/icon_plus.svg'; import './social_media.scss'; @@ -48,15 +47,6 @@ export default class ShareSocial extends React.Component { > - - - Date: Fri, 23 Sep 2022 23:55:00 +0700 Subject: [PATCH 05/18] fix: css error fixes --- .../components/challenge-detail/Header/TabSelector/style.scss | 2 +- src/shared/components/challenge-listing/ChallengeTab/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/components/challenge-detail/Header/TabSelector/style.scss b/src/shared/components/challenge-detail/Header/TabSelector/style.scss index 3290cf9799..33a3460bc2 100644 --- a/src/shared/components/challenge-detail/Header/TabSelector/style.scss +++ b/src/shared/components/challenge-detail/Header/TabSelector/style.scss @@ -158,7 +158,7 @@ .challenge-selected-view { font-weight: 700 !important; - background: $color-blue-25; + background: #bae1f9; color: #2a2a2a; &::after { diff --git a/src/shared/components/challenge-listing/ChallengeTab/style.scss b/src/shared/components/challenge-listing/ChallengeTab/style.scss index 02f6f0b667..1930b9eb31 100644 --- a/src/shared/components/challenge-listing/ChallengeTab/style.scss +++ b/src/shared/components/challenge-listing/ChallengeTab/style.scss @@ -53,7 +53,7 @@ } .active { - background: $color-blue-25; + background: #bae1f9; color: $tc-black; font-weight: 700; From 9e4735a6f0cf3759edb6ad85f1c3ac956459b825 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Sat, 24 Sep 2022 00:26:09 +0700 Subject: [PATCH 06/18] fix: bump libs version --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c3681e5a40..6ad2a3e7b1 100644 --- a/package.json +++ b/package.json @@ -153,8 +153,8 @@ "supertest": "^3.1.0", "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3", "tc-ui": "^1.0.12", - "topcoder-react-lib": "1.2.10", - "topcoder-react-ui-kit": "2.0.1", + "topcoder-react-lib": "1000.29.10", + "topcoder-react-ui-kit": "1000.1.2", "topcoder-react-utils": "0.7.8", "turndown": "^4.0.2", "url-parse": "^1.4.1", From 6b96b3d2bdbd09c91a1c0f0330ab50e6f486d584 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Tue, 27 Sep 2022 07:47:12 +0700 Subject: [PATCH 07/18] fix: remove email option for extra buttons --- .../challenge-detail/Specification/SideBar/ShareSocial.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx b/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx index ca48fae0f9..6a7b65584a 100644 --- a/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx +++ b/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx @@ -22,8 +22,15 @@ export default class ShareSocial extends React.Component { } } else { const scriptNode = document.createElement('script'); + const scriptNodeConfig = document.createElement('script'); + + scriptNode.type = 'text/javascript'; + scriptNodeConfig.type = 'text/javascript'; scriptNode.src = 'https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-52f22306211cecfc'; + scriptNodeConfig.text = "var addthis_config = { services_exclude: 'email' };"; + this.shareDiv.appendChild(scriptNode); + this.shareDiv.appendChild(scriptNodeConfig); } } From 84f585df5d4721105d30a7cd4ca546140ca3c247 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Tue, 27 Sep 2022 23:35:18 +0700 Subject: [PATCH 08/18] fix: private message only for topgear --- package.json | 2 +- src/shared/containers/challenge-detail/index.jsx | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 6ad2a3e7b1..d7b3c3337c 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,7 @@ "supertest": "^3.1.0", "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3", "tc-ui": "^1.0.12", - "topcoder-react-lib": "1000.29.10", + "topcoder-react-lib": "1000.29.11", "topcoder-react-ui-kit": "1000.1.2", "topcoder-react-utils": "0.7.8", "turndown": "^4.0.2", diff --git a/src/shared/containers/challenge-detail/index.jsx b/src/shared/containers/challenge-detail/index.jsx index fc026000f8..3347cb0216 100644 --- a/src/shared/containers/challenge-detail/index.jsx +++ b/src/shared/containers/challenge-detail/index.jsx @@ -192,6 +192,8 @@ class ChallengeDetailPageContainer extends React.Component { reviewTypes, getAllCountries, getReviewTypes, + setCommunityId, + communityId, } = this.props; if ( @@ -220,6 +222,10 @@ class ChallengeDetailPageContainer extends React.Component { loadChallengeDetails(auth, challengeId); } + if (communityId) { + setCommunityId(communityId); + } + fetchChallengeStatistics(auth, challengeId); if (!allCountries.length) { @@ -746,6 +752,7 @@ ChallengeDetailPageContainer.propTypes = { loadChallengeDetails: PT.func.isRequired, fetchChallengeStatistics: PT.func.isRequired, getAllCountries: PT.func.isRequired, + setCommunityId: PT.func.isRequired, getReviewTypes: PT.func.isRequired, // loadResults: PT.func.isRequired, // loadingCheckpointResults: PT.bool, @@ -919,6 +926,10 @@ const mapDispatchToProps = (dispatch) => { dispatch(ca.getListInit(uuid)); dispatch(ca.getListDone(uuid, auth)); }, + setCommunityId: (communityId) => { + const a = actions.challenge; + dispatch(a.setCommunityId(communityId)); + }, getAllCountries: (tokenV3) => { dispatch(lookupActions.getAllCountriesInit()); dispatch(lookupActions.getAllCountriesDone(tokenV3)); From 85d3612058a694a17d885699eb759252086aeba2 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Wed, 5 Oct 2022 06:30:59 +0700 Subject: [PATCH 09/18] fix: status message in challenge details page --- .../challenge-detail/Header/index.jsx | 50 +++++++++---------- .../challenge-detail/Header/style.scss | 1 - 2 files changed, 24 insertions(+), 27 deletions(-) diff --git a/src/shared/components/challenge-detail/Header/index.jsx b/src/shared/components/challenge-detail/Header/index.jsx index de9b90b2fb..43c82b8b0a 100644 --- a/src/shared/components/challenge-detail/Header/index.jsx +++ b/src/shared/components/challenge-detail/Header/index.jsx @@ -17,6 +17,9 @@ import { PrimaryButton } from 'topcoder-react-ui-kit'; import { Link } from 'topcoder-react-utils'; import { COMPETITION_TRACKS } from 'utils/tc'; import { phaseEndDate } from 'utils/challenge-listing/helper'; +import { + getTimeLeft, +} from 'utils/challenge-detail/helper'; import LeftArrow from 'assets/images/arrow-prev.svg'; @@ -112,6 +115,10 @@ export default function ChallengeHeader(props) { registrationEnded = !regPhase.isOpen; } + const currentPhases = challenge.phases + .filter(p => p.name !== 'Registration' && p.isOpen) + .sort((a, b) => moment(a.scheduledEndDate).diff(b.scheduledEndDate))[0]; + const trackLower = track ? track.replace(' ', '-').toLowerCase() : 'design'; const eventNames = (events || []).map((event => (event.eventName || '').toUpperCase())); @@ -137,11 +144,16 @@ export default function ChallengeHeader(props) { if (hasRegistered && openPhases[0] && openPhases[0].name === 'Registration') { nextPhase = openPhases[1] || {}; } - const nextDeadline = nextPhase && nextPhase.name; const deadlineEnd = moment(nextPhase && phaseEndDate(nextPhase)); const currentTime = moment(); + const timeDiff = getTimeLeft(currentPhases, 'to go'); + + if (!timeDiff.late) { + timeDiff.text = timeDiff.text.replace('to go', ''); + } + let timeLeft = deadlineEnd.isAfter(currentTime) ? deadlineEnd.diff(currentTime) : 0; @@ -228,19 +240,6 @@ export default function ChallengeHeader(props) { let nextDeadlineMsg; switch ((status || '').toLowerCase()) { - case 'active': - nextDeadlineMsg = ( -
- Next Deadline: - {' '} - { - - {nextDeadline || '-'} - - } -
- ); - break; case 'completed': nextDeadlineMsg = (
@@ -249,15 +248,15 @@ export default function ChallengeHeader(props) { ); break; default: - nextDeadlineMsg = ( -
- Status: - ‌ - - {_.upperFirst(_.lowerCase(status))} - -
- ); + // nextDeadlineMsg = ( + //
+ // Status: + // ‌ + // + // {_.upperFirst(_.lowerCase(status))} + // + //
+ // ); break; } @@ -446,9 +445,9 @@ export default function ChallengeHeader(props) { (status || '').toLowerCase() === 'active' && (
- Current Deadline Ends:{' '} + {currentPhases && `${currentPhases.name} Ends: `} - {timeLeft} + {timeDiff.text}
) @@ -532,7 +531,6 @@ ChallengeHeader.propTypes = { timelineTemplateId: PT.string, reliabilityBonus: PT.any, userDetails: PT.any, - currentPhases: PT.any, numOfRegistrants: PT.any, numOfCheckpointSubmissions: PT.any, numOfSubmissions: PT.any, diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index cd1e155ae5..a8bfa1cec7 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -602,7 +602,6 @@ .current-phase { overflow-wrap: normal; - padding-left: 10px; @include xs-to-md { padding-left: 0; From 6a6590865502e8936dd930dcfd7692d80cd4d955 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Thu, 6 Oct 2022 10:06:50 +0700 Subject: [PATCH 10/18] fix: timeline appeal response --- .../Header/DeadlinesPanel/index.jsx | 1 - .../challenge-detail/Header/index.jsx | 32 +++++++++++-------- .../challenge-detail/Header/style.scss | 3 +- 3 files changed, 20 insertions(+), 16 deletions(-) diff --git a/src/shared/components/challenge-detail/Header/DeadlinesPanel/index.jsx b/src/shared/components/challenge-detail/Header/DeadlinesPanel/index.jsx index 7eb853efd1..081d958d84 100644 --- a/src/shared/components/challenge-detail/Header/DeadlinesPanel/index.jsx +++ b/src/shared/components/challenge-detail/Header/DeadlinesPanel/index.jsx @@ -35,7 +35,6 @@ export default function DeadlinesPanel({ deadlines }) { } } if (index === deadlines.length - 1) { - name = 'Winners Announced'; showRange = false; } diff --git a/src/shared/components/challenge-detail/Header/index.jsx b/src/shared/components/challenge-detail/Header/index.jsx index 43c82b8b0a..12b0281f6b 100644 --- a/src/shared/components/challenge-detail/Header/index.jsx +++ b/src/shared/components/challenge-detail/Header/index.jsx @@ -213,26 +213,23 @@ export default function ChallengeHeader(props) { || phaseEndDate(p).getTime() < endPhaseDate)); relevantPhases.push({ id: -1, - name: 'Winners', + name: 'Winners Announced', isOpen: false, actualEndDate: endPhaseDate, scheduledEndDate: endPhaseDate, }); } else if (relevantPhases.length > 1) { - const lastPhase = relevantPhases[relevantPhases.length - 1]; - const lastPhaseTime = phaseEndDate(lastPhase).getTime(); - + // const lastPhase = relevantPhases[relevantPhases.length - 1]; + // const lastPhaseTime = phaseEndDate(lastPhase).getTime(); const appealsEndDate = phaseEndDate(sortedAllPhases[sortedAllPhases.length - 1]); - const appealsEnd = appealsEndDate.getTime(); - if (lastPhaseTime < appealsEnd) { - relevantPhases.push({ - id: -1, - name: 'Winners', - isOpen: false, - actualEndDate: appealsEndDate, - scheduledEndDate: appealsEndDate, - }); - } + // const appealsEnd = appealsEndDate.getTime(); + relevantPhases.push({ + id: -1, + name: 'Winners Announced', + isOpen: false, + actualEndDate: appealsEndDate, + scheduledEndDate: appealsEndDate, + }); } } @@ -247,6 +244,13 @@ export default function ChallengeHeader(props) {
); break; + case 'draft': + nextDeadlineMsg = ( +
+ In Draft +
+ ); + break; default: // nextDeadlineMsg = ( //
diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index a8bfa1cec7..f97c457a6d 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -596,7 +596,8 @@ } } - .completed { + .completed, + .draft { border-right: none; } From da20efe449fb0193d84017bd3b8dc0f18815cae4 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Thu, 6 Oct 2022 22:18:24 +0700 Subject: [PATCH 11/18] fix: view submissions 2 lines --- src/shared/components/challenge-detail/Header/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index f97c457a6d..9aabdd7c00 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -16,9 +16,10 @@ width: 100%; border-radius: 50px !important; height: 48px; - padding: 0 25px !important; background: #137d60 !important; color: #fff !important; + white-space: nowrap; + padding: 0 35px !important; @include xs-to-sm { width: fit-content; From 86031489c7fbf710e56d9a0f6dec6b593406785f Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Thu, 6 Oct 2022 22:26:22 +0700 Subject: [PATCH 12/18] fix: challenge status missing --- .../challenge-detail/Header/index.jsx | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/src/shared/components/challenge-detail/Header/index.jsx b/src/shared/components/challenge-detail/Header/index.jsx index 12b0281f6b..a92b2e90a6 100644 --- a/src/shared/components/challenge-detail/Header/index.jsx +++ b/src/shared/components/challenge-detail/Header/index.jsx @@ -244,24 +244,19 @@ export default function ChallengeHeader(props) {
); break; - case 'draft': + case 'active': + break; + default: nextDeadlineMsg = ( -
- In Draft +
+ Status: + ‌ + + {_.upperFirst(_.lowerCase(status))} +
); break; - default: - // nextDeadlineMsg = ( - //
- // Status: - // ‌ - // - // {_.upperFirst(_.lowerCase(status))} - // - //
- // ); - break; } // Legacy MMs have a roundId field, but new MMs do not. From ad36fef99d505b8d79ff4dc4835f87de264eb205 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Fri, 7 Oct 2022 19:26:22 +0700 Subject: [PATCH 13/18] fix: buttons design system --- .../ProfilePage/Awards/AwardBadge/index.jsx | 1 + .../challenge-detail/Header/index.jsx | 18 ++++---- .../challenge-detail/Header/style.scss | 42 +++++++++++++++---- 3 files changed, 44 insertions(+), 17 deletions(-) diff --git a/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx b/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx index 39a2a126eb..1903b27c2f 100644 --- a/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx +++ b/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx @@ -17,6 +17,7 @@ const AwardBadge = ({ }
+ {/* eslint-disable-next-line react/no-danger */}
diff --git a/src/shared/components/challenge-detail/Header/index.jsx b/src/shared/components/challenge-detail/Header/index.jsx index a92b2e90a6..b7e4e62b43 100644 --- a/src/shared/components/challenge-detail/Header/index.jsx +++ b/src/shared/components/challenge-detail/Header/index.jsx @@ -423,16 +423,16 @@ export default function ChallengeHeader(props) { Submit { - track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering + track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering && hasSubmissions && ( - - View Submissions - - ) - } + + View Submissions + + ) + }
diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index 9aabdd7c00..3257462cc6 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -13,13 +13,13 @@ .submitButton { margin: $base-unit 0; min-width: 0; - width: 100%; + border-width: 2px !important; border-radius: 50px !important; height: 48px; background: #137d60 !important; color: #fff !important; white-space: nowrap; - padding: 0 35px !important; + padding: 12 24px !important; @include xs-to-sm { width: fit-content; @@ -29,10 +29,10 @@ .submitButtonDisabled { margin: $base-unit 0; min-width: 0; - width: 100%; + border-width: 2px !important; border-radius: 50px !important; height: 48px; - padding: 0 25px !important; + padding: 12 24px !important; color: #767676 !important; background: #f4f4f4 !important; @@ -44,10 +44,10 @@ .unregisterButton { margin: $base-unit 0; min-width: 0; - width: 100%; + border-width: 2px !important; border-radius: 50px !important; height: 48px; - padding: 0 25px !important; + padding: 12 24px !important; color: #137d60 !important; border-color: #137d60 !important; background: #fff !important; @@ -60,10 +60,10 @@ .registerBtn { margin: $base-unit 0; min-width: 0; - width: 100%; + border-width: 2px !important; border-radius: 50px !important; height: 48px; - padding: 0 25px !important; + padding: 12 24px !important; background-color: #137d60 !important; @include xs-to-sm { @@ -71,6 +71,32 @@ } } +.submitButton:hover, +.registerBtn:hover { + color: #fff !important; + border-color: #219174 !important; + background: #219174 !important; +} + +.unregisterButton:hover { + color: #219174 !important; + border-color: #219174 !important; + background: #fff !important; +} + +.submitButton:active, +.registerBtn:active { + color: #fff !important; + border-color: #0d664e !important; + background: #0d664e !important; +} + +.unregisterButton:active { + color: #0d664e !important; + border-color: #0d664e !important; + background: #fff !important; +} + .challenge-ops-container { display: flex; margin-top: 32px; From 377c5625d838c48cfabe1a08b5ffd01a109d0266 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Sat, 8 Oct 2022 08:31:22 +0700 Subject: [PATCH 14/18] fix: change the font-weight & letter --- src/shared/components/challenge-detail/Header/style.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index 3257462cc6..a807310475 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -20,6 +20,8 @@ color: #fff !important; white-space: nowrap; padding: 12 24px !important; + font-weight: 700; + letter-spacing: 0.8em; @include xs-to-sm { width: fit-content; @@ -35,6 +37,8 @@ padding: 12 24px !important; color: #767676 !important; background: #f4f4f4 !important; + font-weight: 700; + letter-spacing: 0.8em; @include xs-to-sm { width: fit-content; @@ -51,6 +55,8 @@ color: #137d60 !important; border-color: #137d60 !important; background: #fff !important; + font-weight: 700; + letter-spacing: 0.8em; @include xs-to-sm { width: fit-content; @@ -65,6 +71,8 @@ height: 48px; padding: 12 24px !important; background-color: #137d60 !important; + font-weight: 700; + letter-spacing: 0.8em; @include xs-to-sm { width: fit-content; From 36e672d81a3f1a1fdc317ed6dfca937151173f1e Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Mon, 10 Oct 2022 21:54:01 +0700 Subject: [PATCH 15/18] fix: button style upgrade --- .../challenge-detail/Header/style.scss | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index a807310475..b87478cb31 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -10,8 +10,8 @@ padding: 0 25px !important; } -.submitButton { - margin: $base-unit 0; +.challenge-ops-container .submitButton { + margin: 5px; min-width: 0; border-width: 2px !important; border-radius: 50px !important; @@ -19,87 +19,87 @@ background: #137d60 !important; color: #fff !important; white-space: nowrap; - padding: 12 24px !important; + padding: 12px 24px !important; font-weight: 700; - letter-spacing: 0.8em; + letter-spacing: 0.008em; @include xs-to-sm { width: fit-content; } } -.submitButtonDisabled { - margin: $base-unit 0; +.challenge-ops-container .submitButtonDisabled { + margin: 5px; min-width: 0; border-width: 2px !important; border-radius: 50px !important; height: 48px; - padding: 12 24px !important; + padding: 12px 24px !important; color: #767676 !important; background: #f4f4f4 !important; font-weight: 700; - letter-spacing: 0.8em; + letter-spacing: 0.008em; @include xs-to-sm { width: fit-content; } } -.unregisterButton { - margin: $base-unit 0; +.challenge-ops-container .unregisterButton { + margin: 5px; min-width: 0; border-width: 2px !important; border-radius: 50px !important; height: 48px; - padding: 12 24px !important; + padding: 12px 24px !important; color: #137d60 !important; border-color: #137d60 !important; background: #fff !important; font-weight: 700; - letter-spacing: 0.8em; + letter-spacing: 0.008em; @include xs-to-sm { width: fit-content; } } -.registerBtn { - margin: $base-unit 0; +.challenge-ops-container .registerBtn { + margin: 5px; min-width: 0; border-width: 2px !important; border-radius: 50px !important; height: 48px; - padding: 12 24px !important; + padding: 12px 24px !important; background-color: #137d60 !important; font-weight: 700; - letter-spacing: 0.8em; + letter-spacing: 0.008em; @include xs-to-sm { width: fit-content; } } -.submitButton:hover, -.registerBtn:hover { +.challenge-ops-container .submitButton:hover, +.challenge-ops-container .registerBtn:hover { color: #fff !important; border-color: #219174 !important; background: #219174 !important; } -.unregisterButton:hover { +.challenge-ops-container .unregisterButton:hover { color: #219174 !important; border-color: #219174 !important; background: #fff !important; } -.submitButton:active, -.registerBtn:active { +.challenge-ops-container .submitButton:active, +.challenge-ops-container .registerBtn:active { color: #fff !important; border-color: #0d664e !important; background: #0d664e !important; } -.unregisterButton:active { +.challenge-ops-container .unregisterButton:active { color: #0d664e !important; border-color: #0d664e !important; background: #fff !important; From f509f72890751a8c3d15dc8c4645b5282ad7c3e8 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Tue, 11 Oct 2022 11:43:38 +0700 Subject: [PATCH 16/18] fix: focus style for buttons --- .../challenge-detail/Header/style.scss | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index b87478cb31..91c5bd6a89 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -105,6 +105,30 @@ background: #fff !important; } +.challenge-ops-container .submitButton:focus, +.challenge-ops-container .submitButton:focus-within, +.challenge-ops-container .submitButton:focus-visible{ + outline: none !important; + box-shadow: none !important; + border: 2px solid #219174 !important; +} + +.challenge-ops-container .registerBtn:focus, +.challenge-ops-container .registerBtn:focus-within, +.challenge-ops-container .registerBtn:focus-visible { + outline: none !important; + box-shadow: none !important; + border: 2px solid #219174 !important; +} + +.challenge-ops-container .unregisterButton:focus, +.challenge-ops-container .unregisterButton:focus-within, +.challenge-ops-container .unregisterButton:focus-visible{ + outline: none !important; + box-shadow: none !important; + border: 2px solid #0d664e !important; +} + .challenge-ops-container { display: flex; margin-top: 32px; From 9c2de22b33a25ac4a878eac892bdeaca45973441 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Tue, 11 Oct 2022 12:14:14 +0700 Subject: [PATCH 17/18] fix: add space before brackets --- src/shared/components/challenge-detail/Header/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index 91c5bd6a89..86bd9fbe04 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -107,7 +107,7 @@ .challenge-ops-container .submitButton:focus, .challenge-ops-container .submitButton:focus-within, -.challenge-ops-container .submitButton:focus-visible{ +.challenge-ops-container .submitButton:focus-visible { outline: none !important; box-shadow: none !important; border: 2px solid #219174 !important; @@ -123,7 +123,7 @@ .challenge-ops-container .unregisterButton:focus, .challenge-ops-container .unregisterButton:focus-within, -.challenge-ops-container .unregisterButton:focus-visible{ +.challenge-ops-container .unregisterButton:focus-visible { outline: none !important; box-shadow: none !important; border: 2px solid #0d664e !important; From 1af9802c925a4cdebb363aee743a3165a8e6fd6e Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Thu, 13 Oct 2022 18:26:44 +0700 Subject: [PATCH 18/18] fix: button stylings --- .../challenge-detail/Header/index.jsx | 2 +- .../challenge-detail/Header/style.scss | 45 ++++++++++++++----- 2 files changed, 36 insertions(+), 11 deletions(-) diff --git a/src/shared/components/challenge-detail/Header/index.jsx b/src/shared/components/challenge-detail/Header/index.jsx index b7e4e62b43..3cd0d3328f 100644 --- a/src/shared/components/challenge-detail/Header/index.jsx +++ b/src/shared/components/challenge-detail/Header/index.jsx @@ -397,7 +397,7 @@ export default function ChallengeHeader(props) { onClick={unregisterFromChallenge} theme={{ button: unregisterButtonDisabled - ? style.submitButtonDisabled + ? style.unregisterButtonDisabled : style.unregisterButton, }} > diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index 86bd9fbe04..a3daf5e533 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -13,13 +13,14 @@ .challenge-ops-container .submitButton { margin: 5px; min-width: 0; - border-width: 2px !important; border-radius: 50px !important; height: 48px; background: #137d60 !important; color: #fff !important; white-space: nowrap; padding: 12px 24px !important; + font-size: 16px; + line-height: 24px; font-weight: 700; letter-spacing: 0.008em; @@ -31,12 +32,13 @@ .challenge-ops-container .submitButtonDisabled { margin: 5px; min-width: 0; - border-width: 2px !important; border-radius: 50px !important; height: 48px; padding: 12px 24px !important; color: #767676 !important; background: #f4f4f4 !important; + font-size: 16px; + line-height: 24px; font-weight: 700; letter-spacing: 0.008em; @@ -48,13 +50,33 @@ .challenge-ops-container .unregisterButton { margin: 5px; min-width: 0; - border-width: 2px !important; border-radius: 50px !important; height: 48px; padding: 12px 24px !important; color: #137d60 !important; - border-color: #137d60 !important; + border: 2px solid #137d60 !important; background: #fff !important; + font-size: 16px; + line-height: 24px; + font-weight: 700; + letter-spacing: 0.008em; + + @include xs-to-sm { + width: fit-content; + } +} + +.challenge-ops-container .unregisterButtonDisabled { + margin: 5px; + min-width: 0; + border-radius: 50px !important; + height: 48px; + padding: 12px 24px !important; + color: #767676 !important; + border: 2px solid #f4f4f4; + background: #fff !important; + font-size: 16px; + line-height: 24px; font-weight: 700; letter-spacing: 0.008em; @@ -66,11 +88,12 @@ .challenge-ops-container .registerBtn { margin: 5px; min-width: 0; - border-width: 2px !important; border-radius: 50px !important; height: 48px; padding: 12px 24px !important; background-color: #137d60 !important; + font-size: 16px; + line-height: 24px; font-weight: 700; letter-spacing: 0.008em; @@ -82,8 +105,8 @@ .challenge-ops-container .submitButton:hover, .challenge-ops-container .registerBtn:hover { color: #fff !important; - border-color: #219174 !important; background: #219174 !important; + border-color: #219174 !important; } .challenge-ops-container .unregisterButton:hover { @@ -95,11 +118,13 @@ .challenge-ops-container .submitButton:active, .challenge-ops-container .registerBtn:active { color: #fff !important; - border-color: #0d664e !important; background: #0d664e !important; + border-color: #0d664e !important; } .challenge-ops-container .unregisterButton:active { + outline: none !important; + box-shadow: none !important; color: #0d664e !important; border-color: #0d664e !important; background: #fff !important; @@ -110,7 +135,7 @@ .challenge-ops-container .submitButton:focus-visible { outline: none !important; box-shadow: none !important; - border: 2px solid #219174 !important; + border-color: #0d664e; } .challenge-ops-container .registerBtn:focus, @@ -118,7 +143,7 @@ .challenge-ops-container .registerBtn:focus-visible { outline: none !important; box-shadow: none !important; - border: 2px solid #219174 !important; + border-color: #0d664e; } .challenge-ops-container .unregisterButton:focus, @@ -126,7 +151,7 @@ .challenge-ops-container .unregisterButton:focus-visible { outline: none !important; box-shadow: none !important; - border: 2px solid #0d664e !important; + border-color: #0d664e; } .challenge-ops-container {