pieced/pieced-portal
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile nav, locale-preserving navigation, accent button contrast
All checks were successful
Build and Push / build (push) Successful in 2m25s
Details

Browse Source
This commit is contained in:
admin
2026-05-29 22:12:51 +02:00
parent bfc2194e24
commit f2a9637058
39 changed files with 255 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/[locale]/dashboard/page.tsx
View File

@@ -344,7 +344,7 @@ export default async function DashboardPage() {
{canCreate && (
<Link
href="/dashboard/new"
className="shrink-0 inline-flex items-center gap-1.5 py-2 px-4 bg-accent text-white text-xs font-medium rounded-lg hover:bg-accent-dim transition-colors"
className="shrink-0 inline-flex items-center gap-1.5 py-2 px-4 bg-accent text-surface-0 text-xs font-medium rounded-lg hover:bg-accent-dim transition-colors"
>
<span>+</span> {t("createInstance")}
</Link>

14
src/app/[locale]/login/page.tsx
View File

@@ -1,11 +1,12 @@
"use client";
import { signIn } from "next-auth/react";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useTranslations, useLocale } from "next-intl";
import { Link, getPathname } from "@/i18n/navigation";
export default function LoginPage() {
const t = useTranslations("login");
const locale = useLocale();
return (
<div className="fixed inset-0 flex items-center justify-center bg-surface-0">
@@ -39,7 +40,14 @@ export default function LoginPage() {
</p>
<button
onClick={() => signIn("zitadel", { callbackUrl: "/dashboard" })}
onClick={() =>
signIn("zitadel", {
// Preserve the active locale across the OIDC round-trip.
// A bare "/dashboard" would resolve to the default (de)
// locale on return; getPathname prefixes it as needed.
callbackUrl: getPathname({ href: "/dashboard", locale }),
})
}
className="
w-full py-3 px-4 rounded-lg font-medium text-sm
bg-accent text-surface-0 cursor-pointer

14
src/app/[locale]/page.tsx
View File

@@ -1,5 +1,13 @@
import { redirect } from "next/navigation";
import { redirect } from "@/i18n/navigation";
export default function RootPage() {
redirect("/dashboard");
export default async function RootPage({
params,
}: {
params: Promise<{ locale: string }>;
}) {
// Locale-aware redirect: a bare next/navigation redirect("/dashboard")
// drops the prefix and lands non-default-locale users on the German
// dashboard. The i18n redirect prefixes per the active locale.
const { locale } = await params;
redirect({ href: "/dashboard", locale });
}

10
src/app/[locale]/register/page.tsx
View File

@@ -2,7 +2,7 @@
import { useState } from "react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useRouter, Link } from "@/i18n/navigation";
import { Card } from "@/components/ui/card";
type FormState = "idle" | "submitting" | "success" | "error";
@@ -120,7 +120,7 @@ export default function RegisterPage() {
</p>
<button
onClick={() => router.push("/login")}
className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
className="w-full py-2.5 px-4 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
>
{t("goToLogin")}
</button>
@@ -270,7 +270,7 @@ export default function RegisterPage() {
<button
type="submit"
disabled={state === "submitting"}
className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full py-2.5 px-4 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{state === "submitting" ? tCommon("loading") : t("submit")}
</button>
@@ -278,12 +278,12 @@ export default function RegisterPage() {
<p className="text-xs text-text-muted text-center mt-4">
{t("hasAccount")}{" "}
<a
<Link
href="/login"
className="text-accent hover:text-accent-dim transition-colors"
>
{tCommon("login")}
</a>
</Link>
</p>
</Card>
)}

2
src/app/[locale]/support/page.tsx
View File

@@ -48,7 +48,7 @@ export default async function SupportListPage() {
{!user.isPlatform && (
<Link
href="/support/new"
className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors"
className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors"
>
{t("newTicket")}
</Link>

4
src/components/admin/admin-panel.tsx
View File

@@ -246,7 +246,7 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
>
{t("requests")}
{pendingCount > 0 && tab !== "requests" && (
<span className="ml-1.5 inline-flex items-center justify-center h-4 min-w-[16px] px-1 text-[10px] font-bold bg-accent text-white rounded-full">
<span className="ml-1.5 inline-flex items-center justify-center h-4 min-w-[16px] px-1 text-[10px] font-bold bg-accent text-surface-0 rounded-full">
{pendingCount}
</span>
)}
@@ -308,7 +308,7 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
onClick={() => setFilter(f)}
className={`px-3 py-1 text-xs rounded-full transition-colors ${
filter === f
? "bg-accent text-white"
? "bg-accent text-surface-0"
: "bg-surface-2 text-text-muted hover:text-text-secondary border border-border"
}`}
>

4
src/components/admin/billing/custom-invoice-editor.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { useState, useMemo, useCallback } from "react";
import { useRouter } from "next/navigation";
import { useRouter } from "@/i18n/navigation";
import { useTranslations } from "next-intl";
import { Card, CardHeader } from "@/components/ui/card";
import type {
@@ -525,7 +525,7 @@ export function CustomInvoiceEditor({ draft, orgBilling }: Props) {
<button
onClick={issue}
disabled={busy !== null || !canIssue}
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
type="button"
>
{busy === "issue" ? t("issuing") : t("editorIssueBtn")}

4
src/components/admin/billing/draft-list.tsx
View File

@@ -57,7 +57,7 @@ export function DraftList({ drafts, orgNameMap }: Props) {
<p className="text-text-secondary mb-4">{t("draftsEmpty")}</p>
<Link
href="/admin/billing/invoices/new"
className="inline-block px-4 py-2 rounded-md bg-accent text-white text-sm"
className="inline-block px-4 py-2 rounded-md bg-accent text-surface-0 text-sm"
>
{t("newInvoiceBtn")}
</Link>
@@ -71,7 +71,7 @@ export function DraftList({ drafts, orgNameMap }: Props) {
<div className="flex justify-end p-3 border-b border-border">
<Link
href="/admin/billing/invoices/new"
className="inline-block px-3 py-1.5 rounded-md bg-accent text-white text-sm"
className="inline-block px-3 py-1.5 rounded-md bg-accent text-surface-0 text-sm"
>
{t("newInvoiceBtn")}
</Link>

2
src/components/admin/billing/generate-form.tsx
View File

@@ -216,7 +216,7 @@ export function GenerateForm({ orgs }: Props) {
<button
onClick={commit}
disabled={busy}
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
>
{busy ? t("saving") : t("commitBtn")}
</button>

6
src/components/admin/billing/invoice-detail-view.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { useState, Fragment } from "react";
import { useRouter } from "next/navigation";
import { useRouter } from "@/i18n/navigation";
import { useTranslations } from "next-intl";
import { Card, CardHeader } from "@/components/ui/card";
import type { CreditNote, InvoiceDetail, InvoiceStatus } from "@/types";
@@ -247,7 +247,7 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
<button
onClick={() => setNoteOpen(true)}
disabled={busyAction !== null}
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
>
{t("markPaidBtn")}
</button>
@@ -264,7 +264,7 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
<button
onClick={markPaid}
disabled={busyAction !== null}
className="px-3 py-1.5 rounded-md bg-accent text-white text-sm disabled:opacity-50"
className="px-3 py-1.5 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
>
{busyAction === "mark-paid" ? t("saving") : t("confirm")}
</button>

2
src/components/admin/billing/invoices-table.tsx
View File

@@ -112,7 +112,7 @@ export function InvoicesTable({ initialInvoices }: Props) {
</Link>
<Link
href="/admin/billing/invoices/new"
className="px-3 py-1.5 rounded-md bg-accent text-white text-sm"
className="px-3 py-1.5 rounded-md bg-accent text-surface-0 text-sm"
>
+ {t("newInvoiceBtn")}
</Link>

2
src/components/admin/billing/new-invoice-form.tsx
View File

@@ -155,7 +155,7 @@ export function NewInvoiceForm({ orgs }: Props) {
<button
onClick={onSubmit}
disabled={busy || !orgId || !selected?.hasBillingAddress}
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
>
{busy ? t("creating") : t("newInvoiceContinueBtn")}
</button>

6
src/components/admin/billing/pricing-editor.tsx
View File

@@ -236,7 +236,7 @@ export function PricingEditor({
<button
type="submit"
disabled={savingPricing}
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
>
{savingPricing ? t("saving") : t("save")}
</button>
@@ -401,7 +401,7 @@ export function PricingEditor({
<button
type="submit"
disabled={addingSkill || !newSkillId}
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
>
{addingSkill ? t("saving") : t("add")}
</button>
@@ -473,7 +473,7 @@ function InlinePriceEditor({
}
}}
disabled={busy}
className="text-xs px-2 py-1 bg-accent text-white rounded"
className="text-xs px-2 py-1 bg-accent text-surface-0 rounded"
>
{busy ? "…" : "✓"}
</button>

4
src/components/admin/cron/cron-controls.tsx
View File

@@ -147,7 +147,7 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
<button
onClick={triggerIssue}
disabled={busy !== null}
className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
>
{busy === "issue" ? t("running") : t("runIssueNow")}
</button>
@@ -165,7 +165,7 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
<button
onClick={triggerReminders}
disabled={busy !== null}
className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
>
{busy === "reminders" ? t("running") : t("runRemindersNow")}
</button>

4
src/components/admin/openclaw-admin-panel.tsx
View File

@@ -107,7 +107,7 @@ export function OpenClawAdminPanel({ initialDefaults, tenants }: Props) {
<button
type="submit"
disabled={savingDefault}
className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
>
{savingDefault ? tCommon("loading") : t("saveDefault")}
</button>
@@ -265,7 +265,7 @@ function TenantOverrideRow({
type="button"
onClick={() => submit(false)}
disabled={saving || !tag.trim()}
className="text-xs px-3 py-1.5 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
className="text-xs px-3 py-1.5 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
>
{saving ? tCommon("loading") : t("saveOverride")}
</button>

2
src/components/admin/skills/pending-skill-requests.tsx
View File

@@ -146,7 +146,7 @@ export function PendingSkillRequests({ initialRows }: Props) {
<button
onClick={() => approve(row.id)}
disabled={busyId !== null}
className="text-xs px-3 py-1.5 rounded-md bg-accent text-white disabled:opacity-50"
className="text-xs px-3 py-1.5 rounded-md bg-accent text-surface-0 disabled:opacity-50"
>
{busyId === row.id ? t("working") : t("approveBtn")}
</button>

2
src/components/billing/pay-invoice-button.tsx
View File

@@ -50,7 +50,7 @@ export function PayInvoiceButton({ invoiceNumber }: Props) {
<button
onClick={onClick}
disabled={busy}
className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
>
{busy ? t("redirectingToStripe") : t("payWithCard")}
</button>

2
src/components/billing/running-total-widget.tsx
View File

@@ -86,7 +86,7 @@ export function RunningTotalWidget({ isOwner }: Props) {
{noConfig && isOwner && (
<Link
href="/settings/billing"
className="inline-block mt-2 px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors"
className="inline-block mt-2 px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors"
>
{t("configureBillingCta")}
</Link>

2
src/components/channel-users/channel-users.tsx
View File

@@ -328,7 +328,7 @@ export function ChannelUsers({
<button
onClick={() => handleAdd(channel)}
disabled={saving || !inputValues[channel]?.trim()}
className="px-4 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="px-4 py-2 text-sm font-medium bg-accent text-surface-0 rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{saving ? "…" : t("add")}
</button>

2
src/components/dashboard/budget-editable-card.tsx
View File

@@ -263,7 +263,7 @@ export function BudgetEditableCard({
<button
type="submit"
disabled={saving}
className="text-sm px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
className="text-sm px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
>
{saving ? tCommon("loading") : tCommon("save")}
</button>

197
src/components/layout/nav-shell.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { useState, useEffect } from "react";
import { useTranslations } from "next-intl";
import { signOut, useSession } from "next-auth/react";
import { usePathname } from "@/i18n/navigation";
@@ -13,6 +14,15 @@ function NavBar() {
const pathname = usePathname();
const user = (session as any)?.platformUser;
const [mobileOpen, setMobileOpen] = useState(false);
// Close the mobile menu on any navigation. Without this the panel
// would stay open across route changes (the component doesn't
// unmount — it lives in the layout).
useEffect(() => {
setMobileOpen(false);
}, [pathname]);
// Hide the nav entirely on auth-only routes. These pages have no
// session yet — showing "Dashboard" / "Sign Out" is misleading at
// best (the buttons would 401 or redirect-loop). Keep this list
@@ -21,6 +31,47 @@ function NavBar() {
const isAuthRoute = pathname === "/login" || pathname === "/register";
if (isAuthRoute) return null;
// ------------------------------------------------------------------
// Visibility gates — computed once, shared by the desktop nav and the
// mobile panel so the two can never diverge.
//
// - team: owner+platform only AND not a personal account (Bug 8 —
// personal accounts have no team). Matches `canMutate` /
// `user.isPersonal === false` server-side.
// - settings: anyone who can mutate org-level state (owners + platform).
// `user`-role customers don't see it (canMutate is false).
// - billing / support: any signed-in user (org-scoped server-side).
// - admin: platform only.
// ------------------------------------------------------------------
const isOwner =
user && Array.isArray(user.roles) && user.roles.includes("owner");
const showTeam = !!user && !user.isPersonal && (user.isPlatform || isOwner);
const showSettings = !!user && (user.isPlatform || isOwner);
const showBilling = !!user;
const showSupport = !!user;
const showAdmin = !!user?.isPlatform;
// Active-state helper. Dashboard/Admin previously used exact `===`,
// so sub-routes (/dashboard/new, /admin/billing, …) showed no active
// item. startsWith keeps the parent lit on its children too.
const isActive = (href: string) =>
pathname === href || pathname.startsWith(`${href}/`);
const links = [
{ href: "/dashboard", label: t("dashboard"), show: !!user },
{ href: "/team", label: t("team"), show: showTeam },
{ href: "/settings", label: t("settings"), show: showSettings },
{ href: "/billing", label: t("billing"), show: showBilling },
{ href: "/support", label: t("support"), show: showSupport },
{ href: "/admin", label: t("admin"), show: showAdmin },
].filter((l) => l.show);
const displayName = user
? user.isPersonal
? user.name || (user.email ? user.email.split("@")[0] : user.orgName)
: user.orgName
: "";
return (
<header className="sticky top-0 z-50 border-b border-border bg-surface-1/80 backdrop-blur-md">
<div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-5">
@@ -40,98 +91,96 @@ function NavBar() {
</span>
</Link>
{/* Nav links */}
{/* Desktop nav links */}
<nav className="hidden sm:flex items-center gap-1 ml-2">
<NavLink href="/dashboard" active={pathname === "/dashboard"}>
{t("dashboard")}
{links.map((l) => (
<NavLink key={l.href} href={l.href} active={isActive(l.href)}>
{l.label}
</NavLink>
{/* Slice 7: /team is owner+platform only AND personal
accounts are excluded — they have no team to manage
(Bug 8). Match server-side gates (`canMutate`,
`user.isPersonal === false`). The roles array carries
either "owner" or "user" for customer sessions;
isPlatform covers the platform side. */}
{user &&
!user.isPersonal &&
(user.isPlatform ||
(Array.isArray(user.roles) && user.roles.includes("owner"))) && (
<NavLink href="/team" active={pathname === "/team"}>
{t("team")}
</NavLink>
)}
{/* Bug 35: /settings is shown to anyone who can mutate org-level
state — owners and platform admins. Personal accounts also
see it; their billing page is optional but the entry point
exists for consistency. `user`-role customers don't see it
(canMutate is false). */}
{user &&
(user.isPlatform ||
(Array.isArray(user.roles) && user.roles.includes("owner"))) && (
<NavLink
href="/settings"
active={pathname.startsWith("/settings")}
>
{t("settings")}
</NavLink>
)}
{/* Phase 3: Billing visible to anyone signed in. The
page is org-scoped server-side — non-owner members
see the same invoice history their owner does, but
actions like "configure billing details" are gated
separately on the settings page. Personal accounts
see their own (single-tenant) invoices. */}
{user && (
<NavLink
href="/billing"
active={pathname.startsWith("/billing")}
>
{t("billing")}
</NavLink>
)}
{/* Feature 5: Support is available to every signed-in
user. Customers see their own tickets only; platform
admins see the queue. */}
{user && (
<NavLink
href="/support"
active={pathname.startsWith("/support")}
>
{t("support")}
</NavLink>
)}
{user?.isPlatform && (
<NavLink href="/admin" active={pathname === "/admin"}>
{t("admin")}
</NavLink>
)}
))}
</nav>
</div>
{/* Right side */}
<div className="flex items-center gap-4">
{user && (
// For personal accounts the orgName is opaque
// ("personal-3f2a8b1c") or a synthetic legacy
// "Name (Personal)" — neither is what we want in the nav.
// Show the user's display name instead. The detection logic
// and fallback chain live in `lib/personal-org.ts`; keeping
// a thin inline branch here avoids importing a server-only
// helper into a client component.
<span className="hidden md:inline text-xs text-text-secondary font-mono">
{user.isPersonal
? user.name || (user.email ? user.email.split("@")[0] : user.orgName)
: user.orgName}
{displayName}
</span>
)}
<LanguageSwitcher />
<button
onClick={() => signOut({ callbackUrl: "/login" })}
className="text-xs font-medium text-text-secondary hover:text-error transition-colors cursor-pointer"
className="hidden sm:inline text-xs font-medium text-text-secondary hover:text-error transition-colors cursor-pointer"
>
{t("logout")}
</button>
{/* Mobile menu toggle — only shown below the `sm` breakpoint,
where the desktop nav and logout button are hidden. */}
{user && (
<button
type="button"
onClick={() => setMobileOpen((v) => !v)}
aria-expanded={mobileOpen}
aria-controls="mobile-nav"
aria-label={t("menu")}
className="sm:hidden inline-flex items-center justify-center h-8 w-8 -mr-1 rounded-md text-text-secondary hover:text-text-primary hover:bg-surface-2 transition-colors cursor-pointer"
>
<svg
className="h-5 w-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
>
{mobileOpen ? (
<path d="M6 6l12 12M18 6L6 18" />
) : (
<path d="M4 7h16M4 12h16M4 17h16" />
)}
</svg>
</button>
)}
</div>
</div>
{/* Mobile panel */}
{user && mobileOpen && (
<nav
id="mobile-nav"
className="sm:hidden border-t border-border bg-surface-1 px-3 py-3"
>
<div className="flex flex-col gap-1">
{links.map((l) => (
<Link
key={l.href}
href={l.href}
className={`px-3 py-2.5 rounded-md text-sm font-medium transition-colors ${
isActive(l.href)
? "bg-surface-3 text-text-primary"
: "text-text-secondary hover:text-text-primary hover:bg-surface-2"
}`}
>
{l.label}
</Link>
))}
</div>
<div className="mt-3 pt-3 border-t border-border flex items-center justify-between px-3">
<span className="text-xs text-text-secondary font-mono truncate">
{displayName}
</span>
<button
onClick={() => signOut({ callbackUrl: "/login" })}
className="text-xs font-medium text-text-secondary hover:text-error transition-colors cursor-pointer shrink-0 ml-3"
>
{t("logout")}
</button>
</div>
</div>
</nav>
)}
</header>
);
}

2
src/components/onboarding/onboarding-flow.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useRouter } from "next/navigation";
import { useRouter } from "@/i18n/navigation";
import { OnboardingWizard } from "./wizard";
import type { OrgBilling } from "@/types";

2
src/components/onboarding/provisioning-status.tsx
View File

@@ -489,7 +489,7 @@ export function ProvisioningStatus({ requestId, canAct }: Props) {
</p>
<button
onClick={() => window.location.reload()}
className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
>
{t("goToDashboard")}
</button>

8
src/components/onboarding/wizard.tsx
View File

@@ -606,7 +606,7 @@ export function OnboardingWizard({
<div className="flex justify-end">
<button
onClick={goNext}
className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
>
{t("getStarted")}
</button>
@@ -994,7 +994,7 @@ export function OnboardingWizard({
<button
onClick={goNext}
disabled={!packageCredentialsValid()}
className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{t("next")}
</button>
@@ -1182,7 +1182,7 @@ export function OnboardingWizard({
</button>
<button
onClick={goNext}
className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
>
{t("next")}
</button>
@@ -1397,7 +1397,7 @@ export function OnboardingWizard({
<button
onClick={handleSubmit}
disabled={submitting}
className="py-2.5 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="py-2.5 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{submitting
? tCommon("loading")

2
src/components/packages/skill-cost-dialog.tsx
View File

@@ -104,7 +104,7 @@ export function SkillCostDialog({
<button
onClick={onConfirm}
disabled={busy}
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
>
{busy ? t("confirming") : t("confirm")}
</button>

2
src/components/settings/billing-form.tsx
View File

@@ -227,7 +227,7 @@ export function BillingSettingsForm({ initial, isPersonal }: Props) {
<button
onClick={submit}
disabled={busy}
className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
>
{busy ? t("saving") : initial ? t("saveChanges") : t("createBilling")}
</button>

2
src/components/settings/billing-settings-form.tsx
View File

@@ -268,7 +268,7 @@ export function BillingSettingsForm({
<button
type="submit"
disabled={submitting}
className="ml-auto text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
className="ml-auto text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
>
{submitting ? tCommon("loading") : t("save")}
</button>

2
src/components/settings/profile-form.tsx
View File

@@ -153,7 +153,7 @@ export function ProfileSettingsForm({ initial, isPersonal, orgName }: Props) {
<button
onClick={submit}
disabled={busy}
className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
>
{busy ? t("saving") : t("saveChanges")}
</button>

5
src/components/settings/saved-card-section.tsx
View File

@@ -1,7 +1,8 @@
"use client";
import { useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useSearchParams } from "next/navigation";
import { useRouter } from "@/i18n/navigation";
import { useTranslations } from "next-intl";
import { Card, CardHeader } from "@/components/ui/card";
import type { OrgBillingConfig } from "@/types";
@@ -136,7 +137,7 @@ export function SavedCardSection({
<button
onClick={startSetup}
disabled={busy !== null}
className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
>
{busy === "setup" ? t("savedCardRedirecting") : t("savedCardSetupBtn")}
</button>

2
src/components/support/ticket-create-form.tsx
View File

@@ -119,7 +119,7 @@ export function TicketCreateForm() {
<button
type="submit"
disabled={submitting}
className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
>
{submitting ? tCommon("loading") : t("submitTicket")}
</button>

2
src/components/support/ticket-thread.tsx
View File

@@ -186,7 +186,7 @@ export function TicketThread({
<button
type="submit"
disabled={submitting || closing || body.trim().length === 0}
className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
>
{submitting ? tCommon("loading") : t("sendReply")}
</button>

2
src/components/team/invite-form.tsx
View File

@@ -141,7 +141,7 @@ export function InviteForm() {
<button
type="submit"
disabled={state === "submitting"}
className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full py-2.5 px-4 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{state === "submitting" ? tCommon("loading") : t("inviteButton")}
</button>

2
src/components/team/team-list.tsx
View File

@@ -179,7 +179,7 @@ export function TeamList({
type="button"
onClick={() => saveEdit(m)}
disabled={submitting || !m.authorizationId}
className="text-xs px-2.5 py-1 rounded-md bg-accent text-white hover:bg-accent-dim transition-colors disabled:opacity-50"
className="text-xs px-2.5 py-1 rounded-md bg-accent text-surface-0 hover:bg-accent-dim transition-colors disabled:opacity-50"
>
{t("save")}
</button>

2
src/components/tenants/assigned-users-panel.tsx
View File

@@ -218,7 +218,7 @@ export function AssignedUsersPanel({ tenantName, canEdit }: Props) {
<button
onClick={handleAssign}
disabled={busy || !pickedUserId}
className="px-4 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="px-4 py-2 text-sm font-medium bg-accent text-surface-0 rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{busy ? "…" : t("assign")}
</button>

58
src/components/ui/button.tsx Normal file
View File

@@ -0,0 +1,58 @@
import { forwardRef } from "react";
/**
* Shared button primitive.
*
* Why this exists
* ---------------
* The accent fill (#00d4aa) is bright; white text on it measures ~1.9:1,
* which fails WCAG even for large/UI text. Dark text (surface-0) on the
* same accent is ~10:1. The codebase had ~40 hand-rolled accent buttons,
* most using `text-white`. This component centralises the correct token
* (`text-surface-0` on accent) so the contrast can't drift again — reach
* for `<Button>` instead of re-deriving the class string.
*/
type Variant = "primary" | "secondary" | "ghost" | "danger";
type Size = "sm" | "md";
const BASE =
"inline-flex items-center justify-center gap-1.5 font-medium rounded-lg " +
"transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 " +
"focus-visible:ring-accent/50 disabled:opacity-50 disabled:cursor-not-allowed";
const VARIANTS: Record<Variant, string> = {
// surface-0 (dark) text — the contrast-correct pairing for the accent.
primary: "bg-accent text-surface-0 hover:bg-accent-dim shadow-sm shadow-accent/20",
secondary:
"bg-surface-2 text-text-primary border border-border hover:bg-surface-3 hover:border-border-active",
ghost: "text-text-secondary hover:text-text-primary hover:bg-surface-2",
danger: "bg-error text-surface-0 hover:opacity-90",
};
const SIZES: Record<Size, string> = {
sm: "text-xs px-3 py-1.5",
md: "text-sm px-4 py-2",
};
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: Variant;
size?: Size;
}
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
function Button(
{ variant = "primary", size = "md", className = "", type = "button", ...rest },
ref
) {
return (
<button
ref={ref}
type={type}
className={`${BASE} ${VARIANTS[variant]} ${SIZES[size]} ${className}`}
{...rest}
/>
);
}
);

1
src/messages/de.json
View File

@@ -4,6 +4,7 @@
"tagline": "KI-Plattform",
"login": "Anmelden",
"logout": "Abmelden",
"menu": "Menü",
"dashboard": "Dashboard",
"admin": "Admin",
"loading": "Laden…",

1
src/messages/en.json
View File

@@ -4,6 +4,7 @@
"tagline": "AI Platform",
"login": "Sign In",
"logout": "Sign Out",
"menu": "Menu",
"dashboard": "Dashboard",
"admin": "Admin",
"loading": "Loading…",

1
src/messages/fr.json
View File

@@ -4,6 +4,7 @@
"tagline": "Plateforme IA",
"login": "Connexion",
"logout": "Déconnexion",
"menu": "Menu",
"dashboard": "Tableau de bord",
"admin": "Admin",
"loading": "Chargement…",

1
src/messages/it.json
View File

@@ -4,6 +4,7 @@
"tagline": "Piattaforma IA",
"login": "Acceda",
"logout": "Esci",
"menu": "Menu",
"dashboard": "Dashboard",
"admin": "Admin",
"loading": "Caricamento…",