Refactor how we use icons

Inject them in an angular component so we can easily change their color

2 files changed, 16 insertions, 7 deletions

diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index 08a2fc367..444425c9f 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -25,4 +25,6 @@
   [autoClose]="true"
   (onHidden)="onPopoverHidden()"
   (onShown)="onPopoverShown()"
-></span>
+>
+  <my-global-icon iconName="help"></my-global-icon>
+</span>
diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index 047e53fab..4565d457a 100644
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -2,13 +2,15 @@
 @import '_mixins';
 
 .help-tooltip-button {
-  @include icon(17px);
-
-  position: relative;
-  top: -2px;
-  background-image: url('../../../assets/images/global/help.svg');
+  cursor: pointer;
   border: none;
-  margin: 5px;
+
+  my-global-icon {
+    width: 17px;
+    position: relative;
+    top: -2px;
+    margin: 5px;
+  }
 }
 
 /deep/ {
@@ -24,8 +26,13 @@
       color: #000;
       box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
 
+      p:last-child {
+        margin-bottom: 0;
+      }
+
       ul {
         padding-left: 20px;
+        margin-bottom: 0;
       }
     }
   }