feat(e10): migrate the notification, message, auth and Plex action buttons
Second sweep, 34 more sites: NotificationsPanel (14 -- eight identical accent text links, three ghost icon buttons, two ghost text actions), Welcome's five auth links, KeyGate, Messages, NavSidebar, ChatThread, ShareDialog, ChannelPage, PlexPlaylistView, PlexPlaylistAdd, PlexCollectionEditor and plexViews. Moves the font-weight out of Button's BASE and into each variant, so the `link` variant can be semibold (which is what every text link in this app looks like) while the action variants stay medium, and no element can end up with two font-* utilities. Welcome is the one signed-out surface this session cannot see, so only its byte-identical link swaps were taken; its primary submit and the bg-card button family are left for a pass that can UAT the screen. 3x tsc, eslint, knip, prettier, 689 vitest green; UAT on Notifications, Messages and the nav rail, clean console in a fresh tab.
This commit is contained in:
@@ -28,6 +28,7 @@ import { api, deadResetLink, loginBlocked, type LoginBlocked } from "../lib/api"
|
||||
import { HttpError } from "../lib/api";
|
||||
import { setLanguage, type LangCode } from "../i18n";
|
||||
import LanguageSwitcher from "./LanguageSwitcher";
|
||||
import { Button } from "./ui/Button";
|
||||
import { inputCls } from "./ui/form";
|
||||
import { entryHash, entrySearch } from "../lib/entryUrl";
|
||||
import type { VerifyEntry } from "../lib/useVerifyEntry";
|
||||
@@ -550,9 +551,9 @@ function AuthCard({ verify }: { verify: VerifyEntry }) {
|
||||
{verifyOutcome === "ok_reset" && (
|
||||
<Banner tone="warn">
|
||||
{t("welcome.auth.verifyOkReset")}{" "}
|
||||
<button onClick={goForgot} className="font-semibold text-accent hover:underline">
|
||||
<Button variant="link" onClick={goForgot}>
|
||||
{t("welcome.auth.verifyOkResetCta")}
|
||||
</button>
|
||||
</Button>
|
||||
</Banner>
|
||||
)}
|
||||
{/* No resend CTA here, unlike the invalid banner below: the token was NOT spent — we simply
|
||||
@@ -564,9 +565,9 @@ function AuthCard({ verify }: { verify: VerifyEntry }) {
|
||||
{verifyOutcome === "invalid" && (
|
||||
<Banner tone="warn">
|
||||
{t("welcome.auth.verifyInvalid")}{" "}
|
||||
<button onClick={goResend} className="font-semibold text-accent hover:underline">
|
||||
<Button variant="link" onClick={goResend}>
|
||||
{t("welcome.auth.resendCta")}
|
||||
</button>
|
||||
</Button>
|
||||
</Banner>
|
||||
)}
|
||||
{bounced === "requested" &&
|
||||
@@ -679,15 +680,15 @@ function AuthCard({ verify }: { verify: VerifyEntry }) {
|
||||
<div className="flex items-center justify-between mt-3 text-xs">
|
||||
{mode === "signin" ? (
|
||||
<>
|
||||
<button
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={() => {
|
||||
reset();
|
||||
setMode("register");
|
||||
}}
|
||||
className="text-accent hover:underline"
|
||||
>
|
||||
{t("welcome.auth.createLink")}
|
||||
</button>
|
||||
</Button>
|
||||
<button
|
||||
onClick={() => {
|
||||
reset();
|
||||
@@ -699,15 +700,15 @@ function AuthCard({ verify }: { verify: VerifyEntry }) {
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={() => {
|
||||
reset();
|
||||
setMode("signin");
|
||||
}}
|
||||
className="text-accent hover:underline"
|
||||
>
|
||||
{t("welcome.auth.backToSignin")}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -820,9 +821,9 @@ function StatePanel({
|
||||
</p>
|
||||
{children}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<button onClick={onBack} className="text-sm text-accent hover:underline">
|
||||
<Button variant="link" className="text-sm" onClick={onBack}>
|
||||
{t("welcome.auth.backToSignin")}
|
||||
</button>
|
||||
</Button>
|
||||
{cta && (
|
||||
<button
|
||||
onClick={cta.onClick}
|
||||
|
||||
Reference in New Issue
Block a user