Quick navigation list items

apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts

@@ -10,7 +10,7 @@ export class InitialsAvatarComponent implements OnInit {
   public username: string;
 
   @Input()
-  public color: 'red-white' | 'gray-red' | 'gray-dark' = 'gray-dark';
+  public color = 'lightgray-dark';
 
   @Input()
   public size: 'small' | 'large' = 'small';

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

@@ -58,20 +58,26 @@
                [ngClass]="{ active: item.pageNumber === activeViewerPage }"
                (click)="selectPage(item.pageNumber)"
           >
-            <div class="page-number">Page {{ item.pageNumber }}</div>
+            <div class="page-number subtitle">{{ item.pageNumber }}</div>
-            <div class="stats-subtitle subtitle mt-5">
+            <div *ngIf="item.hints" class="page-stats subtitle">
-              <div *ngIf="item.redactions" class="center">
+              <div class="oval darkgray-white x-small">H</div>
-                <mat-icon svgIcon="red:secret"></mat-icon>
+              {{item.hints}}
-                {{item.redactions}} Redactions
             </div>
-              <div *ngIf="item.hints" class="center">
+            <div *ngIf="item.redactions" class="page-stats subtitle">
-                <mat-icon svgIcon="red:idea"></mat-icon>
+              <div class="square darkgray-white x-small">R</div>
-                {{item.hints}} Hints
+              {{item.redactions}}
             </div>
-              <div *ngIf="item.hints" class="center">
+            <div *ngIf="item.comments" class="page-stats subtitle">
-                <mat-icon svgIcon="red:info"></mat-icon>
+              <div class="oval darkgray-white x-small">C</div>
-                {{item.ignore}} Ignore
+              {{item.comments}}
             </div>
+            <div *ngIf="item.requests" class="page-stats subtitle">
+              <div class="oval red-white x-small">S</div>
+              {{item.requests}}
+            </div>
+            <div *ngIf="item.ignore" class="page-stats subtitle">
+              <div class="oval lightgray-white x-small">I</div>
+              {{item.ignore}}
             </div>
           </div>
         </div>

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

@@ -105,6 +105,9 @@ redaction-pdf-viewer {
   }
 
   .page-navigation {
+    display: flex;
+    align-items: center;
+    gap: 12px;
     cursor: pointer;
     border-bottom: 1px solid $separator;
     padding: 14px;
@@ -115,7 +118,19 @@ redaction-pdf-viewer {
     }
 
     .page-number {
-      font-weight: 600;
+      border: 1px solid $separator;
+      padding: 7px;
+      margin-right: 3px;
+      width: 14px;
+      text-align: center;
+    }
+
+    .page-stats {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 6px;
+      opacity: 1;
     }
 
     &.active {

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

@@ -45,7 +45,14 @@ export class FilePreviewScreenComponent implements OnInit {
   public fileId: string;
   public annotations: Annotations.Annotation[] = [];
   public selectedAnnotation: Annotations.Annotation;
-  public quickNavigation: { pageNumber: number, redactions: number, hints: number, ignore: number; }[] = [];
+  public quickNavigation: {
+    pageNumber: number,
+    hints: number,
+    redactions: number,
+    comments: number;
+    suggestions: number,
+    ignore: number;
+  }[] = [];
 
   private _manualRedactionEntry: ManualRedactionEntry;
 
@@ -137,7 +144,7 @@ export class FilePreviewScreenComponent implements OnInit {
         const pageNumber = annotation.getPageNumber();
         let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber);
         if (!el) {
-          el = { pageNumber, redactions: 0, hints: 0, ignore: 0 };
+          el = { pageNumber, redactions: 0, hints: 0, ignore: 0, comments: 0, suggestions: 0 };
           this.quickNavigation.push(el);
         }
         if (annotation.Id.startsWith('hint:')) {

apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html

@@ -57,7 +57,7 @@
         </div>
         <div class="flex-1">
           <redaction-initials-avatar [username]="user.name"
-                                     color="gray-red"
+                                     color="lightgray-red"
                                      withName="true"
           ></redaction-initials-avatar>
         </div>

apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html

@@ -120,7 +120,7 @@
     <div class="owner flex-row mt-20">
       <redaction-initials-avatar [username]="user.name"
                                  size="large"
-                                 color="gray-red"
+                                 color="lightgray-red"
                                  withName="true"
       ></redaction-initials-avatar>
     </div>
@@ -136,10 +136,10 @@
           <redaction-initials-avatar [username]="username" size="large"></redaction-initials-avatar>
         </div>
         <div class="member">
-          <div class="oval large">+2</div>
+          <div class="oval large white-dark">+2</div>
         </div>
         <div class="member">
-          <div class="oval red large">+</div>
+          <div class="oval red-white large">+</div>
         </div>
       </div>
     </div>

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

@@ -1,44 +1,62 @@
 @import "red-variables";
 
-.oval {
+.oval, .square {
   font-weight: 600;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 24px;
   width: 24px;
-  border-radius: 12px;
   font-size: 10px;
-  border: 1px solid #E2E4E9;
-  letter-spacing: 0;
   line-height: 12px;
   text-align: center;
   text-transform: uppercase;
-  font-family: Inter, sans-serif;
+  border: none;
 
   &.large {
     height: 32px;
     width: 32px;
-    border-radius: 16px;
     font-size: 13px;
   }
 
-  &.gray-dark {
+  &.x-small {
-    background-color: $grey-4;
+    height: 16px;
-    border: none;
+    width: 16px;
+    font-size: 11px;
+    line-height: 14px;
   }
 
-  &.gray-red {
+  &.lightgray-dark {
+    background-color: $grey-4;
+  }
+
+  &.lightgray-red {
     background-color: $grey-4;
     color: $red-1;
-    border: none;
+  }
+
+  &.darkgray-white {
+    background-color: $grey-1;
+    color: $white;
+  }
+
+  &.lightgray-white {
+    background-color: $grey-5;
+    color: $white;
   }
 
   &.red-white {
     background-color: $red-1;
     color: $white;
-    border: none;
   }
+
+  &.white-dark {
+    border: 1px solid #E2E4E9;
+  }
+}
+
+.oval {
+  border-radius: 50%;
 }
 
 .stats-subtitle {