From 0d16342f9f4239c488de38db50dbd6d3e918943f Mon Sep 17 00:00:00 2001 From: Liosha84 Date: Thu, 5 Nov 2026 01:53:51 +0100 Subject: [PATCH] Fix: Update all components to match Synthwave design showcase Co-authored-by: Junie --- .../components/compose/compose.component.ts | 24 +- .../contacts/contacts.component.html | 58 ++-- .../components/contacts/contacts.component.ts | 3 +- .../app/components/inbox/inbox.component.ts | 28 +- .../app/components/layout/layout.component.ts | 154 ++++++++-- .../app/components/login/login.component.ts | 37 +-- .../message-detail.component.ts | 20 +- .../components/register/register.component.ts | 45 +-- frontend/src/styles.css | 283 ++++++++++++------ 9 files changed, 417 insertions(+), 235 deletions(-) diff --git a/frontend/src/app/components/compose/compose.component.ts b/frontend/src/app/components/compose/compose.component.ts index c3b5322..2bc00d9 100644 --- a/frontend/src/app/components/compose/compose.component.ts +++ b/frontend/src/app/components/compose/compose.component.ts @@ -11,46 +11,46 @@ import { Router, ActivatedRoute } from '@angular/router'; providers: [MailService], template: `
-

- ✉️ COMPOSE MESSAGE +

+ ✉️ COMPOSE MESSAGE

@if (success) { -
+
Message sent successfully!
}
- +
- +
- +
@if (isHtml) {

💡 Supports Markdown: **bold**, *italic*, - lists, \`\`\`code\`\`\`

diff --git a/frontend/src/app/components/contacts/contacts.component.html b/frontend/src/app/components/contacts/contacts.component.html index 7239a31..3114b00 100644 --- a/frontend/src/app/components/contacts/contacts.component.html +++ b/frontend/src/app/components/contacts/contacts.component.html @@ -1,48 +1,48 @@
-

- 👥 Contacts +

+ 👥 CONTACTS {{ contacts().length }} contacts

-
-

- {{ editingContact() ? 'Edit Contact' : 'Add New Contact' }} +
+

+ ✏️ {{ editingContact() ? 'EDIT CONTACT' : 'ADD NEW CONTACT' }}

- +
- +
- +
- +
@if (editingContact()) { }
@@ -50,7 +50,7 @@
-
+
@if (contacts().length === 0) {

📇

@@ -59,28 +59,34 @@ } @else {
@for (contact of contacts(); track contact.id) { -
-
+
+
{{ (contact.name || contact.email).charAt(0).toUpperCase() }}
-
{{ contact.name || '(No name)' }}
+
{{ contact.name || '(No name)' }}
{{ contact.email }}
@if (contact.phone || contact.company) {
- {{ contact.company }} - • - {{ contact.phone }} + @if (contact.company) { + {{ contact.company }} + } + @if (contact.company && contact.phone) { +  •  + } + @if (contact.phone) { + {{ contact.phone }} + }
}
diff --git a/frontend/src/app/components/contacts/contacts.component.ts b/frontend/src/app/components/contacts/contacts.component.ts index 840f0b9..1ee36ce 100644 --- a/frontend/src/app/components/contacts/contacts.component.ts +++ b/frontend/src/app/components/contacts/contacts.component.ts @@ -1,13 +1,12 @@ import { Component, inject, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { CommonModule } from '@angular/common'; import { MailService } from '../../services/mail.service'; import { Contact } from '../../models/mail.models'; @Component({ selector: 'app-contacts', standalone: true, - imports: [FormsModule, CommonModule], + imports: [FormsModule], providers: [MailService], templateUrl: './contacts.component.html', styles: `` diff --git a/frontend/src/app/components/inbox/inbox.component.ts b/frontend/src/app/components/inbox/inbox.component.ts index b4fd400..8814427 100644 --- a/frontend/src/app/components/inbox/inbox.component.ts +++ b/frontend/src/app/components/inbox/inbox.component.ts @@ -18,7 +18,7 @@ import { of } from 'rxjs';
@for (p of pageNumbers; track p) { } diff --git a/frontend/src/app/components/layout/layout.component.ts b/frontend/src/app/components/layout/layout.component.ts index d5401a9..9e2882a 100644 --- a/frontend/src/app/components/layout/layout.component.ts +++ b/frontend/src/app/components/layout/layout.component.ts @@ -1,49 +1,93 @@ -import { Component, inject, signal } from '@angular/core'; +import { Component, inject, signal, effect } from '@angular/core'; import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router'; import { AuthService } from '../../services/auth.service'; import { MailService } from '../../services/mail.service'; import { Folder } from '../../models/mail.models'; +const THEMES = [ + { value: 'theme-cyber-magenta', label: '💖 Cyber Magenta' }, + { value: 'theme-neon-cyan', label: '🩵 Neon Cyan' }, + { value: 'theme-sunset-orange', label: '🧡 Sunset Orange' }, + { value: 'theme-matrix-green', label: '💚 Matrix Green' }, +]; + @Component({ selector: 'app-layout', standalone: true, imports: [RouterOutlet, RouterLink, RouterLinkActive], template: ` -
- -