From 1294512ce81e5de7865e3c76e23f5d19f0c1a0d7 Mon Sep 17 00:00:00 2001
From: Nathan Woulfe <nathan@nathanw.com.au>
Date: Wed, 18 Jul 2018 10:06:08 +1000
Subject: [PATCH 1/2] fix cropped icon, resize large to double small icon size

---
 .../src/less/components/application/umb-drawer.less       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
index 0fae291e72..abcace794f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
@@ -55,7 +55,7 @@
 /* Our badge - should be moved */
 
 .umb-help-badge {
-    padding: 10px 20px 10px 35px;
+    padding: 10px 20px 10px 55px;
     background: @white;
     position: relative;
     overflow: hidden;
@@ -74,10 +74,10 @@
 }
 
 .umb-help-badge__icon {
-    font-size: 40px;
+    font-size: 36px;
     transform: translate(0,-50%);
     position: absolute;
-    left: -15px;
+    left: 10px;
     top: 50%;
     color: @red-l3;
 }
@@ -153,7 +153,7 @@
 .umb-help-list-item__content {
     display: flex;
     align-items: center;
-    padding: 10px 20px;
+    padding: 10px 20px 10px 10px;
 }
 
 .umb-help-list-item > a:hover, 

From 9488df823a48592dd44ccc156b1c961c478e9cee Mon Sep 17 00:00:00 2001
From: Nathan Woulfe <nathan@nathanw.com.au>
Date: Wed, 18 Jul 2018 11:00:27 +1000
Subject: [PATCH 2/2] remove inline styles in help drawer

---
 .../components/application/umb-drawer.less    | 35 +++++++++++++++----
 .../src/views/common/drawers/help/help.html   | 31 ++++++++--------
 2 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
index abcace794f..3c979135fb 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
@@ -61,6 +61,7 @@
     overflow: hidden;
     border-radius: 3px;
     display: block;
+    margin-bottom:5px;
 }
 
 .umb-help-badge:hover,
@@ -128,6 +129,14 @@
     align-items: center;
 }
 
+/* the outer container for each help type - tours, video etc */
+.umb-help-section + .umb-help-section {
+    margin-top:20px;
+}
+
+.umb-help-section__title {
+    margin:0 0 10px;    
+}
 
 /* Help list */
 
@@ -135,12 +144,12 @@
     list-style: none;
     margin-left: 0;
     margin-bottom: 0;
-    background: @white;
+    background: @white; 
     border-radius: 3px;
-}
-
-.umb-help-list:last-child {
-    border-bottom: none;
+    
+    [data-element*="help-tours"] & {
+        margin-bottom:5px;
+    }
 }
 
 .umb-help-list-item {
@@ -149,20 +158,28 @@
     border-bottom: 1px solid @gray-9;
 }
 
-.umb-help-list-item > a,
+.umb-help-list-item__group-title i {
+    margin-right:2px;
+    text-decoration: none;
+}
+
 .umb-help-list-item__content {
     display: flex;
     align-items: center;
     padding: 10px 20px 10px 10px;
+    text-decoration: none;
 }
 
+.umb-help-list-item:hover,
+.umb-help-list-item:focus,
+.umb-help-list-item:active,
 .umb-help-list-item > a:hover, 
 .umb-help-list-item > a:focus,
 .umb-help-list-item > a:active {
     text-decoration: none;
 
     .umb-help-list-item__title {
-        text-decoration: underline !important;
+        text-decoration: underline;
     }
 }
 
@@ -191,4 +208,8 @@
 
 .umb-help-list-item:hover .umb-help-list-item__group-title {
     text-decoration: underline;
+}
+
+[data-element*="tour-"].umb-help-list-item:hover .umb-help-list-item__title {
+    text-decoration:none;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
index 4829c8964a..a4d4af6093 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/drawers/help/help.html
@@ -8,16 +8,17 @@
     <umb-drawer-content>
 
         <!-- Tours -->
-        <div ng-if="vm.tours" data-element="help-tours" style="margin-bottom: 20px;">
+        <div class="umb-help-section" ng-if="vm.tours" data-element="help-tours">
 
-            <h5 style="margin-bottom: 10px; margin-top: 0;">Tours</h5>
+            <h5 class="umb-help-section__title">Tours</h5>
             
-            <div ng-repeat="tourGroup in vm.tours | orderBy:'groupOrder'" style="margin-bottom: 5px;">
+            <div ng-repeat="tourGroup in vm.tours | orderBy:'groupOrder'">
 
                 <div class="umb-help-list">
 
-                    <a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" style="text-decoration: none;" ng-click="tourGroup.open = !tourGroup.open">
-                        <h5 class="umb-help-list-item__group-title"><i style="margin-right: 2px;text-decoration: none;" ng-class="{'icon-navigation-right': !tourGroup.open, 'icon-navigation-down': tourGroup.open}"></i>
+                    <a href="" class="umb-help-list-item umb-help-list-item__content flex items-center justify-between" ng-click="tourGroup.open = !tourGroup.open">
+                        <h5 class="umb-help-list-item__group-title">
+                            <i ng-class="{'icon-navigation-right': !tourGroup.open, 'icon-navigation-down': tourGroup.open}"></i>
                             <span ng-if="tourGroup.group !== 'undefined'">{{tourGroup.group}}</span>
                             <span ng-if="tourGroup.group === 'undefined'">Other</span>
                         </h5>
@@ -49,7 +50,7 @@
 
 
         <!-- Show in custom help dashboard -->
-        <div data-element="help-custom-dashboard" style="margin-bottom: 20px;" ng-if="vm.customDashboard.length > 0">
+        <div class="umb-help-section" data-element="help-custom-dashboard" ng-if="vm.customDashboard.length > 0">
             <div ng-repeat="tab in vm.customDashboard">
                 <div ng-repeat="property in tab.properties">
                     <div>
@@ -61,11 +62,11 @@
         </div>
 
         <!--  Help Content -->
-        <div data-element="help-articles" style="margin-bottom: 20px;" ng-if="vm.topics.length > 0">
-            <h5 style="margin-bottom: 10px; margin-top: 0;">Articles</h5>
+        <div class="umb-help-section" data-element="help-articles" ng-if="vm.topics.length > 0">
+            <h5 class="umb-help-section__title">Articles</h5>
             <ul class="umb-help-list">
                 <li class="umb-help-list-item" ng-repeat="topic in vm.topics track by $index">
-                    <a data-element="help-article-{{topic.name}}" target="_blank" ng-href="{{topic.url}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+                    <a class="umb-help-list-item__content" data-element="help-article-{{topic.name}}" target="_blank" ng-href="{{topic.url}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
                         <span>
                             <span class="umb-help-list-item__title">
                                 <span class="bold">{{topic.name}}</span>
@@ -79,11 +80,11 @@
         </div>
 
         <!--  Umbraco tv content -->
-        <div data-element="help-videos" style="margin-bottom: 20px;">
-            <h5 style="margin-bottom: 10px; margin-top: 0;" ng-if="vm.videos.length > 0">Videos</h5>
+        <div class="umb-help-section" data-element="help-videos">
+            <h5 class="umb-help-section__title" ng-if="vm.videos.length > 0">Videos</h5>
             <ul class="umb-help-list">
                 <li class="umb-help-list-item" ng-repeat="video in vm.videos track by $index">
-                    <a data-element="help-article-{{video.title}}" target="_blank" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+                    <a class="umb-help-list-item__content" data-element="help-article-{{video.title}}" target="_blank" ng-href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
                         <i class="umb-help-list-item__icon icon-tv-old"></i>
                         <span class="umb-help-list-item__title">{{video.title}}</span>
                         <i class="umb-help-list-item__open-icon icon-out"></i>
@@ -93,8 +94,8 @@
         </div>
 
         <!--  Links -->
-        <div data-element="help-links">
-            <a data-element="help-link-umbraco-tv" class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
+        <div class="umb-help-section" data-element="help-links">
+            <a data-element="help-link-umbraco-tv" class="umb-help-badge" target="_blank" href="http://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
                 <i class="umb-help-badge__icon icon-tv-old"></i>
                 <div class="umb-help-badge__title">Visit umbraco.tv</div>
                 <small>
@@ -102,7 +103,7 @@
                 </small>
             </a>
 
-            <a data-element="help-link-our-umbraco" class="umb-help-badge" style="margin-bottom: 5px;" target="_blank" href="http://our.umbraco.org?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
+            <a data-element="help-link-our-umbraco" class="umb-help-badge" target="_blank" href="http://our.umbraco.org?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
                 <i class="umb-help-badge__icon icon-favorite"></i>
                 <div class="umb-help-badge__title">Visit our.umbraco.org</div>
                 <small>