nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: highlight member role actions

Browse Source
This commit is contained in:
Nico 2026-03-31 00:00:28 -07:00
parent d31fb6c79f
commit 93e3d42edc
2 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/manage/ManageHousehold.jsx
View File

@ -536,7 +536,7 @@ export default function ManageHousehold() {
<div className="member-actions">
<button
onClick={() => handleUpdateRole(member.id, member.role, member.username)}
className="btn-secondary btn-small"
className="btn-secondary btn-small member-role-action"
>
{member.role === "admin" ? "Make Member" : "Make Admin"}
</button>

26
frontend/src/styles/components/manage/ManageHousehold.css
View File

@ -453,6 +453,32 @@ body.dark-mode .member-card:hover {
margin-top: 0.4rem;
}
.member-role-action {
background: rgba(30, 144, 255, 0.14);
color: var(--primary-dark);
border-color: rgba(30, 144, 255, 0.34);
}
.member-role-action:hover:not(:disabled) {
background: rgba(30, 144, 255, 0.22);
border-color: rgba(30, 144, 255, 0.54);
color: var(--primary-dark);
}
[data-theme="dark"] .member-role-action,
body.dark-mode .member-role-action {
background: rgba(30, 144, 255, 0.22);
color: #d8ecff;
border-color: rgba(95, 178, 255, 0.4);
}
[data-theme="dark"] .member-role-action:hover:not(:disabled),
body.dark-mode .member-role-action:hover:not(:disabled) {
background: rgba(30, 144, 255, 0.32);
border-color: rgba(95, 178, 255, 0.6);
color: #f3f9ff;
}
/* Danger Zone */
.danger-zone {
border-color: color-mix(in srgb, var(--danger) 30%, transparent);