From 45f93ae75da59593c341d29394ed1e8842df4ea1 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Thu, 13 Oct 2022 08:39:52 -0500
Subject: [PATCH] UX: Onboarding edits (#18581)
* UX: Adjust size of svg arrow
* UX: Refactor & style edits
---
.../javascripts/discourse/app/lib/popup.js | 1 +
.../stylesheets/common/base/_index.scss | 1 +
.../stylesheets/common/base/d-onboarding.scss | 37 +++++++++++++++++++
.../stylesheets/common/base/d-popover.scss | 1 +
.../stylesheets/common/base/discourse.scss | 19 ----------
5 files changed, 40 insertions(+), 19 deletions(-)
create mode 100644 app/assets/stylesheets/common/base/d-onboarding.scss
diff --git a/app/assets/javascripts/discourse/app/lib/popup.js b/app/assets/javascripts/discourse/app/lib/popup.js
index f098f75e817..bbd110309e7 100644
--- a/app/assets/javascripts/discourse/app/lib/popup.js
+++ b/app/assets/javascripts/discourse/app/lib/popup.js
@@ -23,6 +23,7 @@ export function showPopup(options) {
showOnCreate: true,
hideOnClick: false,
trigger: "manual",
+ theme: "d-onboarding",
// It must be interactive to make buttons work.
interactive: true,
diff --git a/app/assets/stylesheets/common/base/_index.scss b/app/assets/stylesheets/common/base/_index.scss
index 0af5ac85810..163ec74b3cb 100644
--- a/app/assets/stylesheets/common/base/_index.scss
+++ b/app/assets/stylesheets/common/base/_index.scss
@@ -12,6 +12,7 @@
@import "crawler_layout";
@import "d-icon";
@import "d-popover";
+@import "d-onboarding";
@import "dialog";
@import "directory";
@import "discourse";
diff --git a/app/assets/stylesheets/common/base/d-onboarding.scss b/app/assets/stylesheets/common/base/d-onboarding.scss
new file mode 100644
index 00000000000..f7f795d9d7f
--- /dev/null
+++ b/app/assets/stylesheets/common/base/d-onboarding.scss
@@ -0,0 +1,37 @@
+.onboarding-popup-container {
+ min-width: 300px;
+ padding: 0.5em;
+ text-align: left;
+
+ .onboarding-popup-title {
+ font-size: $font-up-2;
+ font-weight: bold;
+ }
+
+ .onboarding-popup-content {
+ margin-top: 0.25em;
+ }
+
+ .onboarding-popup-buttons {
+ margin-top: 1em;
+ }
+}
+
+.tippy-box[data-theme~="d-onboarding"][data-placement^="left"]
+ > .tippy-svg-arrow
+ > svg {
+ left: 11px;
+}
+
+.tippy-box[data-theme~="d-onboarding"][data-placement^="bottom"]
+ > .tippy-svg-arrow
+ > svg {
+ top: -13px;
+ left: -1px;
+}
+
+.tippy-box[data-theme~="d-onboarding"] > .tippy-svg-arrow:after,
+.tippy-box[data-theme~="d-onboarding"] > .tippy-svg-arrow > svg {
+ width: 18px;
+ height: 18px;
+}
diff --git a/app/assets/stylesheets/common/base/d-popover.scss b/app/assets/stylesheets/common/base/d-popover.scss
index 7c4547c2ecb..588aa1d2fc9 100644
--- a/app/assets/stylesheets/common/base/d-popover.scss
+++ b/app/assets/stylesheets/common/base/d-popover.scss
@@ -14,6 +14,7 @@ $d-popover-border: var(--primary-low);
.tippy-box[data-placement^="bottom"] .tippy-svg-arrow > svg {
top: -10px;
}
+
.tippy-rounded-arrow {
fill: $d-popover-background;
.svg-arrow {
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 9a52a296a8b..fe579fe9f0c 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -570,25 +570,6 @@ table {
animation-name: ping;
}
-.onboarding-popup-container {
- min-width: 300px;
- padding: 0.5em;
- text-align: left;
-
- .onboarding-popup-title {
- font-size: $font-up-2;
- font-weight: bold;
- }
-
- .onboarding-popup-content {
- margin-top: 0.25em;
- }
-
- .onboarding-popup-buttons {
- margin-top: 1em;
- }
-}
-
.fade {
opacity: 0;
transition: opacity 0.15s linear;