add feedback banner

complexdatacollective · Dec 7, 2023 · 81cf999 · 81cf999
1 parent 5d6d12a
commit 81cf999
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 65 deletions.
diff --git a/app/(onboard)/layout.tsx b/app/(onboard)/layout.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link';
 export default function Layout({ children }: PropsWithChildren) {
   return (
     <>
-      <div className="relative z-10 flex h-[100dvh] w-[100dvw] flex-col">
+      <div className="relative z-10 flex h-[90dvh] w-[100dvw] flex-col">
         <div className="p-6">
           <Link href="/">
             <Image

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,5 @@
 import { revalidatePath, revalidateTag } from 'next/cache';
-import FeedbackButton from '~/components/FeedbackButton/FeedbackButton';
+import FeedbackBanner from '~/components/FeedbackBanner/FeedbackBanner';
 import RedirectWrapper from '~/components/RedirectWrapper';
 import { Toaster } from '~/components/ui/toaster';
 import '~/styles/globals.scss';
@@ -28,14 +28,14 @@ async function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>
+        <FeedbackBanner />
         <RedirectWrapper
           configured={!!appSettings?.configured}
           expired={!!appSettings?.expired}
           session={session}
         >
           <Providers initialSession={session}>{children}</Providers>
           <Toaster />
-          <FeedbackButton />
         </RedirectWrapper>
       </body>
     </html>

diff --git a/components/FeedbackBanner/FeedbackBanner.tsx b/components/FeedbackBanner/FeedbackBanner.tsx
@@ -0,0 +1,47 @@
+import FeedbackButton from './FeedbackButton';
+
+export default function FeedbackBanner() {
+  return (
+    <div className="sticky top-0 isolate z-50 flex w-full items-center justify-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2 sm:px-3.5 ">
+      <div
+        className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+        aria-hidden="true"
+      >
+        <div
+          className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
+          style={{
+            clipPath:
+              'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)',
+          }}
+        />
+      </div>
+      <div
+        className="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+        aria-hidden="true"
+      >
+        <div
+          className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
+          style={{
+            clipPath:
+              'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)',
+          }}
+        />
+      </div>
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+        <p className="text-sm leading-6 text-gray-900">
+          <strong className="font-semibold">🤖 Fresco is Alpha software</strong>
+          <svg
+            viewBox="0 0 2 2"
+            className="mx-2 inline h-0.5 w-0.5 fill-current"
+            aria-hidden="true"
+          >
+            <circle cx={1} cy={1} r={1} />
+          </svg>
+          We would appreciate input about how we can improve it, and reports or
+          any issues you find.
+        </p>
+        <FeedbackButton />
+      </div>
+    </div>
+  );
+}
diff --git a/components/FeedbackBanner/FeedbackButton.tsx b/components/FeedbackBanner/FeedbackButton.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { useState } from 'react';
+import FeedbackModal from './FeedbackModal';
+
+const FeedbackButton = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <FeedbackModal open={open} setOpen={setOpen} />
+      <button
+        className="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
+        onClick={() => setOpen(true)}
+      >
+        Provide Feedback <span aria-hidden="true">&rarr;</span>
+      </button>
+    </>
+  );
+};
+
+export default FeedbackButton;
diff --git a/components/FeedbackButton/FeedbackModal.tsx → components/FeedbackBanner/FeedbackModal.tsx b/components/FeedbackButton/FeedbackModal.tsx → components/FeedbackBanner/FeedbackModal.tsx
diff --git a/components/FeedbackButton/ButtonTooltip.tsx b/components/FeedbackButton/ButtonTooltip.tsx
diff --git a/components/FeedbackButton/FeedbackButton.tsx b/components/FeedbackButton/FeedbackButton.tsx