ux: use ui-card for proposal vote cards

This commit is contained in:
Marco Allegretti 2026-01-30 10:49:28 +01:00
parent 96e53c44ac
commit 0ecade3c71

View file

@ -209,7 +209,7 @@ const proposalId = id ?? '';
const safeOptDesc = opt.description ? escapeHtml(opt.description) : ''; const safeOptDesc = opt.description ? escapeHtml(opt.description) : '';
return ` return `
<div class="option ${isVoting ? 'votable' : ''} ${isWinner ? 'winner' : ''} method-${method}" data-id="${opt.id}"> <div class="option ui-card ${isVoting ? 'votable' : ''} ${isWinner ? 'winner' : ''} method-${method}" data-id="${opt.id}">
<div class="option-info"> <div class="option-info">
<span class="option-label">${safeLabel} ${isWinner ? '🏆' : ''}</span> <span class="option-label">${safeLabel} ${isWinner ? '🏆' : ''}</span>
${safeOptDesc ? `<span class="option-desc">${safeOptDesc}</span>` : ''} ${safeOptDesc ? `<span class="option-desc">${safeOptDesc}</span>` : ''}
@ -543,7 +543,7 @@ const proposalId = id ?? '';
const modal = document.createElement('div'); const modal = document.createElement('div');
modal.className = 'edit-modal'; modal.className = 'edit-modal';
modal.innerHTML = ` modal.innerHTML = `
<div class="modal-content"> <div class="modal-content ui-card ui-card-pad-xl">
<h2>Edit Proposal</h2> <h2>Edit Proposal</h2>
<form id="edit-form"> <form id="edit-form">
<div class="form-group"> <div class="form-group">
@ -609,7 +609,7 @@ const proposalId = id ?? '';
const authorHref = `/users/${encodeURIComponent(String(c.author_name))}`; const authorHref = `/users/${encodeURIComponent(String(c.author_name))}`;
const content = escapeHtml(c.content); const content = escapeHtml(c.content);
return ` return `
<div class="comment"> <div class="comment ui-card ui-card-soft ui-card-pad-md">
<div class="comment-header"> <div class="comment-header">
<a href="${authorHref}" class="comment-author">${authorName}</a> <a href="${authorHref}" class="comment-author">${authorName}</a>
<span class="comment-date">${new Date(c.created_at).toLocaleString()}</span> <span class="comment-date">${new Date(c.created_at).toLocaleString()}</span>
@ -706,8 +706,7 @@ const proposalId = id ?? '';
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: var(--color-surface); border-width: 2px;
border: 2px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
padding: 1rem; padding: 1rem;
} }
@ -798,10 +797,7 @@ const proposalId = id ?? '';
} }
.modal-content { .modal-content {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px; border-radius: 12px;
padding: 2rem;
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
} }
@ -1162,10 +1158,7 @@ const proposalId = id ?? '';
} }
.comment { .comment {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
padding: 1rem;
} }
.comment-header { .comment-header {