hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust styles for PermissionAccordions component for better usability

Browse Source
This commit is contained in:
hamed
2026-07-15 12:47:42 +03:30
parent 3634d37cb6
commit e94f832c8a
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/pages/MySecretariesPage.tsx
+12 -12
View File
@@ -169,19 +169,19 @@ function PermissionAccordions({
<p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] font-bold mb-[16px]"> <p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] font-bold mb-[16px]">
مجوزهای دسترسی مجوزهای دسترسی
</p> </p>
<div className="flex flex-col gap-[8px]"> <div className="flex flex-col gap-[8px] w-full items-stretch">
{PERMISSION_SECTIONS.map((section) => { {PERMISSION_SECTIONS.map((section) => {
const open = openKeys.has(section.key); const open = openKeys.has(section.key);
const sectionPerm = permissions[section.key] as Record<string, boolean>; const sectionPerm = permissions[section.key] as Record<string, boolean>;
return ( return (
<div <div
key={section.key} 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 <button
type="button" type="button"
onClick={() => toggleOpen(section.key)} 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"> <p className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-medium">
{section.title} {section.title}
@@ -189,12 +189,12 @@ function PermissionAccordions({
<ChevronDown open={open} /> <ChevronDown open={open} />
</button> </button>
{open && ( {open && (
<div className="px-[16px] pb-[16px]"> <div className="px-[16px] pt-[8px] pb-[16px]">
<div className="grid grid-cols-1 md:grid-cols-2 gap-[8px]"> <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[16px] gap-y-0">
{section.items.map((item) => ( {section.items.map((item) => (
<label <label
key={item.key} 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 <input
type="checkbox" type="checkbox"
@@ -203,7 +203,7 @@ function PermissionAccordions({
onChange={(e) => onChange={(e) =>
onChange(section.key, item.key, e.target.checked) 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" }} style={{ accentColor: "#5559CE", cursor: "pointer" }}
/> />
<span className="text-[#616161] dark:text-[#A1A1A1] text-[14px]"> <span className="text-[#616161] dark:text-[#A1A1A1] text-[14px]">
@@ -395,11 +395,11 @@ function SecretaryModal({
</p> </p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-[16px]"> <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]"> <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} /> <DefaultTextField placeholder="نام" value={form.name} onChange={(v) => setField("name", v)} disabled={disabled} />
</div> </div>
<div className="flex w-full flex-col items-start justify-start gap-[12px]"> <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} /> <DefaultTextField placeholder="نام خانوادگی" value={form.family} onChange={(v) => setField("family", v)} disabled={disabled} />
</div> </div>
</div> </div>
@@ -407,17 +407,17 @@ function SecretaryModal({
<div className="w-full grid grid-cols-1 md:grid-cols-2 gap-[16px]"> <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]"> <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"} /> <DefaultTextField placeholder="09121234567" value={form.telephone} onChange={(v) => setField("telephone", v)} disabled={disabled || mode === "edit"} />
</div> </div>
<div className="flex w-full flex-col items-start justify-start gap-[12px]"> <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} /> <DefaultTextField placeholder="کد ملی" value={form.national_code} onChange={(v) => setField("national_code", v)} disabled={disabled} />
</div> </div>
</div> </div>
<div className="flex w-full flex-col items-start justify-start gap-[12px]"> <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} /> <DefaultTextField placeholder="آدرس" value={form.address} onChange={(v) => setField("address", v)} disabled={disabled} multiline rows={2} />
</div> </div>