fix: multi-choice filter styles

assets/controllers/result_filter_controller.js

@@ -19,7 +19,7 @@ export default class extends Controller {
         "quality": "",
     }
 
-    defaultOptions = '<option value="">n/a</option><option value="-">-</option>';
+    defaultOptions = '<option value="n/a">n/a</option><option value="-">-</option>';
 
     static outlets = ['tv-episode-list']
     static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'quality', 'loadingIcon', 'selectAll', 'downloadSelected']

src/User/Framework/Form/UserMediaPreferencesForm.php

@@ -53,9 +53,9 @@ class UserMediaPreferencesForm extends AbstractType
                 'data-preferred' => \json_encode($this->userPreferences->$fieldName),
             ],
             'row_attr' => [
-                'class' => 'filter-label'
+                'class' => 'filter-label text-white'
             ],
-            'label_attr' => ['class' => 'text-white block font-semibold mb-2'],
+            'label_attr' => ['class' => 'block font-semibold mb-2'],
             'choices' => $this->addDefaultChoice($choices),
             'required' => false,
             'multiple' => true,
@@ -68,13 +68,13 @@ class UserMediaPreferencesForm extends AbstractType
         $resolver->setDefaults([
             'action' => $this->urlGenerator->generate('app_user_media_preferences_submit'),
             'attr' => [
-                'class' => 'filter-items w-full p-4 bg-black/20 border-2 border-orange-500 text-md text-gray-500 dark:text-gray-50 rounded-lg',
+                'class' => 'filter-items w-full p-4 bg-black/20 border-2 border-orange-500 text-md dark:text-gray-50 rounded-lg',
             ]
         ]);
     }
 
     private function addDefaultChoice(array $choices): iterable
     {
-        return ['n/a' => ''] + $choices;
+        return ['n/a' => 'n/a'] + $choices;
     }
 }

templates/components/Filter.html.twig

@@ -6,9 +6,11 @@
      data-result-filter-tv-episode-list-outlet=".episode-list"
      data-action="change->result-filter#filter action-button:downloadSeason@window->result-filter#downloadSeason"
 >
+
     {% set preferences_form = form %}
     {{ form_start(preferences_form) }}
-        <div class="flex flex-col md:flex-row gap-2 justify-between">
+    <h3 class="font-bold text-lg mb-2 md:mb-4">Apply a filter to your results</h3>
+    <div class="flex flex-col md:flex-row gap-2 justify-between">
             {{ form_row(preferences_form.resolution) }}
             {{ form_row(preferences_form.codec) }}
             {{ form_row(preferences_form.language) }}
@@ -20,7 +22,7 @@
                     <label for="season">
                         Season
                     </label>
-                    <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 mb-4 py-1 md:py-2 text-center bg-orange-500 text-white rounded-ms"
+                    <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 mb-4 py-1 md:py-2 text-center bg-orange-500 rounded-ms"
                             {{ stimulus_action('result_filter', 'setSeason', 'change') }}
                             {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}
                     >

templates/components/TvEpisodeList.html.twig

@@ -16,7 +16,7 @@
                         active: 'true',
                     }) }}
             >
-                    <div class="p-4 md:p-6 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
+                    <div class="p-4 md:p-6 flex flex-col gap-6 bg-orange-500/60 bg-clip-padding backdrop-filter backdrop-blur-md rounded-md">
                         <div class="flex flex-col md:flex-row gap-4">
                             {% if episode['poster'] != null %}
                                 <img class="w-full md:w-64 rounded-lg" src="{{ episode['poster'] }}" />