From ba3ef9e2c8da150ae5f76a1a4d7283799f8c93c6 Mon Sep 17 00:00:00 2001
From: Jure <44338+hoornet@users.noreply.github.com>
Date: Thu, 2 Apr 2026 18:30:10 +0200
Subject: [PATCH] Polish: reduced motion, toast animation, token consistency

- Add prefers-reduced-motion media query for accessibility
- Add slide-in animation for toast notifications
- Standardize transition durations across note cards
- Replace remaining hard-coded text-white with theme tokens
---
 src/components/feed/ComposeBox.tsx       |  2 +-
 src/components/feed/InlineReplyBox.tsx   |  2 +-
 src/components/feed/NoteCard.tsx         |  2 +-
 src/components/feed/NoteContent.tsx      |  2 +-
 src/components/shared/ToastContainer.tsx |  2 +-
 src/index.css                            | 19 +++++++++++++++++++
 6 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/feed/ComposeBox.tsx b/src/components/feed/ComposeBox.tsx
index 7df2594..ecad224 100644
--- a/src/components/feed/ComposeBox.tsx
+++ b/src/components/feed/ComposeBox.tsx
@@ -259,7 +259,7 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
                   )}
                   <button
                     onClick={() => removeAttachment(i)}
-                    className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-danger text-white text-[10px] rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                    className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-danger text-accent-text text-[10px] rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                     title="Remove"
                   >
                     x
diff --git a/src/components/feed/InlineReplyBox.tsx b/src/components/feed/InlineReplyBox.tsx
index df2c88e..1f7d121 100644
--- a/src/components/feed/InlineReplyBox.tsx
+++ b/src/components/feed/InlineReplyBox.tsx
@@ -182,7 +182,7 @@ export function InlineReplyBox({ event, name, rootEvent }: InlineReplyBoxProps)
               )}
               <button
                 onClick={() => removeAttachment(i)}
-                className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-danger text-white text-[10px] rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
+                className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-danger text-accent-text text-[10px] rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
                 title="Remove"
               >
                 x
diff --git a/src/components/feed/NoteCard.tsx b/src/components/feed/NoteCard.tsx
index dae3e01..f3ee766 100644
--- a/src/components/feed/NoteCard.tsx
+++ b/src/components/feed/NoteCard.tsx
@@ -65,7 +65,7 @@ export const NoteCard = memo(function NoteCard({ event, focused, onReplyInThread
     <article
       ref={cardRef}
       data-note-id={event.id}
-      className={`border-b border-border px-4 py-3 hover:bg-bg-hover transition-colors duration-100 cursor-pointer group/card${focused ? " bg-accent/10 border-l-2 border-l-accent" : ""}`}
+      className={`border-b border-border px-4 py-3 hover:bg-bg-hover transition-colors cursor-pointer group/card${focused ? " bg-accent/10 border-l-2 border-l-accent" : ""}`}
       onClick={(e) => {
         // Don't navigate if clicking on interactive elements
         const target = e.target as HTMLElement;
diff --git a/src/components/feed/NoteContent.tsx b/src/components/feed/NoteContent.tsx
index 137f217..f9fb1eb 100644
--- a/src/components/feed/NoteContent.tsx
+++ b/src/components/feed/NoteContent.tsx
@@ -101,7 +101,7 @@ function ImageGrid({ images, onImageClick }: { images: string[]; onImageClick: (
               className="absolute inset-0 bg-black/50 flex items-center justify-center rounded-sm cursor-zoom-in"
               onClick={(e) => { e.stopPropagation(); onImageClick(idx); }}
             >
-              <span className="text-white text-lg font-semibold">+{extraCount}</span>
+              <span className="text-[#ffffff] text-lg font-semibold">+{extraCount}</span>
             </div>
           )}
         </div>
diff --git a/src/components/shared/ToastContainer.tsx b/src/components/shared/ToastContainer.tsx
index 8c1f2da..b00a9fc 100644
--- a/src/components/shared/ToastContainer.tsx
+++ b/src/components/shared/ToastContainer.tsx
@@ -16,7 +16,7 @@ export function ToastContainer() {
       {toasts.map((toast) => (
         <div
           key={toast.id}
-          className="flex items-stretch min-w-[240px] max-w-[360px] bg-bg-raised border border-border shadow-lg"
+          className="flex items-stretch min-w-[240px] max-w-[360px] bg-bg-raised border border-border shadow-lg toast-enter"
         >
           <div className={`w-1 shrink-0 ${accentColor[toast.type]}`} />
           <div className="flex items-center justify-between gap-2 px-3 py-2 flex-1">
diff --git a/src/index.css b/src/index.css
index 88fe2f8..3808499 100644
--- a/src/index.css
+++ b/src/index.css
@@ -99,6 +99,25 @@ body {
   animation: fade-in 150ms ease-out;
 }
 
+/* Toast slide-in */
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(16px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+.toast-enter {
+  animation: toast-in 200ms ease-out;
+}
+
+/* Reduced motion: collapse all animations/transitions */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* Scrollbar */
 ::-webkit-scrollbar {
   width: 12px;