feat: add livve url

packages/gatsby-theme-carbon/src/components/FeedbackDialog/FeedbackDialog.js

@@ -15,6 +15,7 @@ const FeedbackDialog = () => {
       />
       <LaunchButton
         ref={launchButtonRef}
+        visible={visible}
         onClick={() => setVisible(!visible)}
       />
     </>

packages/gatsby-theme-carbon/src/components/FeedbackDialog/Form.js

@@ -34,22 +34,20 @@ const Form = ({ visible, setVisible, launchButtonRef }) => {
 
   const onSubmit = () => {
     const form = new FormData(formRef.current);
-    // const data = {
-    //   experience: form.get('feedback-form-experience'),
-    //   comment: form.get('feedback-form-comment'),
-    //   path: window.location.href,
-    // };
+    const data = {
+      experience: form.get('feedback-form-experience'),
+      comment: form.get('feedback-form-comment'),
+      path: window.location.href,
+    };
 
-    // fetch('http://localhost:34567/.netlify/functions/survey', {
-    //   method: 'POST',
-    //   body: JSON.stringify(data),
-    // });
+    fetch('https://carbon-website.netlify.com/.netlify/functions/survey', {
+      method: 'POST',
+      mode: 'no-cors',
+      credentials: 'include',
+      body: JSON.stringify(data),
+    });
 
-    alert(`
-    experience: ${form.get('feedback-form-experience')}
-    comment: ${form.get('feedback-form-comment')}
-    path: ${window.location.href}
-    `);
+    setVisible(false);
   };
 
   return (

packages/gatsby-theme-carbon/src/components/FeedbackDialog/LaunchButton.js

@@ -1,18 +1,27 @@
-import React from 'react';
-import { ChatBot20 } from '@carbon/icons-react';
+import React, { useState } from 'react';
+import { FaceWink20, FaceWinkFilled20 } from '@carbon/icons-react';
 import styles from './LaunchButton.module.scss';
 
-const LaunchButton = React.forwardRef(function LaunchButton({ onClick }, ref) {
+const LaunchButton = React.forwardRef(function LaunchButton(
+  { onClick, visible },
+  ref
+) {
+  const [hovering, setHovering] = useState(false);
+
+  // TODO: hover && visible for both background change and inversion effects?
+  // action on submit?
   return (
     <button
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
       ref={ref}
       type="button"
       aria-haspopup
       className={styles.button}
       onClick={onClick}
       aria-label="This launches a modal form to give website feedback."
     >
-      <ChatBot20 />
+      {hovering ? <FaceWinkFilled20 /> : <FaceWink20 />}
     </button>
   );
 });

packages/gatsby-theme-carbon/src/components/FeedbackDialog/LaunchButton.module.scss

@@ -3,7 +3,7 @@
   height: $spacing-09;
   border-radius: 50%;
   border-color: transparent;
-  background: var(--cds-ui-background);
+  background: var(--cds-ui-03);
   transition: all $transition--base;
 
   cursor: pointer;
@@ -12,7 +12,7 @@
 }
 
 .button:hover {
-  background: #4c4c4c; // g90 hover ui
+  background: var(--cds-active-01); // g90 hover ui
   border-color: transparent;
 }