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

style: separate member card actions into footer

Browse Source
This commit is contained in:
Nico 2026-03-31 01:12:35 -07:00
parent 12b514262e
commit 1e63ed9726
2 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -545,6 +545,7 @@ export default function ManageHousehold() {
return (
<div key={member.id} className="member-card">
<div className="member-main">
<div className="member-avatar" aria-hidden="true">{roleMeta.icon}</div>
<div className="member-info">
<div className="member-topline">
@ -556,6 +557,7 @@ export default function ManageHousehold() {
<span className="member-name">{member.username}</span>
<span className="member-meta">ID #{member.id}</span>
</div>
</div>
{isManager && !isSelf && member.role !== "owner" && (
<div className="member-actions">
<button

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

@ -381,10 +381,9 @@ body.dark-mode .invite-status-badge.is-used {
}
.member-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.85rem;
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 0.9rem;
padding: 0.95rem 1rem;
background: rgba(255, 255, 255, 1);
border: 1px solid var(--border);
@ -420,6 +419,13 @@ body.dark-mode .member-card:hover {
font-size: 1.15rem;
}
.member-main {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.85rem;
align-items: flex-start;
}
.member-info {
display: flex;
flex-direction: column;
@ -489,7 +495,10 @@ body.dark-mode .member-card:hover {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
margin-top: 0.4rem;
justify-content: flex-end;
align-items: center;
padding-top: 0.75rem;
border-top: 1px solid color-mix(in srgb, var(--color-border-light) 82%, transparent);
}
.member-role-action {
@ -518,6 +527,11 @@ body.dark-mode .member-role-action:hover:not(:disabled) {
color: #f3f9ff;
}
[data-theme="dark"] .member-actions,
body.dark-mode .member-actions {
border-top-color: color-mix(in srgb, var(--color-border-medium) 88%, transparent);
}
/* Danger Zone */
.danger-zone {
border-color: color-mix(in srgb, var(--danger) 30%, transparent);
@ -623,12 +637,9 @@ body.dark-mode .danger-zone {
grid-template-columns: 1fr;
}
.member-card {
grid-template-columns: auto 1fr;
}
.member-actions {
width: 100%;
justify-content: flex-start;
}
.member-actions button,