Skip to content

Commit 54d9924

Browse files
hentrymartinhentrymartin
authored
Merge pull request #7078 from topcoder-platform/pm-811_1
feat(PM-811): Show download artifacts modal in my submissions tab
2 parents 4ee6b79 + fe61181 commit 54d9924

File tree

9 files changed

+318
-89
lines changed

9 files changed

+318
-89
lines changed

‎src/shared/components/SubmissionManagement/DownloadArtifactsModal/index.jsx

+31-12
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import _ from 'lodash';
55
import PT from 'prop-types';
66
import React, { useEffect, useState } from 'react';
77

8-
import { Modal } from 'topcoder-react-ui-kit';
8+
import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
9+
import tc from 'components/buttons/themed/tc.scss';
910

1011
import LoadingIndicator from 'components/LoadingIndicator';
1112
import IconClose from 'assets/images/icon-close-green.svg';
@@ -17,6 +18,10 @@ const theme = {
1718
overlay: style.modalOverlay,
1819
};
1920

21+
const buttonThemes = {
22+
tc,
23+
};
24+
2025
export default function DownloadArtifactsModal({
2126
submissionId,
2227
onCancel,
@@ -38,28 +43,32 @@ export default function DownloadArtifactsModal({
3843
}, [submissionId]);
3944

4045
return (
41-
<div styleName="container">
46+
<div className={style.container}>
4247
<Modal
4348
onCancel={() => onCancel()}
4449
theme={theme}
4550
>
46-
<div styleName="content-wrapper">
47-
<div styleName="icon" role="presentation" onClick={() => onCancel()}>
48-
<IconClose />
51+
<div className={style['content-wrapper']}>
52+
<div className={style['modal-header']}>
53+
<h2 className={style['modal-title']}>Artifacts</h2>
54+
<div className={style.icon} role="presentation" onClick={() => onCancel()}>
55+
<IconClose />
56+
</div>
4957
</div>
50-
<div styleName="artifacts-list">
51-
<div styleName="header">
52-
<div styleName="header-title">Artifact ID</div>
58+
<hr className={style.hr} />
59+
<div className={style['artifacts-list']}>
60+
<div className={style.header}>
61+
<div className={style['header-title']}>Artifact ID</div>
5362
<div>Action</div>
5463
</div>
5564
{
5665
!loading && artifacts.map(item => (
57-
<div styleName="list-item">
58-
<div styleName="artifact-name">{item}</div>
66+
<div className={style['list-item']}>
67+
<div className={style['artifact-name']}>{item}</div>
5968
<button
6069
onClick={() => onDownloadArtifacts(item, submissionId)}
6170
type="button"
62-
styleName="icon-download"
71+
className={style['icon-download']}
6372
>
6473
<DownloadIcon />
6574
</button>
@@ -68,11 +77,21 @@ export default function DownloadArtifactsModal({
6877
}
6978

7079
{
71-
!loading && artifacts.length === 0 && <div styleName="no-artifacts">No artifacts found</div>
80+
!loading && artifacts.length === 0 && <div className={style['no-artifacts']}>No artifacts found</div>
7281
}
7382
</div>
7483
{loading && <LoadingIndicator />}
7584
</div>
85+
<div className={style['buttons-container']}>
86+
<PrimaryButton
87+
onClick={() => onCancel()}
88+
theme={{
89+
button: buttonThemes.tc['primary-green-md'],
90+
}}
91+
>
92+
Close
93+
</PrimaryButton>
94+
</div>
7695
</Modal>
7796
</div>
7897
);

‎src/shared/components/SubmissionManagement/DownloadArtifactsModal/style.scss

+46-17
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,42 @@
1010
.content-wrapper {
1111
min-height: 350px;
1212

13-
.icon {
14-
cursor: pointer;
15-
margin-top: 5px;
16-
margin-right: 30px;
13+
.modal-header {
1714
display: flex;
18-
align-items: flex-end;
19-
justify-content: flex-end;
20-
flex-grow: 1;
15+
justify-content: space-between;
16+
padding-bottom: 25px;
17+
padding-left: 25px;
18+
padding-right: 25px;
19+
20+
.modal-title {
21+
@include barlow-medium;
22+
23+
font-weight: 600;
24+
color: #2a2a2a;
25+
font-size: 18px;
26+
line-height: 22px;
27+
text-transform: uppercase;
28+
}
29+
30+
.icon {
31+
cursor: pointer;
32+
margin-top: 5px;
33+
}
2134
}
2235
}
2336

2437
.artifacts-list {
2538
margin-top: 30px;
2639

2740
.header {
28-
border-bottom: 1px solid $tc-gray-60;
41+
border-bottom: 1px solid #ededf2;
2942
padding-bottom: 10px;
3043
display: flex;
31-
padding-left: 40px;
32-
padding-right: 40px;
33-
color: $tc-gray-70;
44+
padding-left: 25px;
45+
padding-right: 25px;
46+
color: $color-black-60;
47+
font-size: 11px;
48+
text-transform: uppercase;
3449

3550
@include roboto-medium;
3651

@@ -49,13 +64,15 @@
4964
}
5065

5166
.list-item {
52-
border-bottom: 1px solid $tc-gray-60;
67+
border-bottom: 1px solid #ededf2;
5368
padding-bottom: 10px;
5469
padding-top: 10px;
5570
display: flex;
56-
padding-left: 40px;
57-
padding-right: 40px;
58-
color: $tc-gray-70;
71+
padding-left: 25px;
72+
padding-right: 25px;
73+
color: $color-tc-black;
74+
font-size: 14px;
75+
font-weight: 500;
5976

6077
@include roboto-regular;
6178

@@ -84,12 +101,24 @@
84101
transform: translate(-50%);
85102
height: auto;
86103
width: 720px;
87-
padding-top: 36px;
88-
padding-bottom: 36px;
104+
padding-top: 25px;
105+
padding-bottom: 25px;
89106
padding-left: 0;
90107
padding-right: 0;
108+
border-radius: 8px;
109+
110+
.hr {
111+
width: 100%;
112+
margin: 0;
113+
}
91114
}
92115

93116
.modalOverlay {
94117
pointer-events: bounding-box;
95118
}
119+
120+
.buttons-container {
121+
display: flex;
122+
justify-content: flex-end;
123+
padding-right: 25px;
124+
}

‎src/shared/components/SubmissionManagement/RatingsListModal/index.jsx

+33-15
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { useCallback, useEffect, useState } from 'react';
22
import PropTypes from 'prop-types';
33
import _ from 'lodash';
4+
import tc from 'components/buttons/themed/tc.scss';
45

5-
import { Modal } from 'topcoder-react-ui-kit';
6+
import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
67
import LoadingIndicator from 'components/LoadingIndicator';
78
import IconClose from 'assets/images/icon-close-green.svg';
89

@@ -14,6 +15,10 @@ const theme = {
1415
overlay: styles.modalOverlay,
1516
};
1617

18+
const buttonThemes = {
19+
tc,
20+
};
21+
1722
const SystemReviewers = {
1823
Default: 'TC System',
1924
};
@@ -65,16 +70,19 @@ const RatingsListModal = ({
6570

6671
return (
6772
<Modal onCancel={() => onCancel()} theme={theme}>
68-
<div styleName="container">
69-
<div styleName="icon" role="presentation" onClick={() => onCancel()}>
70-
<IconClose />
73+
<div className={styles.container}>
74+
<div className={styles['modal-header']}>
75+
<h2 className={styles['modal-title']}>Submission Details</h2>
76+
<div className={styles.icon} role="presentation" onClick={() => onCancel()}>
77+
<IconClose />
78+
</div>
7179
</div>
72-
<div styleName="list">
73-
<div styleName="header">
74-
<div styleName="header-item">Review Type</div>
75-
<div styleName="header-item">Reviewer</div>
76-
<div styleName="header-item">Score</div>
77-
<div styleName="header-item">Status</div>
80+
<div className={styles.list}>
81+
<div className={styles.header}>
82+
<div className={styles['header-item']}>Review Type</div>
83+
<div className={styles['header-item']}>Reviewer</div>
84+
<div className={styles['header-item']}>Score</div>
85+
<div className={styles['header-item']}>Status</div>
7886
</div>
7987
{reviews.map((review) => {
8088
const { isPassing } = review;
@@ -84,17 +92,17 @@ const RatingsListModal = ({
8492
const status = isPassing ? 'Passed' : 'Failed';
8593

8694
return (
87-
<div styleName="list-item">
88-
<div styleName="list-col-item">
95+
<div className={styles['list-item']}>
96+
<div className={styles['list-col-item']}>
8997
{review.reviewType}
9098
</div>
91-
<div styleName="list-col-item">
99+
<div className={styles['list-col-item']}>
92100
<strong>{review.reviewer}</strong>
93101
</div>
94-
<div styleName="list-col-item">
102+
<div className={styles['list-col-item']}>
95103
{review.score}
96104
</div>
97-
<div styleName="list-col-item">
105+
<div className={styles['list-col-item']}>
98106
{statusIsDefined ? status : 'N/A'}
99107
</div>
100108
</div>
@@ -105,6 +113,16 @@ const RatingsListModal = ({
105113
}
106114
</div>
107115
</div>
116+
<div className={styles['buttons-container']}>
117+
<PrimaryButton
118+
onClick={() => onCancel()}
119+
theme={{
120+
button: buttonThemes.tc['primary-green-md'],
121+
}}
122+
>
123+
Close
124+
</PrimaryButton>
125+
</div>
108126
</Modal>
109127
);
110128
};

‎src/shared/components/SubmissionManagement/RatingsListModal/styles.scss

+41-17
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,27 @@
66

77
z-index: 1000;
88

9-
.icon {
10-
cursor: pointer;
11-
margin-top: 5px;
12-
margin-right: 30px;
9+
.modal-header {
1310
display: flex;
14-
align-items: flex-end;
15-
justify-content: flex-end;
16-
flex-grow: 1;
11+
justify-content: space-between;
12+
padding-bottom: 25px;
13+
padding-left: 25px;
14+
padding-right: 25px;
15+
16+
.modal-title {
17+
@include barlow-medium;
18+
19+
font-weight: 600;
20+
color: #2a2a2a;
21+
font-size: 18px;
22+
line-height: 22px;
23+
text-transform: uppercase;
24+
}
25+
26+
.icon {
27+
cursor: pointer;
28+
margin-top: 5px;
29+
}
1730
}
1831
}
1932

@@ -22,27 +35,31 @@
2235
padding: 30px 0;
2336

2437
.header {
25-
border-bottom: 1px solid $tc-gray-60;
38+
border-bottom: 1px solid #ededf2;
2639
padding-bottom: 10px;
2740
display: flex;
28-
padding-left: 40px;
29-
padding-right: 40px;
30-
color: $tc-gray-70;
41+
padding-left: 25px;
42+
padding-right: 25px;
43+
color: $color-black-60;
44+
font-size: 11px;
3145
font-weight: 500;
46+
text-transform: uppercase;
3247

3348
.header-item {
3449
flex: 1;
3550
}
3651
}
3752

3853
.list-item {
39-
border-bottom: 1px solid $tc-gray-60;
54+
border-bottom: 1px solid #ededf2;
4055
padding-bottom: 10px;
4156
padding-top: 10px;
4257
display: flex;
43-
padding-left: 40px;
44-
padding-right: 40px;
45-
color: $tc-gray-70;
58+
padding-left: 25px;
59+
padding-right: 25px;
60+
color: $color-tc-black;
61+
font-size: 14px;
62+
font-weight: 500;
4663

4764
.list-col-item {
4865
display: flex;
@@ -57,12 +74,19 @@
5774
transform: translate(-50%);
5875
height: auto;
5976
width: 720px;
60-
padding-top: 36px;
61-
padding-bottom: 36px;
77+
padding-top: 25px;
78+
padding-bottom: 25px;
6279
padding-left: 0;
6380
padding-right: 0;
81+
border-radius: 8px;
6482
}
6583

6684
.modalOverlay {
6785
pointer-events: bounding-box;
6886
}
87+
88+
.buttons-container {
89+
display: flex;
90+
justify-content: flex-end;
91+
padding-right: 25px;
92+
}

0 commit comments

Comments
 (0)