Color Scheme update

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

@@ -2,11 +2,12 @@
   <div class="red-top-bar">
     <div class="top-bar-row">
       <div class="menu left">
-        <mat-button-toggle-group #group="matButtonToggleGroup" name="type" value="ANNOTATED"
+        <div class="btn-group">
-                                 (change)="viewerChanged(group.value)">
+          <button class="btn-group-btn" [class.active]="activeViewer === 'ANNOTATED'" (click)="activateViewer('ANNOTATED')">Annotated
-          <mat-button-toggle value="ANNOTATED">Annotated</mat-button-toggle>
+          </button>
-          <mat-button-toggle value="REDACTED">Redacted</mat-button-toggle>
+          <button class="btn-group-btn" [class.active]="activeViewer === 'REDACTED'" (click)="activateViewer('REDACTED')">Redacted
-        </mat-button-toggle-group>
+          </button>
+        </div>
       </div>
       <div class="menu right ">
         <div class="heading-l clamp-1">
@@ -17,13 +18,11 @@
   </div>
 
   <div class="view-container">
-    <redaction-pdf-viewer [class.visible]="group.value === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
+    <redaction-pdf-viewer [class.visible]="activeViewer === 'ANNOTATED'" [fileId]="fileId" fileType="ANNOTATED"
                           [fileStatus]="appStateService.activeFile"
                           (fileReady)="fileReady('ANNOTATED')"></redaction-pdf-viewer>
-    <redaction-pdf-viewer [class.visible]="group.value === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
+    <redaction-pdf-viewer [class.visible]="activeViewer === 'REDACTED'" [fileId]="fileId" fileType="REDACTED"
-                          (fileReady)="fileReady('REDACTED')">
+                          (fileReady)="fileReady('REDACTED')"></redaction-pdf-viewer>
-      [fileStatus]="appStateService.activeFile">
-    </redaction-pdf-viewer>
   </div>
 
   <button (click)="showDetailsDialog($event)" aria-label="details" class="details-button" color="primary" mat-fab>

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

@@ -51,10 +51,6 @@ export class FilePreviewScreenComponent implements OnInit {
     });
   }
 
-  viewerChanged(value: any) {
-    this._viewerSyncService.activateViewer(value);
-  }
-
   fileReady(viewer: string) {
     this._readyViewers.push(viewer);
   }
@@ -62,4 +58,12 @@ export class FilePreviewScreenComponent implements OnInit {
   get viewReady() {
     return this._readyViewers.length >= 2;
   }
+
+  get activeViewer() {
+    return this._viewerSyncService.activeViewer;
+  }
+
+  activateViewer(value: string) {
+    this._viewerSyncService.activateViewer(value);
+  }
 }

apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts

@@ -29,9 +29,7 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('viewer', {static: true}) viewer: ElementRef;
   wvInstance: WebViewerInstance;
 
-  _annotatedFileData: Blob;
+  _fileData: Blob;
-  _originalFileData: Blob;
-  _redactedFileData: Blob;
 
 
   constructor(
@@ -82,20 +80,20 @@ export class PdfViewerComponent implements OnInit, AfterViewInit, OnDestroy {
     let fileObs$: Observable<any>;
     switch (this.fileType) {
       case FileType.ANNOTATED:
-        fileObs$ = this._annotatedFileData ? of(this._annotatedFileData) : this._fileUploadControllerService.downloadAnnotatedFile(this.fileId, true, 'body').pipe(tap(data => {
+        fileObs$ = this._fileData ? of(this._fileData) : this._fileUploadControllerService.downloadAnnotatedFile(this.fileId, true, 'body').pipe(tap(data => {
-          this._annotatedFileData = data;
+          this._fileData = data;
         }));
         break;
       case FileType.REDACTED:
-        fileObs$ = this._redactedFileData ? of(this._redactedFileData) : this._fileUploadControllerService.downloadRedactedFile(this.fileId, true, 'body').pipe(tap(data => {
+        fileObs$ = this._fileData ? of(this._fileData) : this._fileUploadControllerService.downloadRedactedFile(this.fileId, true, 'body').pipe(tap(data => {
-          this._redactedFileData = data;
+          this._fileData = data;
         }));
         break;
       case FileType.ORIGINAL:
       default:
-        fileObs$ = this._originalFileData ? of(this._originalFileData) : this._fileUploadControllerService.downloadOriginalFile(this.fileId, true, 'body')
+        fileObs$ = this._fileData ? of(this._fileData) : this._fileUploadControllerService.downloadOriginalFile(this.fileId, true, 'body')
           .pipe(tap(data => {
-            this._originalFileData = data;
+            this._fileData = data;
           }));
         break;
     }

apps/red-ui/src/app/screens/file/service/viwer-sync.service.ts

@@ -52,6 +52,10 @@ export class ViewerSyncService {
     this._activeViewer = key;
   }
 
+  get activeViewer(){
+    return this._activeViewer;
+  }
+
 
   private _roundToTwo(num) {
     return +(Math.round(Number(num + "e+2")) + "e-2");

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

@@ -0,0 +1,35 @@
+@import "red-variables";
+
+
+.btn-group {
+  display: flex;
+  flex-direction: row;
+
+  .btn-group-btn {
+    color: $accent;
+    background: $white;
+    font-family: 'Inter', sans-serif;
+    font-size: 13px;
+    letter-spacing: 0;
+    line-height: 14px;
+    padding: 10px 14px;
+    transition: color 0.25s ease-in-out;
+    outline: none;
+    border: none;
+
+    &:hover {
+      color: $black;
+    }
+
+    &.active {
+      color: $light;
+      background: $primary;
+      border-radius: 17px;
+    }
+
+    &.active:hover {
+      color: $grey-3;
+    }
+
+  }
+}

apps/red-ui/src/assets/styles/red-material-theme.scss

@@ -3,27 +3,27 @@
 
 @include mat-core();
 
-$grey-1-palette: (
+$primary-palette: (
+  default: $red-1,
+  lighter: lighten($red-1, 30%),
+  darker: darken($red-1, 30%),
+  text: $red-1,
+  contrast: (
+    default: $light,
+    lighter: $light,
+    darker: $light
+  )
+);
+
+$secondary-palette: (
   default: $grey-1,
   lighter: lighten($grey-1, 30%),
   darker: darken($grey-1, 30%),
   text: $grey-1,
   contrast: (
-    default: $white,
+    default: $light,
-    lighter: $white,
+    lighter: $light,
-    darker: $white
+    darker: $light
-  )
-);
-
-$grey-2-palette: (
-  default: $grey-2,
-  lighter: lighten($grey-2, 30%),
-  darker: darken($grey-2, 30%),
-  text: $grey-2,
-  contrast: (
-    default: $grey-1,
-    lighter: $grey-1,
-    darker: $grey-1
   )
 );
 
@@ -33,14 +33,14 @@ $red-palette: (
   darker: darken($red-1, 30%),
   text: $red-1,
   contrast: (
-    default: $white,
+    default: $light,
-    lighter: $white,
+    lighter: $light,
-    darker: $white
+    darker: $light
   )
 );
 
-$gn-next-primary: mat-palette($grey-1-palette, default, lighter, darker, text);
+$gn-next-primary: mat-palette($primary-palette, default, lighter, darker, text);
-$gn-next-secondary: mat-palette($grey-2-palette, default, lighter, darker, text);
+$gn-next-secondary: mat-palette($secondary-palette, default, lighter, darker, text);
 $gn-next-warning: mat-palette($red-palette, default, lighter, darker, text);
 
 $gn-next-mat-theme: mat-light-theme((

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

@@ -7,3 +7,4 @@
 @import "red-dialog";
 @import "red-input";
 @import "red-media-queries";
+@import "red-controls";

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

@@ -1,6 +1,11 @@
 $white: #FFF;
 $black: #000;
 
+$primary: #DD4D50;
+$accent: #283241;
+$light: #FFF;
+$dark: #000;
+
 $grey-1: #283241;
 $grey-2: #ECECEE;
 $grey-3: #aaacb3;