fix: forms select and dropdown in dark mode (#8144)

* improve forms/Select styling

* update forms/DropDown & cleanup forms/Select

components/form/DropDown.js

@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function DropdownMenu({ eventType, handleEventTypeChange, options, label, className }){
   return (
     <div className="text-center">
@@ -8,12 +6,16 @@ export default function DropdownMenu({ eventType, handleEventTypeChange, options
       </label>
       <select
         id="event-type"
-        value={eventType}
+        defaultValue={eventType}
         onChange={handleEventTypeChange}
-        className="border border-primary-low-medium rounded-md shadow-sm px-2 py-1 text-sm text-primary-medium focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent  m-3 w-60"
+        className="border border-primary-low-medium rounded-md shadow-sm px-2 py-1 text-sm text-primary-medium dark:bg-primary-high dark:text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent  m-3 w-60"
       >
         {options.map((option) => (
-          <option key={option.value} value={option.value}>
+          <option
+            className="checked:text-secondary-high checked:font-bold dark:checked:text-secondary-low-high"
+            key={option.value}
+            value={option.value}
+          >
             {option.name}
           </option>
         ))}

components/form/Select.js

@@ -15,12 +15,12 @@ export default function Select({
       <select
         id={name}
         name={name}
-        className="mt-2 text-primary-high dark:bg-transparent dark:text-white border-2 transition-all duration-250 ease-linear rounded px-6 py-2 mb-2 block w-full sm:text-sm sm:leading-6"
+        className="mt-2 text-primary-high dark:bg-primary-high dark:text-white border-2 transition-all duration-250 ease-linear rounded px-6 py-2 mb-2 block w-full sm:text-sm sm:leading-6"
         defaultValue={value}
         {...restProps}
       >
         {options.map((v) => (
-          <option key={v} className="text-black">{v}</option>
+          <option key={v} className="checked:text-secondary-high checked:font-bold dark:checked:text-secondary-low-high">{v}</option>
         ))}
       </select>
     </>

stories/components/form/DropDown.stories.js

@@ -0,0 +1,22 @@
+import DropDown from "@components/form/DropDown";
+
+export default {
+  component: DropDown
+};
+
+const options = [
+  {name: 'one', value: 1},
+  {name: 'two', value: 2},
+  {name: 'three', value: 3},
+  {name: 'four', value: 4}
+];
+
+export const Basic = {
+  args: {
+    eventType: 3,
+    label: 'Test',
+    options: options,
+    handleEventTypeChange: (e) => console.log(e.target.value),
+    className: ''
+  }
+};

stories/components/form/Select.stories.js

@@ -0,0 +1,14 @@
+import Select from "@components/form/Select";
+
+export default {
+  component: Select
+};
+
+export const Basic = {
+  args: {
+    name: 'test',
+    value: 'three',
+    label: 'Test',
+    options: ['one', 'two', 'three', 'four'],
+  }
+};