Update cycle button styling and text

Make cycle button match PaymentFilterComponent and Columns button style.
Show 'Current Cycle Payment Status' or 'Last Cycle Payment Status'
based on active state. Button shows active state when current cycle
is selected.
This commit is contained in:
Moritz 2025-12-18 13:47:23 +01:00
parent effb710741
commit f25e198b0e
Signed by: moritz
GPG key ID: 1020A035E5DD0824
3 changed files with 71 additions and 19 deletions

View file

@ -42,23 +42,34 @@
cycle_status_filter={@cycle_status_filter}
member_count={length(@members)}
/>
<div class="flex gap-2 items-center">
<button
type="button"
phx-click="toggle_cycle_view"
class={[
"btn btn-sm btn-outline gap-2",
@cycle_status_filter && "btn-active"
]}
aria-label={gettext("Show Last/Current Cycle Payment Status")}
title={gettext("Show Last/Current Cycle Payment Status")}
>
<.icon name="hero-arrow-path" class="size-4" />
<span class="hidden sm:inline">
{gettext("Show Last/Current Cycle Payment Status")}
</span>
</button>
</div>
<button
type="button"
phx-click="toggle_cycle_view"
class={[
"btn gap-2",
@show_current_cycle && "btn-active"
]}
aria-label={
if(@show_current_cycle,
do: gettext("Current Cycle Payment Status"),
else: gettext("Last Cycle Payment Status")
)
}
title={
if(@show_current_cycle,
do: gettext("Current Cycle Payment Status"),
else: gettext("Last Cycle Payment Status")
)
}
>
<.icon name="hero-arrow-path" class="h-5 w-5" />
<span class="hidden sm:inline">
{if(@show_current_cycle,
do: gettext("Current Cycle Payment Status"),
else: gettext("Last Cycle Payment Status")
)}
</span>
</button>
<.live_component
module={MvWeb.Components.FieldVisibilityDropdownComponent}
id="field-visibility-dropdown"