From e484b85bf5b3894e23e06e655c93d8468cdc0346 Mon Sep 17 00:00:00 2001
From: payacom <59262811+payacom@users.noreply.github.com>
Date: Wed, 16 Sep 2026 17:07:49 +0330
Subject: [PATCH] fix(ui): shared filter-chip/toggle radius matches CTA button
 (rounded-2xl)

btnFilterChip/btnFilterChipActive/toggleBtnClass rendered rounded-3xl (full
pill) at h-9, while primary/default buttons (apply/clear filter, etc.) use
rounded-2xl. Aligning the shared radius fixes this across every screen that
uses filterChipClass/toggleBtnClass (shop settings buyer/seller toggle and
order sub-tabs, expertise filters, project role modal, etc.) in one place.

Reverted the earlier per-button className override in FilterModal.tsx since
the shared class now already outputs rounded-2xl.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/models/FilterModal.tsx |  4 ++--
 src/lib/ui/buttonStyles.ts            | 11 +++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/models/FilterModal.tsx b/src/components/models/FilterModal.tsx
index 60961d2..fd4a3dc 100644
--- a/src/components/models/FilterModal.tsx
+++ b/src/components/models/FilterModal.tsx
@@ -232,7 +232,7 @@ function FilterModal({
             <div className="flex flex-wrap justify-center gap-2">
               <button
                 type="button"
-                className={filterChipClass(!selectedExpertise, "rounded-2xl")}
+                className={filterChipClass(!selectedExpertise)}
                 onClick={() => handleExpertiseSelect("")}
               >
                 {t("filters.all")}
@@ -243,7 +243,7 @@ function FilterModal({
                   <button
                     key={item._id}
                     type="button"
-                    className={filterChipClass(isActive, "rounded-2xl")}
+                    className={filterChipClass(isActive)}
                     onClick={() =>
                       handleExpertiseSelect(isActive ? "" : item.expertise)
                     }
diff --git a/src/lib/ui/buttonStyles.ts b/src/lib/ui/buttonStyles.ts
index 064d01c..3741b3a 100644
--- a/src/lib/ui/buttonStyles.ts
+++ b/src/lib/ui/buttonStyles.ts
@@ -27,17 +27,20 @@ export const btnSecondary = cn(btnDefault, "font-medium text-foreground/90");
 
 // h-9 اضافه شد تا دقیقاً هم‌ارتفاعِ toggleBtnClass باشه (اونجا صریح h-9 پاس داده
 // می‌شه) — قبلاً ارتفاعِ این چیپ‌ها فقط از py-1.5 می‌اومد و کوتاه‌تر از دکمه‌های
-// toggle/تایید بود، با اینکه هر دو rounded-3xl (کاملاً pill) بودن
+// toggle/تایید بود
+// گردی rounded-2xl — استانداردِ اپ برای هر دکمه/چیپ (عینِ RN: Button/GridChip/
+// FilterChip همه radius:16)، قبلاً rounded-3xl بود که در ارتفاعِ کم (h-9) کاملاً
+// pill می‌شد و با دکمه‌های تایید/اعمال فیلتر (btnPrimary/btnDefault: rounded-2xl) فرق داشت
 export const btnFilterChip = cn(
   btnBase,
-  "flex h-9 items-center justify-center rounded-3xl bg-white/90 px-4 text-xs font-semibold",
+  "flex h-9 items-center justify-center rounded-2xl bg-white/90 px-4 text-xs font-semibold",
   BTN_BORDER,
   "dark:bg-neutral-900/90"
 );
 
 export const btnFilterChipActive = cn(
   btnBase,
-  "btn-modern--selected flex h-9 items-center justify-center rounded-3xl px-4 text-xs font-semibold text-white",
+  "btn-modern--selected flex h-9 items-center justify-center rounded-2xl px-4 text-xs font-semibold text-white",
   BTN_BORDER
 );
 
@@ -48,7 +51,7 @@ export function filterChipClass(active: boolean, className?: string) {
 export function toggleBtnClass(active: boolean, className?: string) {
   return cn(
     btnBase,
-    "rounded-3xl px-4",
+    "rounded-2xl px-4",
     BTN_BORDER,
     active ? "btn-modern--selected text-white" : "bg-white/90 text-foreground dark:bg-neutral-900/90",
     className