diff --git a/src/qiskit_sphinx_theme/assets/styles/_footer.scss b/src/qiskit_sphinx_theme/assets/styles/_footer.scss index 2303d0dd..a0da62ec 100644 --- a/src/qiskit_sphinx_theme/assets/styles/_footer.scss +++ b/src/qiskit_sphinx_theme/assets/styles/_footer.scss @@ -1,28 +1,29 @@ -footer .helpful-container { +.qiskit-analytics-container { display: inline-flex; border-top: 1px solid var(--color-background-border); border-bottom: 1px solid var(--color-background-border); color: var(--color-foreground-secondary); -} -footer .helpful-container .helpful-question, -footer .helpful-container .was-helpful-thank-you { - padding: 0.625rem 1.25rem 0.625rem 1.25rem; -} + margin-bottom: 1rem; -#was-helpful-thank-you { - visibility: hidden; -} + div, + a { + padding: 0.625rem 1.25rem 0.625rem 1.25rem; + } + + a { + color: var(--qiskit-color-purple); + cursor: pointer; + text-decoration: none; + + &:hover { + background-color: var(--qiskit-color-purple); + color: #ffffff; + } + } -.helpful-container .helpful-question.yes-link, -.helpful-container .helpful-question.no-link { - color: var(--qiskit-color-purple); - cursor: pointer; - text-decoration: none; } -.helpful-container .helpful-question.yes-link:hover, -.helpful-container .helpful-question.no-link:hover { - background-color: var(--qiskit-color-purple); - color: #ffffff; +#qiskit-analytics-thank-you { + visibility: hidden; } diff --git a/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/custom_templates/footer_analytics.html b/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/custom_templates/footer_analytics.html index 0b8caf54..c4f14153 100644 --- a/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/custom_templates/footer_analytics.html +++ b/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/custom_templates/footer_analytics.html @@ -1,16 +1,14 @@ {% if analytics_enabled %} -
-
-
Was this page helpful?
- Yes - No -
Thank you!
+
+
Was this page helpful?
+ Yes + No +
Thank you!
-
{% endif %} diff --git a/tests/js/snapshots.test.js b/tests/js/snapshots.test.js index 5a186910..401c63ef 100644 --- a/tests/js/snapshots.test.js +++ b/tests/js/snapshots.test.js @@ -236,7 +236,7 @@ test.describe("footer", () => { test("says 'thank you' when analytics clicked", async ({ page }) => { await page.goto(""); - const yesOption = page.locator("a.helpful-question.yes-link"); + const yesOption = page.locator("div.qiskit-analytics-container a").first(); // First, check that we change the color of the buttons when hovering. await yesOption.hover(); @@ -247,7 +247,7 @@ test.describe("footer", () => { // Then, check the screenshot when clicking. await yesOption.click(); - const analytics = page.locator("div.helpful-container"); + const analytics = page.locator("div.qiskit-analytics-container"); await expect(analytics).toHaveScreenshot(); }); }); diff --git a/tests/js/snapshots.test.js-snapshots/footer-includes-page-analytics-1-linux.png b/tests/js/snapshots.test.js-snapshots/footer-includes-page-analytics-1-linux.png index a4a19a07..2dc2d6f4 100644 Binary files a/tests/js/snapshots.test.js-snapshots/footer-includes-page-analytics-1-linux.png and b/tests/js/snapshots.test.js-snapshots/footer-includes-page-analytics-1-linux.png differ