From 67d45b72ee8f67b1b8408d5dedec3402067e7b58 Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Thu, 16 Apr 2026 15:20:29 +0200
Subject: [PATCH] feat: initialize global styles with theme-aware CSS variables
 and utility components

---
 frontend/src/components/EpisodeCard.tsx    | 4 ++--
 frontend/src/components/EpisodeDetails.tsx | 2 +-
 frontend/src/components/Navigation.tsx     | 8 ++++----
 frontend/src/components/SuccessModal.tsx   | 2 +-
 frontend/src/pages/AddPodcast.tsx          | 6 +++---
 frontend/src/pages/Dashboard.tsx           | 4 ++--
 frontend/src/pages/Login.tsx               | 2 +-
 frontend/src/pages/Trending.tsx            | 2 +-
 frontend/src/styles/globals.css            | 4 ++++
 9 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/EpisodeCard.tsx b/frontend/src/components/EpisodeCard.tsx
index 1429a88..a1fa44f 100644
--- a/frontend/src/components/EpisodeCard.tsx
+++ b/frontend/src/components/EpisodeCard.tsx
@@ -32,11 +32,11 @@ export default function EpisodeCard({ episode, onPlay, onDetails }: EpisodeCardP
 
   return (
     <div 
-      className="group premium-glass rounded-[2rem] p-4 hover:bg-[var(--bg-secondary)] transition-all duration-500 border border-[var(--border-color)] hover:border-[var(--accent-primary)]/30 flex flex-col h-full cursor-pointer relative"
+      className="group premium-glass rounded-[var(--radius-card)] p-4 hover:bg-[var(--bg-secondary)] transition-all duration-500 border border-[var(--border-color)] hover:border-[var(--accent-primary)]/30 flex flex-col h-full cursor-pointer relative"
       onClick={handleDetailsClick}
     >
       {/* Visual Header */}
-      <div className="relative aspect-square rounded-2xl overflow-hidden mb-5 shadow-xl border border-[var(--border-color)]">
+      <div className="relative aspect-square rounded-xl overflow-hidden mb-5 shadow-xl border border-[var(--border-color)]">
         {(episode.imageUrl || podcast?.imageUrl) ? (
           <img
             src={episode.imageUrl || podcast!.imageUrl}
diff --git a/frontend/src/components/EpisodeDetails.tsx b/frontend/src/components/EpisodeDetails.tsx
index 060ad5a..b561a3d 100644
--- a/frontend/src/components/EpisodeDetails.tsx
+++ b/frontend/src/components/EpisodeDetails.tsx
@@ -116,7 +116,7 @@ export default function EpisodeDetails({ episode, isOpen, onClose, onPlay }: Epi
 
            {/* Podcast Info */}
            {podcast && (
-              <div className="mt-16 p-8 rounded-[2rem] bg-[var(--bg-secondary)] border border-[var(--border-color)] group hover:border-[var(--accent-primary)] transition-all">
+              <div className="mt-16 p-8 rounded-[var(--radius-card)] bg-[var(--bg-secondary)] border border-[var(--border-color)] group hover:border-[var(--accent-primary)] transition-all">
                  <div className="flex items-center gap-6">
                     <div className="w-20 h-20 rounded-2xl overflow-hidden shadow-xl border border-[var(--border-color)]">
                        <img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover" />
diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx
index e818324..69e4c2b 100644
--- a/frontend/src/components/Navigation.tsx
+++ b/frontend/src/components/Navigation.tsx
@@ -16,10 +16,10 @@ export default function Navigation() {
   return (
     <>
       {/* Desktop Sidebar */}
-      <nav className="fixed left-6 top-6 bottom-6 w-72 h-auto premium-glass z-50 p-6 hidden lg:flex flex-col gap-8 rounded-[2.5rem] border border-[var(--border-color)]">
+      <nav className="fixed left-6 top-6 bottom-6 w-72 h-auto premium-glass z-50 p-6 hidden lg:flex flex-col gap-8 rounded-[var(--radius-panel)] border border-[var(--border-color)]">
         {/* Logo */}
         <Link to="/" className="flex items-center gap-4 group">
-          <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-2xl shadow-glow-indigo transition-transform group-hover:scale-110">
+          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-2xl shadow-glow-indigo transition-transform group-hover:scale-110">
             🎙️
           </div>
           <div className="flex flex-col">
@@ -37,7 +37,7 @@ export default function Navigation() {
               <Link
                 key={item.path}
                 to={item.path}
-                className={`group relative flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-300 ${
+                className={`group relative flex items-center gap-4 px-5 py-4 rounded-xl transition-all duration-300 ${
                   active
                     ? 'bg-[var(--accent-primary)]/10 text-[var(--accent-primary)] shadow-sm'
                     : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
@@ -60,7 +60,7 @@ export default function Navigation() {
       </nav>
 
       {/* Mobile Bottom Nav */}
-      <nav className="fixed bottom-6 left-6 right-6 h-20 premium-glass lg:hidden z-50 flex items-center justify-around px-4 rounded-[2rem] shadow-2xl border border-[var(--border-color)]">
+      <nav className="fixed bottom-6 left-6 right-6 h-20 premium-glass lg:hidden z-50 flex items-center justify-around px-4 rounded-[var(--radius-card)] shadow-2xl border border-[var(--border-color)]">
         {navItems.map((item) => {
           const MobileIcon = item.icon;
           const active = isActive(item.path);
diff --git a/frontend/src/components/SuccessModal.tsx b/frontend/src/components/SuccessModal.tsx
index 7230685..1caa0c7 100644
--- a/frontend/src/components/SuccessModal.tsx
+++ b/frontend/src/components/SuccessModal.tsx
@@ -29,7 +29,7 @@ export default function SuccessModal({
       />
 
       {/* Modal Content */}
-      <div className="relative premium-glass rounded-[3.5rem] w-full max-w-sm overflow-hidden animate-slide-up shadow-2xl border-[var(--border-color)]">
+      <div className="relative premium-glass rounded-[var(--radius-panel)] w-full max-w-sm overflow-hidden animate-slide-up shadow-2xl border-[var(--border-color)]">
         {/* Decorative Aura */}
         <div className="absolute -top-24 -right-24 w-48 h-48 bg-[var(--accent-glow)] blur-[60px] rounded-full" />
         
diff --git a/frontend/src/pages/AddPodcast.tsx b/frontend/src/pages/AddPodcast.tsx
index 2492c6b..1a6b845 100644
--- a/frontend/src/pages/AddPodcast.tsx
+++ b/frontend/src/pages/AddPodcast.tsx
@@ -126,7 +126,7 @@ export default function AddPodcast() {
 
       <main className="max-w-5xl mx-auto">
         {/* RSS Input Area */}
-        <div className="premium-glass p-8 rounded-[3rem] mb-12 relative overflow-hidden">
+        <div className="premium-glass p-8 rounded-[var(--radius-panel)] mb-12 relative overflow-hidden">
            <div className="absolute top-0 right-0 w-32 h-32 bg-[var(--accent-primary)]/5 blur-[50px]" />
            <div className="relative z-10">
               <div className="flex items-center gap-3 mb-6">
@@ -208,7 +208,7 @@ export default function AddPodcast() {
         ) : searchType === 'podcasts' && searchResults?.podcasts && searchResults.podcasts.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
             {searchResults.podcasts.map((podcast) => (
-              <div key={podcast.id} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
+              <div key={podcast.id} className="group premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
                 <div className="relative aspect-[16/10] overflow-hidden">
                    {podcast.imageUrl ? (
                      <img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
@@ -249,7 +249,7 @@ export default function AddPodcast() {
              ))}
           </div>
         ) : searchQuery.length >= 2 ? (
-          <div className="premium-glass p-20 rounded-[3rem] text-center max-w-lg mx-auto">
+          <div className="premium-glass p-20 rounded-[var(--radius-panel)] text-center max-w-lg mx-auto">
             <Globe className="w-12 h-12 text-slate-700 mx-auto mb-6" />
             <p className="font-bold uppercase tracking-widest text-sm mb-2">Aucun résultat sur iTunes FR</p>
             <p className="text-[var(--text-secondary)] text-xs">Vérifiez l'orthographe ou essayez un nom d'auteur.</p>
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 8a73e35..9fe55a4 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -104,7 +104,7 @@ export default function Dashboard() {
 
       <main className="">
         {/* Welcome Section / Hero */}
-        <div className="premium-glass rounded-[3rem] p-8 lg:p-12 mb-12 relative overflow-hidden group">
+        <div className="premium-glass rounded-[var(--radius-panel)] p-8 lg:p-12 mb-12 relative overflow-hidden group">
            <div className="absolute top-0 right-0 w-64 h-64 bg-[var(--accent-glow)] blur-[80px] -mr-32 -mt-32 group-hover:bg-[var(--accent-primary)]/20 transition-all duration-700" />
            <div className="relative z-10">
               <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--accent-glow)] border border-[var(--border-color)] text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-widest mb-4">
@@ -205,7 +205,7 @@ export default function Dashboard() {
             )}
           </>
         ) : (
-          <div className="premium-glass p-16 rounded-[3rem] text-center max-w-2xl mx-auto border-dashed border-white/10">
+          <div className="premium-glass p-16 rounded-[var(--radius-panel)] text-center max-w-2xl mx-auto border-dashed border-white/10">
             <div className="text-4xl mb-6 opacity-40">🧘</div>
             <p className="text-white font-bold text-lg mb-2">Silence radio...</p>
             <p className="text-slate-500 text-sm leading-relaxed mb-8">
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index e2ac04e..c3048c8 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -66,7 +66,7 @@ export default function Login() {
         </div>
 
         {/* Form Card */}
-        <div className="premium-glass p-8 lg:p-12 rounded-[3rem] shadow-2xl">
+        <div className="premium-glass p-8 lg:p-12 rounded-[var(--radius-panel)] shadow-2xl">
           <div className="flex p-1.5 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)] mb-10">
             <button
               onClick={() => { setIsLogin(true); setError(null); }}
diff --git a/frontend/src/pages/Trending.tsx b/frontend/src/pages/Trending.tsx
index 90047b2..df79dfb 100644
--- a/frontend/src/pages/Trending.tsx
+++ b/frontend/src/pages/Trending.tsx
@@ -173,7 +173,7 @@ export default function Trending() {
           <>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
               {podcasts.map((podcast, index) => (
-                <div key={`${skip}-${podcast.id}`} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
+                <div key={`${skip}-${podcast.id}`} className="group premium-glass rounded-[var(--radius-card)] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
                   <div className="relative aspect-[16/10] overflow-hidden">
                      {podcast.imageUrl ? (
                        <img
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 1a2715d..03f5f91 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -16,6 +16,8 @@
     --glass-blur: blur(24px) saturate(180%);
     --shadow-premium: 0 8px 40px rgba(0, 0, 0, 0.4);
     --input-bg: rgba(255, 255, 255, 0.03);
+    --radius-card: 1.5rem;   /* 24px */
+    --radius-panel: 2rem;    /* 32px */
   }
 
   /* ── Premium Gold (Light Theme) ── */
@@ -30,6 +32,8 @@
     --border-color: rgba(197, 160, 40, 0.15);
     --glass-blur: blur(20px) saturate(120%);
     --shadow-premium: 0 12px 48px rgba(0, 0, 0, 0.08);
+    --radius-card: 1.5rem;
+    --radius-panel: 2rem;
     --input-bg: #ffffff;
   }
 }