Skip to content

Commit 67346c0

Browse files
dedywahyudidedywahyudi
committed
submission upload 1st f2f
1 parent 6c42073 commit 67346c0

File tree

7 files changed

+192
-127
lines changed

7 files changed

+192
-127
lines changed

‎src/assets/images/arrow-prev-green.svg

Lines changed: 12 additions & 0 deletions
Loading

‎src/shared/components/SubmissionPage/FilestackFilePicker/index.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { PrimaryButton } from 'topcoder-react-ui-kit';
1818
import { config } from 'topcoder-react-utils';
1919
import { errors } from 'topcoder-react-lib';
2020

21-
import './styles.scss';
21+
import style from './styles.scss';
2222

2323
const { fireErrorMessage } = errors;
2424

@@ -181,7 +181,7 @@ class FilestackFilePicker extends React.Component {
181181
{
182182
!fileName && !isChallengeBelongToTopgearGroup && (
183183
<p>
184-
Drag and drop your
184+
Drag and drop your{' '}
185185
{fileExtensions.join(' or ')}
186186
{' '}
187187
file here.
@@ -219,8 +219,8 @@ class FilestackFilePicker extends React.Component {
219219
</div>
220220
)
221221
}
222-
<PrimaryButton onClick={this.onClickPick}>
223-
{isChallengeBelongToTopgearGroup ? 'Set URL' : 'Pick a File'}
222+
<PrimaryButton onClick={this.onClickPick} theme={{ button: style.button }}>
223+
{isChallengeBelongToTopgearGroup ? 'Set URL' : 'SELECT A FILE'}
224224
</PrimaryButton>
225225
{!isChallengeBelongToTopgearGroup && (
226226
<div

‎src/shared/components/SubmissionPage/FilestackFilePicker/styles.scss

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
@import "~styles/mixins";
22

3+
.button {
4+
background: #137d60 !important;
5+
border-radius: 50px !important;
6+
}
7+
38
.container {
49
display: flex;
510
flex-direction: column;
@@ -12,22 +17,24 @@
1217
flex-direction: column;
1318
align-items: center;
1419
padding: 20px;
15-
background-color: #fcfcfc;
20+
background-color: #f4f4f4;
1621
border-radius: 6px;
17-
border: 1px dashed #c3c3c8;
22+
border: 1px dashed #aaa;
1823
min-height: 190px;
24+
height: 100%;
1925
position: relative;
26+
justify-content: space-around;
2027

2128
@include xs-to-sm {
2229
min-height: 150px;
30+
justify-content: space-between;
2331
}
2432

2533
p {
26-
font-size: 15px;
27-
color: $tc-gray-60;
34+
font-size: 16px;
35+
color: #2a2a2a;
2836
line-height: 25px;
2937
flex-basis: 0;
30-
flex-grow: 1;
3138
text-align: center;
3239

3340
@include xs-to-sm {
@@ -37,8 +44,8 @@
3744
}
3845

3946
span {
40-
font-size: 12px;
41-
color: #c3c3c8;
47+
font-size: 16px;
48+
color: #2a2a2a;
4249
flex-basis: 0;
4350
flex-grow: 1;
4451
position: absolute;

‎src/shared/components/SubmissionPage/Header/index.jsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import PT from 'prop-types';
99
import React from 'react';
1010
import { Link } from 'react-router-dom';
11+
import LeftArrow from 'assets/images/arrow-prev-green.svg';
1112
import './styles.scss';
1213

1314
/**
@@ -19,17 +20,14 @@ const Header = ({
1920
title,
2021
}) => (
2122
<div styleName="header">
22-
<Link to={`${challengesUrl}/${challengeId}`}>
23-
<span>
24-
&#x2039;
25-
</span>
23+
<Link to={`${challengesUrl}/${challengeId}`} styleName="header-link">
24+
<div styleName="back-arrow">
25+
<LeftArrow styleName="left-arrow" />
26+
</div>
2627
<p>
27-
Back to challenge
28+
{title}
2829
</p>
2930
</Link>
30-
<h1>
31-
{title}
32-
</h1>
3331
</div>
3432
);
3533

‎src/shared/components/SubmissionPage/Header/styles.scss

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,37 @@
44
@include roboto-regular;
55

66
display: flex;
7-
padding: 30px 60px;
8-
background-color: #fcfcfc;
7+
padding: 30px 0;
8+
background-color: #fff;
99
width: 100%;
1010
justify-content: space-between;
1111
align-items: center;
1212
border-bottom: 1px solid #f0f0f0;
1313

1414
@include xs-to-md {
15-
padding: 30px 20px;
15+
padding: 30px 0;
1616
}
1717

18-
a {
19-
font-size: 18px;
20-
color: $tc-gray-60;
21-
font-weight: 300;
18+
.header-link {
2219
display: flex;
23-
align-items: center;
24-
25-
span {
26-
font-size: 54px;
27-
display: block;
28-
position: relative;
29-
top: -3px;
30-
margin-right: 6px;
20+
21+
@include xs-to-md {
22+
flex-direction: column;
3123
}
3224
}
3325

26+
p {
27+
@include barlow-bold;
28+
29+
font-weight: 600;
30+
line-height: 32px;
31+
font-size: 34px;
32+
color: #2a2a2a;
33+
display: flex;
34+
margin-left: 16px;
35+
margin-top: -8px;
36+
}
37+
3438
h1 {
3539
font-weight: 300;
3640
font-size: 24px;
@@ -53,10 +57,29 @@
5357
text-align: right;
5458
}
5559
}
60+
}
5661

57-
p {
58-
@include xs-to-sm {
59-
display: none;
60-
}
62+
.back-arrow {
63+
width: 32px;
64+
height: 24px;
65+
border: 1.5px solid #137d60;
66+
color: #137d60;
67+
border-radius: 24px;
68+
padding: 4px 8px;
69+
margin-bottom: 10px;
70+
position: relative;
71+
72+
@include xs-to-md {
73+
margin-left: 15px;
74+
margin-bottom: 15px;
6175
}
6276
}
77+
78+
.left-arrow {
79+
fill: #137d60;
80+
position: absolute;
81+
left: 29%;
82+
top: 12%;
83+
bottom: 25%;
84+
transform: scale(0.5);
85+
}

‎src/shared/components/SubmissionPage/Submit/index.jsx

Lines changed: 26 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { COMPETITION_TRACKS } from 'utils/tc';
1919
import FilestackFilePicker from '../FilestackFilePicker';
2020

2121
import Uploading from '../Uploading';
22-
import './styles.scss';
22+
import style from './styles.scss';
2323

2424
/**
2525
* Submissions Page shown to develop challengers.
@@ -171,6 +171,8 @@ class Submit extends React.Component {
171171
dragged: false,
172172
});
173173

174+
const disabled = !agreed || !!fpState.error || !fpState.fileName;
175+
174176
return (
175177
(!isSubmitting && !submitDone && !errorMsg) ? (
176178
<div styleName="design-content">
@@ -184,14 +186,18 @@ class Submit extends React.Component {
184186
<div styleName="row">
185187
<div styleName="left">
186188
<h2>
187-
{ isChallengeBelongToTopgearGroup ? 'URL' : 'FILES'}
189+
{ isChallengeBelongToTopgearGroup ? 'URL' : 'SUBMISSION UPLOAD'}
188190
</h2>
189-
<p>
191+
<p styleName="note">
190192
Please follow the instructions on the Challenge Details page regarding
191193
what your submission should contain and how it should be organized.
192194
</p>
193-
</div>
194-
<div styleName="right">
195+
{ track === COMPETITION_TRACKS.DEV ? (
196+
<p styleName="additional-note">
197+
Upload your entire submission as a single zip file. If you are having
198+
trouble uploading your file, please send your submission to <a href="mailto:support@topcoder.com">support@topcoder.com</a>
199+
</p>
200+
) : null }
195201
<div styleName="submission-hints">
196202
{ track === COMPETITION_TRACKS.DEV ? (
197203
<div>
@@ -201,7 +207,7 @@ class Submit extends React.Component {
201207
</div>
202208
) : null }
203209
{ track === COMPETITION_TRACKS.DES ? (
204-
<div>
210+
<div styleName="additional-note">
205211
<ol>
206212
<li>Place your submission files into a &quot;Submission.zip&quot; file.</li>
207213
<li>Place all of your source files into a &quot;Source.zip&quot; file.</li>
@@ -215,25 +221,27 @@ class Submit extends React.Component {
215221
into a single zip file and upload below.
216222
</li>
217223
</ol>
218-
<p>For detailed information on packaging your submission, please visit the
219-
&zwnj;
224+
<p>
225+
For detailed information on packaging your submissions, please visit the
220226
<a
221227
href="https://help.topcoder.com/hc/en-us/articles/
222228
219122667-Formatting-Your-Submission-for-Design-Challenges"
223229
target="_blank"
224230
rel="noopener noreferrer"
225231
>
226-
help center.
232+
Help Center.
227233
</a>
234+
If you are having trouble uploading your file, please send your submission to <a href="mailto:support@topcoder.com">support@topcoder.com</a>
228235
</p>
229236
</div>
230237
) : null }
231238
</div>
239+
</div>
240+
<div styleName="right">
232241
<div styleName="file-picker-container">
233242
{ isLoadingCommunitiesList ? (<LoadingIndicator />) : (
234243
<FilestackFilePicker
235244
mandatory
236-
title={isChallengeBelongToTopgearGroup ? '' : 'Submission Upload'}
237245
fileExtensions={['.zip']}
238246
id={id}
239247
challengeId={challengeId}
@@ -253,33 +261,9 @@ class Submit extends React.Component {
253261
/>
254262
)}
255263
</div>
256-
{ isChallengeBelongToTopgearGroup
257-
? (
258-
<p>
259-
If you are having trouble submitting, please send
260-
your submission to
261-
&zwnj;
262-
<a
263-
href="mailto://support@topcoder.com"
264-
>
265-
support@topcoder.com
266-
</a>
267-
</p>
268-
)
269-
: (
270-
<p>
271-
If you are having trouble uploading your file, please send
272-
your submission to
273-
&zwnj;
274-
<a
275-
href="mailto://support@topcoder.com"
276-
>
277-
support@topcoder.com
278-
</a>
279-
</p>
280-
)}
281264
</div>
282265
</div>
266+
<hr styleName="hr" />
283267
<div styleName="row agree">
284268
<p>
285269
Submitting your files means you hereby agree to the
@@ -308,14 +292,18 @@ class Submit extends React.Component {
308292
<input type="hidden" />
309293
</label>
310294
<div styleName="tc-checkbox-label">
311-
I UNDERSTAND AND AGREE
295+
I understand and agree
312296
</div>
313297
</div>
298+
</div>
299+
<hr styleName="hr" />
300+
<div styleName="submitArea">
314301
<PrimaryButton
315302
type="submit"
316-
disabled={!agreed || !!fpState.error || !fpState.fileName}
303+
disabled={disabled}
304+
theme={{ button: disabled ? style.buttonDisabled : style.button }}
317305
>
318-
Submit
306+
SUBMIT
319307
</PrimaryButton>
320308
</div>
321309
</form>

0 commit comments

Comments
 (0)