add feedback button and style it

docusaurus.config.js

@@ -59,6 +59,13 @@ const config = {
       }),
     ],
   ],
+  plugins: [
+    [
+        'docusaurus-pushfeedback',{
+            project: 'nzs6xodw4b'
+        }
+    ]
+  ],
 
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */

package.json

@@ -19,7 +19,9 @@
     "@docusaurus/theme-search-algolia": "^2.1.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^2.1.1",
+    "docusaurus-pushfeedback": "^1.0.1",
     "prism-react-renderer": "^1.3.5",
+    "pushfeedback-react": "^0.1.46",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rehype-katex": "^7.0.1",

src/components/HomepageFeatures/styles.module.css

@@ -9,3 +9,25 @@
   height: 200px;
   width: 200px;
 }
+
+:root {
+  --feedback-primary-color: #3affa7;
+  --feedback-secondary-color: orange;
+  --feedback-text-color: #ffffff;
+  --feedback-white-color: #3affa7;
+  --feedback-highlight-color: #ffb422;
+  --feedback-light-color: #313131;
+  --feedback-dark-color: #191919;
+      /* Feedback button*/
+      --feedback-button-border-radius: 20px;
+      --feedback-button-dark-bg-color: var(--feedback-dark-color);
+      --feedback-button-dark-text-color: var(--feedback-white-color);
+      --feedback-button-light-bg-color: var(--feedback-white-color);
+      --feedback-button-light-text-color: var(--feedback-dark-color);
+      --feedback-button-text-font-size: var(--feedback-text-font-size);
+      --feedback-button-text-font-weight: 600;
+      --feedback-button-z-index: 300;
+
+      --feedback-modal-button-submit-text-color: var(--feedback-dark-color);
+      --feedback-modal-button-submit-text-color-hover: var(--feedback-dark-color);
+}

src/theme/DocItem/Footer/index.js

@@ -0,0 +1,50 @@
+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';
+
+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>;
+    // Replace with your PROJECT_ID
+    const projectId = 'nzs6xodw4b';
+
+    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">
+                    <button className="button button--outline button--primary button--sm" 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" title="No">
+                        {buttonThumbsDown}
+                    </button>
+                </FeedbackButton>
+            </span>
+        </div>
+    );
+}
+
+export default function FooterWrapper(props) {
+    return (
+        <>
+        <FeedbackWidget/>
+        <Footer {...props} />
+        </>
+    );
+}