Move away from native dropdowns, it looks inconsistent across systems

src-tauri/tauri.linux.conf.json

@@ -16,7 +16,7 @@
         "url": "/update/checking",
         "width": 1000,
         "height": 600,
-        "minWidth": 900,
+        "minWidth": 1000,
         "minHeight": 500
       }
     ],

src-tauri/tauri.macos.conf.json

@@ -17,7 +17,7 @@
         "url": "/update/checking",
         "width": 1000,
         "height": 600,
-        "minWidth": 900,
+        "minWidth": 1000,
         "minHeight": 500,
         "titleBarStyle": "Overlay",
         "hiddenTitle": true

src-tauri/tauri.windows.conf.json

@@ -17,7 +17,7 @@
         "url": "/update/checking",
         "width": 1000,
         "height": 632,
-        "minWidth": 900,
+        "minWidth": 1000,
         "minHeight": 532,
         "decorations": false,
         "shadow": true

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
+              <Dropdown
-                className='bg-(--col2) border border-(--col4) rounded-md'
                 value={selectedBerryOption}
-                onChange={e => setSelectedBerryOption(Number(e.target.value))}
+                options={[
-              >
+                  { label: 'Normal Berry', value: 0 },
-                <option value='0'>Normal Berry</option>
+                  { label: 'Poison Berry', value: 1 },
-                <option value='1'>Poison Berry</option>
+                  { label: 'Slow Berry', value: 2 },
-                <option value='2'>Slow Berry</option>
+                  { label: 'Ultra Berry', value: 3 },
-                <option value='3'>Ultra Berry</option>
+                  { label: 'Speedy Berry', value: 4 },
-                <option value='4'>Speedy Berry</option>
+                  { label: 'Coin Berry', value: 5 },
-                <option value='5'>Coin Berry</option>
+                  { label: 'Random Berry', value: 6 },
-                <option value='6'>Random Berry</option>
+                  { label: 'Anti Berry', value: 7 },
-                <option value='7'>Anti Berry</option>
+                  { label: 'Golden Berry', value: 8 }
-                <option value='8'>Golden Berry</option>
+                ]}
-              </select>
+                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.'>
+        <div className='flex flex-row gap-2 items-center'>
-          <label className='text-lg'>Theme:</label>
+          <p
-          <select
+            title='The theme you want the launcher to use.'
-            className='ml-2 bg-(--col2) border border-(--col4) rounded-md'
+            className='text-lg'
-            value={theme}
-            onChange={async e => {
-              await settings?.set('theme', e.target.value)
-            }}
           >
-            <option value={'dark'}>Dark</option>
+            Theme:
-            <option value={'red'}>Red</option>
+          </p>
-            <option value={'blue'}>Blue</option>
+          <Dropdown
-            <option value={'purple'}>Purple</option>
+            value={theme}
-          </select>
+            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

src/components/Dropdown.tsx

@@ -0,0 +1,62 @@
+import { useState, useRef, useEffect } from 'react'
+import '@/styles/dropdown.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
+
+type Option = {
+  label: string
+  value: string | number
+}
+
+type Props = {
+  value: string | number
+  options: Option[]
+  onChange: (value: string | number) => void | Promise<void>
+}
+
+export default function Dropdown ({ value, options, onChange }: Props) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const selected = options.find(o => o.value === value)
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    window.addEventListener('mousedown', handleClick)
+    return () => window.removeEventListener('mousedown', handleClick)
+  }, [])
+
+  return (
+    <div ref={ref} className='dropdown'>
+      <button className='dropdown-btn' onClick={() => setOpen(o => !o)}>
+        <span>{selected?.label ?? 'Select...'}</span>
+        <FontAwesomeIcon
+          icon={faChevronDown}
+          className={`dropdown-arrow ${open ? 'open' : ''}`}
+        />
+      </button>
+      {open && (
+        <div className='dropdown-menu'>
+          {options.map(option => (
+            <div
+              key={option.value}
+              className={`dropdown-item ${
+                option.value === value ? 'active' : ''
+              }`}
+              onClick={async () => {
+                await onChange(option.value)
+                setOpen(false)
+              }}
+            >
+              {option.label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

src/styles/dropdown.css

@@ -0,0 +1,29 @@
+@import 'tailwindcss';
+
+.dropdown {
+  @apply relative w-40;
+}
+
+.dropdown-btn {
+  @apply w-full flex items-center justify-between px-3 py-1.5 rounded-md cursor-pointer bg-(--col2) hover:bg-(--col3) border border-(--col4) hover:border-(--col5) text-white;
+}
+
+.dropdown-arrow {
+  @apply w-4 h-4 transition-transform stroke-current stroke-2 fill-none;
+}
+
+.dropdown-arrow.open {
+  @apply rotate-180;
+}
+
+.dropdown-menu {
+  @apply absolute z-50 mt-1 w-full rounded-md shadow-lg overflow-hidden bg-(--col2) border border-(--col4) divide-y divide-(--col4);
+}
+
+.dropdown-item {
+  @apply px-3 py-1.5 cursor-pointer transition-colors hover:bg-(--col3);
+}
+
+.dropdown-item.active {
+  @apply bg-(--col3) hover:bg-(--col4);
+}