Move away from native dropdowns, it looks inconsistent across systems

src/app/main/game/berrydash/leaderboards/page.tsx

@@ -9,6 +9,7 @@ import { useRouter } from 'next/navigation'
 import { platform } from '@tauri-apps/plugin-os'
 import { fetch } from '@tauri-apps/plugin-http'
 import { verifySignature } from '@/lib/util'
+import Dropdown from '@/components/Dropdown'
 
 interface BaseEntry {
   id: number
@@ -165,21 +166,21 @@ export default function BerryDashLeaderboards () {
         <div className='flex gap-2'>
           {selected == 1 && (
             <div className='flex justify-center'>
-              <select
-                className='bg-(--col2) border border-(--col4) rounded-md'
+              <Dropdown
                 value={selectedBerryOption}
-                onChange={e => setSelectedBerryOption(Number(e.target.value))}
-              >
-                <option value='0'>Normal Berry</option>
-                <option value='1'>Poison Berry</option>
-                <option value='2'>Slow Berry</option>
-                <option value='3'>Ultra Berry</option>
-                <option value='4'>Speedy Berry</option>
-                <option value='5'>Coin Berry</option>
-                <option value='6'>Random Berry</option>
-                <option value='7'>Anti Berry</option>
-                <option value='8'>Golden Berry</option>
-              </select>
+                options={[
+                  { label: 'Normal Berry', value: 0 },
+                  { label: 'Poison Berry', value: 1 },
+                  { label: 'Slow Berry', value: 2 },
+                  { label: 'Ultra Berry', value: 3 },
+                  { label: 'Speedy Berry', value: 4 },
+                  { label: 'Coin Berry', value: 5 },
+                  { label: 'Random Berry', value: 6 },
+                  { label: 'Anti Berry', value: 7 },
+                  { label: 'Golden Berry', value: 8 }
+                ]}
+                onChange={e => setSelectedBerryOption(Number(e))}
+              />
             </div>
           )}
           <button

src/app/main/settings/page.tsx

@@ -4,6 +4,7 @@ import { Setting } from '@/components/Setting'
 import { useGlobal } from '@/providers/GlobalProvider'
 import { copyToClipboard } from '@/lib/clipboard'
 import { platform } from '@tauri-apps/plugin-os'
+import Dropdown from '@/components/Dropdown'
 
 export default function Settings () {
   const {
@@ -57,20 +58,25 @@ export default function Settings () {
           className='input-field my-1'
           hidden={!(platform() == 'linux' && linuxUseWine)}
         ></input>
-        <div title='The theme you want the launcher to use.'>
-          <label className='text-lg'>Theme:</label>
-          <select
-            className='ml-2 bg-(--col2) border border-(--col4) rounded-md'
-            value={theme}
-            onChange={async e => {
-              await settings?.set('theme', e.target.value)
-            }}
+        <div className='flex flex-row gap-2 items-center'>
+          <p
+            title='The theme you want the launcher to use.'
+            className='text-lg'
           >
-            <option value={'dark'}>Dark</option>
-            <option value={'red'}>Red</option>
-            <option value={'blue'}>Blue</option>
-            <option value={'purple'}>Purple</option>
-          </select>
+            Theme:
+          </p>
+          <Dropdown
+            value={theme}
+            options={[
+              { label: 'Dark', value: 'dark' },
+              { label: 'Red', value: 'red' },
+              { label: 'Blue', value: 'blue' },
+              { label: 'Purple', value: 'purple' }
+            ]}
+            onChange={async val => {
+              await settings?.set('theme', val)
+            }}
+          />
         </div>
       </div>
       <p