From 3139468c92f44ec2293a5d51134d266a5874f122 Mon Sep 17 00:00:00 2001 From: Michele Date: Tue, 31 Mar 2026 20:38:29 +0200 Subject: [PATCH] redesign: apply correct Editorial Fresh design system MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix palette: #E85A4F accent, #FFFBF5 cream, #1A1A1A ink (was wrong values) - Remove all border-radius (zero radius everywhere per design spec) - Sidebar: cream-dark #F5F0E8 bg with accent-left active indicator - card-editorial: white bg, 4px accent top bar via absolute div - Buttons: ink bg → accent hover + translateY(-1px) - LoginPage: correct split layout with Editorial Fresh tokens - Add .btn-primary / .btn-outline / .input-editorial / .editorial-tag classes - Fraunces + DM Sans correctly applied everywhere Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/components/Dashboard.jsx | 247 +++++++------- frontend/src/components/Layout.jsx | 166 +++++++--- frontend/src/components/LoginPage.jsx | 391 +++++++++++++---------- frontend/src/components/PlanBanner.jsx | 68 ++-- frontend/src/components/SettingsPage.jsx | 316 +++++++++--------- frontend/src/components/UpgradeModal.jsx | 164 ++++++---- frontend/src/index.css | 168 +++++++++- frontend/tailwind.config.js | 50 +-- 8 files changed, 981 insertions(+), 589 deletions(-) diff --git a/frontend/src/components/Dashboard.jsx b/frontend/src/components/Dashboard.jsx index fa9c220..ee0ec24 100644 --- a/frontend/src/components/Dashboard.jsx +++ b/frontend/src/components/Dashboard.jsx @@ -7,13 +7,8 @@ import PlanBanner from './PlanBanner' export default function Dashboard() { const { user, isAdmin } = useAuth() const [stats, setStats] = useState({ - characters: 0, - active: 0, - posts: 0, - scheduled: 0, - pendingComments: 0, - affiliates: 0, - plans: 0, + characters: 0, active: 0, posts: 0, scheduled: 0, + pendingComments: 0, affiliates: 0, plans: 0, }) const [recentPosts, setRecentPosts] = useState([]) const [providerStatus, setProviderStatus] = useState(null) @@ -44,49 +39,72 @@ export default function Dashboard() { }) }, []) + const hour = new Date().getHours() + const greeting = hour < 12 ? 'Buongiorno' : hour < 18 ? 'Buon pomeriggio' : 'Buonasera' + return ( -
-
-

- Dashboard -

+
+ {/* ── Header ─────────────────────────────────────────────── */} +
+
+ Dashboard +
+

+ {greeting}{user?.display_name ? `, ${user.display_name}` : ''} +

+

+ Panoramica del tuo studio editoriale AI +

+
{isAdmin && ( - ⚙ Admin Settings + ⚙ Admin )}
-

- {user?.display_name ? `Ciao, ${user.display_name} — ` : ''}Panoramica Leopost Full -

- {/* Stats grid */} -
- - - - - - + {/* ── Stats grid ──────────────────────────────────────────── */} +
+ + + + + +
- {/* Provider status */} + {/* ── Provider status ─────────────────────────────────────── */} {providerStatus && ( -
-

- Stato Provider -

-
- +
+ Stato Provider +
+ {providerStatus.social && Object.entries(providerStatus.social).map(([k, v]) => ( @@ -94,9 +112,9 @@ export default function Dashboard() { ))}
{!providerStatus.llm?.configured && ( -

+

Configura le API key in{' '} - + Impostazioni

@@ -104,67 +122,43 @@ export default function Dashboard() {
)} - {/* Quick actions */} -
-

- Azioni rapide -

-
- - Genera contenuto - - - Calendario AI - - - Nuovo personaggio - - - Nuovo piano - + {/* ── Quick actions ───────────────────────────────────────── */} +
+ Azioni rapide +
+ Genera contenuto + Calendario AI + Nuovo personaggio + Nuovo piano
- {/* Recent posts */} + {/* ── Recent posts ────────────────────────────────────────── */} {recentPosts.length > 0 && ( -
-
-

- Post recenti -

- +
+
+ Post recenti + Vedi tutti
-
+
{recentPosts.map((p) => (
- - {p.status} - - {p.platform_hint} -

- {p.text_content?.slice(0, 80)}... + + {p.platform_hint} +

+ {p.text_content?.slice(0, 80)}…

))} @@ -175,43 +169,80 @@ export default function Dashboard() { ) } -function StatCard({ label, value, sub, accentColor }) { +// ── Sub-components ───────────────────────────────────────────────────────────── + +function StatCard({ label, value, sub, accent, delay = 0 }) { return (
-
-
- +
+
+ {label}
-

{value}

- {sub &&

{sub}

} +

+ {value} +

+ {sub &&

{sub}

}
) } function ProviderBadge({ name, ok, detail }) { return ( -
-
+
+
{name} - {detail && ({detail})} + {detail && ({detail})}
) } -function statusColor(s) { +function StatusBadge({ status }) { const map = { - draft: 'bg-slate-100 text-slate-500', - approved: 'bg-blue-50 text-blue-600', - scheduled: 'bg-amber-50 text-amber-600', - published: 'bg-emerald-50 text-emerald-600', - failed: 'bg-red-50 text-red-600', + draft: { bg: 'var(--cream-dark)', color: 'var(--ink-muted)' }, + approved: { bg: '#EFF6FF', color: '#2563EB' }, + scheduled: { bg: '#FFFBEB', color: '#D97706' }, + published: { bg: 'var(--success-light, #F0F9F4)', color: 'var(--success)' }, + failed: { bg: '#FFF5F5', color: '#C53030' }, } - return map[s] || 'bg-slate-100 text-slate-500' + const s = map[status] || map.draft + return ( + + {status} + + ) } diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx index 6db24ea..582d8d6 100644 --- a/frontend/src/components/Layout.jsx +++ b/frontend/src/components/Layout.jsx @@ -2,66 +2,150 @@ import { NavLink, Outlet } from 'react-router-dom' import { useAuth } from '../AuthContext' const nav = [ - { to: '/', label: 'Dashboard', icon: '◉' }, - { to: '/characters', label: 'Personaggi', icon: '◎' }, - { to: '/content', label: 'Contenuti', icon: '✦' }, - { to: '/affiliates', label: 'Link Affiliati', icon: '⟁' }, - { to: '/plans', label: 'Piano Editoriale', icon: '▦' }, - { to: '/schedule', label: 'Schedulazione', icon: '◈' }, - { to: '/social', label: 'Social', icon: '◇' }, - { to: '/comments', label: 'Commenti', icon: '◌' }, - { to: '/editorial', label: 'Calendario AI', icon: '◰' }, - { to: '/settings', label: 'Impostazioni', icon: '⚙' }, + { to: '/', label: 'Dashboard', icon: '◉' }, + { to: '/characters',label: 'Personaggi', icon: '◎' }, + { to: '/content', label: 'Contenuti', icon: '✦' }, + { to: '/affiliates',label: 'Link Affiliati', icon: '⟁' }, + { to: '/plans', label: 'Piano Editoriale', icon: '▦' }, + { to: '/schedule', label: 'Schedulazione', icon: '◈' }, + { to: '/social', label: 'Social', icon: '◇' }, + { to: '/comments', label: 'Commenti', icon: '◌' }, + { to: '/editorial', label: 'Calendario AI', icon: '◰' }, + { to: '/settings', label: 'Impostazioni', icon: '⚙' }, ] export default function Layout() { - const { user, logout } = useAuth() + const { user, logout, isPro, isAdmin } = useAuth() return ( -
- {/* Sidebar */} -