refactor: code style improvements

src/app/shared/components/header/header.component.html

@@ -1,13 +1,11 @@
-<div fxFlex="100px">
+<div class="logo">
     <img src="./assets/icons/icon-tv-256.png" height="100" />
 </div>
-<div fxFlex="100" fxLayoutAlign="start center">
-    <div fxLayout="column">
-        <div fxFlex class="title">{{ title }}</div>
-        <div class="subtitle">{{ subtitle }}</div>
-    </div>
+<div class="main">
+    <div class="title">{{ title }}</div>
+    <div class="subtitle">{{ subtitle }}</div>
 </div>
-<div fxLayout="column" fxFlex="50px" fxLayoutAlign="center center">
+<div class="menu">
     <button
         *ngIf="isElectron; else pwaMenu"
         mat-icon-button
@@ -18,18 +16,26 @@
 </div>
 
 <ng-template #pwaMenu>
-    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Open menu">
+    <button
+        mat-icon-button
+        [matMenuTriggerFor]="menu"
+        [attr.aria-label]="'MENU.OPEN' | translate"
+    >
         <mat-icon>menu</mat-icon>
     </button>
     <mat-menu #menu="matMenu">
-        <button mat-menu-item (click)="openSettings()">
+        <button
+            mat-menu-item
+            [attr.aria-label]="'MENU.SETTINGS_ARIA' | translate"
+            (click)="openSettings()"
+        >
             <mat-icon>settings</mat-icon>
-            <span>Settings</span>
+            <span>{{ 'MENU.SETTINGS' | translate }}</span>
         </button>
         <mat-divider></mat-divider>
         <button
             mat-menu-item
-            aria-label="Support IPTVnator on GitHub"
+            [attr.aria-label]="'MENU.SUPPORT_ARIA' | translate"
             (click)="openUrl('https:///github.com/4gray/iptvnator')"
         >
             <mat-icon>recommend</mat-icon>
@@ -37,28 +43,28 @@
         </button>
         <button
             mat-menu-item
-            aria-label="Report a bug"
+            [attr.aria-label]="'MENU.BUG_REPORT' | translate"
             (click)="openUrl('https://github.com/4gray/iptvnator/issues')"
         >
             <mat-icon>bug_report</mat-icon>
-            <span>Report a bug</span>
+            <span>{{ 'MENU.BUG_REPORT' | translate }}</span>
         </button>
         <mat-divider></mat-divider>
         <button
             mat-menu-item
-            aria-label="What is new?"
+            [attr.aria-label]="'MENU.WHAT_IS_NEW' | translate"
             (click)="setDialogVisibility(true)"
         >
             <mat-icon>new_releases</mat-icon>
-            <span>What is new</span>
+            <span>{{ 'MENU.WHAT_IS_NEW' | translate }}</span>
         </button>
         <button
             mat-menu-item
-            aria-label="About this application"
+            [attr.aria-label]="'MENU.ABOUT_ARIA' | translate"
             (click)="openAboutDialog()"
         >
             <mat-icon>info</mat-icon>
-            <span>About</span>
+            <span>{{ 'MENU.ABOUT' | translate }}</span>
         </button>
     </mat-menu>
 </ng-template>