improvement: move the feedback button to somewhere that's less conspi…

…cuous (#424)
fern-api · Feb 2, 2024 · 56c9fbc · 56c9fbc
1 parent 5f0b5ad
commit 56c9fbc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/packages/ui/app/src/custom-docs-page/CustomDocsPage.tsx b/packages/ui/app/src/custom-docs-page/CustomDocsPage.tsx
@@ -44,13 +44,11 @@ export const CustomDocsPage: React.FC<CustomDocsPage.Props> = ({ resolvedPath })
                     <article className="prose dark:prose-invert mx-auto w-full max-w-[70ch] lg:ml-0 xl:mx-auto">
                         <CustomDocsPageHeader resolvedPath={resolvedPath} />
                         {mdxContent}
-
-                        <Feedback />
                         <BottomNavigationButtons />
                         <div className="h-20" />
                     </article>
                 </div>
-                <aside className="scroll-contain smooth-scroll hide-scrollbar sticky top-16 hidden max-h-[calc(100vh-86px)] w-[19rem] shrink-0 overflow-auto overflow-x-hidden px-8 pb-12 pt-8 xl:block">
+                <aside className="scroll-contain smooth-scroll hide-scrollbar sticky top-16 hidden h-[calc(100vh-64px)] w-[19rem] shrink-0 overflow-auto overflow-x-hidden px-8 pb-12 pt-8 xl:block">
                     <TableOfContents renderedHtml={mdxString} />
                     {editThisPage != null && (
                         <Link
@@ -62,6 +60,7 @@ export const CustomDocsPage: React.FC<CustomDocsPage.Props> = ({ resolvedPath })
                             Edit this page
                         </Link>
                     )}
+                    <Feedback className="sticky top-full" />
                 </aside>
             </div>
         </TableOfContentsContextProvider>

diff --git a/packages/ui/app/src/custom-docs-page/Feedback.tsx b/packages/ui/app/src/custom-docs-page/Feedback.tsx
@@ -1,11 +1,14 @@
+import classNames from "classnames";
 import { FC, useRef, useState } from "react";
 import { capturePosthogEvent } from "../analytics/posthog";
 import { FernButton } from "../components/FernButton";
 import { FernCollapse } from "../components/FernCollapse";
 
-interface FeedbackProps {}
+interface FeedbackProps {
+    className?: string;
+}
 
-export const Feedback: FC<FeedbackProps> = () => {
+export const Feedback: FC<FeedbackProps> = ({ className }) => {
     const [sent, setSent] = useState(false);
     const [feedback, setFeedback] = useState<"yes" | "no" | null>(null);
     const [showFeedbackInput, setShowFeedbackInput] = useState(false);
@@ -34,9 +37,14 @@ export const Feedback: FC<FeedbackProps> = () => {
         setSent(true);
     };
     return (
-        <div className="border-border-default-light dark:border-border-default-dark group my-12 w-fit rounded-lg border">
+        <div
+            className={classNames(
+                "border-border-default-light dark:border-border-default-dark group mt-12 rounded-lg border",
+                className,
+            )}
+        >
             {!sent ? (
-                <div className="flex items-center gap-4 px-4 py-2">
+                <div className="flex flex-col items-center gap-1 p-2">
                     <span className="t-muted text-sm">Did this page help you?</span>
                     <div className="flex items-center">
                         <FernButton
@@ -66,7 +74,7 @@ export const Feedback: FC<FeedbackProps> = () => {
             )}
             {!sent && (
                 <FernCollapse isOpen={showFeedbackInput}>
-                    <div className="px-4 pb-4">
+                    <div className="px-2 pb-2">
                         <textarea
                             ref={textareaRef}
                             autoFocus={true}