wip: feedback popup state

src/components/Feedback/SubmitFeedbackPopup.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from 'preact/hooks';
-import { useToast } from "../../hooks/use-toast";
+import { useToast } from '../../hooks/use-toast';
-import { useTeamId } from "../../hooks/use-team-id";
+import { useTeamId } from '../../hooks/use-team-id';
-import { useOutsideClick } from "../../hooks/use-outside-click";
+import { useOutsideClick } from '../../hooks/use-outside-click';
-import { useKeydown } from "../../hooks/use-keydown";
+import { useKeydown } from '../../hooks/use-keydown';
-import { httpPost } from "../../lib/http";
+import { httpPost } from '../../lib/http';
-import { CheckIcon } from "../ReactIcons/CheckIcon";
+import { CheckIcon } from '../ReactIcons/CheckIcon';
 
 type SubmitFeedbackPopupProps = {
   onClose: () => void;
@@ -41,7 +41,8 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
     setError('');
 
     const { response, error } = await httpPost<{ status: 'ok' }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-submit-team-feedback/${teamId}`, {
+      `${import.meta.env.PUBLIC_API_URL}/v1-submit-team-feedback/${teamId}`,
+      {
         feedback: feedbackText,
       }
     );
@@ -73,14 +74,16 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
         >
           {!isSuccess && (
             <>
-              <h2 class="text-2xl font-semibold text-black">Enter your feedback</h2>
+              <h2 class="text-2xl font-semibold text-black">
+                Enter your feedback
+              </h2>
               <form onSubmit={handleSubmit}>
                 <div className="my-4">
                   <textarea
                     ref={inputEl}
                     name="submit-feedback"
                     id="submit-feedback"
-                    className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400 min-h-[150px]"
+                    className="mt-2 block min-h-[150px] w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
                     placeholder="Enter your feedback"
                     required
                     autoFocus
@@ -118,16 +121,18 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
           )}
 
           {isSuccess && (
-            <div className="flex flex-col items-center w-full">
+            <div className="flex w-full flex-col items-center">
               <CheckIcon additionalClasses="w-16 h-16 text-green-500" />
-              <h1
+              <h1 className="mt-4 text-xl font-semibold text-black sm:text-2xl">
-                className="text-xl sm:text-2xl font-semibold text-black mt-4"
+                Feedback Submitted
-              >Feedback Submitted</h1>
+              </h1>
-              <p className="text-sm sm:text-base text-gray-500 text-center">Thank you for submitting your feedback.</p>
+              <p className="text-center text-sm text-gray-500 sm:text-base">
+                Thank you for submitting your feedback.
+              </p>
               <button
                 type="button"
                 onClick={handleClosePopup}
-                className="flex-grow text-center mt-8 w-full cursor-pointer rounded-lg bg-black py-2 text-white disabled:opacity-40"
+                className="mt-8 w-full flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
               >
                 Close
               </button>
@@ -136,5 +141,5 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
         </div>
       </div>
     </div>
-  )
+  );
 }

src/components/TeamSidebar.tsx

@@ -9,8 +9,7 @@ import MapIcon from '../icons/map.svg';
 import GroupIcon from '../icons/group.svg';
 import { useState } from 'preact/hooks';
 import { useStore } from '@nanostores/preact';
-import { $canManageCurrentTeam, $currentTeam } from '../stores/team';
+import { $currentTeam } from '../stores/team';
-import { WarningIcon } from './ReactIcons/WarningIcon';
 import { SubmitFeedbackPopup } from './Feedback/SubmitFeedbackPopup';
 
 export const TeamSidebar: FunctionalComponent<{
@@ -18,12 +17,10 @@ export const TeamSidebar: FunctionalComponent<{
 }> = ({ activePageId, children }) => {
   const [menuShown, setMenuShown] = useState(false);
   const currentTeam = useStore($currentTeam);
-  const [showFeedbackPopup, setShowFeedbackPopup] = useState(true);
+  const [showFeedbackPopup, setShowFeedbackPopup] = useState(false);
 
   const { teamId } = useTeamId();
 
-  const feedbackFormLink = 'https://forms.gle/g9h6yEqsG4y1hQUv5';
-
   const sidebarLinks = [
     {
       title: 'Progress',
@@ -76,7 +73,8 @@ export const TeamSidebar: FunctionalComponent<{
             <li>
               <a
                 href="/team"
-                class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${activePageId === 'team' ? 'bg-slate-100' : ''
+                class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
+                  activePageId === 'team' ? 'bg-slate-100' : ''
                 }`}
               >
                 <img alt={'teams'} src={GroupIcon} class={`mr-2 h-4 w-4`} />
@@ -90,7 +88,8 @@ export const TeamSidebar: FunctionalComponent<{
                 <li>
                   <a
                     href={sidebarLink.href}
-                    class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${isActive ? 'bg-slate-100' : ''
+                    class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
+                      isActive ? 'bg-slate-100' : ''
                     }`}
                   >
                     <img
@@ -120,9 +119,13 @@ export const TeamSidebar: FunctionalComponent<{
           </ul>
         )}
       </div>
-      {showFeedbackPopup && <SubmitFeedbackPopup onClose={() => {
+      {showFeedbackPopup && (
+        <SubmitFeedbackPopup
+          onClose={() => {
             setShowFeedbackPopup(false);
-      }} />}
+          }}
+        />
+      )}
 
       <div class="container flex min-h-screen items-stretch">
         <aside class="hidden w-44 shrink-0 border-r border-slate-200 py-10 md:block">
@@ -136,7 +139,8 @@ export const TeamSidebar: FunctionalComponent<{
                   <li>
                     <a
                       href={sidebarLink.href}
-                      class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${isActive
+                      class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${
+                        isActive
                           ? 'border-r-black bg-gray-100 text-black'
                           : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
                       }`}
@@ -163,7 +167,8 @@ export const TeamSidebar: FunctionalComponent<{
               })}
             </ul>
 
-            <button className="mr-3 mt-4 flex items-center justify-center rounded-md border p-2 text-gray-500 text-sm hover:text-black transition-colors hover:border-gray-300 hover:bg-gray-50"
+            <button
+              className="mr-3 mt-4 flex items-center justify-center rounded-md border p-2 text-sm text-gray-500 transition-colors hover:border-gray-300 hover:bg-gray-50 hover:text-black"
               onClick={() => setShowFeedbackPopup(true)}
             >
               <img src={ChatIcon} className="mr-2 h-4 w-4" />