Merge pull request #5246 from prabhjeevnijjar/role

[commonForm.style.js] text color fix in dropdown

Author: leecalcote

src/components/CommonForm/commonForm.style.js

@@ -106,6 +106,10 @@ margin: 1rem;
         color: ${props => props.theme.primaryColor};
       }
 
+      .options {
+        color: ${props => props.theme.textColor};
+      }
+
       .custom-arrow {
         background-color: white;
         width: 2rem;

src/components/CommonForm/index.js

@@ -162,28 +162,28 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => {
         <div role="group" className="formRight" aria-labelledby="select">
           <Field as="select" name="role">
             <option defaultValue hidden className="custom-arrow">Select your role</option>
-            <option value="Architect">Architect</option>
-            <option value="Backend Engineer">Backend Engineer</option>
-            <option value="Business Operations">Business Operations</option>
-            <option value="Data Analyst">Data Analyst</option>
-            <option value="Designer">Designer</option>
-            <option value="Developer">Developer</option>
-            <option value="DevOps Engineer">DevOps Engineer / SysAdmin</option>
-            <option value="Executive">Executive</option>
-            <option value="Frontend Engineer">Frontend Engineer</option>
-            <option value="Fullstack Engineer">Fullstack Engineer</option>
-            <option value="IT Operations">IT Operations</option>
-            <option value="Manager">Manager</option>
-            <option value="Marketing">Marketing</option>
-            <option value="Media/Analyst">Media/Analyst</option>
-            <option value="Platform Engineer">Platform Engineer</option>
-            <option value="Professor/Academic">Professor/Academic</option>
-            <option value="Product Manager">Product Manager</option>
-            <option value="Sales">Sales</option>
-            <option value="Sales Engineer">Sales Engineer</option>
-            <option value="Site Reliability Engineer">Site Reliability Engineer</option>
-            <option value="Student">Student</option>
-            <option value="Other">Other</option>
+            <option className="options" value="Architect">Architect</option>
+            <option className="options" value="Backend Engineer">Backend Engineer</option>
+            <option className="options" value="Business Operations">Business Operations</option>
+            <option className="options" value="Data Analyst">Data Analyst</option>
+            <option className="options" value="Designer">Designer</option>
+            <option className="options" value="Developer">Developer</option>
+            <option className="options" value="DevOps Engineer">DevOps Engineer / SysAdmin</option>
+            <option className="options" value="Executive">Executive</option>
+            <option className="options" value="Frontend Engineer">Frontend Engineer</option>
+            <option className="options" value="Fullstack Engineer">Fullstack Engineer</option>
+            <option className="options" value="IT Operations">IT Operations</option>
+            <option className="options" value="Manager">Manager</option>
+            <option className="options" value="Marketing">Marketing</option>
+            <option className="options" value="Media/Analyst">Media/Analyst</option>
+            <option className="options" value="Platform Engineer">Platform Engineer</option>
+            <option className="options" value="Professor/Academic">Professor/Academic</option>
+            <option className="options" value="Product Manager">Product Manager</option>
+            <option className="options" value="Sales">Sales</option>
+            <option className="options" value="Sales Engineer">Sales Engineer</option>
+            <option className="options" value="Site Reliability Engineer">Site Reliability Engineer</option>
+            <option className="options" value="Student">Student</option>
+            <option className="options" value="Other">Other</option>
           </Field>
         </div>