UX: Make user tips more visible (discourse#22012)

Inverts the background of the user tip to make it more visible.
webmaxorg · Jun 12, 2023 · 7746984 · 7746984
1 parent 7c768a2
commit 7746984
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/app/assets/stylesheets/common/base/d-popover.scss b/app/assets/stylesheets/common/base/d-popover.scss
@@ -15,14 +15,8 @@ $d-popover-border: var(--primary-low);
   top: -10px;
 }
 
-.tippy-rounded-arrow {
-  fill: $d-popover-background;
-  .svg-arrow {
-    fill: $d-popover-border;
-  }
-  .svg-content {
-    fill: $d-popover-background;
-  }
+.tippy-svg-arrow > svg {
+  color: $d-popover-background;
 }
 
 [data-tooltip] > *,

diff --git a/app/assets/stylesheets/common/base/user-tips.scss b/app/assets/stylesheets/common/base/user-tips.scss
@@ -1,3 +1,30 @@
+.tippy-box[data-theme="user-tips"] {
+  background-color: var(--tertiary);
+  color: var(--secondary);
+  border-color: var(--tertiary);
+
+  .btn-flat {
+    color: var(--secondary);
+
+    &:hover {
+      color: var(--d-hover);
+    }
+  }
+
+  .btn-primary {
+    background: var(--secondary);
+    color: var(--tertiary);
+
+    &:hover {
+      color: var(--tertiary-hover);
+    }
+  }
+
+  > .tippy-svg-arrow > svg {
+    color: var(--tertiary);
+  }
+}
+
 .user-tip {
   z-index: z("composer", "content") - 1;
 }