Michael/podcastic
1
0 Fork 0
mirror of https://github.com/R0m1k3/podcastic.git synced 2026-10-22 06:28:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: initialize global styles with theme-aware CSS variables and utility components

Browse Source
This commit is contained in:
Michael committed 2026-04-16 15:20:29 +02:00
1 parent 3bb2dfc009
commit 67d45b72ee
9 files changed
+19 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/EpisodeCard.tsx
+2 -2
View File
@@ -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}
frontend/src/components/EpisodeDetails.tsx
+1 -1
View File
@@ -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" />
frontend/src/components/Navigation.tsx
+4 -4
View File
@@ -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);
frontend/src/components/SuccessModal.tsx
+1 -1
View File
@@ -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" />