From 43586e6bb7520b61502a18cbef9d22728d730936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 24 Apr 2019 09:27:47 +0200
Subject: [PATCH 1/4] first step for changing the add-content button

---
 .../src/less/components/umb-nested-content.less           | 6 +++---
 .../propertyeditors/nestedcontent/nestedcontent.html      | 8 ++------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
index db0d96b79d..10e45afd79 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
@@ -116,8 +116,8 @@
     opacity: 1;
 }
 
-.umb-nested-content__icon,
-.umb-nested-content__icon.umb-nested-content__icon--disabled:hover {
+.umb-nested-content__add-content,
+.umb-nested-content__add-content.--disabled:hover {
     display: inline-block;
     padding: 4px 6px;
     margin: 2px;
@@ -127,7 +127,7 @@
     border-radius: 200px;
     text-decoration: none !important;
 }
-.umb-nested-content__icon.umb-nested-content__icon--disabled:hover {
+.umb-nested-content__add-content.--disabled:hover {
     cursor: default;
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
index bca767f650..25382801db 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
@@ -32,13 +32,9 @@
 
         </div>
 
-        <div class="umb-nested-content__help-text" ng-show="nodes.length == 0">
-            <localize key="grid_addElement"></localize>
-        </div>
-
         <div class="umb-nested-content__footer-bar" ng-hide="nodes.length >= maxItems">
-            <a href class="umb-nested-content__icon" ng-class="{ 'umb-nested-content__icon--disabled': !scaffolds.length }" ng-click="openNodeTypePicker($event)" prevent-default>
-                <i class="icon icon-add"></i>
+            <a href class="umb-nested-content__add-content" ng-class="{ '--disabled': !scaffolds.length }" ng-click="openNodeTypePicker($event)" prevent-default>
+                <localize key="grid_addElement"></localize>
             </a>
         </div>
 

From dc66807d13263467660103731a4f3ac84494b6a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 24 Apr 2019 10:31:30 +0200
Subject: [PATCH 2/4] changed the look of nested content

---
 .../less/components/umb-nested-content.less   | 95 ++++++++++++++-----
 .../nestedcontent/nestedcontent.html          |  2 +-
 2 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
index 10e45afd79..b61e528677 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
@@ -27,17 +27,12 @@
 .umb-nested-content__item {
     position: relative;
     text-align: left;
-    border-top: solid 1px transparent;
     background: @white;
 }
 
-.umb-nested-content__item--active:not(.umb-nested-content__item--single) {
-    background: @gray-10;
-}
-
 .umb-nested-content__item.ui-sortable-placeholder {
     background: @gray-10;
-    border: 1px dashed @gray-8;
+    border: 1px solid @gray-9;
     visibility: visible !important;
     height: 55px;
     margin-top: -1px;
@@ -52,9 +47,7 @@
 }
 
 .umb-nested-content__header-bar {
-    padding: 15px 20px;
-    border-bottom: 1px dashed @gray-8;
-    text-align: right;
+    border-bottom: 1px solid @gray-9;
     cursor: pointer;
     background-color: @white;
 
@@ -68,25 +61,28 @@
 .umb-nested-content__heading {
     line-height: 20px;
     position: relative;
-
-    &.-with-icon {
-        padding-left: 20px;
+    margin-top:1px;
+    padding: 15px 20px;
+    color:@ui-option-type;
+    border-radius: 3px 3px 0 0;
+    
+    &:hover {
+        color:@ui-option-type-hover;
     }
 
     i {
-        color: @gray-2;
-        position: absolute;
-        left: 0;
+        display: inline;
+        margin-right: 10px;
     }
 
     .umb-nested-content__item-name {
+        display: inline;
         max-height: 20px;
-        text-align: left;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        display: block;
     }
+    
 }
 
 .umb-nested-content__icons {
@@ -110,14 +106,32 @@
     }
 }
 
+.umb-nested-content__item--active {
+    .umb-nested-content__heading {
+        background-color: @ui-active;
+        &:hover {
+            color:@ui-option-type;
+        }
+    }
+    .umb-nested-content__icons {
+        background-color: @ui-active;
+        &:before {
+            background: linear-gradient(90deg, rgba(255,255,255,0), @ui-active);
+        }
+    }
+}
+
+
 
 .umb-nested-content__header-bar:hover .umb-nested-content__icons,
 .umb-nested-content__item--active > .umb-nested-content__header-bar .umb-nested-content__icons {
     opacity: 1;
 }
 
-.umb-nested-content__add-content,
-.umb-nested-content__add-content.--disabled:hover {
+
+
+.umb-nested-content__icon,
+.umb-nested-content__icon.umb-nested-content__icon--disabled:hover {
     display: inline-block;
     padding: 4px 6px;
     margin: 2px;
@@ -127,7 +141,8 @@
     border-radius: 200px;
     text-decoration: none !important;
 }
-.umb-nested-content__add-content.--disabled:hover {
+
+.umb-nested-content__icon.umb-nested-content__icon--disabled:hover {
     cursor: default;
 }
 
@@ -157,13 +172,47 @@
 }
 
 
+
+
 .umb-nested-content__footer-bar {
-    text-align: center;
-    padding-top: 20px;
+    margin-top: 20px;
 }
 
+.umb-nested-content__add-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed @ui-action-discreet-border;
+    color: @ui-action-discreet-type;
+    font-weight: bold;
+    padding: 5px 15px;
+    box-sizing: border-box;
+}
+
+.umb-nested-content__add-content:hover {
+    color: @ui-action-discreet-type-hover;
+    border-color: @ui-action-discreet-border-hover;
+    text-decoration: none;
+}
+
+.umb-nested-content__add-content.--disabled,
+.umb-nested-content__add-content.--disabled:hover {
+    color: @gray-7;
+    border-color: @gray-7;
+    cursor: default;
+}
+
+
 .umb-nested-content__content {
-    border-bottom: 1px dashed @gray-8;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid @gray-9;
+    border-left: 1px solid @gray-9;
+    border-right: 1px solid @gray-9;
+    border-radius: 0 0 3px 3px;
+}
+
+.umb-nested-content__item--active:not(.umb-nested-content__item--single) .umb-nested-content__content {
+    background: @brownGrayLight;
 }
 
 .umb-nested-content__content .umb-control-group {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
index 25382801db..610da769cf 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
@@ -9,7 +9,7 @@
 
                 <div class="umb-nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
 
-                    <div class="umb-nested-content__heading" ng-class="{'-with-icon': showIcons}"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span class="umb-nested-content__item-name" ng-bind="$parent.getName($index)"></span></div>
+                    <div class="umb-nested-content__heading"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span class="umb-nested-content__item-name" ng-bind="$parent.getName($index)"></span></div>
 
                     <div class="umb-nested-content__icons">
                         <a class="umb-nested-content__icon umb-nested-content__icon--edit" localize="title" title="general_edit" ng-class="{ 'umb-nested-content__icon--active' : $parent.realCurrentNode.id == node.id }" ng-click="$parent.editNode($index); $event.stopPropagation();" ng-show="$parent.maxItems > 1" prevent-default>

From e889ec1fa95c90e1a8365f7e4354cf6298279312 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 24 Apr 2019 10:34:41 +0200
Subject: [PATCH 3/4] added new lighter gray

---
 src/Umbraco.Web.UI.Client/src/less/variables.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/less/variables.less b/src/Umbraco.Web.UI.Client/src/less/variables.less
index 55be161cf8..a2e3976eff 100644
--- a/src/Umbraco.Web.UI.Client/src/less/variables.less
+++ b/src/Umbraco.Web.UI.Client/src/less/variables.less
@@ -119,6 +119,7 @@
 @brown:                 #9d8057;// added 2019
 @brownLight:            #e4e0dd;// added 2019
 @brownGrayLight:        #f6f4f4;// added 2019
+@brownGrayExtraLight:   #faf9f9;// added 2019
 @orange:                #ff9412;// added 2019
 
 //@u-greyLight:           #f2ebe6;// added 2019

From 9e03103cbb233ea8ee839ea30ebf2f1966d3a607 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Wed, 24 Apr 2019 10:34:57 +0200
Subject: [PATCH 4/4] using new ligther gray for background of nested content

---
 .../src/less/components/umb-nested-content.less                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
index b61e528677..eec23869b5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
@@ -212,7 +212,7 @@
 }
 
 .umb-nested-content__item--active:not(.umb-nested-content__item--single) .umb-nested-content__content {
-    background: @brownGrayLight;
+    background: @brownGrayExtraLight;
 }
 
 .umb-nested-content__content .umb-control-group {