From eaf599f248ad476aca95b2782fb881fcfe863092 Mon Sep 17 00:00:00 2001
From: Unchained <unchained@nodecrew.me>
Date: Sun, 29 Mar 2026 09:06:29 +0200
Subject: [PATCH] style: improve COD payment card selected state

- Add black border-2 and shadow when selected
- Change icon background to black with white icon when selected
- Add 'Selected' badge with checkmark icon
- Make text bolder and more visible when selected
- Add hover shadow effects
- Add 'selected' translation key for all locales
- Overall more lively and prominent selected state
---
 src/components/payment/PaymentMethodCard.tsx | 35 +++++++++++++++-----
 src/i18n/messages/de.json                    |  1 +
 src/i18n/messages/en.json                    |  1 +
 src/i18n/messages/fr.json                    |  1 +
 src/i18n/messages/sr.json                    |  1 +
 5 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/payment/PaymentMethodCard.tsx b/src/components/payment/PaymentMethodCard.tsx
index 77cbbd5..df1b4a0 100644
--- a/src/components/payment/PaymentMethodCard.tsx
+++ b/src/components/payment/PaymentMethodCard.tsx
@@ -37,10 +37,11 @@ export function PaymentMethodCard({
   return (
     <label
       className={cn(
-        "relative flex cursor-pointer items-start gap-3 rounded-lg border p-4 transition-all",
-        "hover:border-gray-400",
-        isSelected && "border-black bg-gray-50",
-        !isSelected && "border-gray-200 bg-white",
+        "relative flex cursor-pointer items-start gap-3 rounded-lg border-2 p-4 transition-all duration-200",
+        "hover:shadow-md",
+        isSelected
+          ? "border-black bg-white shadow-lg ring-1 ring-black/5"
+          : "border-gray-200 bg-white hover:border-gray-300",
         (disabled || !method.available) && "cursor-not-allowed opacity-50"
       )}
     >
@@ -54,13 +55,21 @@ export function PaymentMethodCard({
         className="sr-only"
       />
 
-      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100">
-        {Icon && <Icon className="h-5 w-5 text-gray-600" />}
+      <div className={cn(
+        "flex h-10 w-10 shrink-0 items-center justify-center rounded-full transition-colors",
+        isSelected ? "bg-black text-white" : "bg-gray-100 text-gray-600"
+      )}>
+        {Icon && <Icon className="h-5 w-5" />}
       </div>
 
       <div className="flex-1">
         <div className="flex items-center justify-between">
-          <span className="font-medium text-gray-900">{translatedName}</span>
+          <span className={cn(
+            "font-semibold transition-colors",
+            isSelected ? "text-black" : "text-gray-900"
+          )}>
+            {translatedName}
+          </span>
           {method.fee > 0 && (
             <span className="text-sm text-amber-600">
               +{new Intl.NumberFormat(locale === 'sr' ? 'sr-RS' : 'en-US', {
@@ -71,7 +80,10 @@ export function PaymentMethodCard({
           )}
         </div>
 
-        <p className="mt-1 text-sm text-gray-600">{translatedDescription}</p>
+        <p className={cn(
+          "mt-1 text-sm",
+          isSelected ? "text-gray-700" : "text-gray-600"
+        )}>{translatedDescription}</p>
 
         {!method.available && (
           <span className="mt-2 inline-block text-xs text-gray-500">
@@ -81,7 +93,12 @@ export function PaymentMethodCard({
 
         {isSelected && (
           <div className="absolute right-4 top-4">
-            <div className="h-2 w-2 rounded-full bg-black" />
+            <span className="inline-flex items-center gap-1 rounded-full bg-black px-3 py-1 text-xs font-medium text-white">
+              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              {t("selected")}
+            </span>
           </div>
         )}
       </div>
diff --git a/src/i18n/messages/de.json b/src/i18n/messages/de.json
index 015d806..3a4e8eb 100644
--- a/src/i18n/messages/de.json
+++ b/src/i18n/messages/de.json
@@ -392,6 +392,7 @@
     "securePayment": "Sichere Zahlungsabwicklung",
     "noMethodsAvailable": "Keine Zahlungsmethoden verfügbar",
     "singleMethodNotice": "Nachnahme ist die einzige verfügbare Zahlungsmethode für Ihren Standort",
+    "selected": "Ausgewählt",
     "cod": {
       "name": "Nachnahme",
       "description": "Bezahlen Sie bei Erhalt Ihrer Bestellung",
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 2553cbe..3581284 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -439,6 +439,7 @@
     "securePayment": "Secure payment processing",
     "noMethodsAvailable": "No payment methods available",
     "singleMethodNotice": "Cash on Delivery is the only available payment method for your location",
+    "selected": "Selected",
     "cod": {
       "name": "Cash on Delivery",
       "description": "Pay when you receive your order",
diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json
index 6adea04..0fdf159 100644
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -392,6 +392,7 @@
     "securePayment": "Paiement sécurisé",
     "noMethodsAvailable": "Aucun mode de paiement disponible",
     "singleMethodNotice": "Le paiement à la livraison est le seul mode de paiement disponible pour votre région",
+    "selected": "Sélectionné",
     "cod": {
       "name": "Paiement à la Livraison",
       "description": "Payez lors de la réception de votre commande",
diff --git a/src/i18n/messages/sr.json b/src/i18n/messages/sr.json
index 62d748f..5dd4b9e 100644
--- a/src/i18n/messages/sr.json
+++ b/src/i18n/messages/sr.json
@@ -438,6 +438,7 @@
     "securePayment": "Bezbedno plaćanje",
     "noMethodsAvailable": "Nema dostupnih načina plaćanja",
     "singleMethodNotice": "Plaćanje pouzećem je jedini dostupan način plaćanja za vašu lokaciju",
+    "selected": "Izabrano",
     "cod": {
       "name": "Plaćanje Pouzećem",
       "description": "Platite kada primite porudžbinu",