Skip to content

Commit e25d866

Browse files
dedywahyudidedywahyudi
committed
v2 submission upload progress
1 parent 67346c0 commit e25d866

File tree

8 files changed

+144
-74
lines changed

8 files changed

+144
-74
lines changed

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

Lines changed: 4 additions & 12 deletions
Loading

‎src/assets/images/upload-fail.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/images/upload-loading.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/images/upload-success.svg

Lines changed: 3 additions & 0 deletions
Loading

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,7 @@ const Header = ({
2121
}) => (
2222
<div styleName="header">
2323
<Link to={`${challengesUrl}/${challengeId}`} styleName="header-link">
24-
<div styleName="back-arrow">
25-
<LeftArrow styleName="left-arrow" />
26-
</div>
24+
<LeftArrow styleName="left-arrow" />
2725
<p>
2826
{title}
2927
</p>

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,11 @@
7676
}
7777

7878
.left-arrow {
79-
fill: #137d60;
80-
position: absolute;
81-
left: 29%;
82-
top: 12%;
83-
bottom: 25%;
84-
transform: scale(0.5);
79+
border: 1.5px solid #137d60;
80+
border-radius: 24px;
81+
82+
@include xs-to-md {
83+
margin-left: 15px;
84+
margin-bottom: 15px;
85+
}
8586
}

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

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,12 @@
88
*/
99
import React from 'react';
1010
import PT from 'prop-types';
11-
import { Link } from 'react-router-dom';
12-
import RobotHappy from 'assets/images/robot-happy.svg';
13-
import RobotSad from 'assets/images/robot-embarassed.svg';
11+
import UploadSuccess from 'assets/images/upload-success.svg';
12+
import UploadLoading from 'assets/images/upload-loading.svg';
13+
import UploadFail from 'assets/images/upload-fail.svg';
1414
import { PrimaryButton, Button } from 'topcoder-react-ui-kit';
15-
import './styles.scss';
16-
1715
import { COMPETITION_TRACKS } from 'utils/tc';
16+
import style from './styles.scss';
1817

1918
const Uploading = ({
2019
challengeId,
@@ -43,7 +42,7 @@ const Uploading = ({
4342
submitDone
4443
&& (
4544
<h3>
46-
SUBMISSION COMPLETED FOR
45+
UPLOADING COMPLETED FOR
4746
</h3>
4847
)
4948
}
@@ -68,28 +67,29 @@ const Uploading = ({
6867
{
6968
(submitDone || error)
7069
&& (
71-
<Link
70+
<h4
7271
styleName="link"
73-
to={`${challengesUrl}/${challengeId}`}
7472
>
7573
{challengeName}
76-
</Link>
74+
</h4>
7775
)
7876
}
7977
{
80-
(isSubmitting || submitDone)
81-
&& <RobotHappy />
78+
(isSubmitting && !submitDone) && <div styleName="animate"><UploadLoading /></div>
79+
}
80+
{
81+
(!isSubmitting && submitDone) && <UploadSuccess />
8282
}
8383
{
8484
error
85-
&& <RobotSad />
85+
&& <UploadFail />
8686
}
8787
{
8888
isSubmitting
8989
&& (
9090
<p>
91-
Hey, your work is AWESOME! Please don&#39;t close this window while I&#39;m
92-
working, you&#39;ll lose all files!
91+
Hey, your work is AWESOME! Please don&#39;t close this window while uploading,
92+
Your progress will be lost.
9393
</p>
9494
)
9595
}
@@ -105,7 +105,7 @@ const Uploading = ({
105105
isSubmitting && !submitDone
106106
&& (
107107
<p styleName="submitting">
108-
Uploaded:
108+
Uploading:
109109
{(100 * uploadProgress).toFixed()}
110110
%
111111
</p>
@@ -116,7 +116,7 @@ const Uploading = ({
116116
&& (
117117
<p>
118118
Oh, that’s embarrassing! The file couldn’t be
119-
uploaded, I’m so sorry.
119+
uploaded.
120120
</p>
121121
)
122122
}
@@ -134,11 +134,13 @@ const Uploading = ({
134134
<div styleName="button-container">
135135
<Button
136136
onClick={() => reset()}
137+
theme={{ button: style.buttonOutlined }}
137138
>
138139
Cancel
139140
</Button>
140141
<PrimaryButton
141142
onClick={() => retry()}
143+
theme={{ button: style.button }}
142144
>
143145
Try Again
144146
</PrimaryButton>
@@ -162,30 +164,34 @@ const Uploading = ({
162164
<span>
163165
<Button
164166
onClick={() => reset()}
167+
theme={{ button: style.buttonOutlined }}
165168
>
166169
Add Another Submission
167170
</Button>
168171
<PrimaryButton
169172
to={`${challengesUrl}/${challengeId}/my-submissions`}
170173
onClick={() => back()}
174+
theme={{ button: style.button }}
171175
>
172176
View My Submissions
173177
</PrimaryButton>
174178
</span>
175179
) : (
176-
<span>
180+
<React.Fragment>
177181
<Button
178182
onClick={() => reset()}
183+
theme={{ button: style.buttonOutlined }}
179184
>
180-
Submit Again
185+
ADD SUBMISSION
181186
</Button>
182187
<PrimaryButton
183188
to={`${challengesUrl}/${challengeId}`}
184189
onClick={() => back()}
190+
theme={{ button: style.button }}
185191
>
186-
Back to Challenge
192+
MY SUBMISSIONS
187193
</PrimaryButton>
188-
</span>
194+
</React.Fragment>
189195
)}
190196
</div>
191197
)

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

Lines changed: 96 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -14,76 +14,139 @@
1414
padding: 30px;
1515
}
1616

17-
.link,
18-
.link:visited {
19-
font-size: 20px;
20-
line-height: 30px;
21-
color: #1a85ff;
22-
}
23-
2417
.uploading {
2518
display: flex;
2619
flex-direction: column;
2720
align-items: center;
2821
width: 100%;
2922

3023
.error-msg {
24+
@include roboto-bold;
25+
26+
font-weight: 500;
3127
width: 500px;
32-
margin-bottom: 45px;
33-
padding: 5px 13px;
34-
background: #fff4f4;
35-
border: 1px solid #ffd4d1;
36-
color: #f22f24;
37-
font-size: 13px;
38-
border-radius: 2px;
39-
font-style: italic;
28+
margin-bottom: 24px;
29+
color: #ef476f;
30+
line-height: 24px;
31+
font-size: 16px;
4032
text-align: center;
4133
}
4234

4335
.progress-container {
44-
width: 650px;
36+
width: 90%;
4537
height: 10px;
46-
background-color: $tc-gray-10;
47-
border-radius: 12px;
38+
background-color: #e9e9e9;
39+
border-radius: 8px;
4840

4941
.progress-bar {
5042
width: 0%;
51-
height: 10px;
52-
background-color: $tc-dark-blue;
53-
border-radius: 12px;
43+
height: 16px;
44+
background-color: #9d41c9;
45+
border-radius: 8px;
5446
}
5547
}
5648

5749
h3 {
58-
font-size: 20px;
59-
line-height: 30px;
60-
color: #3d3d3d;
50+
@include barlow-bold;
51+
52+
font-size: 24px;
53+
line-height: 28px;
54+
font-weight: 600;
55+
color: $tc-black;
6156
}
6257

6358
svg {
64-
margin-top: 50px;
59+
margin-top: 84px;
60+
61+
@include xs-to-md {
62+
margin-top: 40px;
63+
}
64+
}
65+
66+
div.animate {
67+
svg {
68+
animation-name: spin;
69+
animation-duration: 2000ms;
70+
animation-iteration-count: infinite;
71+
animation-timing-function: linear;
72+
}
73+
}
74+
75+
h4.link {
76+
@include roboto-regular;
77+
78+
font-weight: 400;
79+
text-align: center;
80+
font-size: 24px;
81+
line-height: 32px;
82+
color: $tc-black;
83+
margin-top: 24px;
6584
}
6685

6786
p {
68-
font-size: 15px;
69-
color: #a3a3ad;
70-
width: 80%;
87+
@include roboto-bold;
88+
89+
font-size: 16px;
90+
font-weight: 700;
91+
line-height: 24px;
92+
color: $tc-black;
7193
text-align: center;
72-
line-height: 18px;
7394
margin-bottom: 30px;
74-
margin-top: 30px;
95+
margin-top: 80px;
96+
97+
@include xs-to-md {
98+
margin-top: 40px;
99+
}
75100
}
76101

77102
.submitting {
78-
margin-top: 20px;
79-
font-size: 13px;
103+
@include roboto-regular;
104+
105+
font-weight: 400;
106+
text-align: center;
107+
margin-top: 8px;
108+
font-size: 14px;
109+
line-height: 22px;
80110
color: $tc-black;
81111
}
82112

83113
.button-container {
84114
align-items: center;
85-
flex-wrap: wrap;
115+
flex-wrap: nowrap;
86116
display: flex;
87117
justify-content: center;
88118
}
89119
}
120+
121+
.button {
122+
@include roboto-bold;
123+
124+
font-weight: 700;
125+
font-size: 16px;
126+
line-height: 24px;
127+
border-radius: 50px !important;
128+
background: #137d60 !important;
129+
color: #fff !important;
130+
}
131+
132+
.buttonOutlined {
133+
@include roboto-bold;
134+
135+
font-weight: 700;
136+
font-size: 16px;
137+
line-height: 24px;
138+
border-radius: 50px !important;
139+
background: #fff !important;
140+
color: #137d60 !important;
141+
border: 2px solid #137d60;
142+
}
143+
144+
@keyframes spin {
145+
from {
146+
transform: rotate(0deg);
147+
}
148+
149+
to {
150+
transform: rotate(360deg);
151+
}
152+
}

0 commit comments

Comments
 (0)