Modified about dialog to have a more consistent design, and added the logo & github logo to the top

src/app/dialogs/about-dialog/about-dialog.component.html

@@ -1,24 +1,27 @@
-<h4 mat-dialog-title i18n="About dialog title">About YoutubeDL-Material</h4>
-
+<h4 style="position: relative" mat-dialog-title i18n="About dialog title">About YoutubeDL-Material<span class="logo-image">
+    <a [href]="projectLink" target="_blank">
+        <img style="width: 32px;" src="assets/images/GitHub-64px.png">
+    </a>
+    <img style="width: 32px; margin-left: 15px;" src="assets/images/logo_128px.png">
+</span></h4>
 <mat-dialog-content>
     <div style="margin-bottom: 5px;">
         <p>
             <i>YoutubeDL-Material</i>&nbsp;<ng-container i18n="About first paragraph">is an open-source YouTube downloader built under Google's Material Design specifications. You can seamlessly download your favorite videos as video or audio files, and even subscribe to your favorite channels and playlists to keep updated with their new videos.</ng-container>
         </p>
         <p>
-            <i>YoutubeDL-Material</i>&nbsp;<ng-container i18n="About second paragraph">has some awesome features included! An extensive API, Docker support, and localization (translation) support. Read up on all the supported features by clicking on the GitHub icon below.</ng-container>
-        </p>
-        <p>
-            <ng-container i18n="About bug prefix">Found a bug or have a suggestion?</ng-container>&nbsp;<a [href]="issuesLink" target="_blank"><ng-container i18n="About bug click here">Click here</ng-container></a>&nbsp;<ng-container i18n="About bug suffix">to create an issue!</ng-container>
+            <i>YoutubeDL-Material</i>&nbsp;<ng-container i18n="About second paragraph">has some awesome features included! An extensive API, Docker support, and localization (translation) support. Read up on all the supported features by clicking on the GitHub icon above.</ng-container>
         </p>
-        <a [href]="projectLink" target="_blank">
-            <img style="width: 32px; margin-bottom: 10px;" src="assets/images/GitHub-64px.png">
-        </a>
+        <mat-divider></mat-divider>
+        <h5 style="margin-top: 10px;">Installation details:</h5>
         <p>
             <ng-container i18n="Version label">Installed version:</ng-container>&nbsp;{{current_version_tag}} - <span style="display: inline-block" *ngIf="checking_for_updates"><mat-spinner class="version-spinner" [diameter]="22"></mat-spinner>&nbsp;<ng-container i18n="Checking for updates text">Checking for updates...</ng-container></span>
             <mat-icon *ngIf="!checking_for_updates" class="version-checked-icon">done</mat-icon>&nbsp;&nbsp;<a *ngIf="!checking_for_updates && latestGithubRelease['tag_name'] !== current_version_tag" [href]="latestUpdateLink" target="_blank"><ng-container i18n="View latest update">Update available</ng-container> - {{latestGithubRelease['tag_name']}}</a>
             <span *ngIf="!checking_for_updates && latestGithubRelease['tag_name'] === current_version_tag">You are up to date.</span>
         </p>
+        <p>
+            <ng-container i18n="About bug prefix">Found a bug or have a suggestion?</ng-container>&nbsp;<a [href]="issuesLink" target="_blank"><ng-container i18n="About bug click here">Click here</ng-container></a>&nbsp;<ng-container i18n="About bug suffix">to create an issue!</ng-container>
+        </p>
     </div>
 </mat-dialog-content>
 

src/app/dialogs/about-dialog/about-dialog.component.scss

@@ -10,7 +10,14 @@ i {
 }
 
 .version-checked-icon {
-    top: 4px;
+    top: 5px;
     margin-left: 2px;
     position: relative;
+    margin-right: -3px;
+}
+
+.logo-image {
+    position: absolute;
+    top: -10px;
+    right: -10px;
 }

src/app/dialogs/about-dialog/about-dialog.component.ts

@@ -26,7 +26,6 @@ export class AboutDialogComponent implements OnInit {
     this.postsService.getLatestGithubRelease().subscribe(res => {
       this.checking_for_updates = false;
       this.latestGithubRelease = res;
-      console.log(this.latestGithubRelease)
     });
   }