style: consistent badges with sufficient color contrast

This commit is contained in:
carla 2026-02-26 08:33:52 +01:00
parent d614ad2219
commit d0b8cb672a
22 changed files with 534 additions and 77 deletions

View file

@ -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>

View file

@ -221,22 +221,22 @@ defmodule MvWeb.MemberLive.Show do
/>
<.data_field label={gettext("Last Cycle")} class="min-w-32">
<%= if @member.last_cycle_status do %>
<% status = @member.last_cycle_status %>
<span class={["badge", MembershipFeeHelpers.status_color(status)]}>
{format_status_label(status)}
</span>
<.badge variant={MembershipFeeHelpers.status_variant(@member.last_cycle_status)}>
{format_status_label(@member.last_cycle_status)}
</.badge>
<% else %>
<span class="badge badge-ghost">{gettext("No cycles")}</span>
<.badge variant="neutral">{gettext("No cycles")}</.badge>
<% end %>
</.data_field>
<.data_field label={gettext("Current Cycle")} class="min-w-36">
<%= if @member.current_cycle_status do %>
<% status = @member.current_cycle_status %>
<span class={["badge", MembershipFeeHelpers.status_color(status)]}>
{format_status_label(status)}
</span>
<.badge variant={
MembershipFeeHelpers.status_variant(@member.current_cycle_status)
}>
{format_status_label(@member.current_cycle_status)}
</.badge>
<% else %>
<span class="badge badge-ghost">{gettext("No cycles")}</span>
<.badge variant="neutral">{gettext("No cycles")}</.badge>
<% end %>
</.data_field>
</div>

View file

@ -183,9 +183,9 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
</:col>
<:col :let={cycle} label={gettext("Interval")}>
<span class="badge badge-outline">
<.badge variant="neutral" style="outline">
{MembershipFeeHelpers.format_interval(cycle.membership_fee_type.interval)}
</span>
</.badge>
</:col>
<:col :let={cycle} label={gettext("Amount")}>
@ -205,12 +205,10 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
</:col>
<:col :let={cycle} label={gettext("Status")}>
<% badge = MembershipFeeHelpers.status_color(cycle.status) %>
<% icon = MembershipFeeHelpers.status_icon(cycle.status) %>
<span class={["badge", badge]}>
<.icon name={icon} class="size-4" />
<.badge variant={MembershipFeeHelpers.status_variant(cycle.status)}>
<.icon name={MembershipFeeHelpers.status_icon(cycle.status)} class="size-4" />
{format_status_label(cycle.status)}
</span>
</.badge>
</:col>
<:action :let={cycle}>