fix: adjust styles for PermissionAccordions component for better usability
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user