From 130cd862a42e3e8e97d94502b2c6a3ed4ea3b960 Mon Sep 17 00:00:00 2001
From: btahir89 <bilal.tahir89@gmail.com>
Date: Sat, 16 Nov 2024 21:14:18 -0800
Subject: [PATCH] dropdown icon fix

---
 components/SettingsModal.tsx | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/components/SettingsModal.tsx b/components/SettingsModal.tsx
index 6404a63..1595d53 100644
--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { X, RotateCcw } from 'lucide-react'
+import { X, RotateCcw, ChevronDown } from 'lucide-react'
 import { themes } from '@/lib/lofi-themes'
 
 interface SettingsModalProps {
@@ -60,18 +60,26 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
             >
               Theme
             </label>
-            <select
-              id="theme-select"
-              value={currentTheme}
-              onChange={(e) => setCurrentTheme(e.target.value)}
-              className="w-full rounded-[var(--lofi-button-radius)] border border-[var(--lofi-border)] bg-[var(--lofi-card-hover)] px-3 py-2 text-[var(--lofi-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--lofi-accent)]"
-            >
-              {Object.values(themes).map((theme) => (
-                <option key={theme.id} value={theme.id}>
-                  {theme.name}
-                </option>
-              ))}
-            </select>
+            <div className="relative">
+              <select
+                id="theme-select"
+                value={currentTheme}
+                onChange={(e) => setCurrentTheme(e.target.value)}
+                className="w-full appearance-none rounded-[var(--lofi-button-radius)] border border-[var(--lofi-border)] bg-[var(--lofi-card-hover)] px-3 py-2 text-[var(--lofi-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--lofi-accent)]"
+              >
+                {Object.values(themes).map((theme) => (
+                  <option key={theme.id} value={theme.id}>
+                    {theme.name}
+                  </option>
+                ))}
+              </select>
+              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronDown
+                  size={16}
+                  className="text-[var(--lofi-text-primary)]"
+                />
+              </div>
+            </div>
           </div>
 
           <div className="pt-4">