Skip to content

Commit 51276a5

Browse files
brooketopcoderbrooketopcoder
authored
Merge pull request #155 from topcoder-platform/dev
PROD-2145 Adddtl Fixes for Web Design v2 & Problem Statement -> master
2 parents bf12273 + ee6e45d commit 51276a5

File tree

23 files changed

+123
-153
lines changed

23 files changed

+123
-153
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,16 @@
1010
border: 0 !important;
1111
padding: 0 15px !important;
1212
width: 100% !important;
13-
height: 70px;
13+
height: 117px !important;
1414
resize: none;
15+
@include font-roboto;
16+
1517

1618
&::placeholder {
1719
color: #aaaaaa !important;
1820
font-size: 18px !important;
1921
text-transform: none !important;
2022
font-weight: 400;
21-
@include font-barlow;
2223
}
2324

2425
&:focus {

‎src/components/PageContent/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import styles from "./styles.module.scss";
1010

1111
const PageContent = ({ children, styleName, ...props }) => {
1212
return (
13-
<div className={cn(styles["page-content"], styleName)} {...props}>
13+
<div className={cn(styles["page-content"], !!styleName ? styles[styleName] : undefined)} {...props}>
1414
{children}
1515
</div>
1616
);

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,9 @@
1111
background: white;
1212
border-radius: 8px;
1313
position: relative;
14+
}
15+
16+
.container {
17+
border-top-left-radius: 0;
18+
border-top-right-radius: 0;
1419
}

‎src/components/PageElements/PageP/styles.module.scss‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,28 @@
1111
font-weight: 800;
1212
}
1313

14+
.title {
15+
font-weight: 600;
16+
color: $grey-text;
17+
font-size: 20px;
18+
line-height: 20px;
19+
text-transform: uppercase;
20+
}
21+
1422
.description {
15-
margin-top: 0;
23+
@include font-roboto;
24+
font-size: 16px;
25+
line-height: 26px;
26+
margin-top: 24px;
27+
color: $grey-text;
28+
}
29+
30+
.label {
31+
font-weight: 500;
32+
font-size: 20px;
33+
line-height: 26px;
34+
35+
@include mobile {
36+
font-size: 16px;
37+
}
1638
}

‎src/routes/BasicInfoLegacy/components/BasicInfoFormLegacy/index.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ const BasicInfoFormLegacy = ({
5050
<PageDivider />
5151
<PageRow className={styles["form-row"]}>
5252
<div>
53-
<PageP className={styles["title"]}>PROJECT TITLE</PageP>
54-
<PageP className={styles["description"]}>
53+
<PageP styleName="title">PROJECT TITLE</PageP>
54+
<PageP styleName="description">
5555
Give your project a descriptive title. This is what the designers
5656
will see when looking for your work.
5757
</PageP>
@@ -74,8 +74,8 @@ const BasicInfoFormLegacy = ({
7474
<PageDivider />
7575
<PageRow className={styles["form-row"]}>
7676
<div>
77-
<PageP className={styles["title"]}>How many pages?</PageP>
78-
<PageP className={styles["description"]}>
77+
<PageP styleName="title">How many pages?</PageP>
78+
<PageP styleName="description">
7979
How many pages (individual screens) would you like designed?
8080
</PageP>
8181
</div>
@@ -95,8 +95,8 @@ const BasicInfoFormLegacy = ({
9595
<PageDivider />
9696
<PageRow className={styles["form-row"]}>
9797
<div>
98-
<PageP className={styles["title"]}>Device Types</PageP>
99-
<PageP className={styles["description"]}>
98+
<PageP styleName="title">Device Types</PageP>
99+
<PageP styleName="description">
100100
Your project includes designs for computers. You can add tablet and/
101101
or mobile device sizes as well. Designing for multiple devices,
102102
sizes or types is referred to as Responsive Design.

‎src/routes/BasicInfoLegacy/components/DeviceTypes/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const DeviceTypes = ({ numOfPages, selectedOptions, onSelect }) => {
9696
>
9797
{isActive ? type.iconActive : type.icon}
9898
</div>
99-
<div className={styles["title"]}>{type.title}</div>
99+
<div>{type.title}</div>
100100
<div className={styles["subTitle"]}>{type.description}</div>
101101
{type.subDescription && (
102102
<div className={styles["subDescription"]}>{type.subDescription}</div>

‎src/routes/BasicInfoLegacy/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ const BasicInfoLegacy = ({
173173
<Page>
174174
<Breadcrumb items={breadcrumbs} />
175175
<WebsiteDesignBannerLegacy />
176-
<PageContent styleName={styles["container"]}>
176+
<PageContent styleName={"container"}>
177177
<div className={styles["title-wrapper"]}>
178178
<PageH2>BASIC INFO</PageH2>
179179
</div>

‎src/routes/BasicInfoLegacy/styles.module.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,6 @@
1212
}
1313
}
1414

15-
.container {
16-
border-top-left-radius: 0;
17-
border-top-right-radius: 0;
18-
}
19-
2015
.backButtonWrapper {
2116
@include backButtonWrapper;
2217
}

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

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -163,8 +163,8 @@ const BrandingForm = ({
163163
<PageDivider />
164164
<PageRow className={styles["form-row"]}>
165165
<div>
166-
<PageP className={styles["title"]}>{"STYLE & THEME"}</PageP>
167-
<PageP className={styles["description"]}>
166+
<PageP styleName="title">{"STYLE & THEME"}</PageP>
167+
<PageP styleName="description">
168168
What ideas do you have for the overall style and theme of your
169169
website? For example, modern and minimalist, bold and colorful, or
170170
muted and masculine. Describe the vibe and personality you have in
@@ -178,7 +178,6 @@ const BrandingForm = ({
178178
<FormInputTextArea
179179
value={formData?.theme?.value}
180180
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
181-
styleName={styles["text-area"]}
182181
name="theme"
183182
placeholder={"Be as descriptive as possible"}
184183
/>
@@ -189,8 +188,8 @@ const BrandingForm = ({
189188
<PageDivider />
190189
<PageRow className={styles["form-row"]}>
191190
<div>
192-
<PageP className={styles["title"]}>Inspiration</PageP>
193-
<PageP className={styles["description"]}>
191+
<PageP styleName="title">Inspiration</PageP>
192+
<PageP styleName="description">
194193
Are there other websites you would like our designers to draw
195194
inspiration from? List websites you like and describe what you like
196195
about them.
@@ -236,7 +235,6 @@ const BrandingForm = ({
236235
e.target.value
237236
)
238237
}
239-
styleName={styles["text-area"]}
240238
name="feedback"
241239
placeholder={"Describe what you like about this website"}
242240
/>
@@ -256,8 +254,8 @@ const BrandingForm = ({
256254
<PageDivider />
257255
<PageRow className={styles["form-row"]}>
258256
<div>
259-
<PageP className={styles["title"]}>COLORS</PageP>
260-
<PageP className={styles["description"]}>
257+
<PageP styleName="title">COLORS</PageP>
258+
<PageP styleName="description">
261259
Pick up to three colors you'd like our designers to use. You can
262260
also include your specific brand colors.
263261
</PageP>
@@ -282,7 +280,6 @@ const BrandingForm = ({
282280
}
283281
value={formData?.specificColor?.value}
284282
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
285-
styleName={styles["text-area"]}
286283
name="specificColor"
287284
/>
288285
</FormField>
@@ -292,8 +289,8 @@ const BrandingForm = ({
292289
<PageDivider />
293290
<PageRow className={styles["form-row"]}>
294291
<div>
295-
<PageP className={styles["title"]}>FONTS</PageP>
296-
<PageP className={styles["description"]}>
292+
<PageP styleName="title">FONTS</PageP>
293+
<PageP styleName="description">
297294
Choose your general font style preference. If you have specific
298295
fonts that should be used, please share them.
299296
</PageP>
@@ -341,7 +338,6 @@ const BrandingForm = ({
341338
"Describe in detail how you would like our designers to use your fonts"
342339
}
343340
value={formData?.fontUsageDescription?.value}
344-
styleName={styles["text-area"]}
345341
name="fontUsageDescription"
346342
onChange={(e) =>
347343
handleInputChange(e.target.name, e.target.value)
@@ -355,8 +351,8 @@ const BrandingForm = ({
355351
<PageDivider />
356352
<PageRow className={styles["form-row"]}>
357353
<div>
358-
<PageP className={styles["title"]}>Other Assets (optional)</PageP>
359-
<PageP className={styles["description"]}>
354+
<PageP styleName="title">Other Assets (optional)</PageP>
355+
<PageP styleName="description">
360356
Do you have any additional assets that would be helpful to our
361357
designers? For example, your current logo, branding direction,
362358
photos, illustrations, content, layout ideas, etc.
@@ -386,8 +382,8 @@ const BrandingForm = ({
386382
<PageDivider />
387383
<PageRow className={styles["form-row"]}>
388384
<div>
389-
<PageP className={styles["title"]}>Anything to avoid? (optional)</PageP>
390-
<PageP className={styles["description"]}>
385+
<PageP styleName="title">Anything to avoid? (optional)</PageP>
386+
<PageP styleName="description">
391387
If there are any themes, ideas, or specific directions our designers
392388
should avoid, please let us know. Be as descriptive as possible.
393389
</PageP>
@@ -398,7 +394,6 @@ const BrandingForm = ({
398394
<FormInputTextArea
399395
value={formData?.anythingToAvoid?.value}
400396
onChange={(e) => handleInputChange(e.target.name, e.target.value)}
401-
styleName={styles["text-area"]}
402397
name="anythingToAvoid"
403398
placeholder={"Describe themes or ideas to avoid"}
404399
/>
@@ -409,8 +404,8 @@ const BrandingForm = ({
409404
<PageDivider />
410405
<PageRow className={styles["form-row"]}>
411406
<div>
412-
<PageP className={styles["title"]}>Allow Stock Photos?</PageP>
413-
<PageP className={styles["description"]}>
407+
<PageP styleName="title">Allow Stock Photos?</PageP>
408+
<PageP styleName="description">
414409
There may be additional costs for designs that use stock images.
415410
Our designers will include details for any stock images used, so you
416411
can buy them at the end of the project.{" "}
@@ -446,8 +441,8 @@ const BrandingForm = ({
446441
<PageDivider />
447442
<PageRow className={styles["form-row"]}>
448443
<div>
449-
<PageP className={styles["title"]}>Final Deliverable SOURCE FILES</PageP>
450-
<PageP className={styles["description"]}>
444+
<PageP styleName="title">Final Deliverable SOURCE FILES</PageP>
445+
<PageP styleName="description">
451446
If you want your final deliverables created with a specific design
452447
software, please specify.{" "}
453448
</PageP>

‎src/routes/PageDetailsLegacy/components/PageDetailsForm/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ const PageDetailsForm = ({
7979
<PageDivider />
8080
<PageRow className={styles["form-row"]}>
8181
<div>
82-
<PageP className={styles["title"]}>Describe each page</PageP>
83-
<PageP className={styles["description"]}>
82+
<PageP styleName="title">Describe each page</PageP>
83+
<PageP styleName="description">
8484
<PageP>
8585
For each page (or screen) required in your design project, please
8686
provide:

0 commit comments

Comments
 (0)