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.
2026-07-28 09:33:46 +00:00 · 2026-05-26 21:52:56 +03:00
parent 9cfbf2ba97
commit f75b243f03
24 changed files with 42 additions and 36 deletions
--- a/src/components/PromptDialogHost.tsx
+++ b/src/components/PromptDialogHost.tsx
@@ -37,7 +37,7 @@ export function PromptDialogHost() {

  return createPortal(
    <div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
-      <div className="absolute inset-0 bg-black/60" onClick={cancel} aria-hidden="true" />
+      <div className="absolute inset-0 bg-dark-950/60" onClick={cancel} aria-hidden="true" />
      <form
        ref={dialogRef}
        role="dialog"
--- a/src/components/SuccessNotificationModal.tsx
+++ b/src/components/SuccessNotificationModal.tsx
@@ -205,7 +205,7 @@ export default function SuccessNotificationModal() {
  const modalContent = (
    <div className="fixed inset-0 z-[100] flex items-center justify-center">
      {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={handleClose} />
+      <div className="absolute inset-0 bg-dark-950/80 backdrop-blur-sm" onClick={handleClose} />

      {/* Modal */}
      <div
@@ -233,7 +233,9 @@ export default function SuccessNotificationModal() {
        <div
          className={`flex flex-col items-center bg-gradient-to-br ${gradientClass} px-6 pb-8 pt-10`}
        >
-          <div className="mb-4 animate-bounce text-white">{icon}</div>
+          {/* Use animate-pulse for celebration; bounce easing reads dated and
+              the lift is the moment, not the bounce. */}
+          <div className="mb-4 animate-pulse text-white">{icon}</div>
          <h2 id="success-modal-title" className="text-center text-2xl font-bold text-white">
            {title}
          </h2>
--- a/src/components/admin/userDetail/SyncTab.tsx
+++ b/src/components/admin/userDetail/SyncTab.tsx
@@ -186,7 +186,7 @@ export function SyncTab({
          disabled={actionLoading}
          className="flex flex-col items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4 text-accent-400 transition-all hover:bg-accent-500/20 disabled:opacity-50"
        >
-          <ArrowDownIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
+          <ArrowDownIcon className={`h-6 w-6 ${actionLoading ? 'animate-pulse' : ''}`} />
          <span className="text-center text-xs font-medium">
            {t('admin.users.detail.sync.fromPanel')}
          </span>
@@ -196,7 +196,7 @@ export function SyncTab({
          disabled={actionLoading}
          className="flex flex-col items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4 text-accent-400 transition-all hover:bg-accent-500/20 disabled:opacity-50"
        >
-          <ArrowUpIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
+          <ArrowUpIcon className={`h-6 w-6 ${actionLoading ? 'animate-pulse' : ''}`} />
          <span className="text-center text-xs font-medium">
            {t('admin.users.detail.sync.toPanel')}
          </span>
--- a/src/components/broadcasts/BroadcastPreview.tsx
+++ b/src/components/broadcasts/BroadcastPreview.tsx
@@ -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
--- a/src/components/dashboard/TrafficProgressBar.tsx
+++ b/src/components/dashboard/TrafficProgressBar.tsx
@@ -113,13 +113,14 @@ export default function TrafficProgressBar({
          <div style={{ flex: '10 0 0', background: 'rgba(var(--color-error-400), 0.05)' }} />
        </div>

-        {/* Fill bar */}
+        {/* Fill bar — scaleX (compositor) instead of width (layout reflow).
+            Use top-left origin so fill grows left→right same as width. */}
        <div
-          className="absolute bottom-0 left-0 top-0 overflow-hidden"
+          className="absolute bottom-0 left-0 top-0 w-full origin-left overflow-hidden"
          style={{
-            width: `${clampedPercent}%`,
+            transform: `scaleX(${clampedPercent / 100})`,
            borderRadius: 10,
-            transition: 'width 1.2s cubic-bezier(0.16, 1, 0.3, 1)',
+            transition: 'transform 1.2s cubic-bezier(0.16, 1, 0.3, 1)',
          }}
        >
          {/* Gradient fill */}
--- a/src/components/layout/AppShell/AppHeader.tsx
+++ b/src/components/layout/AppShell/AppHeader.tsx
@@ -310,7 +310,10 @@ export function AppHeader({
          style={{ top: headerHeight }}
        >
          {/* Backdrop */}
-          <div className="absolute inset-0 bg-black/60" onClick={() => setMobileMenuOpen(false)} />
+          <div
+            className="absolute inset-0 bg-dark-950/60"
+            onClick={() => setMobileMenuOpen(false)}
+          />

          {/* Menu content */}
          <div
--- a/src/components/navigation/CommandPalette/CommandPalette.tsx
+++ b/src/components/navigation/CommandPalette/CommandPalette.tsx
@@ -123,7 +123,7 @@ export function CommandPalette({
              {/* Backdrop */}
              <DialogPrimitive.Overlay asChild>
                <motion.div
-                  className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
+                  className="fixed inset-0 z-50 bg-dark-950/60 backdrop-blur-sm"
                  variants={backdrop}
                  initial="initial"
                  animate="animate"
--- a/src/components/primitives/Dialog/Dialog.tsx
+++ b/src/components/primitives/Dialog/Dialog.tsx
@@ -54,7 +54,7 @@ export const DialogOverlay = forwardRef<HTMLDivElement, DialogOverlayProps>(
  ({ className, ...props }, ref) => (
    <DialogPrimitive.Overlay
      ref={ref}
-      className={cn('fixed inset-0 z-50 bg-black/60 backdrop-blur-sm', className)}
+      className={cn('fixed inset-0 z-50 bg-dark-950/60 backdrop-blur-sm', className)}
      asChild
      {...props}
    >
--- a/src/components/primitives/Sheet/Sheet.tsx
+++ b/src/components/primitives/Sheet/Sheet.tsx
@@ -91,7 +91,7 @@ export const SheetOverlay = forwardRef<HTMLDivElement, SheetOverlayProps>(
  ({ className, ...props }, ref) => (
    <DialogPrimitive.Overlay
      ref={ref}
-      className={cn('fixed inset-0 z-50 bg-black/60 backdrop-blur-sm', className)}
+      className={cn('fixed inset-0 z-50 bg-dark-950/60 backdrop-blur-sm', className)}
      asChild
      {...props}
    >
--- a/src/components/tickets/MessageMediaGrid.tsx
+++ b/src/components/tickets/MessageMediaGrid.tsx
@@ -116,7 +116,7 @@ export function MessageMediaGrid({
                  loading="lazy"
                />
                {isLastVisible && (
-                  <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/60 text-2xl font-semibold text-white">
+                  <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-dark-950/60 text-2xl font-semibold text-white">
                    +{hiddenCount}
                  </div>
                )}
@@ -172,7 +172,7 @@ export function MessageMediaGrid({
        photoItems[fullscreenIndex] &&
        createPortal(
          <div
-            className="fixed inset-0 z-[9999] bg-black"
+            className="fixed inset-0 z-[9999] bg-dark-950"
            style={{ touchAction: 'pan-x pan-y pinch-zoom' }}
          >
            <button
@@ -225,7 +225,7 @@ export function MessageMediaGrid({
                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                  </svg>
                </button>
-                <div className="absolute bottom-6 left-1/2 z-10 -translate-x-1/2 rounded-full bg-black/70 px-3 py-1 text-sm text-white">
+                <div className="absolute bottom-6 left-1/2 z-10 -translate-x-1/2 rounded-full bg-dark-950/70 px-3 py-1 text-sm text-white">
                  {fullscreenIndex + 1} / {photoItems.length}
                </div>
              </>
--- a/src/components/ui/Sheet.tsx
+++ b/src/components/ui/Sheet.tsx
@@ -333,7 +333,7 @@ export function Sheet({
    >
      {/* Backdrop */}
      <div
-        className={`absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ${
+        className={`absolute inset-0 bg-dark-950/60 backdrop-blur-sm transition-opacity duration-300 ${
          isVisible ? 'opacity-100' : 'opacity-0'
        }`}
      />
@@ -388,5 +388,5 @@ export function Sheet({

 // Light theme styles applied via CSS
 // Add to globals.css:
-// .light .sheet-backdrop { @apply bg-black/40; }
+// .light .sheet-backdrop { @apply bg-dark-950/40; }
 // .light .sheet-container { @apply bg-champagne-100; }
--- a/src/pages/AdminBanSystem.tsx
+++ b/src/pages/AdminBanSystem.tsx
@@ -1535,7 +1535,7 @@ export default function AdminBanSystem() {
      {/* User Detail Modal */}
      {selectedUser && (
        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-dark-950/50 p-4"
          onClick={() => setSelectedUser(null)}
        >
          <div
--- a/src/pages/AdminCampaigns.tsx
+++ b/src/pages/AdminCampaigns.tsx
@@ -300,7 +300,7 @@ export default function AdminCampaigns() {
      {deleteConfirm !== null && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div
-            className="absolute inset-0 bg-black/60"
+            className="absolute inset-0 bg-dark-950/60"
            onClick={() => setDeleteConfirm(null)}
            aria-hidden="true"
          />
--- a/src/pages/AdminLandingStats.tsx
+++ b/src/pages/AdminLandingStats.tsx
@@ -419,7 +419,7 @@ export default function AdminLandingStats() {
            <div className="text-xs text-dark-500">{t('admin.landings.stats.revenue')}</div>
          </div>
          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">
-            <div className="text-xl font-bold text-purple-400 sm:text-2xl">{stats.total_gifts}</div>
+            <div className="text-xl font-bold text-accent-400 sm:text-2xl">{stats.total_gifts}</div>
            <div className="text-xs text-dark-500">{t('admin.landings.stats.giftPurchases')}</div>
          </div>
          <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">
--- a/src/pages/AdminPolicies.tsx
+++ b/src/pages/AdminPolicies.tsx
@@ -449,7 +449,7 @@ export default function AdminPolicies() {
      {deleteConfirm !== null && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div
-            className="fixed inset-0 bg-black/60"
+            className="fixed inset-0 bg-dark-950/60"
            onClick={() => setDeleteConfirm(null)}
            aria-hidden="true"
          />
--- a/src/pages/AdminPromoGroups.tsx
+++ b/src/pages/AdminPromoGroups.tsx
@@ -221,7 +221,7 @@ export default function AdminPromoGroups() {
      {deleteConfirm && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div
-            className="absolute inset-0 bg-black/60"
+            className="absolute inset-0 bg-dark-950/60"
            onClick={() => setDeleteConfirm(null)}
            aria-hidden="true"
          />
--- a/src/pages/AdminRoles.tsx
+++ b/src/pages/AdminRoles.tsx
@@ -248,7 +248,7 @@ export default function AdminRoles() {
      {deleteConfirm !== null && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div
-            className="fixed inset-0 bg-black/60"
+            className="fixed inset-0 bg-dark-950/60"
            onClick={() => setDeleteConfirm(null)}
            aria-hidden="true"
          />
--- a/src/pages/AdminTickets.tsx
+++ b/src/pages/AdminTickets.tsx
@@ -591,7 +591,7 @@ export default function AdminTickets() {
                            </div>
                          )}
                          {att.uploading && (
-                            <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-black/50">
+                            <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-dark-950/50">
                              <span className="h-4 w-4 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
                            </div>
                          )}
--- a/src/pages/Contests.tsx
+++ b/src/pages/Contests.tsx
@@ -98,7 +98,7 @@ export default function Contests() {

      {/* Game Modal */}
      {selectedContest && (
-        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm">
+        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-dark-950/70 p-4 backdrop-blur-sm">
          <div
            className="bento-card max-h-[80vh] w-full max-w-lg overflow-y-auto"
            onClick={(e) => e.stopPropagation()}
--- a/src/pages/Polls.tsx
+++ b/src/pages/Polls.tsx
@@ -139,7 +139,7 @@ export default function Polls() {
      {selectedPoll && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div
-            className="absolute inset-0 bg-black/60"
+            className="absolute inset-0 bg-dark-950/60"
            onClick={handleClosePoll}
            aria-hidden="true"
          />
--- a/src/pages/ReferralNetwork/components/NetworkFilters.tsx
+++ b/src/pages/ReferralNetwork/components/NetworkFilters.tsx
@@ -171,7 +171,7 @@ export function NetworkFilters({ data, className }: NetworkFiltersProps) {
      {/* Mobile: full-screen overlay */}
      {isOpen && (
        <div className="fixed inset-x-0 top-0 z-50 sm:hidden">
-          <div className="fixed inset-0 bg-black/60" onClick={() => setIsOpen(false)} />
+          <div className="fixed inset-0 bg-dark-950/60" onClick={() => setIsOpen(false)} />
          <div className="relative mx-3 mt-3 rounded-xl border border-dark-700/50 bg-dark-900/95 p-4 backdrop-blur-md">
            <div className="mb-3 flex items-center justify-between">
              <h3 className="text-sm font-semibold text-dark-100">
--- a/src/pages/Support.tsx
+++ b/src/pages/Support.tsx
@@ -346,7 +346,7 @@ export default function Support() {
              </div>
            )}
            {att.uploading && (
-              <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-black/50">
+              <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-dark-950/50">
                <span className="h-4 w-4 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
              </div>
            )}
--- a/src/pages/TelegramCallback.tsx
+++ b/src/pages/TelegramCallback.tsx
@@ -80,7 +80,7 @@ export default function TelegramCallback() {
  return (
    <div className="min-h-viewport flex items-center justify-center bg-dark-950">
      <div className="text-center">
-        <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-accent-500"></div>
+        <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-2 border-accent-500 border-t-transparent"></div>
        <h2 className="text-lg font-semibold text-dark-50">{t('auth.authenticating')}</h2>
        <p className="mt-2 text-sm text-dark-400">{t('common.loading')}</p>
      </div>
--- a/src/pages/VerifyEmail.tsx
+++ b/src/pages/VerifyEmail.tsx
@@ -75,7 +75,7 @@ export default function VerifyEmail() {
      <div className="w-full max-w-md text-center">
        {status === 'loading' && (
          <div>
-            <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-accent-500"></div>
+            <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-2 border-accent-500 border-t-transparent"></div>
            <h2 className="text-lg font-semibold text-dark-50 sm:text-xl">
              {t('emailVerification.verifying')}
            </h2>
@@ -95,7 +95,7 @@ export default function VerifyEmail() {
              {t('emailVerification.redirecting', 'Redirecting to dashboard...')}
            </p>
            <div className="mt-4">
-              <div className="mx-auto h-6 w-6 animate-spin rounded-full border-b-2 border-accent-500"></div>
+              <div className="mx-auto h-6 w-6 animate-spin rounded-full border-2 border-accent-500 border-t-transparent"></div>
            </div>
          </div>
        )}