Ajustes de formatação e validação

src/app/pages/participate/participate.component.css

@@ -0,0 +1,25 @@
+.font-unb {
+    font-size: 13px;
+    font-family: "unb-pro", sans-serif;    
+}
+
+.containner h1 {
+    color: #0087C8;
+    font-size: 13px;
+    font-family: "unb-pro", sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 12.35px;
+    margin-left: 29px;
+    margin-top: 45px;
+    margin-bottom: 40px;
+    text-align: start;
+}
+
+.containner {
+    width: 360px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    height: -300px;
+}

src/app/pages/participate/participate.component.html

@@ -1 +1,9 @@
-<p>participate works!</p>
+<div class="containner">
+    <h1 [routerLink]="['/suggestAgenda']">
+        Sugira uma pauta 
+    </h1>
+    <h1>
+        Solicite uma transmissão
+    </h1>
+</div>
+

src/app/pages/suggest-agenda/suggest-agenda.component.css

@@ -63,4 +63,9 @@ span {
 .input:focus {
     outline: none !important;
     border: 0.25px solid #00A550;
-  }
+}
+
+.required-field {
+    outline: none !important;
+    border: 2px solid red;
+}

src/app/pages/suggest-agenda/suggest-agenda.component.html

@@ -1,16 +1,16 @@
 <div class="containner" >
-    <div>
+    <div class="mb-4">
         <h1>Sugestão de Pautas</h1>
         <form [formGroup]="suggestAgendaForm" (submit)="sendSuggestAgenda()" class="flex flex-col gap-y-3">
             <input type="text" class="input first" name="tema" formControlName="tema" placeholder="Tema" >
-            <textarea class="input descricao" name="descicao" formControlName="descricao" placeholder="Descrição" required></textarea>
+            <textarea class="input descricao" name="descicao" formControlName="descricao" placeholder="Descrição" required [ngClass]="{'required-field': !isDescricaoFilled}" (change)="onRequiredFieldsChange()"></textarea>
             <input type="text" class="input first" name="quando" formControlName="quando" placeholder="Quando (data e hora)" >
             <input type="text" class="input first" name="local" formControlName="local" placeholder="Local" >
-            <input type="text" class="input first" name="responsavel" formControlName="responsavel" placeholder="Responsável" required>
-            <input type="text" class="input first" name="telefone-responsavel" formControlName="telefoneResponsavel" placeholder="Telefone do Responsável" required>
+            <input type="text" class="input first" name="responsavel" formControlName="responsavel" placeholder="Responsável" required [ngClass]="{'required-field': !isResponsavelFilled}" (change)="onRequiredFieldsChange()">
+            <input type="text" class="input first" name="telefone-responsavel" formControlName="telefoneResponsavel" placeholder="Telefone do Responsável" required [ngClass]="{'required-field': !isTelefoneFilled}" (change)="onRequiredFieldsChange()">
             <input type="text" class="input first" name="email-contato" formControlName="emailContato" placeholder="E-mail para contato" >
-            <div>
-                <button type="submit"><span>Enviar</span></button>
+            <div class="">
+                <button type="p-auto submit"><span>Enviar</span></button>
             </div>
         </form>
     </div>

src/app/pages/suggest-agenda/suggest-agenda.component.ts

@@ -9,14 +9,17 @@ import { HttpResponse, HttpErrorResponse } from '@angular/common/http';
   templateUrl: './suggest-agenda.component.html',
   styleUrls: ['./suggest-agenda.component.css']
 })
-export class SuggestAgendaComponent implements OnInit{
+export class SuggestAgendaComponent implements OnInit {
 
   suggestAgendaForm!: FormGroup;
+  isDescricaoFilled = false;
+  isResponsavelFilled = false;
+  isTelefoneFilled = false;
 
   constructor(
     private fb: FormBuilder,
     private emailService: EmailService
-  ){}
+  ) { }
 
   ngOnInit(): void {
     this.suggestAgendaForm = this.fb.group({
@@ -28,10 +31,10 @@ export class SuggestAgendaComponent implements OnInit{
       telefoneResponsavel: ['', [Validators.required]],
       emailContato: [''],
     },
-  );
+    );
   }
 
-  sendSuggestAgenda(): void{
+  sendSuggestAgenda(): void {
     if (this.suggestAgendaForm.valid) {
       const emailData = new EmailData();
       emailData.tema = this.suggestAgendaForm.value.tema;
@@ -41,17 +44,23 @@ export class SuggestAgendaComponent implements OnInit{
       emailData.responsavel = this.suggestAgendaForm.value.responsavel;
       emailData.telefone_responsavel = this.suggestAgendaForm.value.telefoneResponsavel;
       emailData.email_contato = this.suggestAgendaForm.value.emailContato;
-      const emailUnB = '[email protected]';
+      const emailUnB = '[email protected]';
       emailData.recipients = [emailUnB];
       this.emailService.sendEmail(emailData).subscribe((res: HttpResponse<string>) => {
         alert('Sugestão enviada com sucesso');
-      }, 
-      (error: HttpErrorResponse) => {
-        alert('error: ' + error.message);
-      }); 
+      },
+        (error: HttpErrorResponse) => {
+          alert('error: ' + error.message);
+        });
     } else {
-      alert('Preencha todos os campos corretamente!');
+      alert('Preencha os campos obrigatórios!');
     }
   }
 
+  onRequiredFieldsChange(): void {
+    this.isDescricaoFilled = !!this.suggestAgendaForm.value.descricao;
+    this.isResponsavelFilled = !!this.suggestAgendaForm.value.responsavel;
+    this.isTelefoneFilled = !!this.suggestAgendaForm.value.telefoneResponsavel;
+  }
+
 }