fix: use semantic colors across admin pages
Local Build and Deploy / deploy (push) Successful in 49s
Local Build and Deploy / deploy (push) Successful in 49s
This commit is contained in:
1 parent
0fe482009c
commit
84e4123f09
83 files changed
+466
-455
No files matched your search
@@ -79,12 +79,12 @@ export default async function AdminRadioApiKeysPage() {
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<Key size={20} className="text-[var(--color-primary)]" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Key size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("apiKeysForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("apiKeysForm.subtitle")}</p>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("apiKeysForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("apiKeysForm.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -207,7 +207,7 @@ export default async function AdminRadioApiKeysPage() {
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${k.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{k.isActive ? t("apiKeysForm.activeLabel") : t("apiKeysForm.inactiveLabel")}
|
||||
</span>
|
||||
|
||||
@@ -82,12 +82,12 @@ export default async function AdminRadioAutoDjPage() {
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<Disc3 size={20} className="text-[var(--color-primary)]" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Disc3 size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("autoDjForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("autoDjForm.subtitle")}</p>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("autoDjForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("autoDjForm.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -250,7 +250,7 @@ export default async function AdminRadioAutoDjPage() {
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${track.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${track.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{track.isActive ? t("autoDjForm.activeLabel") : t("autoDjForm.inactiveLabel")}
|
||||
</span>
|
||||
|
||||
@@ -62,12 +62,12 @@ export default async function AdminRadioBannersPage() {
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<LucideImage size={20} className="text-[var(--color-primary)]" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<LucideImage size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("banners.heading")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("banners.description")}</p>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("banners.heading")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("banners.description")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -160,7 +160,7 @@ export default async function AdminRadioBannersPage() {
|
||||
<span className="text-sm theme-text-muted dark:theme-text-muted inline-flex gap-2 items-center">
|
||||
{t("banners.byUser", { id: String(b.userId) })} · {formatDate(b.createdAt)} ·{" "}
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${b.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{b.isActive ? t("banners.active") : t("banners.hidden")}
|
||||
</span>
|
||||
|
||||
@@ -39,7 +39,7 @@ export function EmbedSnippet({
|
||||
return (
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center justify-between gap-4 mb-1">
|
||||
<h2 className="m-0 text-base font-bold text-[var(--color-text)]">{title}</h2>
|
||||
<h2 className="m-0 text-base font-bold text-[var(--admin-text)]">{title}</h2>
|
||||
<button type="button" className="btn btn-primary" onClick={copy}>
|
||||
{copied ? "Copied!" : "Copy"}
|
||||
</button>
|
||||
|
||||
@@ -54,12 +54,12 @@ export default async function AdminRadioEmbedPage() {
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<Code size={20} className="text-[var(--color-primary)]" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Code size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("embedPage.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("embedPage.subtitle")}</p>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("embedPage.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("embedPage.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -82,12 +82,12 @@ export default async function AdminRadioHistoryPage() {
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<Clock size={20} className="text-[var(--color-primary)]" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Clock size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("historyPage.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("historyPage.subtitle")}</p>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("historyPage.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("historyPage.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -142,7 +142,7 @@ export default async function AdminRadioHistoryPage() {
|
||||
{formatDate(h.endedAt)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-success-subtle)] text-[var(--color-text)]">
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-success-subtle)] text-[var(--admin-text)]">
|
||||
{t("historyPage.onAir")}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -51,12 +51,12 @@ export default async function AdminRadioModerationPage() {
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<Shield size={20} className="text-[var(--color-primary)]" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Shield size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("moderationPage.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("moderationPage.subtitle")}</p>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("moderationPage.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("moderationPage.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -205,12 +205,12 @@ export default async function AdminRadioMonitoringPage() {
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<Radio size={20} className="text-[var(--color-primary)]" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Radio size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("monitoring.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("monitoring.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
|
||||
{t("monitoring.subtitle", { timeout: FETCH_TIMEOUT_MS / 1000 })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -208,7 +208,7 @@ export default async function AdminRadioPage() {
|
||||
<td>{a.discordUsername ?? "\u2014"}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--color-error-subtle)] text-[var(--color-text)]" : "bg-[var(--color-primary)]/18 text-[var(--color-text)]"}`}
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-accent)]/18 text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{a.status}
|
||||
</span>
|
||||
@@ -251,7 +251,7 @@ export default async function AdminRadioPage() {
|
||||
<td>{sc.showName ?? "\u2014"}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{sc.isActive ? t("active") : t("inactive")}
|
||||
</span>
|
||||
|
||||
@@ -68,18 +68,18 @@ export default async function AdminRadioPointsPage({
|
||||
|
||||
<section className="mt-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<Star size={20} className="text-[var(--color-primary)]" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Star size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("pointsForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("pointsForm.subtitle")}</p>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("pointsForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("pointsForm.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{saved === "1" ? (
|
||||
<p>
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-success-subtle)] text-[var(--color-text)]">
|
||||
<span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--admin-success-subtle)] text-[var(--admin-text)]">
|
||||
{t("pointsForm.saved")}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -50,12 +50,12 @@ export default async function AdminRadioRanksPage() {
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<Medal size={20} className="text-[var(--color-primary)]" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Medal size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("ranksForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("ranksForm.subtitle")}</p>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("ranksForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("ranksForm.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -122,7 +122,7 @@ export default async function AdminRadioRanksPage() {
|
||||
<div className="flex justify-between items-baseline gap-3 mb-2">
|
||||
<strong>#{String(r.id)}</strong>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${r.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{r.isActive ? t("ranksForm.activeLabel") : t("ranksForm.inactiveLabel")}
|
||||
</span>
|
||||
|
||||
@@ -225,12 +225,12 @@ export default async function AdminRadioSettingsPage() {
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
|
||||
<Settings size={20} className="text-[var(--color-primary)]" />
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
|
||||
<Settings size={20} className="text-[var(--admin-accent)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("settingsForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("settingsForm.subtitle")}</p>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">{t("settingsForm.title")}</h1>
|
||||
<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">{t("settingsForm.subtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in new issue
Block a user