jambotron_gang/reactive-mail-server
2
0
Fork 0
Code Issues Pull Requests 1 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/compose/compose.component.ts
+12 -12
View File
@@ -11,46 +11,46 @@ import { Router, ActivatedRoute } from '@angular/router';
providers: [MailService],
template: `
<div class="glass-panel p-6">
<h2 class="text-lg font-orbitron font-bold text-synth-cyan mb-6 flex items-center gap-2">
<span class="text-synth-pink">✉️</span> COMPOSE MESSAGE
<h2 class="text-lg font-orbitron font-bold text-cyan-500 mb-6 flex items-center gap-2">
<span class="text-pink-500">✉️</span> COMPOSE MESSAGE
</h2>
@if (success) {
<div class="mb-4 p-3 rounded-lg bg-synth-cyan/20 border border-synth-cyan/40 text-synth-cyan text-sm font-mono">
<div class="mb-4 p-3 rounded-lg bg-cyan-500/20 border border-cyan-500/40 text-cyan-500 text-sm font-mono">
Message sent successfully!
</div>
}
<form (ngSubmit)="onSend()" class="space-y-4">
<div>
<label for="to" class="block text-xs font-mono text-synth-cyan mb-1">TO</label>
<label for="to" class="block text-xs font-mono text-cyan-500 mb-1">TO</label>
<input id="to" type="email" [(ngModel)]="to" name="to" required
class="w-full bg-synth-darker/80 border border-synth-cyan/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-synth-pink focus:border-synth-cyan transition-all"
class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-500 transition-all"
placeholder="recipient@example.com">
</div>
<div>
<label for="subject" class="block text-xs font-mono text-synth-cyan mb-1">SUBJECT</label>
<label for="subject" class="block text-xs font-mono text-cyan-500 mb-1">SUBJECT</label>
<input id="subject" type="text" [(ngModel)]="subject" name="subject" required
class="w-full bg-synth-darker/80 border border-synth-cyan/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-synth-pink focus:border-synth-cyan transition-all"
class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-500 transition-all"
placeholder="Enter subject...">
</div>
<div>
<div class="flex items-center justify-between mb-1">
<label for="body" class="text-xs font-mono text-synth-cyan">BODY</label>
<label for="body" class="text-xs font-mono text-cyan-500">BODY</label>
<label class="flex items-center gap-2 cursor-pointer">
<span class="text-xs font-mono text-slate-400">HTML</span>
<input type="checkbox" [(ngModel)]="isHtml" name="isHtml" class="sr-only">
<span class="w-10 h-5 rounded-full bg-synth-dark/50 border border-synth-cyan/30 relative transition-all"
[class.bg-synth-cyan/30]="isHtml" [class.border-synth-cyan]="isHtml">
<span class="absolute top-0.5 left-0.5 w-3.5 h-3.5 rounded-full bg-synth-cyan transition-all"
<span class="w-10 h-5 rounded-full bg-slate-900/50 border border-cyan-500/30 relative transition-all"
[class.bg-cyan-500/30]="isHtml" [class.border-cyan-500]="isHtml">
<span class="absolute top-0.5 left-0.5 w-3.5 h-3.5 rounded-full bg-cyan-500 transition-all"
[class.translate-x-5]="isHtml"></span>
</span>
</label>
</div>
<textarea id="body" [(ngModel)]="body" name="body" rows="10" required
class="w-full bg-synth-darker/80 border border-synth-cyan/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-synth-pink focus:border-synth-cyan transition-all resize-none"
class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-500 transition-all resize-none"
[placeholder]="isHtml ? 'Write HTML or Markdown...' : 'Write your message...'"></textarea>
@if (isHtml) {
<p class="text-xs text-slate-500 font-mono mt-1">💡 Supports Markdown: **bold**, *italic*, - lists, \`\`\`code\`\`\`</p>