FIX: better styling with popover (#7259)

app/assets/stylesheets/common/base/d-popover.scss

@@ -63,7 +63,7 @@ $d-popover-border: $primary-medium;
   }
 
   .d-popover-content {
-    padding: 1em;
+    padding: 0.5em;
     font-size: $font-down-1;
     overflow-wrap: break-word;
     -webkit-animation: popoverFadeIn 0.5s;

plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js.no-module.es6

@@ -70,7 +70,10 @@
     $element
       .html(DATE_TEMPLATE)
       .attr("aria-label", textPreview)
-      .attr("data-html-tooltip", `<div class="previews">${htmlPreview}</div>`)
+      .attr(
+        "data-html-tooltip",
+        `<div class="locale-dates-previews">${htmlPreview}</div>`
+      )
       .addClass("cooked-date")
       .find(".relative-time")
       .text(formatedDateTime);

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -14,24 +14,20 @@
   }
 }
 
-.discourse-local-date + #discourse-tooltip {
-  .tooltip-content {
+#d-popover {
+  .locale-dates-previews {
     max-width: 360px;
-    padding: 0.5em;
+    .preview {
+      display: flex;
+      flex-direction: column;
+      padding: 5px;
 
-    .previews {
-      .preview {
-        display: flex;
-        flex-direction: column;
-        padding: 5px;
+      .timezone {
+        font-weight: 700;
+      }
 
-        .timezone {
-          font-weight: 700;
-        }
-
-        &.current {
-          background: $tertiary-low;
-        }
+      &.current {
+        background: $tertiary-low;
       }
     }
   }