[Header] Fix styles for user's initials

apps/common/main/lib/controller/Themes.js

@@ -43,6 +43,10 @@ define([
             "toolbar-header-spreadsheet",
             "toolbar-header-presentation",
 
+            "text-toolbar-header-on-background-document",
+            "text-toolbar-header-on-background-spreadsheet",
+            "text-toolbar-header-on-background-presentation",
+
             "background-normal",
             "background-toolbar",
             "background-toolbar-additional",

apps/common/main/lib/view/Header.js

@@ -110,7 +110,7 @@ define([
                                     '<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
                                         '<div class="color-user-name"></div>' +
                                     '</button>' +
-                                    '<div class="btn-current-user btn-header hidden">' +
+                                    '<div class="btn-current-user hidden">' +
                                         '<div class="color-user-name"></div>' +
                                     '</div>' +
                                 '</div>' +
@@ -138,7 +138,7 @@ define([
                                     '<button type="button" class="btn btn-header slot-btn-user-name hidden">' +
                                         '<div class="color-user-name"></div>' +
                                     '</button>' +
-                                    '<div class="btn-current-user btn-header hidden">' +
+                                    '<div class="btn-current-user hidden">' +
                                         '<div class="color-user-name"></div>' +
                                     '</div>' +
                                 '</div>' +

apps/common/main/resources/less/colors-table-classic.less

@@ -5,6 +5,10 @@
         --toolbar-header-spreadsheet: #40865c;
         --toolbar-header-presentation: #aa5252;
 
+        --text-toolbar-header-on-background-document: #38567A;
+        --text-toolbar-header-on-background-spreadsheet: #336B49;
+        --text-toolbar-header-on-background-presentation: #8D4444;
+
         --background-normal: #fff;
         --background-toolbar: #f1f1f1;
         --background-toolbar-additional: #f1f1f1;

apps/common/main/resources/less/colors-table-dark.less

@@ -5,6 +5,10 @@
         --toolbar-header-spreadsheet: #2a2a2a;
         --toolbar-header-presentation: #2a2a2a;
 
+        --text-toolbar-header-on-background-document: #2a2a2a;
+        --text-toolbar-header-on-background-spreadsheet: #2a2a2a;
+        --text-toolbar-header-on-background-presentation: #2a2a2a;
+
         --background-normal: #333;
         --background-toolbar: #404040;
         --background-toolbar-additional: #505050;

apps/common/main/resources/less/colors-table-ie-fix.less

@@ -3,6 +3,10 @@
 @toolbar-header-spreadsheet-ie: #40865c;
 @toolbar-header-presentation-ie: #aa5252;
 
+@text-toolbar-header-on-background-document-ie: #38567A;
+@text-toolbar-header-on-background-spreadsheet-ie: #336B49;
+@text-toolbar-header-on-background-presentation-ie: #8D4444;
+
 @background-normal-ie: #fff;
 @background-toolbar-ie: #f1f1f1;
 @background-toolbar-additional-ie: #f1f1f1;

apps/common/main/resources/less/colors-table.less

@@ -15,6 +15,10 @@
     --toolbar-header-spreadsheet: #40865c;
     --toolbar-header-presentation: #aa5252;
 
+    --text-toolbar-header-on-background-document: #38567A;
+    --text-toolbar-header-on-background-spreadsheet: #336B49;
+    --text-toolbar-header-on-background-presentation: #8D4444;
+
     --background-normal: #fff;
     --background-toolbar: #f7f7f7;
     --background-toolbar-additional: #efefef;

apps/common/main/resources/less/header.less

@@ -340,7 +340,10 @@
     height: 100%;
     width: 40px;
     padding: 1px 3px;
+    border: var(--scaled-one-pixel, 1px) solid transparent;
+}
 
+.btn-current-user, .btn-header {
     &:not(:disabled) .color-user-name {
         opacity: @header-component-normal-icon-opacity;
     }
@@ -352,17 +355,15 @@
     &:hover:not(:disabled) .color-user-name {
         opacity: @header-component-hover-icon-opacity;
     }
-}
 
-.btn-current-user, .btn-header {
     .color-user-name {
         width: 20px;
         height: 20px;
         border-radius: 20px;
         background-color: @icon-toolbar-header-ie;
         background-color: @icon-toolbar-header;
-        color: @header-background-color-ie;
+        color: @toolbar-header-text-on-background-document-ie;
-        color: @header-background-color;
+        color: @toolbar-header-text-on-background-document;
         font-size: 10px;
         line-height: 20px;
         overflow: hidden;

apps/common/main/resources/less/toolbar.less

@@ -461,6 +461,15 @@
         }
 
         // TODO: move to appropriate module
+        .btn-current-user, .btn-header  {
+            .color-user-name {
+                background-color: @text-normal-ie;
+                background-color: @text-normal;
+                color: @text-inverse-ie;
+                color: @text-inverse;
+            }
+        }
+
         .btn-header, .btn-users, .btn-header-share {
             .icon {
                 &.icon--inverse {
@@ -520,16 +529,14 @@
                             fill: @text-normal-pressed;
                         }
                     }
-                }
-            }
-        }
 
-        .btn-current-user {
+                    .color-user-name {
-            .color-user-name {
+                        background-color: @text-normal-pressed-ie;
-                background-color: @text-normal-ie;
+                        background-color: @text-normal-pressed;
-                background-color: @text-normal;
+                        color: @highlight-button-pressed-ie;
-                color: @text-inverse-ie;
+                        color: @highlight-button-pressed;
-                color: @text-inverse;
+                    }
+                }
             }
         }
 

apps/documenteditor/main/resources/less/variables.less

@@ -3,6 +3,8 @@
 // --------------------------------------------------
 @header-background-color-ie: @toolbar-header-document-ie;
 @header-background-color: var(--toolbar-header-document);
+@toolbar-header-text-on-background-document-ie: @text-toolbar-header-on-background-document-ie;
+@toolbar-header-text-on-background-document: var(--text-toolbar-header-on-background-document);
 
 // Active color
 // -------------------------