fix(feedback): theme buttons, badge the Info button, simplify admin actions
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 9s
CI / integration (pull_request) Successful in 12s
CI / ui (pull_request) Successful in 47s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m8s
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 9s
CI / integration (pull_request) Successful in 12s
CI / ui (pull_request) Successful in 47s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m8s
- style the About feedback button and the form's Send/attach/remove buttons with
the accent/border tokens used by the New Game CTA, so they follow light/dark
theme (the previous .btn/.ghost classes were not defined globally); the attach
button is a neutral 📎 icon button with an aria-label
- show a round badge on the About 'Feedback' button when a reply is waiting
- admin: one 'ban from feedback' checkbox shared by Delete and Delete-all (via
button formaction); hide Mark read when already read and Archive when archived
- e2e: match the About button by substring (its name gains the badge)
This commit is contained in:
@@ -34,7 +34,9 @@
|
||||
<p class="muted">{t('about.version', { v: version })}</p>
|
||||
|
||||
{#if !(app.profile?.isGuest ?? true)}
|
||||
<button class="btn feedback" onclick={() => navigate('/feedback')}>{t('feedback.title')}</button>
|
||||
<button class="feedback" onclick={() => navigate('/feedback')}>
|
||||
{t('feedback.title')}{#if app.feedbackReplyUnread}<span class="fbadge">1</span>{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -78,4 +80,27 @@
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
}
|
||||
.feedback {
|
||||
align-self: flex-start;
|
||||
padding: 12px 18px;
|
||||
border: 1px solid var(--accent);
|
||||
background: var(--accent);
|
||||
color: var(--accent-text);
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
}
|
||||
/* The reply badge sits on the accent button, so it inverts the accent colours. */
|
||||
.fbadge {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
min-width: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent-text);
|
||||
color: var(--accent);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.55;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -94,13 +94,17 @@
|
||||
<input bind:this={fileInput} type="file" class="hidden" onchange={pickFile} />
|
||||
{#if file}
|
||||
<span class="fname">{file.name}</span>
|
||||
<button type="button" class="ghost" onclick={removeFile}>{t('feedback.removeFile')}</button>
|
||||
<button type="button" class="neutral" onclick={removeFile}>{t('feedback.removeFile')}</button>
|
||||
{:else}
|
||||
<button type="button" class="ghost" onclick={() => fileInput.click()} disabled={!enabled}>
|
||||
{t('feedback.attach')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="neutral attach"
|
||||
aria-label={t('feedback.attach')}
|
||||
title={t('feedback.attach')}
|
||||
onclick={() => fileInput.click()}
|
||||
disabled={!enabled}>📎</button>
|
||||
{/if}
|
||||
<button type="button" class="btn" onclick={send} disabled={!canSend}>{t('feedback.send')}</button>
|
||||
<button type="button" class="cta" onclick={send} disabled={!canSend}>{t('feedback.send')}</button>
|
||||
</div>
|
||||
|
||||
{#if fileError}<p class="err">{t('feedback.fileRejected')}</p>{/if}
|
||||
@@ -151,8 +155,30 @@
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.row .btn {
|
||||
.cta {
|
||||
margin-left: auto;
|
||||
padding: 12px 18px;
|
||||
border: 1px solid var(--accent);
|
||||
background: var(--accent);
|
||||
color: var(--accent-text);
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
}
|
||||
.neutral {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
}
|
||||
.cta:disabled,
|
||||
.neutral:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.attach {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user