From c901df26b7fe1180bd436925d5dce32856e0c722 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 21 Oct 2020 21:37:36 +0300
Subject: [PATCH] Center logo in menu bar

---
 .../base-screen/base-screen.component.html      | 12 ++++++------
 .../src/assets/styles/red-page-layout.scss      | 17 ++++++++++-------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
index a7c27a36d..46735ddb7 100644
--- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
@@ -1,6 +1,6 @@
 <div class="red-top-bar">
   <div class="top-bar-row">
-    <div class="menu left visible-lt-lg">
+    <div class="menu visible-lt-lg">
       <button [matMenuTriggerFor]="menuNav" mat-flat-button>
         <mat-icon svgIcon="red:menu"></mat-icon>
       </button>
@@ -16,29 +16,29 @@
                 mat-menu-item>{{appStateService.activeFile.filename}}</button>
       </mat-menu>
     </div>
-    <div class="menu left visible-lg">
+    <div class="menu flex-2 visible-lg">
       <a class="breadcrumb" routerLink="/ui/projects"
          translate="top-bar.navigation-items.projects.label"></a>
       <div *ngIf="appStateService.activeProject" class="breadcrumb">
-        <mat-icon svgIcon="red:double-chevron-right"></mat-icon>
+        <mat-icon>arrow_right</mat-icon>
       </div>
       <a *ngIf="appStateService.activeProject" class="breadcrumb"
          [routerLink]="'/ui/projects/'+appStateService.activeProjectId">
         {{appStateService.activeProject.project.projectName}}
       </a>
       <div *ngIf="appStateService.activeFile" class="breadcrumb">
-        <mat-icon svgIcon="red:double-chevron-right"></mat-icon>
+        <mat-icon>arrow_right</mat-icon>
       </div>
       <a *ngIf="appStateService.activeFile" class="breadcrumb"
          [routerLink]="'/ui/projects/'+appStateService.activeProjectId+'/file/'+appStateService.activeFile.fileId">
         {{appStateService.activeFile.filename}}
       </a>
     </div>
-    <div class="center">
+    <div class="center flex-1">
       <redaction-logo></redaction-logo>
       <div class="app-name" translate="app-name.label"></div>
     </div>
-    <div class="menu right">
+    <div class="menu right flex-2">
       <button [matMenuTriggerFor]="menu" mat-button>
           <redaction-initials-avatar color="red-white" size="small" [username]="user?.name" [withName]="true"></redaction-initials-avatar>
           <mat-icon>arrow_drop_down</mat-icon>
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 0263fd26e..c95cad404 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -165,6 +165,11 @@ html, body {
     .menu {
       display: flex;
       align-items: center;
+      overflow: hidden;
+
+      &.right {
+        justify-content: flex-end;
+      }
     }
   }
 
@@ -173,17 +178,15 @@ html, body {
     color: $accent;
     font-weight: 600;
     @include line-clamp(1);
-    max-width: 320px;
-
-    mat-icon {
-      height: 10px;
-      width: 10px;
-      padding: 0 8px;
-    }
+    min-width: 25px;
 
     &:last-child {
       color: $primary;
     }
+
+    .mat-icon {
+      vertical-align: middle;
+    }
   }
 
   .divider {