From 29951e266e3375ecd6dbe51e47a94b42f17e4b75 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Mon, 18 Jan 2021 12:19:38 +0300
Subject: [PATCH] [stylesheets] repired some components according to colors
 table

---
 apps/common/main/lib/component/ComboBorderSize.js  |  8 ++++++--
 apps/common/main/resources/less/toolbar.less       | 14 ++++++++++++++
 apps/documenteditor/main/app/controller/Toolbar.js |  6 +++---
 .../main/resources/less/toolbar.less               |  6 +-----
 .../main/app/controller/Toolbar.js                 |  6 +++---
 .../main/resources/less/toolbar.less               |  5 -----
 .../main/app/controller/Toolbar.js                 |  6 +++---
 .../main/resources/less/toolbar.less               |  5 -----
 8 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index 9a55a3b56..3784df890 100644
--- a/apps/common/main/lib/component/ComboBorderSize.js
+++ b/apps/common/main/lib/component/ComboBorderSize.js
@@ -82,7 +82,9 @@ define([
                     '<span class="text"></span>',
                 '</div>',
                 '<div style="display: table-cell;"></div>',
-                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+                '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                    '<span class="caret"></span>',
+                '</button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
@@ -281,7 +283,9 @@ define([
             '<div class="form-control" style="padding:2px 14px 2px 3px; <%= style %> display: block;">',
                 '<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
             '</div>',
-            '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
+            '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
+                '<span class="caret"></span>',
+            '</button>',
             '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
             '<% _.each(items, function(item) { %>',
                 '<% if (item.value==-1) { %>',
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index a01026d71..02e601529 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -1,6 +1,7 @@
 @height-title: 28px;
 @height-tabs: 32px;
 @height-controls: 67px;
+@img-equition-filter: var(--image-border-types-filter);
 
 
 .toolbar {
@@ -500,6 +501,19 @@
     height: 20px;
 }
 
+.item-equation {
+    border: 1px solid @border-regular-control;
+
+    .equation-icon {
+        .background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
+
+        .theme-dark & {
+            -webkit-filter: @img-equition-filter;
+            filter: @img-equition-filter;
+        }
+    }
+}
+
 // charts
 .menu-insertchart {
     .group-description {
diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js
index 42eb43030..5fac11458 100644
--- a/apps/documenteditor/main/app/controller/Toolbar.js
+++ b/apps/documenteditor/main/app/controller/Toolbar.js
@@ -2602,9 +2602,9 @@ define([
                         parentMenu: menu.items[i].menu,
                         store: equationsStore.at(i).get('groupStore'),
                         scrollAlwaysVisible: true,
-                        itemTemplate: _.template('<div class="item-equation" '+
-                            'style="background-position:<%= posX %>px <%= posY %>px;" >' +
-                            '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
+                        itemTemplate: _.template(
+                            '<div class="item-equation" style="" >' +
+                                '<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
                             '</div>')
                     });
                     equationPicker.on('item:click', function(picker, item, record, e) {
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index 4cda0c2b0..b1fc43218 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -44,6 +44,7 @@
     > li > a.item-contents {
         div {
             .background-ximage-v2('toolbar/contents.png', 246px, @commonimage: false);
+            background-color: #fff;
             width: 246px;
             height: @contents-menu-item-height;
 
@@ -145,11 +146,6 @@
     }
 }
 
-.item-equation {
-    border: 1px solid @border-regular-control;
-    .background-ximage-v2('toolbar/math.png', 1500px, @commonimage: true);
-}
-
 .save-style-container {
     cursor: default;
     position: relative;
diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js
index 4103dc074..1af38a690 100644
--- a/apps/presentationeditor/main/app/controller/Toolbar.js
+++ b/apps/presentationeditor/main/app/controller/Toolbar.js
@@ -1815,9 +1815,9 @@ define([
                         parentMenu: menu.items[i].menu,
                         store: equationsStore.at(i).get('groupStore'),
                         scrollAlwaysVisible: true,
-                        itemTemplate: _.template('<div class="item-equation" '+
-                            'style="background-position:<%= posX %>px <%= posY %>px;" >' +
-                            '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
+                        itemTemplate: _.template(
+                            '<div class="item-equation">' +
+                                '<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
                             '</div>')
                     });
                     equationPicker.on('item:click', function(picker, item, record, e) {
diff --git a/apps/presentationeditor/main/resources/less/toolbar.less b/apps/presentationeditor/main/resources/less/toolbar.less
index 5e6f7c698..10a8b6ae0 100644
--- a/apps/presentationeditor/main/resources/less/toolbar.less
+++ b/apps/presentationeditor/main/resources/less/toolbar.less
@@ -83,11 +83,6 @@
     text-overflow: ellipsis;
 }
 
-.item-equation {
-    border: 1px solid @border-regular-control;
-    .background-ximage-v2('toolbar/math.png', 1500px);
-}
-
 #plugins-panel {
     .separator:first-child {
         display: inline-block;
diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
index 371faa2e3..173789ec4 100644
--- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js
@@ -2825,9 +2825,9 @@ define([
                         parentMenu: menu.items[i].menu,
                         store: equationsStore.at(i).get('groupStore'),
                         scrollAlwaysVisible: true,
-                        itemTemplate: _.template('<div class="item-equation" '+
-                            'style="background-position:<%= posX %>px <%= posY %>px;" >' +
-                            '<div style="width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
+                        itemTemplate: _.template(
+                            '<div class="item-equation">' +
+                                '<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
                             '</div>')
                     });
                     equationPicker.on('item:click', function(picker, item, record, e) {
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index 764207d75..c9076ec51 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -101,11 +101,6 @@
     }
 }
 
-.item-equation {
-    border: 1px solid @border-regular-control;
-    .background-ximage-v2('toolbar/math.png', 1500px);
-}
-
 #special-paste-container,
 #autocorrect-paste-container {
     position: absolute;