mirror of
https://github.com/R0m1k3/FlowReader.git
synced 2026-10-19 21:28:10 +02:00
fix(ui): update ribbon text and fix button hover visibility
This commit is contained in:
1 parent
200bd63335
commit
d2e344a98b
3 files changed
+13
-13
No files matched your search
@@ -30,11 +30,11 @@ export function AddFeedModal({ isOpen, onClose }: AddFeedModalProps) {
|
|||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-carbon-dark/80 backdrop-blur-sm animate-in fade-in duration-300" onClick={onClose}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-carbon-dark/80 backdrop-blur-sm animate-in fade-in duration-300" onClick={onClose}>
|
||||||
<div
|
<div
|
||||||
className="w-full max-w-md glass-panel p-8 rounded-2xl shadow-2xl border border-gold/10 animate-in zoom-in duration-300"
|
className="w-full max-w-md paper-panel p-8 rounded-2xl shadow-2xl border border-nature/10 animate-in zoom-in duration-300"
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
<div className="flex justify-between items-center mb-6">
|
<div className="flex justify-between items-center mb-6">
|
||||||
<h2 className="text-2xl font-serif text-gold italic">Nouveau Flux</h2>
|
<h2 className="text-2xl font-serif text-nature italic">Nouveau Flux</h2>
|
||||||
<button onClick={onClose} className="text-paper-muted hover:text-white transition-colors">
|
<button onClick={onClose} className="text-paper-muted hover:text-white transition-colors">
|
||||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M6 18L18 6M6 6l12 12" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
|
|||||||
<div className="absolute -top-2 -right-2 z-50 w-[100px] h-[100px] overflow-hidden pointer-events-none">
|
<div className="absolute -top-2 -right-2 z-50 w-[100px] h-[100px] overflow-hidden pointer-events-none">
|
||||||
{/* The Ribbon Itself */}
|
{/* The Ribbon Itself */}
|
||||||
<div className="absolute top-[22px] -right-[35px] w-[140px] bg-nature text-white text-[10px] font-extrabold uppercase tracking-widest py-1.5 text-center transform rotate-45 shadow-lg shadow-black/20 border-b border-white/10 flex items-center justify-center opacity-100 z-50">
|
<div className="absolute top-[22px] -right-[35px] w-[140px] bg-nature text-white text-[10px] font-extrabold uppercase tracking-widest py-1.5 text-center transform rotate-45 shadow-lg shadow-black/20 border-b border-white/10 flex items-center justify-center opacity-100 z-50">
|
||||||
Non Lu
|
Nouveau
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Darker Folds for "Wrapping" Effect (Simulated behind the card) */}
|
{/* Darker Folds for "Wrapping" Effect (Simulated behind the card) */}
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
|
|||||||
{/* Close button for desktop */}
|
{/* Close button for desktop */}
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className="absolute top-8 -right-16 hidden md:flex w-12 h-12 items-center justify-center rounded-full border border-gold/20 text-gold hover:bg-gold hover:text-carbon hover:scale-110 transition-all duration-300 z-50"
|
className="absolute top-8 -right-16 hidden md:flex w-12 h-12 items-center justify-center rounded-full border border-nature/20 text-nature hover:bg-nature hover:text-white hover:scale-110 transition-all duration-300 z-50"
|
||||||
title="Fermer"
|
title="Fermer"
|
||||||
>
|
>
|
||||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
@@ -53,19 +53,19 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
|
|||||||
|
|
||||||
<div className={`p-8 md:p-20 ${!article.image_url ? 'pt-16' : 'pt-8'}`}>
|
<div className={`p-8 md:p-20 ${!article.image_url ? 'pt-16' : 'pt-8'}`}>
|
||||||
<header className="mb-10">
|
<header className="mb-10">
|
||||||
<div className="flex items-center space-x-3 text-gold text-[10px] uppercase tracking-[0.4em] font-black mb-8">
|
<div className="flex items-center space-x-3 text-nature text-[10px] uppercase tracking-[0.4em] font-black mb-8">
|
||||||
<span className="bg-gold/10 px-2 py-1 rounded">{article.feed_title}</span>
|
<span className="bg-nature/10 px-2 py-1 rounded">{article.feed_title}</span>
|
||||||
<span className="opacity-30">•</span>
|
<span className="opacity-30">•</span>
|
||||||
<span>{article.published_at ? new Date(article.published_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : 'Aujourd\'hui'}</span>
|
<span>{article.published_at ? new Date(article.published_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : 'Aujourd\'hui'}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="text-4xl md:text-6xl font-serif text-paper-white leading-[1.15] italic-gold tracking-tight">
|
<h1 className="text-4xl md:text-6xl font-serif text-paper-white leading-[1.15] italic-nature tracking-tight">
|
||||||
{article.title}
|
{article.title}
|
||||||
</h1>
|
</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="magazine-content text-paper-white/90 text-xl font-reading leading-relaxed space-y-8 selection:bg-gold/20 break-words overflow-x-hidden mb-12"
|
className="magazine-content text-paper-white/90 text-xl font-reading leading-relaxed space-y-8 selection:bg-nature/20 break-words overflow-x-hidden mb-12"
|
||||||
dangerouslySetInnerHTML={{ __html: displayContent }}
|
dangerouslySetInnerHTML={{ __html: displayContent }}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -74,8 +74,8 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
|
|||||||
<button
|
<button
|
||||||
onClick={() => onToggleFavorite(article.id)}
|
onClick={() => onToggleFavorite(article.id)}
|
||||||
className={`flex items-center space-x-3 px-6 py-2.5 rounded-full border transition-all duration-500 ${article.is_favorite
|
className={`flex items-center space-x-3 px-6 py-2.5 rounded-full border transition-all duration-500 ${article.is_favorite
|
||||||
? 'bg-gold text-carbon border-paper-white/20 shadow-lg'
|
? 'bg-nature text-white border-paper-white/20 shadow-lg'
|
||||||
: 'border-paper-white/20 text-gold hover:bg-gold/5'
|
: 'border-paper-white/20 text-nature hover:bg-nature/5'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<svg className="w-4 h-4" fill={article.is_favorite ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor">
|
<svg className="w-4 h-4" fill={article.is_favorite ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor">
|
||||||
@@ -91,7 +91,7 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
|
|||||||
href={article.url}
|
href={article.url}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="group flex items-center space-x-2 text-[10px] uppercase tracking-[0.2em] font-black text-paper-muted hover:text-gold transition-colors"
|
className="group flex items-center space-x-2 text-[10px] uppercase tracking-[0.2em] font-black text-paper-muted hover:text-nature transition-colors"
|
||||||
>
|
>
|
||||||
<span>Source d'origine</span>
|
<span>Source d'origine</span>
|
||||||
<svg className="w-3 h-3 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg className="w-3 h-3 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
@@ -101,7 +101,7 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer className="text-center pb-24">
|
<footer className="text-center pb-24">
|
||||||
<div className="text-gold text-4xl font-serif mb-6 italic select-none">F.</div>
|
<div className="text-nature text-4xl font-serif mb-6 italic select-none">F.</div>
|
||||||
<p className="text-paper-muted/40 text-[10px] uppercase tracking-[0.4em] font-black">
|
<p className="text-paper-muted/40 text-[10px] uppercase tracking-[0.4em] font-black">
|
||||||
FlowReader Lux Édition • 2026
|
FlowReader Lux Édition • 2026
|
||||||
</p>
|
</p>
|
||||||
@@ -112,7 +112,7 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
|
|||||||
{/* Mobile close button overlay */}
|
{/* Mobile close button overlay */}
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className="fixed bottom-8 right-8 md:hidden w-14 h-14 bg-gold text-carbon rounded-full shadow-2xl flex items-center justify-center scale-90 active:scale-75 transition-transform gold-glow z-50"
|
className="fixed bottom-8 right-8 md:hidden w-14 h-14 bg-nature text-white rounded-full shadow-2xl flex items-center justify-center scale-90 active:scale-75 transition-transform nature-glow z-50"
|
||||||
>
|
>
|
||||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
|||||||
Reference in new issue
Block a user