From 52279752e42ae948f12755e414029a635b19b97a Mon Sep 17 00:00:00 2001 From: Mattias Thall Date: Tue, 26 May 2026 21:50:44 +0200 Subject: [PATCH] Minimal flat redesign: white accent, remove card backgrounds Replace yellow accent (#f5a623) with white (#ffffff) across the entire app. Flatten VideoCard grid variant by removing zinc-900 card background so content sits directly on the page. Simplify active states, badges, progress bars, and hover effects throughout. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/components/ChannelCard.jsx | 2 +- frontend/src/components/Layout.jsx | 14 +++++++------- frontend/src/components/VideoCard.jsx | 25 ++++++++++++------------- frontend/src/pages/Channel.jsx | 4 ++-- frontend/src/pages/Discovery.jsx | 4 ++-- frontend/src/pages/Following.jsx | 2 +- frontend/src/pages/Home.jsx | 4 ++-- frontend/src/pages/Settings.jsx | 4 ++-- frontend/src/pages/Watch.jsx | 4 ++-- frontend/tailwind.config.js | 6 +++--- 10 files changed, 34 insertions(+), 35 deletions(-) diff --git a/frontend/src/components/ChannelCard.jsx b/frontend/src/components/ChannelCard.jsx index 38c6967..2e08d36 100644 --- a/frontend/src/components/ChannelCard.jsx +++ b/frontend/src/components/ChannelCard.jsx @@ -80,7 +80,7 @@ export default function ChannelCard({ channel }) { className={`text-xs font-medium px-4 py-2 rounded-lg transition-colors ${ isFollowed || followMut.isSuccess ? "bg-zinc-700 text-zinc-300 hover:bg-zinc-600" - : "bg-accent text-black hover:bg-yellow-300" + : "bg-accent text-black hover:bg-zinc-100" }`} > {isFollowed || followMut.isSuccess ? "Following" : "Follow"} diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx index cea54cf..771cc72 100644 --- a/frontend/src/components/Layout.jsx +++ b/frontend/src/components/Layout.jsx @@ -41,7 +41,7 @@ function BottomNav({ newCount }) { end={tab.end} className={({ isActive }) => `relative flex-1 flex flex-col items-center justify-center gap-0.5 transition-colors outline-none ${ - isActive ? "text-accent" : "text-zinc-500" + isActive ? "text-zinc-100" : "text-zinc-500" }` } > @@ -49,13 +49,13 @@ function BottomNav({ newCount }) { <>
{isActive && ( - + )} {tab.icon} {tab.badge > 0 && ( - + {tab.badge > 99 ? "99+" : tab.badge} )} @@ -98,7 +98,7 @@ function DownloadIndicator() { className="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-zinc-800 hover:bg-zinc-700 transition-colors text-xs text-zinc-300 shrink-0" title={`${active.length} download${active.length > 1 ? "s" : ""} in progress`} > - + @@ -125,7 +125,7 @@ function NavItem({ to, children, badge }) { > {children} {badge > 0 && ( - + {badge > 99 ? "99+" : badge} )} @@ -147,7 +147,7 @@ function DropItem({ to, children, badge }) { > {children} {badge > 0 && ( - + {badge > 99 ? "99+" : badge} )} @@ -214,7 +214,7 @@ export default function Layout() { {/* Logo */} diff --git a/frontend/src/components/VideoCard.jsx b/frontend/src/components/VideoCard.jsx index 497a18c..fe1d941 100644 --- a/frontend/src/components/VideoCard.jsx +++ b/frontend/src/components/VideoCard.jsx @@ -42,8 +42,8 @@ function IconBtn({ onClick, title, active, pending, children }) { onClick={(e) => { e.stopPropagation(); onClick(e); }} title={title} className={clsx( - "flex items-center justify-center w-7 h-7 rounded-full transition-all duration-150", - active ? "text-accent" : "text-zinc-600 hover:text-zinc-200", + "flex items-center justify-center w-7 h-7 rounded-md transition-all duration-150", + active ? "text-zinc-100" : "text-zinc-600 hover:text-zinc-300", pending && "opacity-60 cursor-default", )} > @@ -130,13 +130,13 @@ function ThumbnailBlock({ video, isWatched, duration, calmMode, onDismiss, class )} {video.download_resolution && ( - + {video.download_resolution} )} {isWatched && ( - + )}
@@ -148,9 +148,9 @@ function ThumbnailBlock({ video, isWatched, duration, calmMode, onDismiss, class
{video.watch_progress_seconds > 0 && video.duration_seconds > 0 && ( -
+
@@ -259,7 +259,7 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr return (
navigate(`/watch/${video.youtube_video_id}`)} - className="group flex gap-3 sm:gap-4 px-2 sm:px-3 py-2 sm:py-3 rounded-xl cursor-pointer hover:bg-zinc-800/50 transition-colors duration-150" + className="group flex gap-3 sm:gap-4 px-2 sm:px-3 py-2 sm:py-3 rounded-lg cursor-pointer hover:bg-zinc-900/70 transition-colors duration-150" > {/* Thumbnail — compact on mobile, wide on desktop */} @@ -343,10 +342,10 @@ export default function VideoCard({ video, size = "md", onDismiss, variant = "gr duration={duration} calmMode={calmMode} onDismiss={() => dismissMut.mutate()} - className="aspect-video rounded-t-2xl overflow-hidden" + className="aspect-video rounded-lg overflow-hidden" /> -
+
{/* Channel avatar */}
) : ( -
+
{avatarLetter}
)} diff --git a/frontend/src/pages/Channel.jsx b/frontend/src/pages/Channel.jsx index 9c51d1c..5b41d50 100644 --- a/frontend/src/pages/Channel.jsx +++ b/frontend/src/pages/Channel.jsx @@ -112,7 +112,7 @@ export default function ChannelPage() { {isFollowed ? "Following" : "Follow"} @@ -292,7 +292,7 @@ export default function DiscoveryPage() { diff --git a/frontend/src/pages/Following.jsx b/frontend/src/pages/Following.jsx index 79287f8..8c59dae 100644 --- a/frontend/src/pages/Following.jsx +++ b/frontend/src/pages/Following.jsx @@ -765,7 +765,7 @@ export default function Following() { diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index 4ee6eb8..5f072d3 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -153,7 +153,7 @@ export default function Home() { > {m.label} {m.value === "inbox" && inboxCount > 0 && ( - + {inboxCount > 99 ? "99+" : inboxCount} )} @@ -252,7 +252,7 @@ export default function Home() {
@@ -430,7 +430,7 @@ function SubscriptionImportSection() { diff --git a/frontend/src/pages/Watch.jsx b/frontend/src/pages/Watch.jsx index b80d322..2929c5b 100644 --- a/frontend/src/pages/Watch.jsx +++ b/frontend/src/pages/Watch.jsx @@ -230,7 +230,7 @@ function Placeholder({ video, dlStatus, onPlay, onDownloadAndPlay, isDownloading ) : onDownloadAndPlay ? (