update arrow icons in quickstart ctas

dbt-labs · Nov 20, 2023 · f553c21 · f553c21
1 parent 681019e
commit f553c21
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/website/src/components/quickstartTOC/index.js b/website/src/components/quickstartTOC/index.js
@@ -81,19 +81,14 @@ function QuickstartTOC() {
         buttonContainer.classList.add(style.buttonContainer);
         const prevButton = document.createElement("a");
         const nextButton = document.createElement("a");
-        const nextButtonIcon = document.createElement("i");
-        const prevButtonIcon = document.createElement("i");
-
-        prevButtonIcon.classList.add("fa-regular", "fa-arrow-left");
-        prevButton.textContent = "Back";
-        prevButton.prepend(prevButtonIcon);
+
+        prevButton.innerHTML =
+          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M7.4 273.4C2.7 268.8 0 262.6 0 256s2.7-12.8 7.4-17.4l176-168c9.6-9.2 24.8-8.8 33.9 .8s8.8 24.8-.8 33.9L83.9 232 424 232c13.3 0 24 10.7 24 24s-10.7 24-24 24L83.9 280 216.6 406.6c9.6 9.2 9.9 24.3 .8 33.9s-24.3 9.9-33.9 .8l-176-168z"/></svg> Back';
         prevButton.classList.add(clsx(style.button, style.prevButton));
         prevButton.disabled = index === 0;
         prevButton.addEventListener("click", () => handlePrev(index + 1));
 
-        nextButtonIcon.classList.add("fa-regular", "fa-arrow-right");
-        nextButton.textContent = "Next";
-        nextButton.appendChild(nextButtonIcon);
+        nextButton.innerHTML = 'Next <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M440.6 273.4c4.7-4.5 7.4-10.8 7.4-17.4s-2.7-12.8-7.4-17.4l-176-168c-9.6-9.2-24.8-8.8-33.9 .8s-8.8 24.8 .8 33.9L364.1 232 24 232c-13.3 0-24 10.7-24 24s10.7 24 24 24l340.1 0L231.4 406.6c-9.6 9.2-9.9 24.3-.8 33.9s24.3 9.9 33.9 .8l176-168z"/></svg>';
         nextButton.classList.add(clsx(style.button, style.nextButton));
         nextButton.disabled = index === stepWrappers.length - 1;
         nextButton.addEventListener("click", () => handleNext(index + 1));

diff --git a/website/src/components/quickstartTOC/styles.module.css b/website/src/components/quickstartTOC/styles.module.css
@@ -99,6 +99,32 @@ html[data-theme="dark"] .stepWrapper .buttonContainer a:hover {
     margin-right: .4rem;
 }
 
+.buttonContainer > a > svg {
+    width: 11.2px;
+    fill: var(--color-green-blue);
+    margin-bottom: -1px;
+}
+
+.buttonContainer > a:hover > svg {
+    width: 11.2px;
+    fill: var(--color-white);
+}
+
+html[data-theme="dark"] .buttonContainer > a > svg {
+    fill: var(--color-green-blue);
+}
+
+html[data-theme="dark"] .buttonContainer > a:hover > svg {
+    fill: var(--color-white);
+}
+
+.buttonContainer .prevButton svg {
+  margin-right: .4rem;
+}
+.buttonContainer .nextButton svg {
+  margin-left: .4rem;
+}
+
 .buttonContainer .nextButton {
     margin-left: auto;
 }
@@ -111,6 +137,11 @@ html[data-theme="dark"] .stepWrapper .buttonContainer a:hover {
 .stepWrapper[data-step="1"] a.nextButton {
     background: var(--color-green-blue);
     color: var(--color-white);
+    fill: var(--color-white);
+}
+
+.stepWrapper[data-step="1"] a.nextButton > svg {
+    fill: var(--color-white);
 }
 
 html[data-theme="dark"] .stepWrapper[data-step="1"] a.nextButton {