implement pushfeedback (#3837)

* pushfeedback option 2

* apply custom styling

* style(formatting): remove email update coloring

* Update src/theme/DocItem/Footer/index.js

Co-authored-by: Steven Hicks <[email protected]>

* Update src/theme/DocItem/Footer/index.css

Co-authored-by: Steven Hicks <[email protected]>

* Update src/theme/DocItem/Footer/index.js

Co-authored-by: Steven Hicks <[email protected]>

* Update src/theme/DocItem/Footer/index.js

Co-authored-by: Steven Hicks <[email protected]>

* Update src/theme/DocItem/Footer/index.css

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Steven Hicks <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

package.json

@@ -44,6 +44,7 @@
     "docusaurus-plugin-openapi-docs": "^2.0.4",
     "docusaurus-theme-openapi-docs": "^2.0.4",
     "mixpanel-browser": "^2.47.0",
+    "pushfeedback-react": "^0.1.30",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-player": "^2.11.0",

src/theme/DocItem/Footer/index.css

@@ -0,0 +1,7 @@
+:root {
+  --feedback-primary-color: #fc5806;
+}
+
+.button--icon {
+  line-height: 1em;
+}

src/theme/DocItem/Footer/index.js

@@ -0,0 +1,101 @@
+// Why is this swizzled?
+//   To add a PushFeedback widget to every doc, to solicit feedback from readers.
+// Swizzled from version 2.4.1.
+
+import React, { useEffect } from "react";
+import Footer from "@theme-original/DocItem/Footer";
+
+import { FeedbackButton } from "pushfeedback-react";
+import { defineCustomElements } from "pushfeedback/loader";
+import "pushfeedback/dist/pushfeedback/pushfeedback.css";
+import "./index.css";
+
+function FeedbackWidget() {
+  const buttonThumbsUp = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
+    </svg>
+  );
+  const buttonThumbsDown = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
+    </svg>
+  );
+  const projectId = "m6exeps3n1";
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      defineCustomElements(window);
+    }
+  }, []);
+
+  return (
+    <div className="feedback-widget margin-top--md margin-bottom--md">
+      <div className="margin-bottom--sm">
+        <b>Was this helpful?</b>
+      </div>
+      <span class="feedback-widget-positive">
+        <FeedbackButton
+          project={projectId}
+          rating="1"
+          custom-font="True"
+          button-style="default"
+          modal-position="center"
+          hide-email="true"
+        >
+          <button
+            className="button button--outline button--primary button--sm button--icon"
+            title="Yes"
+          >
+            {buttonThumbsUp}
+          </button>
+        </FeedbackButton>
+      </span>
+      <span class="feedback-widget-negative margin-left--sm">
+        <FeedbackButton
+          project={projectId}
+          rating="0"
+          custom-font="True"
+          button-style="default"
+          modal-position="center"
+        >
+          <button
+            className="button button--outline button--primary button--sm button--icon"
+            title="No"
+          >
+            {buttonThumbsDown}
+          </button>
+        </FeedbackButton>
+      </span>
+    </div>
+  );
+}
+
+export default function FooterWrapper(props) {
+  return (
+    <>
+      <FeedbackWidget />
+      <Footer {...props} />
+    </>
+  );
+}