From 824d2fd46d70f235c1211c5d47f3f84376c704f1 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 2 Aug 2020 16:20:52 +0200
Subject: [PATCH] Align listview layout icons and make icon boxes same sizes

---
 .../src/less/listview.less                    | 19 ++++++++++---------
 .../listview/layouts.prevalues.html           | 12 +++++++-----
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less
index 6313dcfe5f..582da12804 100644
--- a/src/Umbraco.Web.UI.Client/src/less/listview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/listview.less
@@ -259,20 +259,21 @@
    margin-right: 15px;
 }
 
+.list-view-layout__icon-wrapper {
+    margin-right: 10px;
+}
+
 .list-view-layout__icon {
    font-size: 18px;
-   margin-right: 10px;
    vertical-align: middle;
    border: 1px solid @gray-8;
    background: @white;
-   padding: 6px 8px;
-   display: block;
-}
-
-.list-view-layout__icon:hover,
-.list-view-layout__icon:focus,
-.list-view-layout__icon:active {
-   text-decoration: none;
+   padding: 0;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   width: 30px;
+   height: 30px;
 }
 
 .list-view-layout__remove {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
index e0a520d820..899e03d38e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts.prevalues.html
@@ -8,21 +8,23 @@
 
                <i class="icon-navigation list-view-layout__sort-handle" aria-hidden="true" aria-label="Sort"></i>
 
-               <div>
+               <div class="list-view-layout__icon-wrapper">
 
-                   <button ng-if="layout.isSystem !== 1" type="button" ng-click="vm.openIconPicker(layout)" class="list-view-layout__icon" umb-auto-focus>
-                       <i class="{{ layout.icon }}" aria-hidden="true"></i>
+                   <button ng-if="layout.isSystem !== 1" type="button" class="btn-reset" ng-click="vm.openIconPicker(layout)" umb-auto-focus>
+                       <span class="list-view-layout__icon">
+                           <i class="{{layout.icon}}" aria-hidden="true"></i>
+                       </span>
                    </button>
 
                    <div ng-if="layout.isSystem === 1" class="list-view-layout__icon">
-                       <i class="{{ layout.icon }}" aria-hidden="true"></i>
+                       <i class="{{layout.icon}}" aria-hidden="true"></i>
                    </div>
 
                </div>
 
                <div class="list-view-layout__name">
                    <input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.name" placeholder="Name..." class="-full-width-input" focus-when="{{ vm.focusLayoutName }}" />
-                   <span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{ layout.name }}</span>
+                   <span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{layout.name}}</span>
                    <span ng-if="layout.isSystem === 1" class="list-view-layout__system">(system layout)</span>
                </div>