Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit f7fe380

Browse files
dashu-babadashu-baba
committedFeb 5, 2021
feedback on stylings
1 parent 3721e52 commit f7fe380

File tree

7 files changed

+97
-82
lines changed

7 files changed

+97
-82
lines changed
 

‎src/components/FormField/index.jsx

Lines changed: 24 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -18,32 +18,28 @@ const FormField = ({ field, isGroupField }) => {
1818
<Field name={field.name}>
1919
{({ input, meta }) => (
2020
<div styleName={isGroupField ? "field-group-field" : ""}>
21-
<label
22-
styleName={
23-
input.value || meta.active
24-
? "job-field-label"
25-
: "job-field-label job-field-no-label"
26-
}
27-
>
28-
{field.label}
29-
</label>
21+
{ !field.readonly && (
22+
<label
23+
styleName={
24+
(input.value != "undefined" && input.value !== null && input.value !== "") || meta.active
25+
? "job-field-label"
26+
: "job-field-label job-field-no-label"
27+
}
28+
>
29+
{field.label}
30+
</label>
31+
)}
3032
{field.type === FORM_FIELD_TYPE.TEXT && (
3133
<TextInput
3234
maxLength={field.maxLength}
3335
placeholder={field.placeholder}
3436
value={input.value ?? ""}
3537
type="text"
36-
onChange={(v) => {
37-
input.onChange(v);
38-
}}
3938
className={meta.error && meta.touched ? "error" : ""}
4039
readonly={field.readonly}
41-
onBlur={(event) => {
42-
input.onBlur(event);
43-
}}
44-
onFocus={(event) => {
45-
input.onFocus(event);
46-
}}
40+
onChange={input.onChange}
41+
onBlur={input.onBlur}
42+
onFocus={input.onFocus}
4743
/>
4844
)}
4945
{field.type === FORM_FIELD_TYPE.NUMBER && (
@@ -53,12 +49,8 @@ const FormField = ({ field, isGroupField }) => {
5349
type="number"
5450
minValue={field.minValue}
5551
onChange={input.onChange}
56-
onBlur={(event) => {
57-
input.onBlur(event);
58-
}}
59-
onFocus={(event) => {
60-
input.onFocus(event);
61-
}}
52+
onBlur={input.onBlur}
53+
onFocus={input.onFocus}
6254
className={meta.error && meta.touched ? "error" : ""}
6355
/>
6456
)}
@@ -67,44 +59,28 @@ const FormField = ({ field, isGroupField }) => {
6759
placeholder={field.placeholder}
6860
value={input?.value ?? ""}
6961
onChange={input.onChange}
70-
onBlur={(event) => {
71-
input.onBlur(event);
72-
}}
73-
onFocus={(event) => {
74-
input.onFocus(event);
75-
}}
62+
onBlur={input.onBlur}
63+
onFocus={input.onFocus}
7664
className={meta.error && meta.touched ? "error" : ""}
7765
/>
7866
)}
7967
{field.type === FORM_FIELD_TYPE.DATE && (
8068
<DateInput
8169
placeholder={field.placeholder}
8270
value={input?.value ?? ""}
83-
onChange={(date) => {
84-
input.onChange(date);
85-
}}
86-
onBlur={(event) => {
87-
input.onBlur(event);
88-
}}
89-
onFocus={(event) => {
90-
input.onFocus(event);
91-
}}
71+
onChange={input.onChange}
72+
onBlur={input.onBlur}
73+
onFocus={input.onFocus}
9274
/>
9375
)}
9476
{field.type === FORM_FIELD_TYPE.SELECT && (
9577
<ReactSelect
9678
value={input?.value ?? ""}
97-
onChange={(val) => {
98-
input.onChange(val);
99-
}}
10079
options={field.selectOptions}
10180
isMulti={field.isMulti}
102-
onBlur={(event) => {
103-
input.onBlur(event);
104-
}}
105-
onFocus={(event) => {
106-
input.onFocus(event);
107-
}}
81+
onChange={input.onChange}
82+
onBlur={input.onBlur}
83+
onFocus={input.onFocus}
10884
/>
10985
)}
11086
{field.isRequired && meta.error && meta.touched && (

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,10 @@ textarea {
2626
color: #AAAAAA;
2727
font-family: Roboto;
2828
font-size: 14px;
29+
font-weight: 400;
2930
line-height: 22px;
3031
text-align: left;
32+
text-transform: none;
3133
}
3234
}
3335

‎src/components/ReactSelect/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const ReactSelect = (props) => {
3737
}),
3838
indicatorsContainer: (provided) => ({
3939
...provided,
40-
height: "36px",
40+
height: "auto",
4141
}),
4242
option: (provided) => ({
4343
...provided,

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,10 @@
88
input {
99
border: none !important;
1010
box-shadow: none !important;
11+
transition: none !important;
1112
}
1213
}
1314

1415
.react-select__option{
1516
min-height: 32px;
1617
}
17-
18-
input{
19-
transition: none !important;
20-
}

‎src/components/TCForm/index.jsx

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -49,29 +49,31 @@ const TCForm = ({
4949
validate={getValidator(configuration.fields)}
5050
render={({ handleSubmit, invalid, dirty }) => (
5151
<form onSubmit={handleSubmit} styleName="tc-form">
52-
<div styleName="job-form-fields">
53-
{configuration.rows.map((row) => {
54-
return (
55-
<>
56-
{row.type === FORM_ROW_TYPE.GROUP && (
57-
<div styleName="field-group">
58-
{row.fields.map((field) => {
59-
return (
60-
<FormField
61-
field={fields[field]}
62-
isGroupField={true}
63-
/>
64-
);
52+
<div styleName="job-form-fields-container">
53+
<div styleName="job-form-fields-wrapper">
54+
{configuration.rows.map((row) => {
55+
return (
56+
<>
57+
{row.type === FORM_ROW_TYPE.GROUP && (
58+
<div styleName="field-group">
59+
{row.fields.map((field) => {
60+
return (
61+
<FormField
62+
field={fields[field]}
63+
isGroupField={true}
64+
/>
65+
);
66+
})}
67+
</div>
68+
)}
69+
{row.type === FORM_ROW_TYPE.SINGLE &&
70+
row.fields.map((field) => {
71+
return <FormField field={fields[field]} />;
6572
})}
66-
</div>
67-
)}
68-
{row.type === FORM_ROW_TYPE.SINGLE &&
69-
row.fields.map((field) => {
70-
return <FormField field={fields[field]} />;
71-
})}
72-
</>
73-
);
74-
})}
73+
</>
74+
);
75+
})}
76+
</div>
7577
</div>
7678
<div styleName="form-actions">
7779
<Button

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

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,17 @@
22
@import "~react-datepicker/dist/react-datepicker.css";
33

44

5-
@media (max-width: 1421px) {
6-
.tc-form > .job-form-fields {
7-
padding: 0px !important;
8-
}
9-
}
105

116
.tc-form {
127
width: 100%;
138

14-
.job-form-fields {
9+
.job-form-fields-container {
1510
padding: 40px 19% 20px;
1611

12+
.job-form-fields-wrapper{
13+
max-width: 640px;
14+
}
15+
1716
input:not([type="checkbox"]),
1817
textarea {
1918
margin-bottom: 0px;
@@ -58,3 +57,42 @@
5857
z-index: 100;
5958
}
6059

60+
@media (max-width: 1366px) {
61+
.tc-form{
62+
.job-form-fields-container {
63+
padding-left: 15%;
64+
padding-right: 15%;
65+
transition: 300ms;
66+
}
67+
}
68+
}
69+
70+
@media (max-width: 1280px) {
71+
.tc-form{
72+
.job-form-fields-container {
73+
padding-left: 10%;
74+
padding-right: 10%;
75+
transition: 300ms;
76+
}
77+
}
78+
}
79+
80+
@media (max-width: 1020px) {
81+
.tc-form{
82+
.job-form-fields-container {
83+
padding-left: 5%;
84+
padding-right: 5%;
85+
transition: 300ms;
86+
}
87+
}
88+
}
89+
90+
@media (max-width: 854px) {
91+
.tc-form{
92+
.job-form-fields-container {
93+
padding-left: 0;
94+
padding-right: 0;
95+
transition: 300ms;
96+
}
97+
}
98+
}

‎src/routes/JobForm/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const JobForm = ({ teamId, jobId }) => {
7878

7979
useEffect(() => {
8080
if (skills && job && !options) {
81-
const skillOptions = skills.slice(0, 10).map((item) => {
81+
const skillOptions = skills.map((item) => {
8282
return {
8383
value: item.id,
8484
label: item.name,

0 commit comments

Comments
 (0)
This repository has been archived.