Add contents in ThumbnailGenerationErrorDialogComponent. Update messa…

…ges in ThumbnailGenerationStatusBarComponent.

src/app/thumbnail-generation/error-dialog/thumbnail-generation-error-dialog.component.html

@@ -1 +1,6 @@
-<p>thumbnail-generation-error-dialog works!</p>
+<div class="message">Failed to generate thumbnails for the following files:</div>
+<button mat-stroked-button
+        mat-dialog-close
+        class="close-button">
+  Close
+</button>

src/app/thumbnail-generation/error-dialog/thumbnail-generation-error-dialog.component.scss

@@ -0,0 +1,20 @@
+:host {
+  height: 100%;
+  padding: 10px;
+
+  display: grid;
+  grid: "message"      1fr
+        "close-button" auto
+        /auto;
+  .message      { grid-area: message;      }
+  .close-button { grid-area: close-button; }
+}
+
+.message {
+  margin: 10px;
+}
+
+.close-button {
+  width: 80px;
+  justify-self: center;
+}

src/app/thumbnail-generation/status-bar/component/thumbnail-generation-status-bar.component.html

@@ -1,6 +1,6 @@
 <div class="summary">
   <ng-container *ngIf="isThumbnailGenerationDone; else summaryForThumbnailGenerationInProgress">
-    <span *ngIf="thumbnailGenerationResult.errorOccurred; else summaryForNoErrorDuringThumbnailGeneration">Finished generating thumbnails for HEIF files with error(s).</span>
+    <span *ngIf="thumbnailGenerationResult.errorOccurred; else summaryForNoErrorDuringThumbnailGeneration">Finished generating thumbnails for HEIF files with errors.</span>
     <ng-template #summaryForNoErrorDuringThumbnailGeneration>
       <span>Completed generating thumbnails for HEIF files.</span>
     </ng-template>
@@ -24,15 +24,15 @@
     <div>
       <ng-container *ngIf="isThumbnailGenerationDone; else detailsForThumbnailGenerationInProgress">
         <span *ngIf="thumbnailGenerationResult.errorOccurred; else detailsForNoErrorDuringThumbnailGeneration">
-          <span>Processed {{ numberOfProcessedThumbnails }} out of {{ numberOfThumbnailsGenerationRequired }} thumbnails with error(s). </span>
-          <span class="anchor-tag-like-text" (click)="handleErrorTextClicked($event)">Click here to see the error(s).</span>
+          <span>Processed {{ numberOfProcessedThumbnails }} out of {{ numberOfThumbnailsGenerationRequired }} files with errors. </span>
+          <span class="anchor-tag-like-text" (click)="handleClickHereTextClicked($event)">Click here to see the files with errors.</span>
         </span>
         <ng-template #detailsForNoErrorDuringThumbnailGeneration>
-          <span>Processed {{ numberOfProcessedThumbnails }} out of {{ numberOfThumbnailsGenerationRequired }} thumbnails.</span>
+          <span>Processed {{ numberOfProcessedThumbnails }} out of {{ numberOfThumbnailsGenerationRequired }} files.</span>
         </ng-template>
       </ng-container>
       <ng-template #detailsForThumbnailGenerationInProgress>
-        <span>Processed {{ numberOfProcessedThumbnails }} out of {{ numberOfThumbnailsGenerationRequired }} thumbnails.</span>
+        <span>Processed {{ numberOfProcessedThumbnails }} out of {{ numberOfThumbnailsGenerationRequired }} files.</span>
       </ng-template>
     </div>
     <div class="generation-required-files-description">

src/app/thumbnail-generation/status-bar/component/thumbnail-generation-status-bar.component.ts

@@ -51,7 +51,7 @@ export class ThumbnailGenerationStatusBarComponent implements OnInit {
     });
   }
 
-  public handleErrorTextClicked(event: MouseEvent) {
+  public handleClickHereTextClicked(event: MouseEvent) {
     event.stopPropagation();
     this.dialog.open(ThumbnailGenerationErrorDialogComponent, {
       width: '800px',