From 08f177bfd8bfced6ed094a763e9ee7ad82f1e822 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Fri, 31 Jul 2020 17:45:45 +0200
Subject: [PATCH] Fix styling of buttons in grid cells (#8543)

---
 .../src/less/components/umb-grid.less              | 14 +++++++++++---
 .../src/views/components/umb-confirm-action.html   |  6 ++++--
 .../src/views/propertyeditors/grid/grid.html       | 10 +++++++---
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
index 26d61412ae..d259878dc7 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
@@ -751,9 +751,19 @@
     margin-right: 5px;
     position: relative;
     cursor: pointer;
-    display:inline-block;
+    display: inline-block;
 }
 
+.umb-grid .cell-tools {
+.umb-grid .umb-control-tool {
+    .btn-icon {
+        padding: 0;
+    }
+}
+
+.umb-grid .umb-control-tool .btn-icon {
+    color: @white;
+}
 
 
 // Template
@@ -1007,8 +1017,6 @@
     display: block;
 }
 
-
-
 // Configuration specific styles
 // -------------------------
 .umb-grid-configuration .umb-templates {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
index 45781e9d6e..39864c26fd 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
@@ -1,8 +1,10 @@
 <div class="umb_confirm-action">
     <button ng-if="onDelete" type="button" class="btn-icon" ng-click="clickButton($event)" localize="title" title="@general_delete">
         <umb-icon icon="icon-trash" class="icon-trash"></umb-icon>
-        <span class="sr-only">Delete</span>
-     </button>
+        <span class="sr-only">
+            <localize key="general_delete">Delete</localize>
+        </span>
+    </button>
 
      <div class="umb_confirm-action__overlay"
         ng-class="{
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index 4e45a724bc..afb754a0ef 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -155,8 +155,8 @@
                                                       </div>
 
                                                       <div class="cell-tools" ng-if="(area === active || area === currentCellWithActiveChild) && !sortMode">
-                                                         <button type="button" aria-haspopup="true" class="btn-reset cell-tool" ng-click="editGridItemSettings(area, 'cell')">
-                                                            <i class="icon-settings" aria-hidden></i>
+                                                         <button type="button" aria-haspopup="true" class="btn-icon cell-tool" ng-click="editGridItemSettings(area, 'cell')">
+                                                            <i class="icon-settings" aria-hidden="true"></i>
                                                             <span class="sr-only">Open column settings</span>
                                                          </button>
                                                       </div>
@@ -201,7 +201,11 @@
                                                                       <div class="umb-tools" ng-if="control === active">
 
                                                                           <div class="umb-control-tool" ng-if="control.editor.config.settings">
-                                                                              <button class="umb-control-tool-icon icon-settings btn-reset" ng-click="editGridItemSettings(control, 'control')" type="button"></button>
+                                                                              <button type="button" class="umb-control-tool-icon icon-settings btn-icon" ng-click="editGridItemSettings(control, 'control')">
+                                                                                  <span class="sr-only">
+                                                                                      <localize key="general_edit">Edit</localize>
+                                                                                  </span>
+                                                                              </button>
                                                                           </div>
 
                                                                           <div class="umb-control-tool">