fix: adjust styles for PermissionAccordions component for better usability

This commit is contained in:
hamed
2026-07-15 12:47:42 +03:30
parent 3634d37cb6
commit e94f832c8a
+12 -12
View File
@@ -169,19 +169,19 @@ function PermissionAccordions({
<p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] font-bold mb-[16px]">
مجوزهای دسترسی
</p>
<div className="flex flex-col gap-[8px]">
<div className="flex flex-col gap-[8px] w-full items-stretch">
{PERMISSION_SECTIONS.map((section) => {
const open = openKeys.has(section.key);
const sectionPerm = permissions[section.key] as Record<string, boolean>;
return (
<div
key={section.key}
className="border border-[#DBDBDB] dark:border-[#343645] rounded-[8px] overflow-hidden"
className="w-full border border-[#DBDBDB] dark:border-[#343645] rounded-[8px] overflow-hidden"
>
<button
type="button"
onClick={() => toggleOpen(section.key)}
className="w-full flex items-center justify-between px-[16px] min-h-[48px] cursor-pointer"
className="w-full flex items-center justify-between px-[16px] min-h-[64px] cursor-pointer"
>
<p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">
{section.title}
@@ -189,12 +189,12 @@ function PermissionAccordions({
<ChevronDown open={open} />
</button>
{open && (
<div className="px-[16px] pb-[16px]">
<div className="grid grid-cols-1 md:grid-cols-2 gap-[8px]">
<div className="px-[16px] pt-[8px] pb-[16px]">
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-[16px] gap-y-0">
{section.items.map((item) => (
<label
key={item.key}
className="flex items-center gap-[8px] cursor-pointer"
className="flex items-center gap-[11px] cursor-pointer py-[9px] min-h-[42px]"
>
<input
type="checkbox"
@@ -203,7 +203,7 @@ function PermissionAccordions({
onChange={(e) =>
onChange(section.key, item.key, e.target.checked)
}
className="w-[18px] h-[18px]"
className="w-[20px] h-[20px] shrink-0"
style={{ accentColor: "#5559CE", cursor: "pointer" }}
/>
<span className="text-[#616161] dark:text-[#A1A1A1] text-[14px]">
@@ -395,11 +395,11 @@ function SecretaryModal({
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-[16px]">
<div className="flex w-full flex-col items-start justify-start gap-[12px]">
<p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">نام</p>
<p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">نام</p>
<DefaultTextField placeholder="نام" value={form.name} onChange={(v) => setField("name", v)} disabled={disabled} />
</div>
<div className="flex w-full flex-col items-start justify-start gap-[12px]">
<p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">نام خانوادگی</p>
<p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">نام خانوادگی</p>
<DefaultTextField placeholder="نام خانوادگی" value={form.family} onChange={(v) => setField("family", v)} disabled={disabled} />
</div>
</div>
@@ -407,17 +407,17 @@ function SecretaryModal({
<div className="w-full grid grid-cols-1 md:grid-cols-2 gap-[16px]">
<div className="flex w-full flex-col items-start justify-start gap-[12px]">
<p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">شماره موبایل</p>
<p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">شماره موبایل</p>
<DefaultTextField placeholder="09121234567" value={form.telephone} onChange={(v) => setField("telephone", v)} disabled={disabled || mode === "edit"} />
</div>
<div className="flex w-full flex-col items-start justify-start gap-[12px]">
<p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">کد ملی</p>
<p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">کد ملی</p>
<DefaultTextField placeholder="کد ملی" value={form.national_code} onChange={(v) => setField("national_code", v)} disabled={disabled} />
</div>
</div>
<div className="flex w-full flex-col items-start justify-start gap-[12px]">
<p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">آدرس</p>
<p className="w-full text-right text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">آدرس</p>
<DefaultTextField placeholder="آدرس" value={form.address} onChange={(v) => setField("address", v)} disabled={disabled} multiline rows={2} />
</div>