Add ability to list redundancies

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / misc / help.component.scss

diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index fe64a270d79002ffe94815689667e9b7e653dc3b..f55a516e4730651f04679d0a350ad543ae1f859b 100644 (file)
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -2,30 +2,40 @@
 @import '_mixins';
 
 .help-tooltip-button {
-  @include icon(17px);
-
-  position: relative;
-  top: -2px;
-  background-image: url('../../../assets/images/global/help.svg');
-  background-color: #fff;
+  cursor: pointer;
   border: none;
-  margin: 5px;
+
+  my-global-icon {
+    width: 17px;
+    position: relative;
+    top: -2px;
+    margin: 5px;
+
+    @include apply-svg-color(var(--mainForegroundColor))
+  }
 }
 
-/deep/ {
-  .popover-body {
-    text-align: left;
-    padding: 10px;
+::ng-deep {
+  .help-popover {
     max-width: 300px;
 
-    font-size: 13px;
-    font-family: $main-fonts;
-    background-color: #fff;
-    color: #000;
-    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+    .popover-body {
+      font-family: $main-fonts;
+      text-align: left;
+      padding: 10px;
+      font-size: 13px;
+      background-color: var(--mainBackgroundColor);
+      color: var(--mainForegroundColor);
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+
+      p {
+        margin-bottom: 0;
+      }
 
-    ul {
-      padding-left: 20px;
+      ul {
+        padding-left: 20px;
+        margin-bottom: 0;
+      }
     }
   }
 }