feat: restyle SubmitForm with Tailwind, inline button, and violet glow

src/components/SubmitForm.tsx

@@ -7,6 +7,18 @@ import { useRouter } from '@/navigation'
 const FORMATS = ['mp4', 'mp3', 'webm', 'mkv']
 const QUALITIES = ['best', '1080p', '720p', '480p', '360p']
 
+function Spinner() {
+  return (
+    <svg className="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none" aria-hidden>
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+    </svg>
+  )
+}
+
+const selectClass =
+  'rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-2 py-1 text-gray-900 dark:text-gray-50 text-sm outline-none focus:ring-2 focus:ring-violet-500'
+
 export function SubmitForm() {
   const t = useTranslations('home')
   const router = useRouter()
@@ -52,58 +64,82 @@ export function SubmitForm() {
   }
 
   return (
-    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 480 }}>
-      <label>
-        {t('urlLabel')}
+    <form onSubmit={handleSubmit} className="w-full max-w-2xl mx-auto">
+      {/* URL input with inline submit button */}
+      <div className="relative">
+        {/* Violet glow behind the input */}
+        <div className="absolute inset-0 -z-10 rounded-xl bg-violet-500 blur-3xl opacity-15 dark:opacity-20" aria-hidden />
+        <div className="flex rounded-xl border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 overflow-hidden shadow-sm focus-within:ring-2 focus-within:ring-violet-500">
           <input
             type="url"
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             required
             placeholder="https://www.youtube.com/watch?v=..."
-          style={{ display: 'block', width: '100%' }}
+            className="flex-1 px-4 py-3 bg-transparent text-sm outline-none placeholder:text-gray-400 dark:placeholder:text-slate-500"
           />
-      </label>
+          <button
+            type="submit"
+            disabled={loading}
+            className="flex items-center gap-2 px-5 py-3 bg-violet-600 hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-600 text-white text-sm font-medium transition-colors disabled:opacity-60"
+          >
+            {loading && <Spinner />}
+            {loading ? t('submitting') : t('submit')}
+          </button>
+        </div>
+      </div>
 
-      <label>
-        {t('format')}
-        <select value={format} onChange={(e) => setFormat(e.target.value)} style={{ display: 'block' }}>
+      {/* Options row */}
+      <div className="mt-4 flex flex-wrap items-center gap-x-5 gap-y-3 text-sm text-gray-600 dark:text-gray-400">
+        <label className="flex items-center gap-2">
+          <span>{t('format')}</span>
+          <select
+            value={format}
+            onChange={(e) => setFormat(e.target.value)}
+            className={selectClass}
+          >
             {FORMATS.map((f) => <option key={f}>{f}</option>)}
           </select>
         </label>
 
-      <label>
-        {t('quality')}
-        <select value={quality} onChange={(e) => setQuality(e.target.value)} style={{ display: 'block' }}>
+        <label className="flex items-center gap-2">
+          <span>{t('quality')}</span>
+          <select
+            value={quality}
+            onChange={(e) => setQuality(e.target.value)}
+            className={selectClass}
+          >
             {QUALITIES.map((q) => <option key={q}>{q}</option>)}
           </select>
         </label>
 
-      <label>
+        <label className="flex items-center gap-2 cursor-pointer">
           <input
             type="checkbox"
             checked={subtitles}
             onChange={(e) => setSubtitles(e.target.checked)}
-        />{' '}
-        {t('subtitles')}
+            className="accent-violet-600 w-4 h-4"
+          />
+          <span>{t('subtitles')}</span>
         </label>
 
-      <label>
+        <details className="w-full mt-1">
+          <summary className="cursor-pointer select-none text-gray-500 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
             {t('advanced')}
+          </summary>
           <input
             type="text"
             value={extraArgs}
             onChange={(e) => setExtraArgs(e.target.value)}
             placeholder='["--sponsorblock-remove","all"]'
-          style={{ display: 'block', width: '100%' }}
+            className="mt-2 w-full rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-50 outline-none focus:ring-2 focus:ring-violet-500"
           />
-      </label>
+        </details>
+      </div>
 
-      {error && <p style={{ color: 'red' }}>{error}</p>}
-
-      <button type="submit" disabled={loading}>
-        {loading ? t('submitting') : t('submit')}
-      </button>
+      {error && (
+        <p className="mt-3 text-sm text-red-600 dark:text-red-400">{error}</p>
+      )}
     </form>
   )
 }