style: consistent badges with sufficient color contrast

lib/mv_web/live/components/member_filter_component.ex

@@ -58,8 +58,9 @@ defmodule MvWeb.Components.MemberFilterComponent do
   def render(assigns) do
     ~H"""
     <div
-      class="relative"
+      class="relative member-filter-dropdown"
       id={@id}
+      phx-click-away={if @open, do: "close_dropdown", else: nil}
       phx-window-keydown={@open && "close_dropdown"}
       phx-key="Escape"
       phx-target={@myself}
@@ -89,21 +90,23 @@ defmodule MvWeb.Components.MemberFilterComponent do
             @boolean_filters
           )}
         </span>
-        <span
+        <.badge
           :if={active_boolean_filters_count(@boolean_filters) > 0}
-          class="badge badge-primary badge-sm"
+          variant="primary"
+          size="sm"
         >
           {active_boolean_filters_count(@boolean_filters)}
-        </span>
-        <span
+        </.badge>
+        <.badge
           :if={
             (@cycle_status_filter || map_size(@group_filters) > 0) &&
               active_boolean_filters_count(@boolean_filters) == 0
           }
-          class="badge badge-primary badge-sm"
+          variant="primary"
+          size="sm"
         >
           {@member_count}
-        </span>
+        </.badge>
       </button>
       
     <!--
@@ -118,8 +121,6 @@ defmodule MvWeb.Components.MemberFilterComponent do
         :if={@open}
         tabindex="0"
         class="absolute left-0 mt-2 w-[28rem] rounded-box border border-base-300 bg-base-100 p-4 shadow-xl z-[100]"
-        phx-click-away="close_dropdown"
-        phx-target={@myself}
         role="dialog"
         aria-label={gettext("Member filter")}
       >