From d004c482eb443fd5ad789281f5cba9a96316a447 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Fri, 27 May 2022 22:30:57 +0700 Subject: [PATCH 01/11] improvement(reskin): smoke test 2 f2f --- .../Header/DeadlinesPanel/style.scss | 2 +- .../ChallengeCard/Status/index.jsx | 5 +---- .../ChallengeCard/Status/style.scss | 21 +++++++++++++------ .../components/challenge-listing/style.scss | 4 ---- .../containers/challenge-detail/styles.scss | 2 ++ .../challenge-listing/Listing/styles.scss | 2 ++ src/styles/_mixins/_variables.scss | 3 ++- 7 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/shared/components/challenge-detail/Header/DeadlinesPanel/style.scss b/src/shared/components/challenge-detail/Header/DeadlinesPanel/style.scss index a277dce7e6..de33d22bf8 100644 --- a/src/shared/components/challenge-detail/Header/DeadlinesPanel/style.scss +++ b/src/shared/components/challenge-detail/Header/DeadlinesPanel/style.scss @@ -5,7 +5,7 @@ display: flex; flex-wrap: wrap; justify-content: space-between; - padding: 30px 150px 15px 0; + padding: 30px 0 15px 0; position: relative; @include xs-to-md { diff --git a/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx index 0b483f6afc..6c808d9a64 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx +++ b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx @@ -153,10 +153,7 @@ export default function ChallengeStatus(props) { target={openChallengesInNewTabs ? '_blank' : undefined} > - {timeNote} - - - to Register + {timeNote} to Register ); diff --git a/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss b/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss index 86c2ae5a81..909f2f8287 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss +++ b/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss @@ -149,7 +149,6 @@ $status-radius-4: $corner-radius * 2; @include roboto-regular; font-weight: 400; - display: block; position: absolute; height: 90%; margin-top: 5px; @@ -157,11 +156,13 @@ $status-radius-4: $corner-radius * 2; top: 0; right: 0; width: 120px; - padding-left: 16px; text-align: left; font-size: 14px; color: $tco-black; line-height: 24px; + white-space: nowrap; + justify-content: center; + display: flex; @include xs-to-sm { position: absolute; @@ -178,18 +179,26 @@ $status-radius-4: $corner-radius * 2; span { font-size: 14px; line-height: $status-space-15; - font-weight: 500; - display: block; + font-weight: 400; position: absolute; top: 50%; transform: translate(0, -50%); - margin-top: -$status-space-10; + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 auto; + text-align: left; + + strong { + font-weight: 600; + } @include xs-to-sm { display: inline-block; position: relative; - margin-top: 0; + margin-top: 10px; color: $tco-black; + padding-right: 0; } } diff --git a/src/shared/components/challenge-listing/style.scss b/src/shared/components/challenge-listing/style.scss index bdf577c037..75241d7a5a 100644 --- a/src/shared/components/challenge-listing/style.scss +++ b/src/shared/components/challenge-listing/style.scss @@ -22,10 +22,6 @@ $challenge-radius-4: $corner-radius * 2; flex: 1; margin: 0 32px; - @include xs-to-md { - margin: 0; - } - .tc-title { @include barlow-condensed; diff --git a/src/shared/containers/challenge-detail/styles.scss b/src/shared/containers/challenge-detail/styles.scss index 0c56b4f92d..54235981be 100644 --- a/src/shared/containers/challenge-detail/styles.scss +++ b/src/shared/containers/challenge-detail/styles.scss @@ -3,6 +3,8 @@ .outer-container { background: $tc-gray-neutral-dark; width: 100%; + max-width: $screem-md; + margin: 0 auto; @include xs-to-sm { padding: 0; diff --git a/src/shared/containers/challenge-listing/Listing/styles.scss b/src/shared/containers/challenge-listing/Listing/styles.scss index d1ceb38cab..d6f1033b23 100644 --- a/src/shared/containers/challenge-listing/Listing/styles.scss +++ b/src/shared/containers/challenge-listing/Listing/styles.scss @@ -9,6 +9,8 @@ $sm-space-40: $base-unit * 8; flex: 1; flex-direction: column; width: 100%; + max-width: $screem-md; + margin: 0 auto; } .submission-management-container { diff --git a/src/styles/_mixins/_variables.scss b/src/styles/_mixins/_variables.scss index 33656d5a95..646c5a514b 100644 --- a/src/styles/_mixins/_variables.scss +++ b/src/styles/_mixins/_variables.scss @@ -2,6 +2,7 @@ $tco-black: #2a2a2a; /* @media */ +$screem-md: 1376px; $screen-sm: 768px; /* member rating colors */ @@ -9,7 +10,7 @@ $member-gray: #555; $member-green: #258205; $member-blue: #4c50d9; $member-yellow: #f2c900; -$member-red: #ea1900; +$member-red: #ea1900; /* recommendation tag color */ $recommendation-bg: #cef0af; From 91ba249a2d07982d1f6444454473f8e175f9b515 Mon Sep 17 00:00:00 2001 From: lunarkid Date: Sat, 28 May 2022 08:46:04 +0700 Subject: [PATCH 02/11] improvement(reskin): mm submission fixes f2f --- .../SubmissionManagement/Icons/IconZoom.svg | 3 + src/shared/components/Tooltip/style.scss | 6 + .../MySubmissions/SubmissionsDetail/index.jsx | 419 +++++++++--------- .../SubmissionsDetail/styles.scss | 120 ++++- .../MySubmissions/SubmissionsList/index.jsx | 22 +- .../MySubmissions/SubmissionsList/styles.scss | 26 +- .../challenge-detail/MySubmissions/index.jsx | 59 ++- .../MySubmissions/styles.scss | 61 ++- .../challenge-detail/icons/failed.svg | 22 +- 9 files changed, 463 insertions(+), 275 deletions(-) create mode 100644 src/shared/components/SubmissionManagement/Icons/IconZoom.svg diff --git a/src/shared/components/SubmissionManagement/Icons/IconZoom.svg b/src/shared/components/SubmissionManagement/Icons/IconZoom.svg new file mode 100644 index 0000000000..30f678532e --- /dev/null +++ b/src/shared/components/SubmissionManagement/Icons/IconZoom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/components/Tooltip/style.scss b/src/shared/components/Tooltip/style.scss index 651af0c2ae..3849c4b600 100644 --- a/src/shared/components/Tooltip/style.scss +++ b/src/shared/components/Tooltip/style.scss @@ -13,6 +13,12 @@ padding: 0; } + .toolTipPadding { + .rc-tooltip-inner { + padding: 8px 10px; + } + } + .rc-tooltip-arrow { background: url(assets/images/tooltip-arrow.svg); width: 30px; diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx index cc5afe0578..71ca8c6fea 100644 --- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx +++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/index.jsx @@ -7,10 +7,10 @@ import PT from 'prop-types'; import _ from 'lodash'; import cn from 'classnames'; import sortList from 'utils/challenge-detail/sort'; +import Tooltip from 'components/Tooltip'; +import IconClose from 'assets/images/icon-close-green.svg'; import ArrowDown from '../../../../../assets/images/arrow-down.svg'; -import IconComplete from '../../icons/completed.svg'; -import IconQueued from '../../icons/queued.svg'; import IconFail from '../../icons/failed.svg'; import './styles.scss'; @@ -85,7 +85,7 @@ class SubmissionsDetailView extends React.Component { */ updateSortedSubmissions() { const { submission: { review } } = this.props; - const sortedSubmissions = _.cloneDeep(review); + const sortedSubmissions = _.cloneDeep(review || []); this.sortSubmissions(sortedSubmissions); this.setState({ sortedSubmissions }); } @@ -158,220 +158,225 @@ class SubmissionsDetailView extends React.Component { } return (
-
- -
- Submission Details: - {submission.id} ({submission.submissionId}) +
+

Submission Details

+
onCancel()}> +
-
-
- Review Summary -
-
- Artifacts +
+
+
+ Submission: + {submission.id} ({submission.submissionId})
-
-
-
- -
-
- +
+
- Reviewer -
-
- -
-
- +
+
- Score -
-
- -
-
- +
+
- Status -
-
- + +
-
- { - sortedSubmissions.map((review) => { - let { score } = review; - if (_.isNumber(score)) { - if (score > 0) { - score = score.toFixed(2); + { + sortedSubmissions.map((review) => { + let { score } = review; + if (_.isNumber(score)) { + if (score > 0) { + score = score.toFixed(2); + } + } else { + score = '-'; } - } else { - score = '-'; - } - return ( -
-
- {this.getReviewName(review)} -
-
- TC System -
-
- {(score < 0) ? () : ({score})} -
-
- {(review.status === 'completed') ? ( - - ) : ()} + return ( +
+
+
Review Type
+ {this.getReviewName(review)} +
+
+
Reviewer
+ TC System +
+
+
Score
+ + {(score < 0) ? ( + + + + ) : ({score})} +
+
+
Status
+ + {(review.status === 'completed') ? ( + Complete + ) : ( + Failed + )} +
-
- ); - }) - } -
-
- Final Score -
-
-
- {finalScore} -
-
- {submission.provisionalScoringIsCompleted ? ( - - ) : ()} + ); + }) + } +
+
+
Review Type
+ Final Score +
+
+
Reviewer
+ N/A +
+
+
Score
+ {finalScore || 'N/A'} +
+
+
Status
+ {submission.provisionalScoringIsCompleted ? ( + Complete + ) : (In Queue)} +
diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss index 4f6b6befb0..5ca7735253 100644 --- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss +++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsDetail/styles.scss @@ -1,4 +1,4 @@ -@import '~styles/mixins'; +@import "~styles/mixins"; .wrapper { @include roboto-medium; @@ -22,6 +22,27 @@ } } +.header { + display: flex; + justify-content: space-between; + padding-bottom: 25px; + + .title { + @include barlow-medium; + + font-weight: 600; + color: #2a2a2a; + font-size: 18px; + line-height: 22px; + text-transform: uppercase; + } + + .icon { + cursor: pointer; + margin-top: 5px; + } +} + .table-header { background: #fafafb; justify-content: center; @@ -36,11 +57,19 @@ display: flex; height: 40px; align-items: center; - border: 1px solid #ededf2; - border-bottom: none; + border-bottom: 1px solid #ededf2; - &:last-child { - border-bottom: 1px solid #ededf2; + @include xs-to-sm { + flex-direction: column; + align-items: flex-start; + gap: 20px; + height: inherit; + padding-top: 18px; + padding-bottom: 18px; + + &:first-child { + border-top: 1px solid #ededf2; + } } } @@ -70,7 +99,6 @@ } .title-detail { - color: $tc-dark-blue; margin-left: 2px; } @@ -96,13 +124,22 @@ } .column-1 { - color: $tc-dark-blue; + color: black; padding-left: 22px; + font-size: 14px; + + @include xs-to-sm { + padding-left: 0; + } } .table-content-header { color: $tc-black; + @include xs-to-sm { + display: none; + } + .column-1 { color: $tc-black; } @@ -118,6 +155,12 @@ &.column-1 { justify-content: flex-start; } + + @include xs-to-sm { + flex-direction: column; + align-items: flex-start; + font-size: 14px; + } } .table-content-footer { @@ -127,7 +170,7 @@ } .col-arrow { - display: flex; + display: none; padding-left: 5px; margin-right: -19px; @@ -139,7 +182,24 @@ } } +.hr { + width: 100%; + margin: 0; +} + +.sub-header { + font-size: 16px; + margin-top: 24px; + margin-bottom: 24px; + + .title-detail { + font-weight: bold; + } +} + .col-arrow-is-sorting { + display: block; + :global { g { fill: $tc-dark-blue; @@ -158,10 +218,15 @@ } } -.header-sort { +button.header-sort { display: flex; justify-content: center; align-items: center; + font-size: 11px; + color: #767676; + text-transform: uppercase; + font-weight: 600; + font-family: "Barlow", Helvetica, Arial, sans-serif; &:hover { color: $tc-dark-blue; @@ -174,7 +239,38 @@ } } -button.is-highlight, -.is-highlight { - background: rgba(26, 133, 255, 0.05); +.status-complete { + font-size: 14px; + color: #0ab88a; + font-weight: 500; +} + +.status-failed { + font-size: 14px; + color: #ef476f; + font-weight: 500; +} + +.status-in-queue { + font-size: 14px; + color: #f46500; + font-weight: 500; +} + +.mobile-header { + display: none; + font-weight: 600; + color: #767676; + padding-bottom: 3px; + + @include xs-to-sm { + display: block; + } +} + +.inner-content { + @include xs-to-sm { + max-height: calc(100vh - 150px); + overflow: auto; + } } diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx index 93e5f862f5..621cf81fad 100644 --- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx +++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx @@ -14,10 +14,12 @@ import sortList from 'utils/challenge-detail/sort'; import IconClose from 'assets/images/icon-close-green.svg'; import DateSortIcon from 'assets/images/icon-date-sort.svg'; import SortIcon from 'assets/images/icon-sort.svg'; +import Tooltip from 'components/Tooltip'; import IconFail from '../../icons/failed.svg'; import DownloadIcon from '../../../SubmissionManagement/Icons/IconSquareDownload.svg'; -// import SearchIcon from '../../../SubmissionManagement/Icons/IconSearch.svg'; +import ZoomIcon from '../../../SubmissionManagement/Icons/IconZoom.svg'; +// import SearchIcon from '../../../SubmissionManagement/Icons/IconSearch.svg'; import style from './styles.scss'; const { getService } = services.submissions; @@ -379,18 +381,14 @@ class SubmissionsListView extends React.Component { 'submission-table-column column-1', )} > - +
Provisional Score
- {(provisionalScore < 0) ? () : ({provisionalScore})} + {(provisionalScore < 0) ? ( + + + + ) : ({provisionalScore})}
+ + {/* */} diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss index de9640e3ef..04ba214a53 100644 --- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss +++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss @@ -96,8 +96,7 @@ flex-direction: column; font-size: 13px; line-height: 20px; - padding-top: 30px; - padding-bottom: 50px; + padding-top: 10px; margin: 0 41px; @include xs-to-sm { @@ -147,12 +146,13 @@ button.column-1-1, display: flex; justify-content: flex-start; align-items: center; - height: 40px; + height: 56px; @include xs-to-sm { display: flex; flex-direction: column; justify-content: flex-start; + align-items: flex-start; height: auto; } } @@ -306,6 +306,10 @@ button.column-1-1, margin-left: 17px; } +.icon-zoom { + margin-left: 17px; +} + .col-arrow { display: flex; padding-left: 5px; @@ -336,11 +340,6 @@ button.column-1-1, } } -button.is-highlight, -.is-highlight { - display: inherit; -} - .mobile-header { display: none; @@ -464,3 +463,14 @@ hr { margin-bottom: 16px; } } + +.is-highlight, +button.is-highlight { + display: inherit; + + .header-sort { + span { + color: black; + } + } +} diff --git a/src/shared/components/challenge-detail/MySubmissions/index.jsx b/src/shared/components/challenge-detail/MySubmissions/index.jsx index a3232f8c56..d0d80eb630 100644 --- a/src/shared/components/challenge-detail/MySubmissions/index.jsx +++ b/src/shared/components/challenge-detail/MySubmissions/index.jsx @@ -7,12 +7,19 @@ import PT from 'prop-types'; import _ from 'lodash'; import { goToLogin } from 'utils/tc'; import LoadingIndicator from 'components/LoadingIndicator'; +import tc from 'components/buttons/themed/tc.scss'; + import { isTokenExpired } from '@topcoder-platform/tc-auth-lib'; +import { Modal, PrimaryButton } from 'topcoder-react-ui-kit'; import SubmissionsList from './SubmissionsList'; import SubmissionsDetail from './SubmissionsDetail'; -import './styles.scss'; +import style from './styles.scss'; + +const buttonThemes = { + tc, +}; class MySubmissionsView extends React.Component { constructor(props) { @@ -64,13 +71,14 @@ class MySubmissionsView extends React.Component { const { selectedSubmission, submissionsSortDetail } = this.state; if (!_.isEmpty(loadingMMSubmissionsForChallengeId)) { - return
; + return
; } return ( -
-
- {selectedSubmission ? ( +
+
+ { selectedSubmission && ( + this.setState({ selectedSubmission: null })} theme={style}> this.setState({ selectedSubmission: null })} submission={selectedSubmission} @@ -78,22 +86,33 @@ class MySubmissionsView extends React.Component { submissionsSort={submissionsSortDetail} onSortChange={sort => this.setState({ submissionsSortDetail: sort })} /> - ) : ( - this.setState({ selectedSubmission: submission })} - challengesUrl={challengesUrl} - challenge={challenge} - hasRegistered={hasRegistered} - unregistering={unregistering} - submissionEnded={submissionEnded} - isMM={isMM} - isLegacyMM={isLegacyMM} - mySubmissions={mySubmissions} - auth={auth} - submissionsSort={submissionsSort} - onSortChange={onSortChange} - /> + +
+ this.setState({ selectedSubmission: null })} + theme={{ + button: buttonThemes.tc['primary-green-md'], + }} + > + Close + +
+ )} + this.setState({ selectedSubmission: submission })} + challengesUrl={challengesUrl} + challenge={challenge} + hasRegistered={hasRegistered} + unregistering={unregistering} + submissionEnded={submissionEnded} + isMM={isMM} + isLegacyMM={isLegacyMM} + mySubmissions={mySubmissions} + auth={auth} + submissionsSort={submissionsSort} + onSortChange={onSortChange} + />
); diff --git a/src/shared/components/challenge-detail/MySubmissions/styles.scss b/src/shared/components/challenge-detail/MySubmissions/styles.scss index e3d3cfb71c..d8e8b0fc4d 100644 --- a/src/shared/components/challenge-detail/MySubmissions/styles.scss +++ b/src/shared/components/challenge-detail/MySubmissions/styles.scss @@ -1,4 +1,4 @@ -@import '~styles/mixins'; +@import "~styles/mixins"; .wrapper { @include roboto-regular; @@ -17,3 +17,62 @@ .loading { margin-top: 30px; } + +.close-btn { + cursor: pointer; + display: flex; + justify-content: flex-end; + margin-top: 24px; + margin-bottom: 32px; + background-color: #137d60; + padding: 8px 24px; + border-radius: 24px; + float: right; + + span { + @include roboto-bold; + + font-weight: 700; + font-size: 14px; + line-height: 24px; + color: #fff; + } + + @include xs-to-sm { + border-top: 1px solid #e9e9e9; + position: sticky; + margin-bottom: 16px; + } +} + +.buttons { + margin-top: 24px; + float: right; + + @include xs-to-sm { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + display: flex; + justify-content: flex-end; + padding: 24px 16px; + background-color: white; + } +} + +.container { + padding: 25px; + width: 750px; + border-radius: 8px; + + @include xs-to-sm { + width: 100%; + margin: 0; + max-width: 100vw; + height: 100%; + max-height: 100vh; + padding: 24px 16px; + z-index: 999999; + } +} diff --git a/src/shared/components/challenge-detail/icons/failed.svg b/src/shared/components/challenge-detail/icons/failed.svg index 0c407d0d54..0ac7360987 100644 --- a/src/shared/components/challenge-detail/icons/failed.svg +++ b/src/shared/components/challenge-detail/icons/failed.svg @@ -1,19 +1,3 @@ - - - Submission Failed - - - - - - - - - - - - - - - - \ No newline at end of file + + + From 9f1600914959cefaf86088ed6275f76292e2b885 Mon Sep 17 00:00:00 2001 From: Dedy Wahyudi Date: Sat, 28 May 2022 09:24:17 +0700 Subject: [PATCH 03/11] improvement(reskin): smoke test 1 f2f --- src/shared/components/TrackIcon/style.scss | 4 ++-- .../challenge-detail/Header/ChallengeTags.jsx | 3 ++- .../challenge-detail/Header/style.scss | 16 ++++++++++++++++ .../challenge-detail/Submissions/style.scss | 18 +++++++++--------- .../ChallengeCard/Status/index.jsx | 4 ++-- .../ChallengeCard/Status/style.scss | 18 ++++++++++++++++++ 6 files changed, 49 insertions(+), 14 deletions(-) diff --git a/src/shared/components/TrackIcon/style.scss b/src/shared/components/TrackIcon/style.scss index 97e722a8c2..62ef3d0b69 100644 --- a/src/shared/components/TrackIcon/style.scss +++ b/src/shared/components/TrackIcon/style.scss @@ -83,8 +83,8 @@ $track-code-turquose: #0ab88a; &.qa, &.quality-assurance { - color: $tc-purple-120; - background: $tc-purple-20; + color: #0ab88a; + background: #c1f5e7; } &.data_science, diff --git a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx index d0c45b0615..e9150ce43f 100644 --- a/src/shared/components/challenge-detail/Header/ChallengeTags.jsx +++ b/src/shared/components/challenge-detail/Header/ChallengeTags.jsx @@ -27,7 +27,7 @@ import { COMPETITION_TRACKS } from 'utils/tc'; import VerifiedTag from 'components/challenge-listing/VerifiedTag'; import MatchScore from 'components/challenge-listing/ChallengeCard/MatchScore'; import { calculateScore } from '../../../utils/challenge-listing/helper'; -import './style.scss'; +import style from './style.scss'; export default function ChallengeTags(props) { const { @@ -97,6 +97,7 @@ export default function ChallengeTags(props) { {event} diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss index 0832d4bb8c..341a5372e7 100644 --- a/src/shared/components/challenge-detail/Header/style.scss +++ b/src/shared/components/challenge-detail/Header/style.scss @@ -586,3 +586,19 @@ margin-right: -2px; padding: 0; } + +.qaTrackEventTag { + color: #0ab88a; + background: #c1f5e7; + + &:active, + &:focus, + &:hover { + color: lighten(#0ab88a, 2%); + background: darken(#c1f5e7, 5%); + } + + &:visited { + color: lighten(#0ab88a, 2%); + } +} diff --git a/src/shared/components/challenge-detail/Submissions/style.scss b/src/shared/components/challenge-detail/Submissions/style.scss index a6155822aa..fbfe076c72 100644 --- a/src/shared/components/challenge-detail/Submissions/style.scss +++ b/src/shared/components/challenge-detail/Submissions/style.scss @@ -222,7 +222,7 @@ .container.dev { line-height: 50px; - text-align: center; + text-align: left; @include xs-to-sm { line-height: 20px; @@ -346,7 +346,6 @@ .col-1 { padding-left: 30px; - text-align: left; width: 10%; justify-content: flex-start; display: flex; @@ -364,10 +363,11 @@ } .col-3 { - width: 18.6%; + width: 20.5%; + margin-right: auto; a { - padding-left: 20px; + padding-left: 0; @include xs-to-sm { padding-left: 0; @@ -380,10 +380,11 @@ } .col-4 { - width: 20.6%; + width: 20.5%; + margin-right: auto; p { - padding-left: 20px; + padding-left: 0; @include xs-to-sm { padding-left: 0; @@ -396,7 +397,7 @@ } .col-5 { - width: 19.6%; + width: 22%; p { padding-right: 60px; @@ -412,7 +413,7 @@ } .col-6 { - width: 21.6%; + width: 22%; p { padding-right: 55px; @@ -473,7 +474,6 @@ @include barlow-bold; display: flex; - justify-content: center; align-items: center; cursor: pointer; border: none; diff --git a/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx index 0b483f6afc..04164b0bf9 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx +++ b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx @@ -152,10 +152,10 @@ export default function ChallengeStatus(props) { styleName="register-button" target={openChallengesInNewTabs ? '_blank' : undefined} > - + {timeNote} - + to Register diff --git a/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss b/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss index 86c2ae5a81..500d32f3c8 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss +++ b/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss @@ -185,11 +185,21 @@ $status-radius-4: $corner-radius * 2; transform: translate(0, -50%); margin-top: -$status-space-10; + &.late { + line-height: $status-space-20; + max-width: 67px; + } + @include xs-to-sm { display: inline-block; position: relative; margin-top: 0; color: $tco-black; + + &.late { + line-height: $status-space-15; + max-width: 100%; + } } } @@ -197,9 +207,17 @@ $status-radius-4: $corner-radius * 2; font-weight: 400; margin-top: $status-space-10; + &.third-line { + margin-top: $status-space-20; + } + @include xs-to-sm { margin-top: 0; padding-left: 5px; + + &.third-line { + margin-top: 0; + } } } From 592e924d3354851ac89bebfeff4a80d45c8b3ec4 Mon Sep 17 00:00:00 2001 From: Dedy Wahyudi Date: Sat, 28 May 2022 19:08:26 +0700 Subject: [PATCH 04/11] improvement(reskin): mm submission mobile f2f --- .../Submissions/SubmissionRow/style.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss b/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss index 0003cf2e88..830bb79855 100644 --- a/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss +++ b/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss @@ -4,6 +4,10 @@ padding-bottom: 10px; border-radius: 8px; margin: 25px 32px 32px; + + @include xs-to-sm { + margin: 0 0; + } } .history-head { @@ -265,11 +269,13 @@ hr { border-radius: 8px; @include xs-to-sm { - margin: 9px 16px 16px 9px; - max-width: 100% !important; - top: 43%; - padding: 0 !important; - overflow-y: scroll; + width: 100%; + margin: 0; + max-width: 100vw; + height: 100%; + max-height: 100vh; + padding: 24px 16px; + z-index: 999999; } } From 5550869c8c0de74de5cbd4c223674d70f1186048 Mon Sep 17 00:00:00 2001 From: Dedy Wahyudi Date: Mon, 30 May 2022 14:31:27 +0700 Subject: [PATCH 05/11] fix(reskin): set reskin to staging --- .circleci/config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.circleci/config.yml b/.circleci/config.yml index f290330bbb..2675a665fe 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -380,6 +380,7 @@ workflows: only: - develop - stat_marathon_match_link + - reskin # Production builds are exectuted # when PR is merged to the master # Don't change anything in this configuration From 257d357c93cd310c3dfa5318e60e0b4035d76657 Mon Sep 17 00:00:00 2001 From: Dedy Wahyudi Date: Tue, 31 May 2022 15:41:48 +0700 Subject: [PATCH 06/11] improvement(reskin): inline spacing f2f --- .circleci/config.yml | 1 - .../Header/DeadlinesPanel/index.jsx | 2 +- .../Header/DeadlinesPanel/style.scss | 4 ++++ .../ChallengeCard/Status/index.jsx | 18 +++++++++++++++--- .../ChallengeCard/Status/style.scss | 7 ++++++- .../components/challenge-listing/style.scss | 2 +- 6 files changed, 27 insertions(+), 7 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 2675a665fe..c8d583e700 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -350,7 +350,6 @@ workflows: branches: only: - develop - - reskin # This is alternate dev env for parallel testing - "build-test": context : org-global diff --git a/src/shared/components/challenge-detail/Header/DeadlinesPanel/index.jsx b/src/shared/components/challenge-detail/Header/DeadlinesPanel/index.jsx index cd8abc1e5c..710a5bf509 100644 --- a/src/shared/components/challenge-detail/Header/DeadlinesPanel/index.jsx +++ b/src/shared/components/challenge-detail/Header/DeadlinesPanel/index.jsx @@ -17,7 +17,7 @@ export default function DeadlinesPanel({ deadlines }) { const started = moment(start).isBefore(); return ( -
+

Timezone: {moment.tz.guess()} diff --git a/src/shared/components/challenge-detail/Header/DeadlinesPanel/style.scss b/src/shared/components/challenge-detail/Header/DeadlinesPanel/style.scss index de33d22bf8..8f814362a1 100644 --- a/src/shared/components/challenge-detail/Header/DeadlinesPanel/style.scss +++ b/src/shared/components/challenge-detail/Header/DeadlinesPanel/style.scss @@ -14,6 +14,10 @@ padding-right: 16px; padding-left: 16px; } + + &.left { + justify-content: flex-start; + } } .timezone { diff --git a/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx index 04164b0bf9..c8547c9303 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx +++ b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx @@ -142,8 +142,12 @@ export default function ChallengeStatus(props) { * here is that the standard "getTimeLeft" method, for positive times, * generates a string like "H MM to go"; here we want to render just * H MM part, so we cut the last 6 symbols. Not a good code. */ + let lateNote; if (!timeDiff.late) { timeNote = timeNote.substring(0, timeNote.length - 6); + } else { + lateNote = timeNote.substring(timeNote.length - 8); + timeNote = timeNote.substring(0, timeNote.length - 9); } return ( - - {timeNote} - + { timeDiff.late + ? ( + + {timeNote}
{lateNote} + + ) : ( + + {timeNote} + + ) + } to Register diff --git a/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss b/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss index 500d32f3c8..08d010987b 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss +++ b/src/shared/components/challenge-listing/ChallengeCard/Status/style.scss @@ -187,7 +187,6 @@ $status-radius-4: $corner-radius * 2; &.late { line-height: $status-space-20; - max-width: 67px; } @include xs-to-sm { @@ -199,6 +198,12 @@ $status-radius-4: $corner-radius * 2; &.late { line-height: $status-space-15; max-width: 100%; + + @include xs-to-sm { + br { + display: none; + } + } } } } diff --git a/src/shared/components/challenge-listing/style.scss b/src/shared/components/challenge-listing/style.scss index 75241d7a5a..a8b290e569 100644 --- a/src/shared/components/challenge-listing/style.scss +++ b/src/shared/components/challenge-listing/style.scss @@ -20,7 +20,7 @@ $challenge-radius-4: $corner-radius * 2; .ChallengeFiltersExample { background: $tc-white; flex: 1; - margin: 0 32px; + margin: 0; .tc-title { @include barlow-condensed; From c73a3d521b967c69ccc1fd6191a1010c51ab210c Mon Sep 17 00:00:00 2001 From: Dedy Wahyudi Date: Tue, 31 May 2022 18:30:16 +0700 Subject: [PATCH 07/11] improvement(reskin): mm issues 2 f2f --- .../MySubmissions/SubmissionsList/index.jsx | 10 +++++++--- .../MySubmissions/SubmissionsList/styles.scss | 20 +++++++++++++++++++ .../Submissions/SubmissionRow/index.jsx | 2 +- 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx index 621cf81fad..1372a6e6db 100644 --- a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx +++ b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/index.jsx @@ -160,6 +160,8 @@ class SubmissionsListView extends React.Component { onSortChange, } = this.props; + const isButtonDisabled = !hasRegistered || unregistering || submissionEnded || isLegacyMM; + const { field, sort } = this.getSubmissionsSortParam(); const revertSort = (sort === 'desc') ? 'asc' : 'desc'; @@ -427,7 +429,7 @@ class SubmissionsListView extends React.Component { )} >

- {moment(mySubmission.submissionTime).format('MMM DD, YYYY')} {moment(mySubmission.submissionTime).format('HH:mm')} + {moment(mySubmission.submissionTime).format('MMM DD, YYYY HH:mm:ss')}
- Submission: {submissionId} + Latest Submission: {submissionId}
From a503f87863356014ac68beca82d192b0b7ff7c31 Mon Sep 17 00:00:00 2001 From: Dedy Wahyudi Date: Tue, 31 May 2022 19:00:14 +0700 Subject: [PATCH 08/11] improvement(reskin): mm issues 1 f2f --- .../FailedSubmissionTooltip/index.jsx | 40 +++++++++++++++++++ .../FailedSubmissionTooltip/style.scss | 3 ++ .../SubmissionHistoryRow/index.jsx | 6 +-- .../Submissions/SubmissionRow/index.jsx | 34 ++++++++-------- .../Submissions/SubmissionRow/style.scss | 9 +++++ .../challenge-detail/Submissions/style.scss | 2 +- 6 files changed, 74 insertions(+), 20 deletions(-) create mode 100644 src/shared/components/challenge-detail/Submissions/FailedSubmissionTooltip/index.jsx create mode 100644 src/shared/components/challenge-detail/Submissions/FailedSubmissionTooltip/style.scss diff --git a/src/shared/components/challenge-detail/Submissions/FailedSubmissionTooltip/index.jsx b/src/shared/components/challenge-detail/Submissions/FailedSubmissionTooltip/index.jsx new file mode 100644 index 0000000000..9714abfb42 --- /dev/null +++ b/src/shared/components/challenge-detail/Submissions/FailedSubmissionTooltip/index.jsx @@ -0,0 +1,40 @@ +/** + * Failed Submission Tooltip Component. + * + */ + +import React from 'react'; +import PT from 'prop-types'; +import Tooltip from 'components/Tooltip'; +import Failed from '../../icons/failed.svg'; +import './style.scss'; + +function onPopupAlign(TooltipNode) { + const inner = TooltipNode.querySelector('.rc-tooltip-inner'); + inner.style['background-color'] = '#2A2A2A'; // consistent color with arrow svg +} + +/** + * Renders the tooltip. + */ +function FailedSubmissionTooltip({ + content, +}) { + return ( +
+ + + +
+ ); +} + +FailedSubmissionTooltip.defaultProps = { + content: 'Failed Submission', +}; + +FailedSubmissionTooltip.propTypes = { + content: PT.string, +}; + +export default FailedSubmissionTooltip; diff --git a/src/shared/components/challenge-detail/Submissions/FailedSubmissionTooltip/style.scss b/src/shared/components/challenge-detail/Submissions/FailedSubmissionTooltip/style.scss new file mode 100644 index 0000000000..24fb1fe648 --- /dev/null +++ b/src/shared/components/challenge-detail/Submissions/FailedSubmissionTooltip/style.scss @@ -0,0 +1,3 @@ +.failed-submission-tooltip { + width: 20px; +} diff --git a/src/shared/components/challenge-detail/Submissions/SubmissionRow/SubmissionHistoryRow/index.jsx b/src/shared/components/challenge-detail/Submissions/SubmissionRow/SubmissionHistoryRow/index.jsx index b132c539ea..90cdf96e3d 100644 --- a/src/shared/components/challenge-detail/Submissions/SubmissionRow/SubmissionHistoryRow/index.jsx +++ b/src/shared/components/challenge-detail/Submissions/SubmissionRow/SubmissionHistoryRow/index.jsx @@ -7,8 +7,8 @@ import React from 'react'; import PT from 'prop-types'; import moment from 'moment'; +import FailedSubmissionTooltip from '../../FailedSubmissionTooltip'; // import Completed from '../../../icons/completed.svg'; -import Failed from '../../../icons/failed.svg'; import InReview from '../../../icons/in-review.svg'; import Queued from '../../../icons/queued.svg'; @@ -24,7 +24,7 @@ export default function SubmissionHistoryRow({ status, }) { const getInitialReviewResult = () => { - if (provisionalScore && provisionalScore < 0) return ; + if (provisionalScore && provisionalScore < 0) return ; switch (status) { case 'completed': return provisionalScore; @@ -33,7 +33,7 @@ export default function SubmissionHistoryRow({ case 'queued': return ; case 'failed': - return ; + return ; default: return provisionalScore === '-' ? 'N/A' : provisionalScore; } diff --git a/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx b/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx index 2e32079775..d9de9b9717 100644 --- a/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx +++ b/src/shared/components/challenge-detail/Submissions/SubmissionRow/index.jsx @@ -11,7 +11,7 @@ import { Modal } from 'topcoder-react-ui-kit'; import IconClose from 'assets/images/icon-close-green.svg'; import moment from 'moment'; -import Failed from '../../icons/failed.svg'; +import FailedSubmissionTooltip from '../FailedSubmissionTooltip'; import InReview from '../../icons/in-review.svg'; import Queued from '../../icons/queued.svg'; import SubmissionHistoryRow from './SubmissionHistoryRow'; @@ -34,7 +34,7 @@ export default function SubmissionRow({ const getInitialReviewResult = () => { const s = isMM ? _.get(score, 'provisional', initialScore) : initialScore; - if (s && s < 0) return ; + if (s && s < 0) return ; switch (status) { case 'completed': return s; @@ -43,7 +43,7 @@ export default function SubmissionRow({ case 'queued': return ; case 'failed': - return ; + return ; default: return s; } @@ -168,19 +168,21 @@ export default function SubmissionRow({ }
- { - submissions.map((submissionHistory, index) => ( - - )) - } +
+ { + submissions.map((submissionHistory, index) => ( + + )) + } +
CLOSE
diff --git a/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss b/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss index 830bb79855..ccd936c617 100644 --- a/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss +++ b/src/shared/components/challenge-detail/Submissions/SubmissionRow/style.scss @@ -5,6 +5,15 @@ border-radius: 8px; margin: 25px 32px 32px; + .table-body { + max-height: 49vh; + overflow-y: auto; + + @media screen and (max-width: $screen-sm) { + max-height: 65vh; + } + } + @include xs-to-sm { margin: 0 0; } diff --git a/src/shared/components/challenge-detail/Submissions/style.scss b/src/shared/components/challenge-detail/Submissions/style.scss index fbfe076c72..11619d9f92 100644 --- a/src/shared/components/challenge-detail/Submissions/style.scss +++ b/src/shared/components/challenge-detail/Submissions/style.scss @@ -222,7 +222,7 @@ .container.dev { line-height: 50px; - text-align: left; + text-align: center; @include xs-to-sm { line-height: 20px; From b9ec79e9da6618e5acbe213c368508d300663730 Mon Sep 17 00:00:00 2001 From: Dedy Wahyudi Date: Wed, 1 Jun 2022 12:34:59 +0700 Subject: [PATCH 09/11] improvement(reskin): add space before past due, set to dev & beta --- .circleci/config.yml | 3 ++- .../challenge-listing/ChallengeCard/Status/index.jsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index c8d583e700..f593e86bc2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -350,6 +350,7 @@ workflows: branches: only: - develop + - reskin # This is alternate dev env for parallel testing - "build-test": context : org-global @@ -371,6 +372,7 @@ workflows: branches: only: - thrive-discord-button + - reskin # This is stage env for production QA releases - "build-prod-staging": context : org-global @@ -379,7 +381,6 @@ workflows: only: - develop - stat_marathon_match_link - - reskin # Production builds are exectuted # when PR is merged to the master # Don't change anything in this configuration diff --git a/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx index c8547c9303..8f2292a938 100644 --- a/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx +++ b/src/shared/components/challenge-listing/ChallengeCard/Status/index.jsx @@ -159,7 +159,7 @@ export default function ChallengeStatus(props) { { timeDiff.late ? ( - {timeNote}
{lateNote} + {timeNote}
{lateNote} ) : ( From d6b5285b6f5de98c940403374ecf9c9f283630fe Mon Sep 17 00:00:00 2001 From: Dedy Wahyudi Date: Thu, 2 Jun 2022 14:51:26 +0700 Subject: [PATCH 10/11] improvement(reskin): submission alignment --- src/shared/components/challenge-detail/Submissions/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/components/challenge-detail/Submissions/style.scss b/src/shared/components/challenge-detail/Submissions/style.scss index 11619d9f92..fbfe076c72 100644 --- a/src/shared/components/challenge-detail/Submissions/style.scss +++ b/src/shared/components/challenge-detail/Submissions/style.scss @@ -222,7 +222,7 @@ .container.dev { line-height: 50px; - text-align: center; + text-align: left; @include xs-to-sm { line-height: 20px; From c4d0cce631b6d1b4dce2891e049d8d5d7fa38d58 Mon Sep 17 00:00:00 2001 From: Dedy Wahyudi Date: Fri, 3 Jun 2022 08:32:23 +0700 Subject: [PATCH 11/11] improvement(reskin): button submission alignment --- .../challenge-detail/Submissions/index.jsx | 16 +++++++++------- .../challenge-detail/Submissions/style.scss | 4 ++++ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/shared/components/challenge-detail/Submissions/index.jsx b/src/shared/components/challenge-detail/Submissions/index.jsx index 7fbb08d4e6..fa884e88d6 100644 --- a/src/shared/components/challenge-detail/Submissions/index.jsx +++ b/src/shared/components/challenge-detail/Submissions/index.jsx @@ -828,13 +828,15 @@ class SubmissionsComponent extends React.Component { isMM &&
} {isMM && ( - +
+ +
)} { isMM && isShowInformation && ( diff --git a/src/shared/components/challenge-detail/Submissions/style.scss b/src/shared/components/challenge-detail/Submissions/style.scss index fbfe076c72..7b0f694d61 100644 --- a/src/shared/components/challenge-detail/Submissions/style.scss +++ b/src/shared/components/challenge-detail/Submissions/style.scss @@ -275,6 +275,10 @@ } } + .btn-add-submission { + text-align: center; + } + .handle { color: $tc-dark-blue; }