From cbe63036e1d0bce29f04a7d3126c452d5b637d7e Mon Sep 17 00:00:00 2001
From: kshitij-k-osmosys <kshitij.k@osmosys.co>
Date: Thu, 26 Jun 2025 19:48:38 +0530
Subject: [PATCH] fix: primeng components

---
 .../transcript-analyzer.component.html        | 24 ++++++++++++-------
 .../transcript-analyzer.component.scss        |  6 +++++
 apps/portal/src/app/primeng.module.ts         |  4 ++--
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.html b/apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.html
index 81d6560..e79f1c6 100644
--- a/apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.html
+++ b/apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.html
@@ -1,6 +1,6 @@
 <div class="main flex justify-content-center mt-5">
   <div class="transcript-analyzer mt-3 p-6 border-round-xl">
-    <p-fileUpload
+    <p-fileupload
       name="file"
       [url]="''"
       accept=".vtt,.txt"
@@ -12,13 +12,21 @@
       [showUploadButton]="false"
       chooseLabel="{{ 'TRANSCRIPT.BUTTONS.CHOOSE' | translate }}"
       styleClass="mb-2 text-center"
-    ></p-fileUpload>
-    <p-messages severity="info" styleClass="mb-5">
-      <ng-template pTemplate class="flex justify-content-between">
-        <div>{{ 'TRANSCRIPT.UPLOAD_INFO.ACCEPTED_FILE' | translate }}</div>
-        <div class="ml-5">{{ 'TRANSCRIPT.UPLOAD_INFO.MAX_FILE_SIZE' | translate }}</div>
-      </ng-template>
-    </p-messages>
+    ></p-fileupload>
+    <div class="flex flex-column align-items-center mt-3 mb-3">
+      <p-message
+        severity="info"
+        variant="simple"
+        styleClass="text-center"
+        [text]="'TRANSCRIPT.UPLOAD_INFO.ACCEPTED_FILE' | translate"
+      ></p-message>
+      <p-message
+        severity="info"
+        variant="simple"
+        styleClass="text-center"
+        [text]="'TRANSCRIPT.UPLOAD_INFO.MAX_FILE_SIZE' | translate"
+      ></p-message>
+    </div>
     <div class="flex flex-column align-items-center mt-3 mb-3">
       <p-button (click)="summarizeTranscript()" [disabled]="!selectedFile" severity="success">{{
         'TRANSCRIPT.BUTTONS.SUMMARIZE' | translate
diff --git a/apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.scss b/apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.scss
index 558bb36..f312dcd 100644
--- a/apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.scss
+++ b/apps/portal/src/app/features/transcript-analyzer/transcript-analyzer.component.scss
@@ -12,6 +12,12 @@ body {
     }
   }
 
+  .p-fileupload-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   .p-fileupload-content {
     padding: 32px;
   }
diff --git a/apps/portal/src/app/primeng.module.ts b/apps/portal/src/app/primeng.module.ts
index 91af191..a1678e2 100644
--- a/apps/portal/src/app/primeng.module.ts
+++ b/apps/portal/src/app/primeng.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { InputTextModule } from 'primeng/inputtext';
 import { ButtonModule } from 'primeng/button';
-import { MessagesModule } from 'primeng/messages';
+import { MessageModule } from 'primeng/message';
 import { ToastModule } from 'primeng/toast';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { FileUploadModule } from 'primeng/fileupload';
@@ -11,7 +11,7 @@ import { TableModule } from 'primeng/table';
 const modules = [
   InputTextModule,
   ButtonModule,
-  MessagesModule,
+  MessageModule,
   ToastModule,
   ProgressSpinnerModule,
   FileUploadModule,