Skip to content

Commit dcb9106

Browse files
mmattlinmmattlin
authored
Merge pull request #149 from topcoder-platform/PROD-2420_field-styling
PROD-2420 styling fixes -> dev
2 parents bf12273 + 5a19604 commit dcb9106

File tree

22 files changed

+122
-152
lines changed

22 files changed

+122
-152
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 styleName="title">{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:

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ const BasicInfo = ({
249249
subTitle={workItemConfig.subTitle}
250250
workType={workItemConfig.type}
251251
/>
252-
<PageContent styleName={styles["container"]}>
252+
<PageContent styleName={"container"}>
253253
<BasicInfoForm
254254
pageListOptions={_.map(PageOptions, (o, i) => ({
255255
...o,

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,6 @@
5555
}
5656
}
5757

58-
.container {
59-
border-top-left-radius: 0;
60-
border-top-right-radius: 0;
61-
}
62-
6358
.backButtonWrapper {
6459
@include backButtonWrapper;
6560
margin-top: 0;

0 commit comments

Comments
 (0)