jambotron_gang/reactive-mail-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Update all components to match Synthwave design showcase

Browse Source 
Co-authored-by: Junie <junie@jetbrains.com>
This commit is contained in:
Liosha84
2026-11-05 01:53:51 +01:00
co-authored by Junie
parent 587ebd86ba
commit 0d16342f9f
9 changed files with 417 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/components/contacts/contacts.component.html
+32 -26
View File
@@ -1,48 +1,48 @@
<div class="space-y-4">
<h2 class="text-lg font-orbitron font-bold text-synth-cyan flex items-center gap-2">
<span class="text-synth-pink">👥</span> Contacts
<h2 class="text-lg font-orbitron font-bold text-cyan-300 flex items-center gap-2">
<span class="text-pink-500">👥</span> CONTACTS
<span class="text-sm font-mono text-slate-400 ml-auto">{{ contacts().length }} contacts</span>
</h2>
<!-- Форма добавления -->
<div class="glass-panel p-4">
<h3 class="text-sm font-orbitron font-bold text-synth-yellow mb-3">
{{ editingContact() ? 'Edit Contact' : 'Add New Contact' }}
<div class="glass-panel p-5">
<h3 class="text-sm font-orbitron font-bold text-yellow-400 mb-3 flex items-center gap-2">
<span class="text-pink-500">✏️</span> {{ editingContact() ? 'EDIT CONTACT' : 'ADD NEW CONTACT' }}
</h3>
<form (ngSubmit)="saveContact()" class="grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<label class="block text-xs font-mono text-slate-400 mb-1">Name</label>
<label class="block text-xs font-mono text-pink-400 mb-1">NAME</label>
<input type="text" [(ngModel)]="formName" name="name"
class="w-full bg-synth-dark/50 border border-synth-cyan/20 rounded-lg px-3 py-2 text-sm font-mono text-white focus:border-synth-cyan focus:outline-none focus:ring-1 focus:ring-synth-cyan/50"
class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-2.5 text-sm font-mono text-slate-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-400 transition-all"
placeholder="John Doe">
</div>
<div>
<label class="block text-xs font-mono text-slate-400 mb-1">Email *</label>
<label class="block text-xs font-mono text-pink-400 mb-1">EMAIL *</label>
<input type="email" [(ngModel)]="formEmail" name="email" required
class="w-full bg-synth-dark/50 border border-synth-cyan/20 rounded-lg px-3 py-2 text-sm font-mono text-white focus:border-synth-cyan focus:outline-none focus:ring-1 focus:ring-synth-cyan/50"
class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-2.5 text-sm font-mono text-slate-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-400 transition-all"
placeholder="john@example.com">
</div>
<div>
<label class="block text-xs font-mono text-slate-400 mb-1">Phone</label>
<label class="block text-xs font-mono text-pink-400 mb-1">PHONE</label>
<input type="text" [(ngModel)]="formPhone" name="phone"
class="w-full bg-synth-dark/50 border border-synth-cyan/20 rounded-lg px-3 py-2 text-sm font-mono text-white focus:border-synth-cyan focus:outline-none focus:ring-1 focus:ring-synth-cyan/50"
class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-2.5 text-sm font-mono text-slate-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-400 transition-all"
placeholder="+1 234 567 8900">
</div>
<div>
<label class="block text-xs font-mono text-slate-400 mb-1">Company</label>
<label class="block text-xs font-mono text-pink-400 mb-1">COMPANY</label>
<input type="text" [(ngModel)]="formCompany" name="company"
class="w-full bg-synth-dark/50 border border-synth-cyan/20 rounded-lg px-3 py-2 text-sm font-mono text-white focus:border-synth-cyan focus:outline-none focus:ring-1 focus:ring-synth-cyan/50"
class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-2.5 text-sm font-mono text-slate-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-400 transition-all"
placeholder="Acme Corp">
</div>
<div class="md:col-span-2 flex gap-2">
<button type="submit"
class="px-4 py-2 bg-synth-pink/20 border border-synth-pink/40 rounded-lg text-sm font-mono text-synth-pink hover:bg-synth-pink/30 transition-all">
{{ editingContact() ? '💾 Update' : '➕ Add' }}
class="cyber-btn px-6 py-2 rounded-xl text-xs font-bold">
{{ editingContact() ? '💾 UPDATE' : '➕ ADD' }}
</button>
@if (editingContact()) {
<button type="button" (click)="cancelEdit()"
class="px-4 py-2 bg-slate-700/50 border border-slate-600/40 rounded-lg text-sm font-mono text-slate-300 hover:bg-slate-600/50 transition-all">
✖ Cancel
class="px-4 py-2 rounded-xl text-xs font-mono text-slate-400 border border-slate-600/40 hover:text-slate-200 hover:border-slate-400 transition-all">
✖ CANCEL
</button>
}
</div>
@@ -50,7 +50,7 @@
</div>
<!-- Список контактов -->
<div class="glass-panel p-4">
<div class="glass-panel p-5">
@if (contacts().length === 0) {
<div class="text-center py-12 text-slate-400 font-mono">
<p class="text-4xl mb-4">📇</p>
@@ -59,28 +59,34 @@
} @else {
<div class="space-y-2">
@for (contact of contacts(); track contact.id) {
<div class="flex items-center gap-3 p-3 rounded-xl border border-synth-cyan/10 hover:border-synth-cyan/40 hover:bg-synth-cyan/5 transition-all">
<div class="w-10 h-10 rounded-full bg-synth-purple/30 flex items-center justify-center text-synth-cyan font-bold text-lg">
<div class="flex items-center gap-3 p-3 rounded-xl border border-cyan-500/10 hover:border-cyan-500/40 hover:bg-cyan-500/5 transition-all">
<div class="w-10 h-10 rounded-full bg-purple-500/30 flex items-center justify-center text-cyan-400 font-bold text-lg">
{{ (contact.name || contact.email).charAt(0).toUpperCase() }}
</div>
<div class="flex-1 min-w-0">
<div class="font-mono text-white truncate">{{ contact.name || '(No name)' }}</div>
<div class="font-mono text-slate-200 truncate">{{ contact.name || '(No name)' }}</div>
<div class="text-xs text-slate-400 font-mono truncate">{{ contact.email }}</div>
@if (contact.phone || contact.company) {
<div class="text-xs text-slate-500 font-mono">
<span *ngIf="contact.company">{{ contact.company }}</span>
<span *ngIf="contact.company && contact.phone"> • </span>
<span *ngIf="contact.phone">{{ contact.phone }}</span>
@if (contact.company) {
{{ contact.company }}
}
@if (contact.company && contact.phone) {
&nbsp;•&nbsp;
}
@if (contact.phone) {
{{ contact.phone }}
}
</div>
}
</div>
<div class="flex gap-1">
<button (click)="editContact(contact)"
class="px-2 py-1 text-xs font-mono text-synth-cyan hover:bg-synth-cyan/10 rounded transition-all">
class="px-2 py-1 text-xs font-mono text-cyan-400 hover:bg-cyan-500/10 rounded-lg transition-all">
✏️
</button>
<button (click)="deleteContact(contact.id!)"
class="px-2 py-1 text-xs font-mono text-synth-pink hover:bg-synth-pink/10 rounded transition-all">
class="px-2 py-1 text-xs font-mono text-pink-400 hover:bg-pink-500/10 rounded-lg transition-all">
🗑️
</button>
</div>