From e70fe50ae336a87c2007cd88812f3c7b82508440 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sat, 21 Mar 2026 11:11:54 +0100
Subject: [PATCH] Fix demo banner: i18n for demo button, icon alignment, add
 addon mgmt & OIDC to full version features

---
 client/src/components/Layout/DemoBanner.jsx | 17 ++++++++++-------
 client/src/pages/LoginPage.jsx              |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Layout/DemoBanner.jsx b/client/src/components/Layout/DemoBanner.jsx
index 916565e..4b79820 100644
--- a/client/src/components/Layout/DemoBanner.jsx
+++ b/client/src/components/Layout/DemoBanner.jsx
@@ -15,8 +15,10 @@ const texts = {
       'API-Schluessel (Google Maps, Wetter)',
       'Benutzer- & Rechteverwaltung',
       'Automatische Backups',
+      'Addon-Verwaltung (aktivieren/deaktivieren)',
+      'OIDC / SSO Single Sign-On',
     ],
-    addonsTitle: 'Modulare Addons',
+    addonsTitle: 'Modulare Addons (in der Vollversion deaktivierbar)',
     addons: [
       ['Vacay', 'Urlaubsplaner mit Kalender, Feiertagen & Fusion'],
       ['Atlas', 'Weltkarte mit besuchten Laendern & Reisestatistiken'],
@@ -43,8 +45,10 @@ const texts = {
       'API key management (Google Maps, Weather)',
       'User & permission management',
       'Automatic backups',
+      'Addon management (enable/disable)',
+      'OIDC / SSO single sign-on',
     ],
-    addonsTitle: 'Modular Addons',
+    addonsTitle: 'Modular Addons (can be deactivated in full version)',
     addons: [
       ['Vacay', 'Vacation planner with calendar, holidays & user fusion'],
       ['Atlas', 'World map with visited countries & travel stats'],
@@ -61,7 +65,7 @@ const texts = {
   },
 }
 
-const featureIcons = [Upload, Key, Users, Database]
+const featureIcons = [Upload, Key, Users, Database, Puzzle, Shield]
 const addonIcons = [CalendarDays, Globe, ListChecks, Wallet, FileText, ArrowRightLeft]
 
 export default function DemoBanner() {
@@ -152,15 +156,14 @@ export default function DemoBanner() {
             const Icon = addonIcons[i]
             return (
               <div key={name} style={{
-                display: 'flex', alignItems: 'flex-start', gap: 8,
                 background: '#f8fafc', borderRadius: 10, padding: '8px 10px',
                 border: '1px solid #f1f5f9',
               }}>
-                <Icon size={14} style={{ flexShrink: 0, color: '#111827', marginTop: 1 }} />
-                <div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
+                  <Icon size={12} style={{ flexShrink: 0, color: '#111827' }} />
                   <span style={{ fontSize: 11, fontWeight: 700, color: '#111827' }}>{name}</span>
-                  <p style={{ fontSize: 10, color: '#94a3b8', margin: '2px 0 0', lineHeight: 1.3 }}>{desc}</p>
                 </div>
+                <p style={{ fontSize: 10, color: '#94a3b8', margin: 0, lineHeight: 1.3, paddingLeft: 18 }}>{desc}</p>
               </div>
             )
           })}
diff --git a/client/src/pages/LoginPage.jsx b/client/src/pages/LoginPage.jsx
index 3d68c9a..9bf346c 100644
--- a/client/src/pages/LoginPage.jsx
+++ b/client/src/pages/LoginPage.jsx
@@ -404,7 +404,7 @@ export default function LoginPage() {
               onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 2px 12px rgba(245, 158, 11, 0.3)' }}
             >
               <Plane size={18} />
-              Demo ausprobieren — ohne Registrierung
+              {language === 'de' ? 'Demo ausprobieren — ohne Registrierung' : 'Try the demo — no registration needed'}
             </button>
           )}
         </div>