chore/visual-fidelity-fixes #2

Merged
jennie merged 26 commits from chore/visual-fidelity-fixes into main 2026-04-30 12:36:10 +00:00
7 changed files with 19 additions and 21 deletions
Showing only changes of commit cb93f14160 - Show all commits

View file

@ -570,7 +570,7 @@ tbody td {
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
color: var(--c-founder); color: var(--c-founder);
border: 1px dashed rgba(138, 68, 32, 0.3); border: 1px dashed color-mix(in srgb, var(--ember) 30%, transparent);
padding: 2px 8px; padding: 2px 8px;
} }
@ -583,7 +583,7 @@ tbody td {
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
color: var(--c-founder); color: var(--c-founder);
border: 1px dashed rgba(138, 68, 32, 0.4); border: 1px dashed color-mix(in srgb, var(--ember) 40%, transparent);
border-radius: 50%; border-radius: 50%;
} }
@ -632,12 +632,12 @@ tbody td {
.status-upcoming { .status-upcoming {
color: var(--candle); color: var(--candle);
border-color: rgba(122, 90, 16, 0.3); border-color: color-mix(in srgb, var(--candle) 30%, transparent);
} }
.status-ongoing { .status-ongoing {
color: var(--green); color: var(--green);
border-color: rgba(74, 106, 56, 0.3); border-color: color-mix(in srgb, var(--green) 30%, transparent);
} }
.status-past { .status-past {
@ -647,7 +647,7 @@ tbody td {
.status-cancelled { .status-cancelled {
color: var(--ember); color: var(--ember);
border-color: rgba(138, 68, 32, 0.3); border-color: color-mix(in srgb, var(--ember) 30%, transparent);
margin-top: 4px; margin-top: 4px;
} }

View file

@ -65,7 +65,7 @@
<span class="item-sub">{{ member.email }}</span> <span class="item-sub">{{ member.email }}</span>
</div> </div>
<div class="item-meta"> <div class="item-meta">
<span class="badge" :class="member.circle">{{ member.circle }}</span> <CircleBadge :circle="member.circle" />
<span class="item-date">{{ formatDate(member.createdAt) }}</span> <span class="item-date">{{ formatDate(member.createdAt) }}</span>
</div> </div>
</div> </div>

View file

@ -16,7 +16,7 @@
<p v-if="member" class="member-email">{{ member.email }}</p> <p v-if="member" class="member-email">{{ member.email }}</p>
</div> </div>
<div v-if="member" class="header-badges"> <div v-if="member" class="header-badges">
<span class="badge" :class="member.circle">{{ member.circle }}</span> <CircleBadge :circle="member.circle" />
<span :class="statusClass(member.status)" class="status-badge">{{ member.status }}</span> <span :class="statusClass(member.status)" class="status-badge">{{ member.status }}</span>
</div> </div>
</div> </div>

View file

@ -108,9 +108,7 @@
</td> </td>
<td class="col-email">{{ member.email }}</td> <td class="col-email">{{ member.email }}</td>
<td> <td>
<span class="badge" :class="member.circle">{{ <CircleBadge :circle="member.circle" />
member.circle
}}</span>
</td> </td>
<td class="col-mono">${{ member.contributionAmount ?? 0 }}/mo</td> <td class="col-mono">${{ member.contributionAmount ?? 0 }}/mo</td>
<td> <td>
@ -1149,7 +1147,7 @@ th.sortable:hover {
text-transform: uppercase; text-transform: uppercase;
} }
.badge.status-active { .badge.status-active {
color: var(--green, #3a6b3a); color: var(--green);
border-color: rgba(58, 107, 58, 0.45); border-color: rgba(58, 107, 58, 0.45);
} }
.badge.status-pending_payment { .badge.status-pending_payment {
@ -1158,7 +1156,7 @@ th.sortable:hover {
} }
.badge.status-suspended { .badge.status-suspended {
color: var(--ember); color: var(--ember);
border-color: rgba(138, 68, 32, 0.45); border-color: color-mix(in srgb, var(--ember) 45%, transparent);
} }
.badge.status-cancelled { .badge.status-cancelled {
color: var(--text-faint); color: var(--text-faint);

View file

@ -643,8 +643,8 @@ tbody td {
} }
.status-accepted { .status-accepted {
color: var(--green, #4a7); color: var(--green);
border-color: var(--green, #4a7); border-color: var(--green);
} }
.status-expired { .status-expired {
@ -671,7 +671,7 @@ tbody td {
/* ---- STATUS INDICATORS ---- */ /* ---- STATUS INDICATORS ---- */
.status-ok { .status-ok {
color: var(--green, #4a7); color: var(--green);
font-size: 11px; font-size: 11px;
} }

View file

@ -850,7 +850,7 @@ const exportSeriesData = () => {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
color: var(--c-founder); color: var(--c-founder);
border: 1px dashed rgba(138, 68, 32, 0.4); border: 1px dashed color-mix(in srgb, var(--ember) 40%, transparent);
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
} }
@ -931,12 +931,12 @@ const exportSeriesData = () => {
.status-active { .status-active {
color: var(--green); color: var(--green);
border-color: rgba(74, 106, 56, 0.3); border-color: color-mix(in srgb, var(--green) 30%, transparent);
} }
.status-upcoming { .status-upcoming {
color: var(--candle); color: var(--candle);
border-color: rgba(122, 90, 16, 0.3); border-color: color-mix(in srgb, var(--candle) 30%, transparent);
} }
.status-completed { .status-completed {
@ -946,7 +946,7 @@ const exportSeriesData = () => {
.status-ongoing { .status-ongoing {
color: var(--green); color: var(--green);
border-color: rgba(74, 106, 56, 0.3); border-color: color-mix(in srgb, var(--green) 30%, transparent);
} }
/* ---- LINK BUTTONS ---- */ /* ---- LINK BUTTONS ---- */

View file

@ -954,8 +954,8 @@ const applyBatchVisibility = async (hidden) => {
} }
.sync-created { .sync-created {
color: var(--green, #4a7); color: var(--green);
border-color: var(--green, #4a7); border-color: var(--green);
} }
.sync-updated { .sync-updated {