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>

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

@@ -1,14 +1,38 @@
 :host {
     background: #000;
     color: #fff;
+    display: flex;
+    width: 100%;
 }
 
-.title {
-    font-size: 1.1em;
+.logo {
+    flex: 1 1 100px;
 }
 
-.subtitle {
-    color: #999;
-    font-size: 0.9em;
-    margin-top: 10px;
+.main {
+    place-content: center flex-start;
+    align-self: center;
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1 1 100%;
+    max-width: 100%;
+
+    .title {
+        font-size: 1.1em;
+    }
+
+    .subtitle {
+        color: #999;
+        font-size: 0.9em;
+        margin-top: 10px;
+    }
+}
+
+.menu {
+    place-content: center;
+    align-self: center;
+    min-width: 50px;
+    max-width: 50px;
+    display: flex;
 }