denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine admin dashboard and project management UI with cohesive color palette and improved readability

Browse Source 
- Update background colors and text styles for better contrast and legibility.
- Enhance button styles and hover effects for a more modern look.
- Remove unnecessary scaling effects and adjust border styles for consistency.
- Introduce a cohesive design language across components to improve user experience.
This commit is contained in:
denshooter
2026-01-10 02:40:50 +01:00
parent 7d84d35f09
commit b051d9d2ef
14 changed files with 387 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/ImportExport.tsx
View File

@@ -99,23 +99,23 @@ export default function ImportExport() {
};
return (
<div className="admin-glass-card rounded-lg p-6">
<h3 className="text-lg font-semibold text-white mb-4 flex items-center">
<FileText className="w-5 h-5 mr-2 text-blue-400" />
<div className="bg-white border border-stone-200 rounded-xl p-6">
<h3 className="text-lg font-semibold text-stone-900 mb-4 flex items-center">
<FileText className="w-5 h-5 mr-2 text-stone-600" />
Import & Export
</h3>
<div className="space-y-4">
{/* Export Section */}
<div className="admin-glass-light rounded-lg p-4">
<h4 className="font-medium text-white mb-2">Export Projekte</h4>
<p className="text-sm text-white/70 mb-3">
<div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
<h4 className="font-medium text-stone-900 mb-2">Export Projekte</h4>
<p className="text-sm text-stone-600 mb-3">
Alle Projekte als JSON-Datei herunterladen
</p>
<button
onClick={handleExport}
disabled={isExporting}
className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
className="flex items-center px-4 py-2 bg-stone-900 text-white rounded-lg hover:bg-stone-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
<Download className="w-4 h-4 mr-2" />
{isExporting ? 'Exportiere...' : 'Exportieren'}
@@ -123,12 +123,12 @@ export default function ImportExport() {
</div>
{/* Import Section */}
<div className="admin-glass-light rounded-lg p-4">
<h4 className="font-medium text-white mb-2">Import Projekte</h4>
<p className="text-sm text-white/70 mb-3">
<div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
<h4 className="font-medium text-stone-900 mb-2">Import Projekte</h4>
<p className="text-sm text-stone-600 mb-3">
JSON-Datei mit Projekten hochladen
</p>
<label className="flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 hover:scale-105 transition-all cursor-pointer">
<label className="flex items-center px-4 py-2 bg-stone-900 text-white rounded-lg hover:bg-stone-800 transition-colors cursor-pointer w-fit">
<Upload className="w-4 h-4 mr-2" />
{isImporting ? 'Importiere...' : 'Datei auswählen'}
<input
@@ -143,16 +143,16 @@ export default function ImportExport() {
{/* Import Results */}
{importResult && (
<div className="admin-glass-light rounded-lg p-4">
<h4 className="font-medium text-white mb-2 flex items-center">
<div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
<h4 className="font-medium text-stone-900 mb-2 flex items-center">
{importResult.success ? (
<CheckCircle className="w-5 h-5 mr-2 text-green-400" />
<CheckCircle className="w-5 h-5 mr-2 text-green-600" />
) : (
<AlertCircle className="w-5 h-5 mr-2 text-red-400" />
<AlertCircle className="w-5 h-5 mr-2 text-red-600" />
)}
Import Ergebnis
</h4>
<div className="text-sm text-white/70 space-y-1">
<div className="text-sm text-stone-600 space-y-1">
<p><strong>Importiert:</strong> {importResult.results.imported}</p>
<p><strong>Übersprungen:</strong> {importResult.results.skipped}</p>
{importResult.results.errors.length > 0 && (
@@ -160,7 +160,7 @@ export default function ImportExport() {
<p><strong>Fehler:</strong></p>
<ul className="list-disc list-inside ml-4">
{importResult.results.errors.map((error, index) => (
<li key={index} className="text-red-400">{error}</li>
<li key={index} className="text-red-600">{error}</li>
))}
</ul>
</div>