From c148936657e82810f46df48c03923e2a232fc829 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Mon, 11 Aug 2025 23:04:36 +0330
Subject: [PATCH] change: accordion styling

---
 .../[name]/(Profile)/profile/settings/page.tsx   | 16 ++++++++--------
 src/components/utils/Accordion.tsx               |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/[name]/(Profile)/profile/settings/page.tsx b/src/app/[name]/(Profile)/profile/settings/page.tsx
index eb18bd9..f8c9531 100644
--- a/src/app/[name]/(Profile)/profile/settings/page.tsx
+++ b/src/app/[name]/(Profile)/profile/settings/page.tsx
@@ -34,7 +34,7 @@ function UserSettingsIndex() {
                         group='1'
                     >
                         <div
-                            className="flex w-full mt-3 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                            className="flex w-full h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
                         >
                             <span className="inline-flex items-center gap-2.5 text-sm2">
                                 <MedalStar size="16" color="#333333" />
@@ -44,7 +44,7 @@ function UserSettingsIndex() {
                         </div>
 
                         <div
-                            className="flex w-full mt-5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                            className="flex w-full my-3 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
                         >
                             <span className="inline-flex items-center gap-2.5 text-sm2">
                                 <MedalStar size="16" color="#333333" />
@@ -60,7 +60,7 @@ function UserSettingsIndex() {
                         group='1'
                     >
                         <div
-                            className="flex w-full mt-3 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                            className="flex w-full h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
                         >
                             <span className="inline-flex items-center gap-2.5 text-sm2">
                                 <MedalStar size="16" color="#333333" />
@@ -70,7 +70,7 @@ function UserSettingsIndex() {
                         </div>
 
                         <div
-                            className="flex w-full mt-5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                            className="flex w-full my-3 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
                         >
                             <span className="inline-flex items-center gap-2.5 text-sm2">
                                 <MedalStar size="16" color="#333333" />
@@ -80,7 +80,7 @@ function UserSettingsIndex() {
                         </div>
 
                         <div
-                            className="flex w-full mt-5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                            className="flex w-full my-3 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
                         >
                             <span className="inline-flex items-center gap-2.5 text-sm2">
                                 <MedalStar size="16" color="#333333" />
@@ -96,7 +96,7 @@ function UserSettingsIndex() {
                         group='1'
                     >
                         <div
-                            className="flex w-full mt-3 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                            className="flex w-full h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
                         >
                             <span className="inline-flex items-center gap-2.5 text-sm2">
                                 <MedalStar size="16" color="#333333" />
@@ -106,7 +106,7 @@ function UserSettingsIndex() {
                         </div>
 
                         <div
-                            className="flex w-full mt-5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                            className="flex w-full my-3 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
                         >
                             <span className="inline-flex items-center gap-2.5 text-sm2">
                                 <MedalStar size="16" color="#333333" />
@@ -116,7 +116,7 @@ function UserSettingsIndex() {
                         </div>
 
                         <div
-                            className="flex w-full mt-5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
+                            className="flex w-full my-3 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 focus:outline-none focus:ring-2 focus:ring-black"
                         >
                             <span className="inline-flex items-center gap-2.5 text-sm2">
                                 <MedalStar size="16" color="#333333" />
diff --git a/src/components/utils/Accordion.tsx b/src/components/utils/Accordion.tsx
index b08b6af..d3d9a8c 100644
--- a/src/components/utils/Accordion.tsx
+++ b/src/components/utils/Accordion.tsx
@@ -40,7 +40,7 @@ function Accordion({ initial, group, title, icon: Icon, children, className, ...
     return (
         <div
             className={clsx(
-                'rounded-normal py-3',
+                'rounded-normal',
                 className
             )}
             {...rest}
@@ -50,7 +50,7 @@ function Accordion({ initial, group, title, icon: Icon, children, className, ...
                 onClick={toggle}
                 data-active={state}
                 className={clsx(
-                    'hover:underline rounded-normal flex items-center justify-between w-full',
+                    'hover:underline rounded-normal flex items-center h-full py-3 justify-between w-full',
                     'active:brightness-97 hover:brightness-99',
                     'data-[active=true]:rounded-b-none data-[active=true]:border-b-0 **:pointer-events-none'
                 )}