modstagram/modstagram-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): edit/verify sizes & colors selection buttons use rounded-2xl

Browse Source 
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>
This commit is contained in:
payacom
2026-09-16 18:01:01 +03:30
parent 43896b4caf
commit 1efb435dad
4 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(auth)/verify/colors/page.tsx
View File

@@ -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"

8
src/app/(auth)/verify/sizes/page.tsx
View File

@@ -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"

4
src/app/settings/edit/colors/page.tsx
View File

@@ -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"

8
src/app/settings/edit/sizes/page.tsx
View File

@@ -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"