From aca262185e6d1530cef1d574171a29fd40065791 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Tue, 24 Dec 2024 23:16:56 +0100
Subject: [PATCH] style(epg-view): update title styling and improve component
 imports for better readability

---
 .../portals/epg-view/epg-view.component.html  |  2 +-
 .../portals/epg-view/epg-view.component.ts    | 22 ++++++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/app/portals/epg-view/epg-view.component.html b/src/app/portals/epg-view/epg-view.component.html
index 53624e582..ab80323b1 100644
--- a/src/app/portals/epg-view/epg-view.component.html
+++ b/src/app/portals/epg-view/epg-view.component.html
@@ -1,4 +1,4 @@
-<div mat-subheader>{{ 'EPG.TITLE' | translate }}</div>
+<div class="epg-title">{{ 'EPG.TITLE' | translate }}</div>
 <mat-list>
     @for (item of epgItems; track $index) {
         <mat-list-item [lines]="3">
diff --git a/src/app/portals/epg-view/epg-view.component.ts b/src/app/portals/epg-view/epg-view.component.ts
index c1d87ce6c..ba0b57d64 100644
--- a/src/app/portals/epg-view/epg-view.component.ts
+++ b/src/app/portals/epg-view/epg-view.component.ts
@@ -1,9 +1,9 @@
 import { DatePipe } from '@angular/common';
 import { Component, Input, inject } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
+import { MatIconButton } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatIconModule } from '@angular/material/icon';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { TranslateModule } from '@ngx-translate/core';
 import { EpgItemDescriptionComponent } from '../../player/components/epg-list/epg-item-description/epg-item-description.component';
@@ -15,12 +15,22 @@ import { EpgItem } from '../../xtream/epg-item.interface';
     templateUrl: './epg-view.component.html',
     imports: [
         DatePipe,
-        MatButtonModule,
-        MatDividerModule,
-        MatIconModule,
+        MatIconButton,
+        MatDivider,
+        MatIcon,
         MatListModule,
         TranslateModule,
     ],
+    styles: [
+        `
+            .epg-title {
+                margin: 0;
+                font-size: 1.2rem;
+                font-weight: 500;
+                padding: 16px;
+            }
+        `,
+    ],
 })
 export class EpgViewComponent {
     @Input() epgItems: EpgItem[];