complexdatacollective · mrkarimoff · Dec 12, 2023 · Dec 6, 2023 · Dec 7, 2023 · Dec 7, 2023
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,11 +1,11 @@
-/* eslint-disable no-console */
-import '~/styles/globals.scss';
-import Providers from '../providers/Providers';
+import { revalidatePath, revalidateTag } from 'next/cache';
+import FeedbackBanner from '~/components/FeedbackBanner/FeedbackBanner';
 import RedirectWrapper from '~/components/RedirectWrapper';
-import { getServerSession } from '~/utils/auth';
-import { api } from '~/trpc/server';
 import { Toaster } from '~/components/ui/toaster';
-import { revalidatePath, revalidateTag } from 'next/cache';
+import '~/styles/globals.scss';
+import { api } from '~/trpc/server';
+import { getServerSession } from '~/utils/auth';
+import Providers from '../providers/Providers';
 
 export const metadata = {
   title: 'Network Canvas Fresco',
@@ -28,6 +28,7 @@ async function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>
+        <FeedbackBanner />
         <RedirectWrapper
           configured={!!appSettings?.configured}
           expired={!!appSettings?.expired}

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/FeedbackBanner/FeedbackModal.tsx b/components/FeedbackBanner/FeedbackModal.tsx
@@ -0,0 +1,31 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '~/components/ui/dialog';
+
+type FeedbackModalProps = {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+const FeedbackModal = ({ open, setOpen }: FeedbackModalProps) => {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="max-w-[700px]">
+        <DialogHeader>
+          <DialogTitle>Your feedback below</DialogTitle>
+        </DialogHeader>
+        <iframe
+          className="h-[450px] w-full border"
+          title="Feedback form"
+          src="https://forms.clickup.com/3464225/f/39q11-6131/OIJSIULQV2EUZFLUOA"
+        ></iframe>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default FeedbackModal;