Front-end finalizado, Implementado tela de sucesso no feedback

cassohir · May 10, 2022 · f1c0c2d · f1c0c2d
1 parent bd50ee6
commit f1c0c2d
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 30 deletions.
diff --git a/web/index.html b/web/index.html
@@ -3,9 +3,9 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+  <link rel="icon" type="image/png" href="./src/assets/icon.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite App</title>
+  <title>FeedGet</title>
 </head>
 
 <body>

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -11,7 +11,7 @@
     "@headlessui/react": "^1.6.0",
     "html2canvas": "^1.4.1",
     "phosphor-react": "^1.4.1",
-    "react": "^18.0.0",
+    "react": "^18.1.0",
     "react-dom": "^18.0.0",
     "react-icons": "^4.3.1"
   },

diff --git a/web/src/assets/icon.png b/web/src/assets/icon.png
diff --git a/web/src/components/Widget.tsx b/web/src/components/Widget.tsx
@@ -11,23 +11,23 @@ export function Widget(){
     <Popover className="absolute bottom-4 right-4 md:botton-8 md:right-10 flex flex-col items-end  ">
 
 
-      <Popover.Panel>
+    <Popover.Panel>
 
-        <WidgetForm />
+      <WidgetForm />
 
-      </Popover.Panel>
+    </Popover.Panel>
 
-      <Popover.Button className="bg-primary-200 rounded-full px-3 h-12 text-primary-100 flex items-center group">
-        <ChatTeardropDots weight="bold" className="w-6 h-6"/>
+    <Popover.Button className="bg-primary-200 rounded-full px-3 h-12 text-primary-100 flex items-center group">
+      <ChatTeardropDots weight="bold" className="w-6 h-6"/>
 
-        <span className="max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-500 ease-linear">
-          <span className="pl-2">
+      <span className="max-w-0 overflow-hidden group-hover:max-w-xs transition-all duration-500 ease-linear">
+        <span className="pl-2">
 
-          Feedback
+        Feedback
 
-          </span>
         </span>
-      </Popover.Button>
-    </Popover>
+      </span>
+    </Popover.Button>
+  </Popover>
   )
 }
diff --git a/web/src/components/WidgetForm/Steps/FeedbackContentStep.tsx b/web/src/components/WidgetForm/Steps/FeedbackContentStep.tsx
@@ -25,8 +25,6 @@ const [comment,setComment] = useState("");
 
 const [screenshot,setScreenShot] = useState<string | null>(null);
 
-const [feedbackSent,setFeedbackSent] = useState(null);
-
 const feedbackTypInfo = feedbackTypes[feedbackType];
 
 function handleSubmitFeedback(event: FormEvent){

diff --git a/web/src/components/WidgetForm/Steps/FeedbackSuccessStep.tsx b/web/src/components/WidgetForm/Steps/FeedbackSuccessStep.tsx
@@ -1,10 +1,42 @@
-export function FeedbackSuccessStep()
-{ 
+import { CloseButton } from "../../CloseButton";
 
+
+
+interface FeedbackSuccessStepProps{
+  onFeedbackRestartRequested: () => void; 
+}
+
+export function FeedbackSuccessStep({
+  onFeedbackRestartRequested
+
+}: FeedbackSuccessStepProps)
+
+{
   return (
+    <>  
+      <header>
+        <CloseButton />
+
+
+      </header>
+
+      <div className="flex flex-col items-center py-10 w-[304px]">
+          <svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M38.5 34C38.5 36.209 36.709 38 34.5 38H6.5C4.291 38 2.5 36.209 2.5 34V6C2.5 3.791 4.291 2 6.5 2H34.5C36.709 2 38.5 3.791 38.5 6V34Z" fill="#77B255"/>
+            <path d="M31.78 8.36202C30.624 7.61102 29.076 7.94002 28.322 9.09802L17.436 25.877L12.407 21.227C11.393 20.289 9.81103 20.352 8.87403 21.365C7.93703 22.379 7.99903 23.961 9.01303 24.898L16.222 31.564C16.702 32.009 17.312 32.229 17.918 32.229C18.591 32.229 19.452 31.947 20.017 31.09C20.349 30.584 32.517 11.82 32.517 11.82C33.268 10.661 32.938 9.11302 31.78 8.36202V8.36202Z" fill="white"/>
+          </svg>
 
-    <div></div>
+          <span className="text-xl mt-2">Agradecemos o feedback!</span>
+          <button
+            type="button"
+            onClick={onFeedbackRestartRequested}
+            className="py-2 px-6 mt-6 bg-zinc-800 rounded-md border-transparent text-sm leading-6 hover:bg-zinc-700  focus:outline-none hover:ring-2 hover:ring-offset-2 hover:ring-offset-zinc-900 hover:ring-primary-200 transition-colors "
+          >
+            Quero enviar outro 
+          </button>
+      </div>
 
+    </>
   );
 
 }
diff --git a/web/src/components/WidgetForm/index.tsx b/web/src/components/WidgetForm/index.tsx
@@ -34,39 +34,45 @@ export const feedbackTypes ={
 export type FeedbackType = keyof typeof feedbackTypes;
 
 
+
 export function WidgetForm()
 {
    const [feedbackType, setFeedbackType] = useState<FeedbackType | null>(null);
 
+   const [feedbackSent,setFeedbackSent] = useState(false);
+
    function handleRestartFeedback(){
+     setFeedbackSent(false);
      setFeedbackType(null);
    }
 
   return (
 
     <div className="bg-zinc-900 p-4 relative rounded-2xl mb-4 flex flex-col items-center shadow-lg w-[calc(100vw-2rem)] md:w-auto"> 
+
+
 
       { feedbackSent ? (
 
-        <FeedbackSuccessStep />
-      ):(
-        <>
+        <FeedbackSuccessStep onFeedbackRestartRequested={handleRestartFeedback} />
+
+      ):
+       <>
 
-            {!feedbackType ?(
+        {!feedbackType ? (
 
-            <FeedbackTypeStep onFeedbackTypeChanged={setFeedbackType}/>
+          <FeedbackTypeStep onFeedbackTypeChanged={setFeedbackType}/>
             ): (
             <FeedbackContentStep 
             feedbackType={feedbackType}
             onFeedbackRestartRequested={handleRestartFeedback}
             onFeedbackSent={() => setFeedbackSent(true)}
 
-            />
-            )}
+          />
+        )}
 
-        </>
-
-      )}
+       </>
+      }
 
       <footer className="text-xs text-neutral-400 mt-1.5">
       Feito com ♥︎ por <i><a  href="https://www.instagram.com/cassio_izidorio" target="_blank"rel="noopener noreferer">@cassio_izidorio</a></i>