From 15c1b76db510f57585bcb52d2c6b42747ba04522 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 28 May 2025 10:50:55 +0200
Subject: [PATCH] refactor(pricing-plans): improve label class binding for
 payment frequency selection

---
 .../subscription/pricing-plans.blade.php        | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/resources/views/livewire/subscription/pricing-plans.blade.php b/resources/views/livewire/subscription/pricing-plans.blade.php
index d9e4119ee..1c5cde63a 100644
--- a/resources/views/livewire/subscription/pricing-plans.blade.php
+++ b/resources/views/livewire/subscription/pricing-plans.blade.php
@@ -4,17 +4,22 @@
             <fieldset
                 class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-sm dark:text-white gap-x-1 dark:bg-white/5 bg-black/5">
                 <legend class="sr-only">Payment frequency</legend>
-                <label class="cursor-pointer rounded-sm px-2.5 py-1"
-                    :class="selected === 'monthly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
+                <label
+                    :class="selected === 'monthly' ?
+                        'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
+                        'cursor-pointer rounded-sm px-2.5 py-1'">
                     <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
                         class="sr-only">
-                    <span>Monthly</span>
+                    <span :class="selected === 'monthly' ? 'dark:text-white' : ''">Monthly</span>
                 </label>
-                <label class="cursor-pointer rounded-sm px-2.5 py-1"
-                    :class="selected === 'yearly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
+                <label
+                    :class="selected === 'yearly' ?
+                        'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
+                        'cursor-pointer rounded-sm px-2.5 py-1'">
                     <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
                         class="sr-only">
-                    <span>Annually <span class="text-xs dark:text-warning text-coollabs">(save ~20%)</span></span>
+                    <span :class="selected === 'yearly' ? 'dark:text-white' : ''">Annually <span
+                            class="text-xs dark:text-warning text-coollabs">(save ~20%)</span></span>
                 </label>
             </fieldset>
         </div>