From 1efb435dad6121ee4244029cf674c60adcaf1ad0 Mon Sep 17 00:00:00 2001
From: payacom <59262811+payacom@users.noreply.github.com>
Date: Wed, 16 Sep 2026 18:01:01 +0330
Subject: [PATCH] fix(ui): edit/verify sizes & colors selection buttons use
 rounded-2xl

These raw <button> selection chips used rounded-full (always a full pill)
instead of the app's standard rounded-2xl radius used by every other
button/chip (btnPrimary/btnDefault/filterChipClass). Gender and
cooperation-type pages already used AuthNextButton (already rounded-2xl),
so only sizes/colors needed the radius change.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app/(auth)/verify/colors/page.tsx | 4 ++--
 src/app/(auth)/verify/sizes/page.tsx  | 8 ++++----
 src/app/settings/edit/colors/page.tsx | 4 ++--
 src/app/settings/edit/sizes/page.tsx  | 8 ++++----
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/(auth)/verify/colors/page.tsx b/src/app/(auth)/verify/colors/page.tsx
index 4c5888d..36f1a56 100644
--- a/src/app/(auth)/verify/colors/page.tsx
+++ b/src/app/(auth)/verify/colors/page.tsx
@@ -106,7 +106,7 @@ function Colors() {
 
           <div className="flex justify-center gap-2 mt-4 w-full max-w-[320px]">
             <button
-              className={`p-1 rounded-full w-full border text-sm flex items-center justify-center gap-1 ${
+              className={`p-1 rounded-2xl w-full border text-sm flex items-center justify-center gap-1 ${
                 selectedButton === 1
                   ? "btn-modern--selected text-white"
                   : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
@@ -116,7 +116,7 @@ function Colors() {
               {t("auth.eyeColor")}
             </button>
             <button
-              className={`p-1 rounded-full w-full border text-sm flex items-center justify-center gap-1 ${
+              className={`p-1 rounded-2xl w-full border text-sm flex items-center justify-center gap-1 ${
                 selectedButton === 2
                   ? "btn-modern--selected text-white"
                   : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
diff --git a/src/app/(auth)/verify/sizes/page.tsx b/src/app/(auth)/verify/sizes/page.tsx
index 343633a..fc0389e 100644
--- a/src/app/(auth)/verify/sizes/page.tsx
+++ b/src/app/(auth)/verify/sizes/page.tsx
@@ -98,7 +98,7 @@ function Sizes() {
 
           <div className="flex gap-2 mt-4 w-full max-w-[320px]">
             <button
-              className={`p-1 rounded-full w-1/3 border text-sm flex items-center justify-center gap-1  ${
+              className={`p-1 rounded-2xl w-1/3 border text-sm flex items-center justify-center gap-1  ${
                 selectedButton === 1
                   ? "btn-modern--selected text-white"
                   : "bg-tertiary-light dark:bg-tertiary-dark text-black border-gray-400"
@@ -115,7 +115,7 @@ function Sizes() {
               {t("auth.height")}
             </button>
             <button
-              className={`p-1 rounded-full w-1/3 border text-sm flex items-center justify-center gap-1 ${
+              className={`p-1 rounded-2xl w-1/3 border text-sm flex items-center justify-center gap-1 ${
                 selectedButton === 2
                   ? "btn-modern--selected text-white"
                   : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
@@ -132,7 +132,7 @@ function Sizes() {
               {t("auth.weight")}
             </button>
             <button
-              className={`p-1 rounded-full w-1/3 border text-sm flex items-center justify-center gap-1 ${
+              className={`p-1 rounded-2xl w-1/3 border text-sm flex items-center justify-center gap-1 ${
                 selectedButton === 3
                   ? "btn-modern--selected text-white"
                   : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
@@ -174,7 +174,7 @@ function Sizes() {
                 {sizes.map((sizeOption) => (
                   <button
                     key={sizeOption}
-                    className={`p-2 py-1 rounded-full border text-sm full ${
+                    className={`p-2 py-1 rounded-2xl border text-sm full ${
                       size === sizeOption
                         ? "btn-modern--selected text-white"
                         : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
diff --git a/src/app/settings/edit/colors/page.tsx b/src/app/settings/edit/colors/page.tsx
index 21daae0..c36024f 100644
--- a/src/app/settings/edit/colors/page.tsx
+++ b/src/app/settings/edit/colors/page.tsx
@@ -103,7 +103,7 @@ function Colors() {
         {/* Buttons for categories */}
         <div className="flex justify-center gap-2 mt-4 w-full max-w-[320px]">
           <button
-            className={`p-1 rounded-full w-full border text-sm flex items-center justify-center gap-1 ${
+            className={`p-1 rounded-2xl w-full border text-sm flex items-center justify-center gap-1 ${
               selectedButton === 1
                 ? "btn-modern--selected text-white"
                 : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
@@ -113,7 +113,7 @@ function Colors() {
             {t("settings.edit.colors.eyeColor")}
           </button>
           <button
-            className={`p-1 rounded-full w-full border text-sm flex items-center justify-center gap-1 ${
+            className={`p-1 rounded-2xl w-full border text-sm flex items-center justify-center gap-1 ${
               selectedButton === 2
                 ? "btn-modern--selected text-white"
                 : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
diff --git a/src/app/settings/edit/sizes/page.tsx b/src/app/settings/edit/sizes/page.tsx
index 863ab45..d9d2c6c 100644
--- a/src/app/settings/edit/sizes/page.tsx
+++ b/src/app/settings/edit/sizes/page.tsx
@@ -78,7 +78,7 @@ function Sizes() {
           <>
           <div className="flex gap-2 mt-4 w-full max-w-[320px]">
             <button
-              className={`p-1 rounded-full w-1/3 border text-sm flex items-center justify-center gap-1  ${
+              className={`p-1 rounded-2xl w-1/3 border text-sm flex items-center justify-center gap-1  ${
                 selectedButton === 1
                   ? "btn-modern--selected text-white"
                   : "bg-tertiary-light dark:bg-tertiary-dark text-black border-gray-400"
@@ -89,7 +89,7 @@ function Sizes() {
               {t("settings.edit.sizes.height")}
             </button>
             <button
-              className={`p-1 rounded-full w-1/3 border text-sm flex items-center justify-center gap-1 ${
+              className={`p-1 rounded-2xl w-1/3 border text-sm flex items-center justify-center gap-1 ${
                 selectedButton === 2
                   ? "btn-modern--selected text-white"
                   : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
@@ -100,7 +100,7 @@ function Sizes() {
               {t("settings.edit.sizes.weight")}
             </button>
             <button
-              className={`p-1 rounded-full w-1/3 border text-sm flex items-center justify-center gap-1 ${
+              className={`p-1 rounded-2xl w-1/3 border text-sm flex items-center justify-center gap-1 ${
                 selectedButton === 3
                   ? "btn-modern--selected text-white"
                   : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
@@ -136,7 +136,7 @@ function Sizes() {
                 {sizes.map((sizeOption) => (
                   <button
                     key={sizeOption}
-                    className={`p-2 py-1 rounded-full border text-sm full ${
+                    className={`p-2 py-1 rounded-2xl border text-sm full ${
                       size === sizeOption
                         ? "btn-modern--selected text-white"
                         : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"