Display filename in top bar

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html

@@ -1,9 +1,18 @@
 <section [class.hidden]="!viewReady">
   <div class="page-header">
-    <mat-slide-toggle color="primary"
-                      [(ngModel)]="redactedView"
-                      translate="file-preview.view-toggle.label"></mat-slide-toggle>
-    <div>
+    <div class="flex-1">
+      <mat-slide-toggle color="primary"
+                        labelPosition="after"
+                        [(ngModel)]="redactedView">
+        {{ "file-preview.view-toggle.label" | translate }}
+      </mat-slide-toggle>
+    </div>
+
+    <div class="flex-2 filename page-title">
+      {{ appStateService.activeFile.filename }}
+    </div>
+
+    <div class="flex-1 download-container">
       <button color="primary" mat-flat-button
               [matMenuTriggerFor]="downloadMenu">
         <span translate="file-preview.download.label"></span>

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss

@@ -1,4 +1,5 @@
-@import "../../../../assets/styles/red-variables.scss";
+@import "../../../../assets/styles/red-variables";
+@import "../../../../assets/styles/red-mixins";
 
 redaction-pdf-viewer {
   position: absolute;
@@ -11,6 +12,16 @@ redaction-pdf-viewer {
   }
 }
 
+.download-container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.filename {
+  display: flex;
+  justify-content: center;
+}
+
 .right-fixed-container {
   padding: 0;
   width: $right-container-width;

apps/red-ui/src/assets/styles/red-text-styles.scss

@@ -29,6 +29,13 @@ a {
   font-weight: 600;
 }
 
+.page-title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 18px;
+  text-align: center;
+}
+
 .all-caps-label {
   text-transform: uppercase;
   opacity: 0.7;

apps/red-ui/src/assets/styles/red-toggle.scss

@@ -1,8 +1,4 @@
 mat-slide-toggle {
-  display: flex !important;
-  flex-direction: row-reverse;
-  gap: 8px;
-
   .mat-slide-toggle-bar {
     height: 16px !important;
     width: 30px !important;