From 6d121415f237d096a3fe7354068c0d25f8622956 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Wed, 6 Jan 2021 18:49:55 +0300
Subject: [PATCH] [stylesheets] changed 'resolved' button in commnets

---
 .../main/lib/template/Comments.template       |  6 +-----
 .../lib/template/CommentsPopover.template     |  6 +-----
 .../main/resources/less/colors-table.less     |  3 +++
 apps/common/main/resources/less/comments.less | 20 ++++++++++++++++++-
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/apps/common/main/lib/template/Comments.template b/apps/common/main/lib/template/Comments.template
index c5d8f0311..51b315778 100644
--- a/apps/common/main/lib/template/Comments.template
+++ b/apps/common/main/lib/template/Comments.template
@@ -69,11 +69,7 @@
                     <div class="btn-edit img-commonctrl"></div>
                     <div class="btn-delete img-commonctrl"></div>
                 <% } %>
-                <% if (resolved) { %>
-                <div class="btn-resolve-check img-commonctrl" data-toggle="tooltip"></div>
-                <% } else { %>
-                <div class="btn-resolve img-commonctrl" data-toggle="tooltip"></div>
-                <% } %>
+                <div class="btn-resolve <% if (resolved) print('comment-resolved') %>" data-toggle="tooltip"></div>
             </div>
         <% } %>
 
diff --git a/apps/common/main/lib/template/CommentsPopover.template b/apps/common/main/lib/template/CommentsPopover.template
index 78f0d4a5a..430adab72 100644
--- a/apps/common/main/lib/template/CommentsPopover.template
+++ b/apps/common/main/lib/template/CommentsPopover.template
@@ -70,11 +70,7 @@
                 <div class="btn-edit img-commonctrl"></div>
                 <div class="btn-delete img-commonctrl"></div>
             <% } %>
-            <% if (resolved) { %>
-            <div class="btn-resolve-check img-commonctrl" data-toggle="tooltip"></div>
-            <% } else { %>
-            <div class="btn-resolve img-commonctrl" data-toggle="tooltip"></div>
-            <% } %>
+            <div class="btn-resolve <% if (resolved) print('comment-resolved') %>" data-toggle="tooltip"></div>
         </div>
     <% } %>
 
diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less
index b95b8c150..06226a1da 100644
--- a/apps/common/main/resources/less/colors-table.less
+++ b/apps/common/main/resources/less/colors-table.less
@@ -86,6 +86,8 @@
     --image-border-types-filter: none;
     --image-border-types-filter-selected: none;
     --component-normal-icon-filter: none;
+
+    --comment-resolved-icon-color: green;
 }
 
 // Background
@@ -152,3 +154,4 @@
 @button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -20px);
 
 @component-normal-icon-filer: var(--component-normal-icon-filter);
+@comment-resolved-icon-color: var(--comment-resolved-icon-color);
diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less
index 87677b394..b34ec46c5 100644
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@@ -265,7 +265,25 @@
     }
 
     .btn-resolve {
-        background-position: -2px -253px;
+        position: relative;
+
+        &:after {
+            content: '';
+            position: absolute;
+            border: solid @text-normal;
+            border-width: 0 2px 2px 0;
+            transform: rotate(40deg);
+            width: 7px;
+            height: 12px;
+            left: 6px;
+            top: -2px;
+        }
+
+        &.comment-resolved {
+            &:after {
+                border-color: @comment-resolved-icon-color;
+            }
+        }
     }
 
     .btn-resolve-check {