polish: clear 33/34 detector findings (bg-black, animate-bounce, spinner, transition-width, color)

After re-audit/critique cycle the deterministic detector (npx impeccable)
flagged 34 design-spec violations. Knock out 33 of them.

  • 25 × pure-black-white: sed-sweep bg-black/X → bg-dark-950/X across
    18+ files (modal scrims, photo viewer backdrop, code blocks). The
    base resolves to rgba(10,15,26,X) — visually identical to true
    black, satisfies the 'no #000' impeccable rule.
  • 3 × bounce-easing: SuccessNotificationModal celebration icon and
    SyncTab loading arrows used animate-bounce; replaced with
    animate-pulse. Bounce easing reads dated; pulse conveys 'in
    progress' without the cartoon feel.
  • 3 × border-accent-on-rounded: TelegramCallback + VerifyEmail
    spinners used 'border-b-2 border-accent-500' on rounded-full —
    detector reads it as a side-stripe even though it's a ring loader.
    Switch to canonical 'border-2 border-accent-500 border-t-transparent'
    (3/4 ring colored). Same visual, no spec violation.
  • 1 × ai-color-palette: AdminLandingStats had text-purple-400 on a
    gift-stats heading; purple is not in the brand palette. Swap to
    text-accent-400.
  • 1 × layout-transition: TrafficProgressBar.tsx fill bar still used
    transition: width 1.2s (slipped past the earlier optimize pass).
    Convert to transform: scaleX with origin-left. Same gradient, same
    duration, runs on the compositor.

Remaining: 1 finding in third-party Aceternity background-beams-collision
component (indigo-500 gradient on decorative WebGL background) — left
as-is, it's lifted decorative third-party code.

Detector: 34 → 1.
This commit is contained in:
c0mrade
2026-05-26 21:52:56 +03:00
parent 9cfbf2ba97
commit f75b243f03
24 changed files with 42 additions and 36 deletions

View File

@@ -106,13 +106,13 @@ function wrap(frame: Frame, key: number): ReactNode {
return <s key={k}>{frame.children}</s>;
case 'code':
return (
<code key={k} className="rounded bg-black/30 px-1 font-mono text-[0.92em]">
<code key={k} className="rounded bg-dark-950/30 px-1 font-mono text-[0.92em]">
{frame.children}
</code>
);
case 'pre':
return (
<pre key={k} className="my-1 rounded bg-black/30 p-2 font-mono text-[0.92em]">
<pre key={k} className="my-1 rounded bg-dark-950/30 p-2 font-mono text-[0.92em]">
{frame.children}
</pre>
);
@@ -190,7 +190,7 @@ export function TelegramPreview({
if (!open) return null;
return createPortal(
<div
className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 p-4"
className="fixed inset-0 z-[9999] flex items-center justify-center bg-dark-950/70 p-4"
onClick={onClose}
>
<div
@@ -268,7 +268,7 @@ export function EmailPreview({ open, onClose, subject, htmlContent }: EmailPrevi
const emptyHtml = `<p style="color:#999;font-family:sans-serif">${t('admin.broadcasts.previewEmpty', '— пусто —')}</p>`;
return createPortal(
<div
className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 p-4"
className="fixed inset-0 z-[9999] flex items-center justify-center bg-dark-950/70 p-4"
onClick={onClose}
>
<div