Apply modern SaaS design to all admin pages
Modernize all admin interface pages with consistent design language: - Add hero sections with gradient backgrounds and blur effects - Implement modern card designs with hover animations - Use gradient buttons with shadow effects - Add emoji icons in colored containers - Apply consistent color themes per page - Enhance user experience with smooth transitions Pages updated: - /admin/devices (purple theme) - /admin/mqtt (cyan/blue theme) - /admin/setup (emerald theme) - /admin/users (violet theme) - /admin/settings (indigo theme) - /admin/emails (pink/rose theme) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -144,21 +144,29 @@ export default function SettingsPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-6">Settings</h2>
|
||||
<div className="space-y-8">
|
||||
{/* Hero Section with Gradient */}
|
||||
<div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-indigo-600 via-blue-700 to-purple-800 p-8 shadow-xl">
|
||||
<div className="absolute top-0 right-0 -mt-4 -mr-4 h-40 w-40 rounded-full bg-white/10 blur-3xl"></div>
|
||||
<div className="absolute bottom-0 left-0 -mb-4 -ml-4 h-40 w-40 rounded-full bg-white/10 blur-3xl"></div>
|
||||
<div className="relative">
|
||||
<h2 className="text-4xl font-bold text-white mb-2">Settings</h2>
|
||||
<p className="text-indigo-100 text-lg">Konfiguriere System-Einstellungen und Integrationen</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tab Navigation */}
|
||||
<div className="border-b border-gray-200 mb-6">
|
||||
<nav className="flex gap-4">
|
||||
<div className="bg-white rounded-2xl shadow-lg overflow-hidden">
|
||||
<nav className="flex gap-2 p-2 bg-gradient-to-r from-gray-50 to-slate-50">
|
||||
<button
|
||||
onClick={() => setActiveTab('smtp')}
|
||||
className={`px-4 py-2 border-b-2 font-medium ${
|
||||
className={`px-6 py-3 rounded-xl font-semibold transition-all ${
|
||||
activeTab === 'smtp'
|
||||
? 'border-blue-600 text-blue-600'
|
||||
: 'border-transparent text-gray-600 hover:text-gray-900'
|
||||
? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg'
|
||||
: 'text-gray-600 hover:bg-white hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
SMTP Settings
|
||||
📧 SMTP Settings
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -166,25 +174,32 @@ export default function SettingsPage() {
|
||||
{/* Status Message */}
|
||||
{message && (
|
||||
<div
|
||||
className={`mb-6 p-4 rounded ${
|
||||
className={`p-5 rounded-xl shadow-lg flex items-center gap-3 ${
|
||||
message.type === 'success'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-red-100 text-red-800'
|
||||
? 'bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 text-green-800'
|
||||
: 'bg-gradient-to-r from-red-50 to-orange-50 border-2 border-red-200 text-red-800'
|
||||
}`}
|
||||
>
|
||||
{message.text}
|
||||
<span className="text-2xl">{message.type === 'success' ? '✓' : '⚠️'}</span>
|
||||
<span className="font-semibold">{message.text}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Config Source Info */}
|
||||
<div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded">
|
||||
<p className="text-sm text-blue-900">
|
||||
<strong>Current source:</strong> {source === 'database' ? 'Database (Custom)' : 'Environment (.env)'}
|
||||
</p>
|
||||
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-5 shadow-md">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white text-xl">
|
||||
📊
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-blue-900">Current Source</p>
|
||||
<p className="text-blue-700">{source === 'database' ? 'Database (Custom)' : 'Environment (.env)'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SMTP Form */}
|
||||
<form onSubmit={handleSave} className="bg-white rounded-lg shadow p-6">
|
||||
<form onSubmit={handleSave} className="bg-white rounded-2xl shadow-lg p-8">
|
||||
<div className="space-y-4">
|
||||
{/* Host */}
|
||||
<div>
|
||||
@@ -343,28 +358,28 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex gap-3 mt-6">
|
||||
<div className="flex gap-3 mt-8 pt-6 border-t border-gray-200">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
|
||||
className="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 disabled:from-gray-400 disabled:to-gray-500 font-semibold shadow-lg hover:shadow-xl transition-all"
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Settings'}
|
||||
{saving ? '⚙️ Saving...' : '💾 Save Settings'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowTestModal(true)}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700"
|
||||
className="px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl hover:from-green-600 hover:to-emerald-700 font-semibold shadow-lg hover:shadow-xl transition-all"
|
||||
>
|
||||
Test Connection
|
||||
✓ Test Connection
|
||||
</button>
|
||||
{source === 'database' && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleReset}
|
||||
className="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100"
|
||||
className="px-6 py-3 bg-gradient-to-r from-gray-100 to-slate-100 border-2 border-gray-300 rounded-xl hover:from-gray-200 hover:to-slate-200 font-semibold shadow-md hover:shadow-lg transition-all"
|
||||
>
|
||||
Reset to Defaults
|
||||
↺ Reset to Defaults
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user