fix(tp/con): misc fixes

.vscode/settings.json

@@ -14,9 +14,7 @@
       }
     ]
   },
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": "explicit"
-  },
+  "editor.codeActionsOnSave": { "source.organizeImports": true },
   "explorer.fileNesting.patterns": {
     "*.ts": "${capture}.js, ${capture}.typegen.ts, ${capture}.graphql, ${capture}.generated.ts",
     "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",

apps/redi-connect/src/components/organisms/DeclineMentorshipButton.tsx

@@ -100,7 +100,7 @@ const DeclineMentorshipButton = ({ match }: DeclineMentorshipButtonProps) => {
               name="ifDeclinedByMentor_chosenReasonForDecline"
               label=""
               items={formDeclineOptions}
-              {...formik}
+              formik={formik}
             />
             {formik.values.ifDeclinedByMentor_chosenReasonForDecline ===
             'other' ? (

apps/redi-connect/src/components/organisms/EditableEducation.tsx

@@ -76,7 +76,7 @@ function EditableEducation() {
         name="mentee_highestEducationLevel"
         placeholder="Education Level"
         items={formEducationLevels}
-        {...formik}
+        formik={formik}
       />
     </Editable>
   )

apps/redi-connect/src/components/organisms/EditableLanguages.tsx

@@ -74,7 +74,7 @@ function EditableLanguages() {
         items={formLanguages}
         multiselect
         placeholder="Start typing and select languages"
-        {...formik}
+        formik={formik}
       />
     </Editable>
   )

apps/redi-connect/src/components/organisms/EditableMenteeCount.tsx

@@ -99,7 +99,7 @@ function EditableMenteeCount() {
         name="menteeCountCapacity"
         placeholder="Mentee count"
         items={formMenteeCountCapacityOptions}
-        {...formik}
+        formik={formik}
       />
       <Checkbox.Form
         name="optOutOfMenteesFromOtherRediLocation"

apps/redi-connect/src/components/organisms/EditableOccupation.tsx

@@ -208,7 +208,7 @@ function EditableOccupation() {
             name="mentee_occupationCategoryId"
             placeholder="Current Occupation"
             items={formMenteeOccupationCategories}
-            {...formik}
+            formik={formik}
           />
           {occupation === 'job' && (
             <>

apps/redi-connect/src/components/organisms/EditablePersonalDetail.tsx

@@ -80,7 +80,7 @@ const EditablePersonalDetail = () => {
         name="gender"
         placeholder="Prefer not to answer"
         items={formGenders}
-        {...formik}
+        formik={formik}
       />
       {/* Disabled for reasons explained above */}
       {/* <FormDatePicker

apps/redi-connect/src/components/organisms/modules/MSessions.tsx

@@ -163,7 +163,7 @@ const MSessions = ({ sessions, menteeId, editable }: MSessions) => {
                 name="minuteDuration"
                 placeholder="Add the duration of the session"
                 items={formMentoringSessionDurationOptions}
-                {...formik}
+                formik={formik}
               />
             </form>
           </Modal.Body>

apps/redi-connect/src/pages/front/signup/SignUp.tsx

@@ -200,7 +200,7 @@ export default function SignUp() {
               name="rediLocation"
               placeholder="Choose your ReDI Location"
               items={formRediLocations}
-              {...formik}
+              formik={formik}
             />
 
             {type === 'mentor' && (

apps/redi-talent-pool/src/components/organisms/company-profile-editables/EditableJobPostings.tsx

@@ -411,7 +411,7 @@ function ModalForm({
             label="Location (Federal State in Germany)"
             items={federalStatesOptions}
             placeholder="Select federal states"
-            {...formik}
+            formik={formik}
           />
           <Checkbox.Form
             name="isRemotePossible"
@@ -443,7 +443,7 @@ function ModalForm({
             label="Related positions*"
             name="relatesToPositions"
             items={formRelatedPositions}
-            {...formik}
+            formik={formik}
             multiselect
             placeholder="Start typing and select positions"
             closeMenuOnSelect={false}
@@ -452,7 +452,7 @@ function ModalForm({
             label="Ideal technical skills*"
             name="idealTechnicalSkills"
             items={formTopSkills}
-            {...formik}
+            formik={formik}
             multiselect
             placeholder="Start typing and select skills"
             closeMenuOnSelect={false}
@@ -461,7 +461,7 @@ function ModalForm({
             label="Employment type*"
             name="employmentType"
             items={formEmploymentType}
-            {...formik}
+            formik={formik}
           />
           <FormInput
             name="languageRequirements"

apps/redi-talent-pool/src/components/organisms/jobseeker-cv-editables/AccordionFormCvDesiredPositions.tsx

@@ -116,7 +116,7 @@ export function JobseekerFormSectionOverview({
         label="Desired position* (pick 1-3)"
         name="desiredPositions"
         items={formDesiredPositions}
-        {...formik}
+        formik={formik}
         multiselect
         placeholder="Start typing and select positions"
         closeMenuOnSelect={false}

apps/redi-talent-pool/src/components/organisms/jobseeker-cv-editables/AccordionFormCvEducation.tsx

@@ -344,7 +344,7 @@ function JobseekerFormSectionEducation({
                           name={`education[${index}].certificationType`}
                           label="The type of certification*"
                           items={formCertificationTypes}
-                          {...formik}
+                          formik={formik}
                         />
                         <FormInput
                           name={`education[${index}].institutionName`}
@@ -386,7 +386,7 @@ function JobseekerFormSectionEducation({
                               name={`education[${index}].startDateMonth`}
                               label="Started in month*"
                               items={formMonthsOptions}
-                              {...formik}
+                              formik={formik}
                             />
                           </Columns.Column>
                           <Columns.Column size={6}>
@@ -405,7 +405,7 @@ function JobseekerFormSectionEducation({
                                 name={`education[${index}].endDateMonth`}
                                 label="Ended in month*"
                                 items={formMonthsOptions}
-                                {...formik}
+                                formik={formik}
                               />
                             </Columns.Column>
                             <Columns.Column size={6}>

apps/redi-talent-pool/src/components/organisms/jobseeker-cv-editables/AccordionFormCvLanguages.tsx

@@ -229,13 +229,13 @@ export function JobseekerFormSectionLanguages({
             name={`workingLanguages[${index}].language`}
             label="Language*"
             items={formLanguages}
-            {...formik}
+            formik={formik}
           />
           <FormSelect
             name={`workingLanguages[${index}].proficiencyLevelId`}
             label="Level of proficiency*"
             items={formLanguageProficiencyLevels}
-            {...formik}
+            formik={formik}
           />
         </FormDraggableAccordion>
       ))}

apps/redi-talent-pool/src/components/organisms/jobseeker-cv-editables/AccordionFormCvProfessionalExperience.tsx

@@ -380,7 +380,7 @@ export function JobseekerFormSectionProfessionalExperience({
                               name={`experience[${index}].startDateMonth`}
                               label="Started in month*"
                               items={formMonthsOptions}
-                              {...formik}
+                              formik={formik}
                             />
                           </Columns.Column>
                           <Columns.Column size={6}>
@@ -399,7 +399,7 @@ export function JobseekerFormSectionProfessionalExperience({
                                 name={`experience[${index}].endDateMonth`}
                                 label="Ended in month*"
                                 items={formMonthsOptions}
-                                {...formik}
+                                formik={formik}
                               />
                             </Columns.Column>
                             <Columns.Column size={6}>

apps/redi-talent-pool/src/components/organisms/jobseeker-cv-editables/AccordionFormCvSummary.tsx

@@ -134,7 +134,7 @@ export function JobseekerFormSectionSummary({
         label="Your top technical skills (pick 1-5 skills)"
         name="topSkills"
         items={formTopSkills}
-        {...formik}
+        formik={formik}
         multiselect
         placeholder="Start typing and select skills"
         closeMenuOnSelect={false}

apps/redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableEducation.tsx

@@ -407,7 +407,7 @@ function JobseekerFormSectionEducation({
                           name={`education[${index}].certificationType`}
                           label="The type of certification*"
                           items={formCertificationTypes}
-                          {...formik}
+                          formik={formik}
                         />
                         <FormInput
                           name={`education[${index}].institutionName`}
@@ -449,7 +449,7 @@ function JobseekerFormSectionEducation({
                               name={`education[${index}].startDateMonth`}
                               label="Started in month*"
                               items={formMonthsOptions}
-                              {...formik}
+                              formik={formik}
                             />
                           </Columns.Column>
                           <Columns.Column size={6}>
@@ -468,7 +468,7 @@ function JobseekerFormSectionEducation({
                                 name={`education[${index}].endDateMonth`}
                                 label="Ended in month*"
                                 items={formMonthsOptions}
-                                {...formik}
+                                formik={formik}
                               />
                             </Columns.Column>
                             <Columns.Column size={6}>

apps/redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableImportantDetails.tsx

@@ -305,7 +305,7 @@ function JobseekerFormSectionImportantDetails({
             label="What kind of employment are you looking for?*"
             name="desiredEmploymentType"
             items={formDesiredEmploymentType}
-            {...formik}
+            formik={formik}
             multiselect
             placeholder="Select desired employment types"
             closeMenuOnSelect={false}
@@ -314,7 +314,7 @@ function JobseekerFormSectionImportantDetails({
             label="When are you available to start?*"
             name="availability"
             items={formAvailabilityOptions}
-            {...formik}
+            formik={formik}
           />
           {formik.values.availability === 'date' ? (
             <FormDatePicker
@@ -333,7 +333,7 @@ function JobseekerFormSectionImportantDetails({
             label="What is your immigration status?"
             name="immigrationStatus"
             items={formImmigrationStatusOptions}
-            {...formik}
+            formik={formik}
           />
         </>
       )}

apps/redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableLanguages.tsx

@@ -252,13 +252,13 @@ export function JobseekerFormSectionLanguages({
             name={`workingLanguages[${index}].language`}
             label="Language*"
             items={formLanguages}
-            {...formik}
+            formik={formik}
           />
           <FormSelect
             name={`workingLanguages[${index}].proficiencyLevelId`}
             label="Level of proficiency*"
             items={formLanguageProficiencyLevels}
-            {...formik}
+            formik={formik}
           />
         </FormDraggableAccordion>
       ))}

apps/redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableNamePhotoLocation.tsx

@@ -236,7 +236,7 @@ function ModalForm({
         name="federalState"
         label="Your place of residence (state)*"
         items={federalStatesOptions}
-        {...formik}
+        formik={formik}
       />
       <Checkbox.Form
         name={`willingToRelocate`}

apps/redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableOverview.tsx

@@ -1,16 +1,16 @@
 import {
   TpJobseekerDirectoryEntry,
   useMyTpDataQuery,
-  useTpJobseekerProfilePatchMutation
+  useTpJobseekerProfilePatchMutation,
 } from '@talent-connect/data-access'
 import {
   Button,
   Caption,
-  FormSelect
+  FormSelect,
 } from '@talent-connect/shared-atomic-design-components'
 import {
   desiredPositions,
-  desiredPositionsIdToLabelMap
+  desiredPositionsIdToLabelMap,
 } from '@talent-connect/talent-pool/config'
 import { useFormik } from 'formik'
 import { useEffect, useMemo, useState } from 'react'
@@ -144,7 +144,7 @@ function JobseekerFormSectionOverview({
         label="Desired position* (pick 1-3)"
         name="desiredPositions"
         items={formDesiredPositions}
-        {...formik}
+        formik={formik}
         multiselect
         placeholder="Start typing and select positions"
         closeMenuOnSelect={false}

apps/redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableProfessionalExperience.tsx

@@ -443,7 +443,7 @@ export function JobseekerFormSectionProfessionalExperience({
                               name={`experience[${index}].startDateMonth`}
                               label="Started in month*"
                               items={formMonthsOptions}
-                              {...formik}
+                              formik={formik}
                             />
                           </Columns.Column>
                           <Columns.Column size={6}>
@@ -462,7 +462,7 @@ export function JobseekerFormSectionProfessionalExperience({
                                 name={`experience[${index}].endDateMonth`}
                                 label="Ended in month*"
                                 items={formMonthsOptions}
-                                {...formik}
+                                formik={formik}
                               />
                             </Columns.Column>
                             <Columns.Column size={6}>

apps/redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableSummary.tsx

@@ -176,7 +176,7 @@ function JobseekerFormSectionSummary({
         label="Your top technical skills (pick 1-5 skills)"
         name="topSkills"
         items={formTopSkills}
-        {...formik}
+        formik={formik}
         multiselect
         placeholder="Start typing and select skills"
         closeMenuOnSelect={false}

apps/redi-talent-pool/src/pages/front/signup/SignUp.tsx

@@ -229,7 +229,7 @@ export default function SignUp() {
                 }
                 creatable
                 isLoading={isTpCompanyNamesLoading}
-                {...formik}
+                formik={formik}
               />
             ) : null}
 
@@ -272,7 +272,7 @@ export default function SignUp() {
                 name="rediLocation"
                 placeholder="Choose your ReDI Location"
                 items={formRediLocations}
-                {...formik}
+                formik={formik}
               />
             )}
 
@@ -301,7 +301,7 @@ export default function SignUp() {
                   name="howDidHearAboutRediKey"
                   placeholder="How did you first hear about ReDI Talent Pool?"
                   items={howDidHearAboutRediOptionsEntries}
-                  {...formik}
+                  formik={formik}
                 />
                 {formik.values.howDidHearAboutRediKey ===
                 FirstPointOfTpContactOption.Other ? (

libs/shared-atomic-design-components/src/lib/atoms/FormSelect.styles.ts

@@ -17,19 +17,19 @@ export const formSelectStyles = {
   }),
   dropdownIndicator: (provided: any, state: any) => ({
     ...provided,
-    color: state.isFocused ? '#ea5b29' : '#a0a0a0',
-    transform: state.menuIsOpen ? 'rotate(180deg)' : 'none',
+    transition: 'ease-in-out all 0.2s',
+    transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'none',
     svg: {
       margin: '0 0.1rem',
     },
   }),
   control: (provided: any, state: any) => ({
     ...provided,
-    borderColor: state.isFocused ? '#ea5b29' : '#a0a0a0',
+    borderColor: state.isFocused ? 'black' : '#A0A0A0',
     minHeight: '48px',
     boxShadow: 'inset 0 2px 6px rgba(178, 180, 181, 0.3)',
     '&:hover': {
-      borderColor: state.isFocused ? '#ea5b29' : '#f6b9a2',
+      borderColor: 'black'
     },
   }),
   multiValue: (provided: any) => ({