From d9648a38907cfac52d5dff07e413cb6e5ec618ef Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Mon, 13 Apr 2026 23:35:24 +0300
Subject: [PATCH] refactor(frontend): align department role menu style

---
 frontend/src/app/departments/[id]/page.tsx | 23 +++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/departments/[id]/page.tsx b/frontend/src/app/departments/[id]/page.tsx
index 24f03f8b..bd0f5bc6 100644
--- a/frontend/src/app/departments/[id]/page.tsx
+++ b/frontend/src/app/departments/[id]/page.tsx
@@ -197,11 +197,11 @@ function DepartmentMemberRow({
             </button>
 
             {isRoleMenuOpen ? (
-              <div className="app-surface absolute left-0 top-[calc(100%+0.5rem)] z-30 min-w-[220px] rounded-xl p-2 shadow-[0_12px_32px_rgba(0,0,0,0.35)]">
-                <div className="mb-1 px-2 py-1 text-xs font-medium text-[var(--muted-foreground)]">
+              <div className="app-menu absolute left-0 top-[calc(100%+0.5rem)] z-30 min-w-[220px] rounded-xl py-1.5">
+                <div className="px-3 pb-1 pt-0.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-[var(--muted-foreground)]">
                   Роль участника
                 </div>
-                <div className="space-y-1">
+                <div className="py-1">
                   {roleOptions.map((role) => {
                     const isSelected = member.role?.id === role.id;
                     return (
@@ -213,14 +213,18 @@ function DepartmentMemberRow({
                           void onAssignRole(member.employee.id, role.id);
                         }}
                         disabled={isRoleBusy}
-                        className="app-action-secondary flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm disabled:opacity-50"
+                        className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm text-[var(--foreground)] transition hover:bg-[var(--surface-secondary)] disabled:opacity-50"
                       >
                         <span className="truncate">{role.name}</span>
-                        {isSelected ? <Check size={14} className="shrink-0" /> : null}
+                        {isSelected ? <Check size={14} className="app-accent-text shrink-0" /> : null}
                       </button>
                     );
                   })}
 
+                  {member.role ? (
+                    <div className="app-divider my-1 border-t" />
+                  ) : null}
+
                   {member.role ? (
                     <button
                       type="button"
@@ -229,22 +233,23 @@ function DepartmentMemberRow({
                         void onAssignRole(member.employee.id, null);
                       }}
                       disabled={isRoleBusy}
-                      className="app-action-danger flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm disabled:opacity-50"
+                      className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm text-[var(--danger-foreground)] transition hover:bg-[var(--danger-soft)] disabled:opacity-50"
                     >
                       <span>Снять роль</span>
-                      <Trash2 size={14} className="shrink-0" />
+                      <Trash2 size={14} className="shrink-0 text-[var(--danger-foreground)]" />
                     </button>
                   ) : null}
 
+                  <div className="app-divider my-1 border-t" />
                   <button
                     type="button"
                     onClick={() => {
                       onToggleRoleMenu(null);
                       onCreateRole();
                     }}
-                    className="app-action-secondary flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm"
+                    className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--foreground)] transition hover:bg-[var(--surface-secondary)]"
                   >
-                    <Plus size={14} className="shrink-0" />
+                    <Plus size={14} className="app-text-muted shrink-0" />
                     Создать роль
                   </button>
                 </div>