style: consistent badges with sufficient color contrast

lib/mv_web/live/member_live/index.html.heex

@@ -358,15 +358,15 @@
       :if={:membership_fee_status in @member_fields_visible}
       label={gettext("Membership Fee Status")}
     >
-      <%= if badge = MvWeb.MemberLive.Index.MembershipFeeStatus.format_cycle_status_badge(
-        MvWeb.MemberLive.Index.MembershipFeeStatus.get_cycle_status_for_member(member, @show_current_cycle)
+      <%= if badge = MembershipFeeStatus.format_cycle_status_badge(
+        MembershipFeeStatus.get_cycle_status_for_member(member, @show_current_cycle)
       ) do %>
-        <span class={["badge", badge.color]}>
+        <.badge variant={badge.variant}>
           <.icon name={badge.icon} class="size-4" />
           {badge.label}
-        </span>
+        </.badge>
       <% else %>
-        <span class="badge badge-ghost">{gettext("No cycle")}</span>
+        <.badge variant="neutral">{gettext("No cycle")}</.badge>
       <% end %>
     </:col>
     <:col
@@ -386,12 +386,13 @@
       }
     >
       <%= for group <- (member.groups || []) do %>
-        <span
-          class="badge badge-outline badge-primary"
+        <.badge
+          variant="primary"
+          style="outline"
           aria-label={gettext("Member of group %{name}", name: group.name)}
         >
           {group.name}
-        </span>
+        </.badge>
       <% end %>
       <%= if (member.groups || []) == [] do %>
         <span class="text-base-content/50">—</span>