Skip to content

Commit b8fd0e5

Browse files
dedywahyudidedywahyudi
authored
Merge pull request #377 from topcoder-platform/issue-346-final-fixes
Issue 346 final fixes
2 parents 99f26ae + 871dbb9 commit b8fd0e5

File tree

28 files changed

+153
-31
lines changed

28 files changed

+153
-31
lines changed

‎src/.DS_Store

6 KB
Binary file not shown.

‎src/assets/.DS_Store

6 KB
Binary file not shown.

‎src/assets/images/icon-hint-green.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/images/review-and-submit-icon.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/images/save-for-later-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/images/save-for-later-icon2.png

3.08 KB
Loading

‎src/assets/images/website-design-banner-mobile.png

220 KB
Loading

‎src/components/Banners/FeaturedWorkTypeBanner/styles.module.scss

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
&.website-design,
1414
&.data-exploration,
1515
&.review--payment {
16-
background: linear-gradient(263.22deg, #038664 2.65%, #075F96 98.14%), #FFFFFF;
16+
background: linear-gradient(84.92deg, #065D6E 2.08%, #06596E 2.09%, #3E3B91 97.43%);
1717
}
1818

1919
&.find-me-data,
@@ -31,7 +31,8 @@
3131
min-width: 0;
3232
max-width: 100%;
3333
overflow: hidden;
34-
grid-template-columns: 1fr 200px;
34+
flex-direction: column;
35+
grid-template-columns: auto;
3536
}
3637

3738
.heroBackgroundContainer {
@@ -49,7 +50,9 @@
4950
border-radius: 0 8px 8px 0;
5051

5152
@include mobile {
52-
width: 200px;
53+
width: 100%;
54+
height: 156px;
55+
order: 0;
5356
}
5457

5558
&.data-exploration {
@@ -65,6 +68,11 @@
6568
&.review--payment {
6669
background: url("../../../assets/images/website-design-v2.png");
6770
background-size: cover;
71+
72+
@include mobile {
73+
background: url("../../../assets/images/website-design-banner-mobile.png");
74+
background-size: cover;
75+
}
6876
}
6977
}
7078

‎src/components/Button/styles.module.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
&[disabled] {
1919
cursor: default;
2020
}
21+
22+
svg {
23+
fill: white;
24+
}
2125
}
2226

2327
.size-large {

‎src/components/FormElements/FormField/styles.module.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
flex-direction: column;
77
justify-content: flex-start;
88
margin-bottom: 18px;
9+
@include mobile {
10+
margin-bottom: 0px;
11+
}
912

1013
&.helper {
1114
margin-bottom: 35px !important;

‎src/components/FormElements/FormInputCheckbox/index.jsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import styles from "./styles.module.scss";
1313

1414
const FormInputCheckbox = ({
1515
label,
16+
additionalContent,
1617
onChange = (f) => f,
1718
styleName,
1819
inline,
@@ -28,8 +29,7 @@ const FormInputCheckbox = ({
2829
/>
2930
<span
3031
styleName="styles.label"
31-
dangerouslySetInnerHTML={{ __html: label }}
32-
></span>
32+
>{label} {additionalContent}</span>
3333
</label>
3434
</div>
3535
) : (
@@ -42,8 +42,7 @@ const FormInputCheckbox = ({
4242
/>
4343
<span
4444
styleName="styles.label"
45-
dangerouslySetInnerHTML={{ __html: label }}
46-
></span>
45+
>{label} {additionalContent}</span>
4746
</label>
4847
);
4948
};

‎src/components/FormElements/FormInputCheckbox/styles.module.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
.label {
88
@include font-roboto;
99
font-size: 14px;
10-
line-height: 14px;
10+
line-height: 18px;
1111
margin-left: 8px;
12-
font-weight: bold;
12+
font-weight: normal;
1313

1414
span {
1515
text-decoration: underline;

‎src/components/HelpIcon/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useRef } from "react";
22
import ReactTooltip from "react-tooltip";
3-
import HintIcon from "../../assets/images/icon-hint.svg";
3+
import HintIcon from "../../assets/images/icon-hint-green.svg";
44
import { v4 as uuidv4 } from "uuid";
55

66
import "./styles.module.scss";

‎src/components/Modal/styles.module.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@
2222
overflow: auto;
2323
font-size: 15px;
2424
line-height: 1.3em;
25+
@include mobile {
26+
overflow: hidden;
27+
}
2528

2629
.stickyHeader {
2730
position: sticky;
@@ -54,6 +57,9 @@
5457

5558
.half-width {
5659
max-width: 50%;
60+
@include mobile {
61+
max-width: 100%;
62+
}
5763
}
5864

5965
.modalBackground {

‎src/components/Page/styles.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
.page {
33
padding: 0 32px 32px;
44
@include mobile {
5-
padding: 0 16px 32px;
5+
padding: 0px;
66
}
77
}

‎src/components/PageContent/styles.module.scss

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,4 @@
88
background: white;
99
border-radius: 8px;
1010
position: relative;
11-
@include mobile {
12-
padding-top: 125px;
13-
}
1411
}

‎src/components/ServicePrice/index.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const ServicePrice = ({
2020
}) => {
2121
return (
2222
<div styleName="container">
23-
<PageRow>
23+
<PageRow styleName="inline">
2424
{showIcon && icon && <>{icon}</>}
2525
{showIcon && !icon && <WebsiteDesignIcon />}
2626
<div>
@@ -34,6 +34,7 @@ const ServicePrice = ({
3434
<span styleName="discount">{currencyFormat(price)}</span>
3535
<span styleName="separator" />
3636
{duration} Days
37+
<div styleName="filler"/>
3738
<HelpIcon>
3839
The price and project length is dynamic and dependant on the
3940
variables selected as you define your work.

‎src/components/ServicePrice/styles.module.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,22 @@
55
svg {
66
margin-right: 16px;
77
}
8+
9+
.inline {
10+
display: flex;
11+
flex-direction: row;
12+
}
13+
@include mobile {
14+
display: flex;
15+
flex-direction: row;
16+
}
17+
}
18+
19+
.filler {
20+
display: flex;
21+
@include mobile {
22+
flex: 1;
23+
}
824
}
925

1026
.serviceTitle {
@@ -43,5 +59,10 @@
4359

4460
svg {
4561
margin-left: 9px;
62+
@include mobile {
63+
margin-left: 100px;
64+
width: 20px;
65+
height: 20px;
66+
}
4667
}
4768
}

‎src/routes/Branding/components/BrandingForm/index.jsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -277,13 +277,11 @@ const BrandingForm = ({
277277
}`}
278278
>
279279
<FormInputTextArea
280+
placeholder={"Specify colors using their value in RGB, CMYK, or Hex"}
280281
value={formData?.specificColor?.value}
281282
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
282283
styleName={"text-area"}
283284
name="specificColor"
284-
placeholder={
285-
"Specify colors using their value in RGB, CMYK, or Hex"
286-
}
287285
/>
288286
</FormField>
289287
</div>

‎src/routes/Branding/components/ColorOptions/styles.module.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,20 @@
66
flex-wrap: wrap;
77
gap: 24px;
88
margin-bottom: 34px;
9+
@include mobile {
10+
justify-content: flex-start;
11+
//margin-left: -6px;
12+
}
913
.colorWrapper {
1014
.color {
1115
position: relative;
1216
width: 120px;
1317
height: 80px;
1418
padding: 16px;
19+
@include mobile {
20+
width: 74px;
21+
height: 64px;
22+
}
1523
cursor: pointer;
1624

1725
border: 1px solid $gui-kit-gray-90;
@@ -74,6 +82,9 @@
7482
line-height: 26px;
7583
text-align: center;
7684
margin-top: 8px;
85+
@include mobile {
86+
font-size: 14px;
87+
}
7788
}
7889
}
7990
}

‎src/routes/Products/components/BasicInfo/index.jsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import {
1919
import { triggerAutoSave } from "../../../../actions/autoSave";
2020
import { setProgressItem } from "../../../../actions/progress";
2121
import BackIcon from "../../../../assets/images/icon-back-arrow.svg";
22+
import SaveForLaterIcon from "../../../../assets/images/save-for-later-icon.svg";
23+
import ArrowRightIcon from "../../../../assets/images/icon-arrow.svg";
2224
import SupportModal from "../../../../components/Modal/SupportModal";
2325
import { getProfile } from "../../../../selectors/profile";
2426
import { getUserProfile } from "../../../../thunks/profile";
@@ -295,15 +297,21 @@ const BasicInfo = ({
295297
type={BUTTON_TYPE.SECONDARY}
296298
onClick={saveForLater}
297299
>
298-
SAVE FOR LATER
300+
<SaveForLaterIcon />
301+
<span>
302+
SAVE FOR LATER
303+
</span>
299304
</Button>
300305
}
301306
<Button
302307
disabled={!isFormValid}
303308
size={BUTTON_SIZE.MEDIUM}
304309
onClick={onNext}
305310
>
306-
REVIEW &amp; SUBMIT
311+
<ArrowRightIcon styleName="rotated" />
312+
<span>
313+
REVIEW &amp; SUBMIT
314+
</span>
307315
</Button>
308316
</div>
309317
</div>

‎src/routes/Products/components/BasicInfo/styles.module.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,25 @@
99
.footer-right {
1010
display: flex;
1111
gap: 16px;
12+
13+
.rotated {
14+
transform: rotate(-90deg);
15+
}
16+
17+
button {
18+
svg {
19+
display: none;
20+
@include mobile {
21+
display: inline-block;
22+
}
23+
}
24+
25+
span {
26+
@include mobile {
27+
display: none;
28+
}
29+
}
30+
}
1231
}
1332
}
1433

‎src/routes/Products/components/BasicInfoForm/index.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -553,6 +553,9 @@ const BasicInfoForm = ({
553553
</PageRow>
554554
)}
555555

556+
{isWebsiteDesign && <PageDivider />}
557+
558+
556559
{isWebsiteDesign && (
557560
<PageRow styleName="form-row">
558561
<div>
@@ -839,7 +842,7 @@ const BasicInfoForm = ({
839842
selectedColor?.value?.length > 0 ? "(optional)" : ""
840843
}`}
841844
>
842-
<FormInputText
845+
<FormInputTextArea
843846
value={formData?.specificColor?.value}
844847
onChange={(e) =>
845848
handleInputChange(e.target.name, e.target.value)

‎src/routes/Products/components/BasicInfoForm/styles.module.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@
5555

5656
.formFieldWrapper {
5757
margin-top: 48px;
58+
@include mobile {
59+
margin-top: 24px;
60+
}
5861
}
5962
}
6063

@@ -83,6 +86,9 @@
8386

8487
.color-picker,
8588
.style-picker {
89+
@include mobile {
90+
padding: 29px;
91+
}
8692
width: 100% !important;
8793
padding-right: inherit !important;
8894
border: 2px solid $divider-color;
@@ -92,16 +98,26 @@
9298
.colors,
9399
.styles {
94100
padding: 20px;
101+
@include mobile {
102+
margin-bottom: -30px;
103+
padding: 0px;
104+
}
95105
}
96106

97107
.formFieldWrapper {
98108
padding-right: 20px;
99109
margin-top: 0;
110+
@include mobile {
111+
padding-right: 30px;
112+
}
100113
}
101114
}
102115

103116
.label {
104117
font-weight: 500;
105118
font-size: 20px;
106119
line-height: 26px;
120+
@include mobile {
121+
font-size: 16px;
122+
}
107123
}

‎src/routes/Products/components/StyleOptions/styles.module.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
gap: 24px;
88
margin-bottom: 34px;
99
justify-content: center;
10+
@include mobile {
11+
display: inline-block;
12+
}
1013
.styleWrapper {
1114
.style {
1215
position: relative;

0 commit comments

Comments
 (0)