diff --git a/ui/src/css/doc.css b/ui/src/css/doc.css index 62fad7236b..431c7a7bbd 100644 --- a/ui/src/css/doc.css +++ b/ui/src/css/doc.css @@ -1657,3 +1657,9 @@ } + +/* Page vote buttons - dark mode muted color for text and icons */ +[data-theme="dark"] #docs-vote-yes, +[data-theme="dark"] #docs-vote-no { + color: var(--dark-text-muted); +} diff --git a/ui/src/js/16-hotjar-feedback.js b/ui/src/js/16-hotjar-feedback.js new file mode 100644 index 0000000000..91d117e7fc --- /dev/null +++ b/ui/src/js/16-hotjar-feedback.js @@ -0,0 +1,33 @@ +;(function () { + 'use strict' + + var yesBtn = document.getElementById('docs-vote-yes') + var noBtn = document.getElementById('docs-vote-no') + + function onVote(vote, selectedBtn, otherBtn) { + if (typeof window.hj === 'function') { + window.hj('event', 'docs_page_feedback') + } + if (typeof window.analytics === 'object') { + window.analytics.track('docs_page_vote', { + vote: vote, + page: window.location.pathname, + }) + } + + ;[selectedBtn, otherBtn].forEach(function (btn) { + btn.classList.remove('border-link-on-light', 'text-link-on-light', 'opacity-50') + }) + + selectedBtn.setAttribute('aria-pressed', 'true') + selectedBtn.classList.add('border-link-on-light', 'text-link-on-light') + + otherBtn.setAttribute('aria-pressed', 'false') + otherBtn.classList.add('opacity-50') + } + + if (yesBtn && noBtn) { + yesBtn.addEventListener('click', function () { onVote('yes', yesBtn, noBtn) }) + noBtn.addEventListener('click', function () { onVote('no', noBtn, yesBtn) }) + } +})() diff --git a/ui/src/partials/article-footer.hbs b/ui/src/partials/article-footer.hbs index 10820d6ab0..b65f75854d 100644 --- a/ui/src/partials/article-footer.hbs +++ b/ui/src/partials/article-footer.hbs @@ -1,27 +1,26 @@ -