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

62
components/EmailResponder.tsx
View File

@@ -85,19 +85,19 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
return (
<>
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<div className="fixed inset-0 bg-stone-900/20 backdrop-blur-sm flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border border-stone-200">
{/* Header */}
<div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-6 rounded-t-2xl">
<div className="bg-stone-50 border-b border-stone-200 text-stone-900 p-6 rounded-t-2xl">
<div className="flex items-center justify-between">
<div>
<h2 className="text-2xl font-bold">📧 E-Mail Antwort senden</h2>
<p className="text-blue-100 mt-1">Wähle ein schönes Template für deine Antwort</p>
<p className="text-stone-500 mt-1">Wähle ein schönes Template für deine Antwort</p>
</div>
<button
onClick={onClose}
className="text-white hover:text-gray-200 transition-colors"
className="text-stone-400 hover:text-stone-600 transition-colors"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -110,54 +110,54 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
<div className="p-6">
{/* Contact Info */}
<div className="bg-gray-50 rounded-xl p-4 mb-6">
<h3 className="font-semibold text-gray-800 mb-2">📬 Kontakt-Informationen</h3>
<div className="bg-stone-50 border border-stone-200 rounded-xl p-4 mb-6">
<h3 className="font-semibold text-stone-800 mb-2">📬 Kontakt-Informationen</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<span className="text-sm text-gray-600">Name:</span>
<p className="font-medium text-gray-900">{contactName}</p>
<span className="text-sm text-stone-500">Name:</span>
<p className="font-medium text-stone-900">{contactName}</p>
</div>
<div>
<span className="text-sm text-gray-600">E-Mail:</span>
<p className="font-medium text-gray-900">{contactEmail}</p>
<span className="text-sm text-stone-500">E-Mail:</span>
<p className="font-medium text-stone-900">{contactEmail}</p>
</div>
</div>
</div>
{/* Original Message Preview */}
<div className="bg-blue-50 rounded-xl p-4 mb-6">
<h3 className="font-semibold text-blue-800 mb-2">💬 Ursprüngliche Nachricht</h3>
<div className="bg-white rounded-lg p-3 border-l-4 border-blue-500">
<p className="text-gray-700 text-sm whitespace-pre-wrap">{originalMessage}</p>
<div className="bg-stone-50 border border-stone-200 rounded-xl p-4 mb-6">
<h3 className="font-semibold text-stone-800 mb-2">💬 Ursprüngliche Nachricht</h3>
<div className="bg-white rounded-lg p-3 border-l-4 border-blue-500 shadow-sm">
<p className="text-stone-700 text-sm whitespace-pre-wrap">{originalMessage}</p>
</div>
</div>
{/* Template Selection */}
<div className="mb-6">
<h3 className="font-semibold text-gray-800 mb-4">🎨 Template auswählen</h3>
<h3 className="font-semibold text-stone-800 mb-4">🎨 Template auswählen</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{Object.entries(templates).map(([key, template]) => (
<div
key={key}
className={`relative cursor-pointer rounded-xl border-2 transition-all duration-200 ${
selectedTemplate === key
? 'border-blue-500 bg-blue-50 shadow-lg scale-105'
: 'border-gray-200 hover:border-gray-300 hover:shadow-md'
? 'border-stone-500 bg-stone-50 shadow-md'
: 'border-stone-200 hover:border-stone-300 hover:shadow-sm'
}`}
onClick={() => setSelectedTemplate(key as keyof typeof templates)}
>
<div className={`bg-gradient-to-r ${template.color} text-white p-4 rounded-t-xl`}>
<div className={`p-4 rounded-t-xl bg-white border-b border-stone-100`}>
<div className="text-center">
<div className="text-3xl mb-2">{template.icon}</div>
<h4 className="font-bold text-lg">{template.name}</h4>
<h4 className="font-bold text-lg text-stone-900">{template.name}</h4>
</div>
</div>
<div className="p-4">
<p className="text-sm text-gray-600 text-center">{template.description}</p>
<p className="text-sm text-stone-600 text-center">{template.description}</p>
</div>
{selectedTemplate === key && (
<div className="absolute top-2 right-2">
<div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
<div className="w-6 h-6 bg-stone-600 rounded-full flex items-center justify-center">
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
@@ -171,15 +171,15 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
{/* Preview */}
<div className="mb-6">
<h3 className="font-semibold text-gray-800 mb-4">👀 Vorschau</h3>
<div className="bg-gray-100 rounded-xl p-4">
<div className="bg-white rounded-lg shadow-sm border">
<div className={`bg-gradient-to-r ${templates[selectedTemplate].color} text-white p-4 rounded-t-lg`}>
<h4 className="font-bold text-lg">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4>
<p className="text-sm opacity-90">An: {contactName}</p>
<h3 className="font-semibold text-stone-800 mb-4">👀 Vorschau</h3>
<div className="bg-stone-100 rounded-xl p-4 border border-stone-200">
<div className="bg-white rounded-lg shadow-sm border border-stone-200">
<div className="p-4 rounded-t-lg bg-stone-50 border-b border-stone-100">
<h4 className="font-bold text-lg text-stone-900">{templates[selectedTemplate].icon} {templates[selectedTemplate].name}</h4>
<p className="text-sm text-stone-500">An: {contactName}</p>
</div>
<div className="p-4">
<p className="text-sm text-gray-600">
<p className="text-sm text-stone-600">
{selectedTemplate === 'welcome' && 'Freundliche Begrüßung mit Portfolio-Links und nächsten Schritten'}
{selectedTemplate === 'project' && 'Professionelle Projekt-Antwort mit Arbeitsprozess und CTA'}
{selectedTemplate === 'quick' && 'Schnelle, kurze Bestätigung der Nachricht'}
@@ -193,14 +193,14 @@ export const EmailResponder: React.FC<EmailResponderProps> = ({
<div className="flex gap-4">
<button
onClick={onClose}
className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors font-medium"
className="flex-1 px-6 py-3 border border-stone-300 text-stone-700 rounded-xl hover:bg-stone-50 transition-colors font-medium"
>
Abbrechen
</button>
<button
onClick={handleSendEmail}
disabled={isLoading}
className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl hover:from-blue-700 hover:to-purple-700 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
className="flex-1 px-6 py-3 bg-stone-900 text-white rounded-xl hover:bg-stone-800 transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
>
{isLoading ? (
<>