style: enhance CustomSelect component and add custom styles for select elements

- Updated CustomSelect component styles for improved aesthetics and usability.
- Added custom styles for native select elements, including hover and focus states.
- Improved accessibility and visual consistency across select options.

Author: 0xdps

src/components/CustomSelect.tsx

@@ -39,14 +39,14 @@ export default function CustomSelect<T extends string>({
       <button
         type="button"
         onClick={() => setOpen((prev) => !prev)}
-        className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 flex items-center justify-between shadow-sm hover:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
+        className="w-full px-4 py-2.5 border border-dark-border rounded-lg bg-dark-card text-white flex items-center justify-between shadow-sm hover:border-primary-500/60 focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500 transition-colors"
       >
         <span className="flex items-center gap-2">
           {current?.icon && <span className="text-lg">{current.icon}</span>}
-          <span>{current?.label ?? placeholder}</span>
+          <span className="text-sm">{current?.label ?? placeholder}</span>
         </span>
         <svg
-          className={`w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform ${open ? 'rotate-180' : ''}`}
+          className={`w-4 h-4 text-gray-400 transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -57,7 +57,7 @@ export default function CustomSelect<T extends string>({
       </button>
 
       {open && (
-        <div className="absolute z-20 mt-2 w-full bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-64 overflow-y-auto">
+        <div className="absolute z-20 mt-2 w-full bg-dark-card border border-dark-border rounded-lg shadow-soft-xl max-h-64 overflow-y-auto animate-slide-down">
           {options.map((opt) => {
             const isActive = opt.value === value
             return (
@@ -68,10 +68,10 @@ export default function CustomSelect<T extends string>({
                   onChange(opt.value)
                   setOpen(false)
                 }}
-                className={`w-full text-left px-4 py-2 flex items-center gap-2 text-sm ${
+                className={`w-full text-left px-4 py-2.5 flex items-center gap-2 text-sm transition-colors ${
                   isActive
-                    ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-200'
-                    : 'text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800'
+                    ? 'bg-primary-600/20 text-primary-400 border-l-2 border-primary-500'
+                    : 'text-gray-300 hover:bg-dark-100 hover:text-white'
                 }`}
               >
                 {opt.icon && <span className="text-lg">{opt.icon}</span>}

src/index.css

@@ -45,3 +45,61 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: #3a3b4a;
 }
+
+/* Custom styles for native select elements */
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem;
+  padding: 0.625rem 2.5rem 0.625rem 1rem;
+  border: 1px solid #2a2b3a;
+  border-radius: 0.5rem;
+  background-color: #1a1b26;
+  color: #ffffff;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+}
+
+select:hover {
+  border-color: #38bdf8;
+}
+
+select:focus {
+  outline: none;
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
+}
+
+select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: #13131a;
+}
+
+/* Firefox specific styles */
+@-moz-document url-prefix() {
+  select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
+    padding-right: 2.5rem;
+  }
+}
+
+/* Style select options */
+select option {
+  background-color: #1a1b26;
+  color: #ffffff;
+  padding: 0.5rem;
+}
+
+select option:hover,
+select option:checked {
+  background-color: #0284c7;
+  color: #ffffff;
+}