fixed styles for job-rb

src/components/DataItem/styles.module.scss

@@ -30,4 +30,5 @@
   font-weight: 500;
   margin-top: 2px;
   text-align: left;
+  word-break: break-all;
 }

src/components/DateInput/index.jsx

@@ -8,14 +8,16 @@ import PT from "prop-types";
 import DatePicker from "react-datepicker";
 import "./styles.module.scss";
 
-const DateInput = ({ value, onChange, placeholder }) => {
+const DateInput = (props) => {
   return (
     <div styleName="datepicker-wrapper">
       <DatePicker
         dateFormat="MM/dd/yyyy"
-        placeholderText={placeholder}
-        selected={value}
-        onChange={onChange}
+        placeholderText={props.placeholder}
+        selected={props.value}
+        onChange={props.onChange}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
       />
     </div>
   );
@@ -25,6 +27,8 @@ DateInput.propTypes = {
   value: PT.string,
   onChange: PT.func.isRequired,
   placeholder: PT.string,
+  onBlur: PT.func,
+  onFocus: PT.func,
 };
 
 export default DateInput;

src/components/FormField/index.jsx

@@ -18,26 +18,28 @@ const FormField = ({ field, isGroupField }) => {
     <Field name={field.name}>
       {({ input, meta }) => (
         <div styleName={isGroupField ? "field-group-field" : ""}>
-          <label
-            styleName={
-              input.value
-                ? "job-field-label"
-                : "job-field-label job-field-no-label"
-            }
-          >
-            {field.label}
-          </label>
+          { !field.readonly && (             
+            <label
+              styleName={
+                (input.value != "undefined" && input.value !== null && input.value !== "") || meta.active
+                  ? "job-field-label"
+                  : "job-field-label job-field-no-label"
+              }
+            >
+              {field.label}
+            </label>
+          )}
           {field.type === FORM_FIELD_TYPE.TEXT && (
             <TextInput
               maxLength={field.maxLength}
               placeholder={field.placeholder}
               value={input.value ?? ""}
               type="text"
-              onChange={(v) => {
-                input.onChange(v);
-              }}
-              className={meta.error ? "error" : ""}
+              className={meta.error && meta.touched ? "error" : ""}
               readonly={field.readonly}
+              onChange={input.onChange}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
             />
           )}
           {field.type === FORM_FIELD_TYPE.NUMBER && (
@@ -47,37 +49,41 @@ const FormField = ({ field, isGroupField }) => {
               type="number"
               minValue={field.minValue}
               onChange={input.onChange}
-              className={meta.error ? "error" : ""}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
+              className={meta.error && meta.touched ? "error" : ""}
             />
           )}
           {field.type === FORM_FIELD_TYPE.TEXTAREA && (
             <TextArea
               placeholder={field.placeholder}
               value={input?.value ?? ""}
               onChange={input.onChange}
-              className={meta.error ? "error" : ""}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
+              className={meta.error && meta.touched ? "error" : ""}
             />
           )}
           {field.type === FORM_FIELD_TYPE.DATE && (
             <DateInput
               placeholder={field.placeholder}
               value={input?.value ?? ""}
-              onChange={(date) => {
-                input.onChange(date);
-              }}
+              onChange={input.onChange}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
             />
           )}
           {field.type === FORM_FIELD_TYPE.SELECT && (
             <ReactSelect
               value={input?.value ?? ""}
-              onChange={(val) => {
-                input.onChange(val);
-              }}
               options={field.selectOptions}
               isMulti={field.isMulti}
+              onChange={input.onChange}
+              onBlur={input.onBlur}
+              onFocus={input.onFocus}
             />
           )}
-          {field.isRequired && meta.error && (
+          {field.isRequired && meta.error &&  meta.touched && (
             <div styleName="field-error">{meta.error}</div>
           )}
         </div>

src/components/FormField/styles.module.scss

@@ -12,6 +12,7 @@
   top: 12px;
   background: white;
   z-index: 1;
+  padding: 0 3px;
 }
 
 .job-field-no-label {
@@ -21,6 +22,15 @@
 input:not([type="checkbox"]),
 textarea {
   margin-bottom: 0px;
+  &::placeholder {
+    color: #AAAAAA;
+    font-family: Roboto;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    text-align: left;
+    text-transform: none;
+  }
 }
 
 input:read-only {

src/components/ReactSelect/index.jsx

@@ -8,53 +8,74 @@ import PT from "prop-types";
 import Select from "react-select";
 import "./styles.module.scss";
 
-const ReactSelect = ({
-  value,
-  onChange,
-  placeholder,
-  error,
-  isMulti,
-  options,
-}) => {
+const ReactSelect = (props) => {
   const customStyles = {
     control: (provided, state) => ({
       ...provided,
-      minHeight: "36px",
+      minHeight: "40px",
+      border: "1px solid #aaaaab",
+      borderColor: state.isFocused ? "#55a5ff" : "#aaaaab",
+      boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow
     }),
-    menu: (provided, state) => ({
+    menu: (provided) => ({
       ...provided,
-      minHeight: "36px",
+      minHeight: "40px",
       zIndex: 10,
     }),
-    valueContainer: (provided, state) => ({
+    valueContainer: (provided) => ({
       ...provided,
-      padding: "0 6px",
+      padding: "2px 6px",
     }),
-    input: (provided, state) => ({
+    input: (provided) => ({
       ...provided,
       margin: "0px",
-      height: "36px",
+      height: "auto",
+      padding: "0",
+
     }),
-    indicatorSeparator: (state) => ({
+    indicatorSeparator: () => ({
       display: "none",
     }),
-    indicatorsContainer: (provided, state) => ({
+    indicatorsContainer: (provided) => ({
       ...provided,
-      height: "40px",
+      height: "auto",
     }),
+    option: (provided) => ({
+      ...provided,
+      minHeight: "32px"
+    }),
+    placeholder: (provided) => ({
+      ...provided,
+      color: "#AAAAAA",
+      fontFamily: "Roboto",
+      fontSize: "14px",
+      lineHeight: "22px",
+      textAlign: "left",
+      fontWeight: "400"
+    }),
+    multiValue: (provided) => ({
+      ...provided,
+      margin: "3px 3px",
+      color: "#AAAAAA",
+      fontFamily: "Roboto",
+      fontSize: "14px",
+      lineHeight: "22px",
+      textAlign: "left",
+      borderRadius: "5px"
+    })
   };
 
   return (
     <div styleName="select-wrapper">
       <Select
-        value={value}
+        value={props.value}
         styles={customStyles}
-        onChange={(val) => {
-          onChange(val);
-        }}
-        options={options}
-        styleName={error ? "error" : ""}
-        isMulti={isMulti}
+        onChange={props.onChange}
+        options={props.options}
+        styleName={props.error ? "error" : ""}
+        isMulti={props.isMulti}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
       />
     </div>
   );
@@ -66,6 +87,8 @@ ReactSelect.propTypes = {
   placeholder: PT.string,
   error: PT.string,
   isMulti: PT.bool,
+  onBlur: PT.func,
+  onFocus: PT.func,
   options: PT.arrayOf(
     PT.shape({
       value: PT.string.isRequired,

src/components/ReactSelect/styles.module.scss

@@ -8,5 +8,11 @@
   input {
     border: none !important;
     box-shadow: none !important;
+    transition: none !important;
+    height: 28px;
   }
 }
+
+.react-select__option{
+  min-height: 32px;
+}

src/components/TCForm/index.jsx

@@ -49,29 +49,31 @@ const TCForm = ({
         validate={getValidator(configuration.fields)}
         render={({ handleSubmit, invalid, dirty }) => (
           <form onSubmit={handleSubmit} styleName="tc-form">
-            <div styleName="job-form-fields">
-              {configuration.rows.map((row) => {
-                return (
-                  <>
-                    {row.type === FORM_ROW_TYPE.GROUP && (
-                      <div styleName="field-group">
-                        {row.fields.map((field) => {
-                          return (
-                            <FormField
-                              field={fields[field]}
-                              isGroupField={true}
-                            />
-                          );
+            <div styleName="job-form-fields-container">
+              <div styleName="job-form-fields-wrapper">
+                {configuration.rows.map((row) => {
+                  return (
+                    <>
+                      {row.type === FORM_ROW_TYPE.GROUP && (
+                        <div styleName="field-group">
+                          {row.fields.map((field) => {
+                            return (
+                              <FormField
+                                field={fields[field]}
+                                isGroupField={true}
+                              />
+                            );
+                          })}
+                        </div>
+                      )}
+                      {row.type === FORM_ROW_TYPE.SINGLE &&
+                        row.fields.map((field) => {
+                          return <FormField field={fields[field]} />;
                         })}
-                      </div>
-                    )}
-                    {row.type === FORM_ROW_TYPE.SINGLE &&
-                      row.fields.map((field) => {
-                        return <FormField field={fields[field]} />;
-                      })}
-                  </>
-                );
-              })}
+                    </>
+                  );
+                })}
+              </div>
             </div>
             <div styleName="form-actions">
               <Button

src/components/TCForm/styles.module.scss

@@ -1,11 +1,20 @@
 @import "styles/include";
 @import "~react-datepicker/dist/react-datepicker.css";
 
+
+
 .tc-form {
   width: 100%;
 
-  .job-form-fields {
-    padding: 40px 19% 20px;
+  .job-form-fields-container {
+    padding: 40px 0px 20px;
+
+    .job-form-fields-wrapper{
+      width: 100%;
+      max-width: 640px;
+      margin: 0 auto;
+      text-align: left;
+    }
 
     input:not([type="checkbox"]),
     textarea {
@@ -49,4 +58,4 @@
 
 .datepicker-wrapper > div:nth-child(2) > div:nth-child(2) {
   z-index: 100;
-}
+}

src/components/TextArea/index.jsx

@@ -16,6 +16,8 @@ function TextArea(props) {
       placeholder={props.placeholder}
       value={props.value}
       autoFocus={props.autoFocus}
+      onBlur={props.onBlur}
+      onFocus={props.onFocus}
     />
   );
 }
@@ -31,6 +33,8 @@ TextArea.propTypes = {
   onChange: PT.func,
   placeholder: PT.string,
   value: PT.string.isRequired,
+  onBlur: PT.func,
+  onFocus: PT.func,
 };
 
 export default TextArea;

src/components/TextInput/index.jsx

@@ -31,6 +31,8 @@ function TextInput(props) {
       value={props.value}
       autoFocus={props.autoFocus}
       readOnly={props.readonly ?? false}
+      onBlur={props.onBlur}
+      onFocus={props.onFocus}
     />
   );
 }
@@ -46,6 +48,8 @@ TextInput.propTypes = {
   className: PT.string,
   maxLength: PT.number,
   onChange: PT.func,
+  onBlur: PT.func,
+  onFocus: PT.func,
   placeholder: PT.string,
   value: PT.string.isRequired,
   type: PT.string.isRequired,