placement changes

Author: mmcallister

src/components/ThumbsFeedback.module.css

@@ -1,19 +1,38 @@
-.wrapper {
-  box-sizing: border-box;
-  min-width: 0;
-  transition: color var(--t-interaction);
+.feedbackForm {
+  z-index: 10;
+  position: relative;
+  padding: 1rem 0;
+}
+
+.svgContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.feedbackTitle {
+  font-size: 1.25rem; /* Slightly larger font size */
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  color: var(--color-darkest);
+}
 
-  &.docs {
-    color: var(--color-note);
+.buttonContainer {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
 
-    &:visited {
-      color: var(--color-dark-purple);
-    }
+.feedbackButton {
+  font-size: 1.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
 
-    &:hover,
-    &:active,
-    &:focus {
-      color: var(--color-light-purple);
-    }
-  }
+.feedbackMessage {
+  margin-top: 1rem;
+  color: green;
 }
+

src/components/ThumbsFeedback.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styles from "./ThumbsFeedback.module.css";
+import styles from './ThumbsFeedback.module.css';
 
 // Define gtag on window object for TypeScript
 declare global {
@@ -10,7 +10,7 @@ declare global {
 
 const ThumbsFeedback = () => {
   const [submitted, setSubmitted] = useState(false);
-  
+
   const handleFeedback = (type: 'up' | 'down') => {
     if (typeof window !== 'undefined' && typeof window.gtag === 'function') {
       window.gtag('event', 'feedback', {
@@ -19,32 +19,39 @@ const ThumbsFeedback = () => {
         value: 1,
       });
     }
-    
+
     setSubmitted(true);
   };
-  
+
   if (submitted) {
     return <div className={styles.feedbackMessage}>Thanks for the feedback!</div>;
   }
-  
+
   return (
-    <div className={styles.feedbackContainer}>
-      <button 
-        onClick={() => handleFeedback('up')} 
-        aria-label="Thumbs up" 
-        className={styles.feedbackButton}
-      >
-        👍
-      </button>
-      <button 
-        onClick={() => handleFeedback('down')} 
-        aria-label="Thumbs down" 
-        className={styles.feedbackButton}
-      >
-        👎
-      </button>
+    <div className={styles.feedbackForm}>
+      <div className={styles.svgContainer}>
+        <p className={styles.feedbackTitle}>Was this page helpful?</p>
+        <div className={styles.buttonContainer}>
+          <button
+            onClick={() => handleFeedback('up')}
+            aria-label="Thumbs up"
+            className={styles.feedbackButton}
+          >
+            👍
+          </button>
+          <span className={styles.buttonSeparator}></span>
+          <button
+            onClick={() => handleFeedback('down')}
+            aria-label="Thumbs down"
+            className={styles.feedbackButton}
+          >
+            👎
+          </button>
+        </div>
+      </div>
     </div>
   );
 };
 
 export default ThumbsFeedback;
+

src/theme/DocItem/Layout/index.tsx

@@ -13,6 +13,7 @@ import DocBreadcrumbs from "@theme/DocBreadcrumbs";
 import Unlisted from "@theme/ContentVisibility/Unlisted";
 import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
 import type { Props } from "@theme/DocItem/Layout";
+import ThumbsFeedback from '@site/src/components/ThumbsFeedback';
 
 import styles from "./styles.module.css";
 
@@ -65,6 +66,7 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
         </div>
       </div>
       {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+      <ThumbsFeedback />
     </div>
   );
 }