Adjusted Select component style & form fluidity

Author: dashu-baba

src/components/ReactSelect/index.jsx

@@ -12,18 +12,19 @@ const ReactSelect = (props) => {
   const customStyles = {
     control: (provided, state) => ({
       ...provided,
-      minHeight: "36px",
-      borderColor: state.isFocused ? "#55a5ff" : provided.borderColor,
+      minHeight: "40px",
+      border: "1px solid #aaaaab",
+      borderColor: state.isFocused ? "#55a5ff" : "#aaaaab",
       boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow
     }),
     menu: (provided) => ({
       ...provided,
-      minHeight: "36px",
+      minHeight: "40px",
       zIndex: 10,
     }),
     valueContainer: (provided) => ({
       ...provided,
-      padding: "1px 6px",
+      padding: "2px 6px",
     }),
     input: (provided) => ({
       ...provided,
@@ -47,14 +48,14 @@ const ReactSelect = (props) => {
       ...provided,
       color: "#AAAAAA",
       fontFamily: "Roboto",
-      fontSize: "16px",
+      fontSize: "14px",
       lineHeight: "22px",
       textAlign: "left",
-      fontWeight: "300"
+      fontWeight: "400"
     }),
     multiValue: (provided) => ({
       ...provided,
-      margin: "4px 4px",
+      margin: "3px 3px",
       color: "#AAAAAA",
       fontFamily: "Roboto",
       fontSize: "14px",
@@ -69,9 +70,7 @@ const ReactSelect = (props) => {
       <Select
         value={props.value}
         styles={customStyles}
-        onChange={(val) => {
-          props.onChange(val);
-        }}
+        onChange={props.onChange}
         options={props.options}
         styleName={props.error ? "error" : ""}
         isMulti={props.isMulti}

src/components/ReactSelect/styles.module.scss

@@ -9,6 +9,7 @@
     border: none !important;
     box-shadow: none !important;
     transition: none !important;
+    height: 28px;
   }
 }
 

src/components/TCForm/styles.module.scss

@@ -7,10 +7,13 @@
   width: 100%;
 
   .job-form-fields-container {
-    padding: 40px 19% 20px;
+    padding: 40px 0px 20px;
 
     .job-form-fields-wrapper{
+      width: 100%;
       max-width: 640px;
+      margin: 0 auto;
+      text-align: left;
     }
 
     input:not([type="checkbox"]),
@@ -55,44 +58,4 @@
 
 .datepicker-wrapper > div:nth-child(2) > div:nth-child(2) {
   z-index: 100;
-}
-
-@media (max-width: 1366px) {
-  .tc-form{
-    .job-form-fields-container {
-        padding-left: 15%;
-        padding-right: 15%;
-        transition: 300ms;
-      }
-  }
-}
-
-@media (max-width: 1280px) {
-  .tc-form{
-    .job-form-fields-container {
-        padding-left: 10%;
-        padding-right: 10%;
-        transition: 300ms;
-      }
-  }
-}
-
-@media (max-width: 1020px) {
-  .tc-form{
-    .job-form-fields-container {
-        padding-left: 5%;
-        padding-right: 5%;
-        transition: 300ms;
-      }
-  }
-}
-
-@media (max-width: 854px) {
-  .tc-form{
-    .job-form-fields-container {
-        padding-left: 0;
-        padding-right: 0;
-        transition: 300ms;
-      }
-  }
 }