Apply feedback, fix location to get full path

onflow · Dec 19, 2024 · e160366 · e160366
1 parent 8c319ee
commit e160366
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 30 deletions.
diff --git a/src/components/feedbackFaces.tsx b/src/components/feedbackFaces.tsx
@@ -14,31 +14,27 @@ export default function FeedbackFaces() {
     const handleFeedbackClick = (feedbackType: string) => {
         setClickedFace(feedbackType);
 
-        const pagePath = window.location.pathname;
-        const label = `${feedbackType} - ${pagePath}`;
+        const label = `${feedbackType}`;
 
         event({
             action: "feedback_click",
-            category: "Feedback",
+            category: "feedback",
             label: label,
-            location: pagePath,
+            location: true,
         });
 
         // Reset the clicked state after a brief delay
         setTimeout(() => setClickedFace(null), 300);
     };
 
     return (
-        <div style={styles.container}>
+        <div className="flex justify-left items-center gap-1">
             {faces.map((face) => (
                 <button
                     key={face.label}
                     onClick={() => handleFeedbackClick(face.label)}
-                    style={{
-                        ...styles.button,
-                        transform: clickedFace === face.label ? "scale(1.2)" : "scale(1)",
-                        opacity: clickedFace === face.label ? 0.7 : 1,
-                    }}
+                    className={`text-4xl cursor-pointer p-2 bg-transparent border-none transition-transform duration-200 focus:outline-none ${clickedFace === face.label ? "scale-110 opacity-70" : "scale-100 opacity-100"
+                        }`}
                     aria-label={face.label}
                 >
                     {face.emoji}
@@ -47,20 +43,3 @@ export default function FeedbackFaces() {
         </div>
     );
 }
-
-// Inline CSS styles
-const styles = {
-    container: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-    } as React.CSSProperties,
-    button: {
-        fontSize: "30px",
-        background: "none",
-        border: "none",
-        cursor: "pointer",
-        transition: "transform 0.2s, opacity 0.2s",
-        padding: "10px",
-    } as React.CSSProperties,
-};
diff --git a/src/utils/gtags.client.ts b/src/utils/gtags.client.ts
@@ -43,13 +43,13 @@ export const event = ({
   category?: string;
   label?: string;
   value?: number | string;
-  location?: string;
+  location?: boolean;
 }) => {
   if (process.env.NODE_ENV !== "production") return
 
   if (!window.gtag) {
     console.warn(
-      "window.gtag is not defined. This could mean your google anylatics script has not loaded on the page yet."
+      "window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet."
     )
     return
   }
@@ -61,7 +61,7 @@ export const event = ({
   };
 
   if (location) {
-    eventPayload.page_location = location;
+    eventPayload.page_location = window.location.href;
   }
 
   window.gtag("event", action, eventPayload);