microinteractions

software-mansion · Dec 16, 2024 · 6cf3a92 · 6cf3a92
1 parent ff8d94d
commit 6cf3a92
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/packages/vscode-extension/src/webview/components/Feedback.css b/packages/vscode-extension/src/webview/components/Feedback.css
@@ -10,6 +10,15 @@
   align-items: center;
   justify-content: center;
   border-radius: 3px;
+  transition: all 250ms 0ms ease-in-out;
+}
+
+.feedback-button:active {
+  transform: scale(0.94);
+}
+
+.feedback-button-large:active {
+  transform: scale(0.96);
 }
 
 .feedback-button:hover span,
@@ -57,3 +66,11 @@
 .feedback-button-negative-active {
   background-color: var(--red-light-80);
 }
+
+.feedback-prompt {
+  cursor: pointer;
+  font-size: 12px;
+}
+.feedback-prompt:hover {
+  text-decoration: underline;
+}
diff --git a/packages/vscode-extension/src/webview/components/Feedback.tsx b/packages/vscode-extension/src/webview/components/Feedback.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent } from "react";
+import { MouseEvent, useState } from "react";
 import "./Feedback.css";
 import classNames from "classnames";
 import { useUtils } from "../providers/UtilsProvider";
@@ -7,16 +7,26 @@ export type Sentiment = "positive" | "negative";
 
 export default function Feedback() {
   const { sendTelemetry } = useUtils();
+  const [sentiment, setSentiment] = useState<Sentiment | undefined>();
 
-  const handleFeedback = (event: MouseEvent<HTMLButtonElement>, sentiment: Sentiment) => {
+  const handleFeedback = (event: MouseEvent<HTMLButtonElement>, pickedSentiment: Sentiment) => {
     event.preventDefault();
-    sendTelemetry(`feedback:${sentiment}`);
+    sendTelemetry(`feedback:${pickedSentiment}`);
+    setSentiment(pickedSentiment);
   };
 
   return (
     <div className="feedback">
-      <FeedbackButton sentiment="positive" onClick={(e) => handleFeedback(e, "positive")} />
-      <FeedbackButton sentiment="negative" onClick={(e) => handleFeedback(e, "negative")} />
+      {Boolean(sentiment) ? (
+        <p className="feedback-prompt">
+          {sentiment === "positive" ? "What went well?" : "Tell us more"}
+        </p>
+      ) : (
+        <>
+          <FeedbackButton sentiment="positive" onClick={(e) => handleFeedback(e, "positive")} />
+          <FeedbackButton sentiment="negative" onClick={(e) => handleFeedback(e, "negative")} />
+        </>
+      )}
     </div>
   );
 }