From 48bc609c4fe2ca236cfc5bba6ca79f3d14e0ca64 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Wed, 20 Sep 2023 16:58:06 -0400
Subject: [PATCH] feat(feedback): New feedback button + form design

New design based on Jesse mocks
---
 src/components/feedback/feedbackButton.tsx | 39 ++++++----
 src/components/feedback/feedbackForm.tsx   | 91 +++++++++-------------
 src/components/feedback/feedbackModal.tsx  | 19 +++--
 src/components/feedback/feedbackWidget.tsx |  2 +-
 src/logos/feedback.svg                     | 11 +++
 5 files changed, 87 insertions(+), 75 deletions(-)
 create mode 100644 src/logos/feedback.svg

diff --git a/src/components/feedback/feedbackButton.tsx b/src/components/feedback/feedbackButton.tsx
index 8bc266d6fa05c..173ae9a07101d 100644
--- a/src/components/feedback/feedbackButton.tsx
+++ b/src/components/feedback/feedbackButton.tsx
@@ -1,31 +1,44 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
+import feedbackIcon from '../../logos/feedback.svg';
+
 const Button = styled.button`
   position: fixed;
-  right: 0px;
-  bottom: 50%;
-  transform: translate(25%, 50%) rotate(-90deg);
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  color: #231c3d;
+  right: 1rem;
+  bottom: 1rem;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  border: 1.5px solid rgba(41, 35, 47, 0.13);
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0px 4px 24px 0px rgba(43, 34, 51, 0.12);
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
-  padding: 6px 16px;
-  text-align: center;
+  padding: 12px 16px;
   text-decoration: none;
   z-index: 9000;
+
   &:hover {
     background-color: #eee;
   }
-  &:focus-visible {
-    outline: 1px solid #79628c;
-    background-color: #eee;
+`;
+
+const ButtonText = styled.span`
+  @media (max-width: 576px) {
+    display: none;
   }
 `;
 
 export function FeedbackButton(props) {
-  return <Button {...props}>Feedback</Button>;
+  return (
+    <Button {...props}>
+      <img src={feedbackIcon} alt="Report a bug icon" />
+      <ButtonText>Report a Bug</ButtonText>
+    </Button>
+  );
 }
diff --git a/src/components/feedback/feedbackForm.tsx b/src/components/feedback/feedbackForm.tsx
index 5e1e4bb2bedfc..7511e76428f25 100644
--- a/src/components/feedback/feedbackForm.tsx
+++ b/src/components/feedback/feedbackForm.tsx
@@ -32,31 +32,30 @@ export function FeedbackForm({onClose, onSubmit}: FeedbackFormProps) {
 
   return (
     <Form ref={formRef} onSubmit={handleSubmit}>
-      <FlexColumns>
-        <Label htmlFor="sentry-feedback-name">
-          Your Name
-          <Input
-            type="text"
-            id="sentry-feedback-name"
-            name="name"
-            placeholder="Anonymous"
-            defaultValue={user?.username}
-          />
-        </Label>
-        <Label htmlFor="sentry-feedback-email">
-          Your Email
-          <Input
-            type="text"
-            id="sentry-feedback-email"
-            name="email"
-            placeholder="you@test.com"
-            defaultValue={user?.email}
-          />
-        </Label>
-      </FlexColumns>
+      <Label htmlFor="sentry-feedback-name">
+        Name
+        <Input
+          type="text"
+          id="sentry-feedback-name"
+          name="name"
+          placeholder="Anonymous"
+          defaultValue={user?.username}
+        />
+      </Label>
+      <Label htmlFor="sentry-feedback-email">
+        Email
+        <Input
+          type="text"
+          id="sentry-feedback-email"
+          name="email"
+          placeholder="you@test.com"
+          defaultValue={user?.email}
+        />
+      </Label>
       <Label htmlFor="sentry-feedback-comment">
-        Comment
+        Description
         <TextArea
+          rows={5}
           onKeyDown={event => {
             if (event.key === 'Enter' && event.ctrlKey) {
               formRef.current.requestSubmit();
@@ -64,25 +63,25 @@ export function FeedbackForm({onClose, onSubmit}: FeedbackFormProps) {
           }}
           id="sentry-feedback-comment"
           name="comment"
-          placeholder="Explain what bothers you"
+          placeholder="What's the bug? What did you expect?"
         />
       </Label>
-      <ModalFooter>
+      <ButtonGroup>
+        <SubmitButton type="submit">Send Bug Report</SubmitButton>
         <CancelButton type="button" onClick={onClose}>
           Cancel
         </CancelButton>
-        <SubmitButton type="submit">Submit</SubmitButton>
-      </ModalFooter>
+      </ButtonGroup>
     </Form>
   );
 }
 
 const Form = styled.form`
-  display: flex;
+  display: grid;
   overflow: auto;
   flex-direction: column;
   gap: 16px;
-  padding: 24px;
+  padding: 0;
 `;
 
 const Label = styled.label`
@@ -93,12 +92,12 @@ const Label = styled.label`
 `;
 
 const inputStyles = css`
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  box-sizing: border-box;
+  border: 1.5px solid rgba(41, 35, 47, 0.13);
+  border-radius: 6px;
   font-size: 14px;
-  padding: 6px 8px;
+  padding: 6px 12px;
   &:focus {
-    outline: 1px solid rgba(108, 95, 199, 1);
     border-color: rgba(108, 95, 199, 1);
   }
 `;
@@ -109,20 +108,18 @@ const Input = styled.input`
 
 const TextArea = styled.textarea`
   ${inputStyles}
-  min-height: 64px;
   resize: vertical;
 `;
 
-const ModalFooter = styled.div`
-  display: flex;
-  justify-content: flex-end;
+const ButtonGroup = styled.div`
+  display: grid;
   gap: 8px;
   margin-top: 8px;
 `;
 
 const buttonStyles = css`
   border: 1px solid #ccc;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
@@ -132,14 +129,11 @@ const buttonStyles = css`
 const SubmitButton = styled.button`
   ${buttonStyles}
   background-color: rgba(108, 95, 199, 1);
+  border-color: rgba(108, 95, 199, 1);
   color: #fff;
   &:hover {
     background-color: rgba(88, 74, 192, 1);
   }
-  &:focus-visible {
-    outline: 1px solid rgba(108, 95, 199, 1);
-    background-color: rgba(88, 74, 192, 1);
-  }
 `;
 
 const CancelButton = styled.button`
@@ -150,17 +144,4 @@ const CancelButton = styled.button`
   &:hover {
     background-color: #eee;
   }
-  &:focus-visible {
-    outline: 1px solid rgba(108, 95, 199, 1);
-    background-color: #eee;
-  }
-`;
-
-const FlexColumns = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 16px;
-  & > * {
-    flex: 1;
-  }
 `;
diff --git a/src/components/feedback/feedbackModal.tsx b/src/components/feedback/feedbackModal.tsx
index be7d5e7038760..e7c8d6f9f7f8e 100644
--- a/src/components/feedback/feedbackModal.tsx
+++ b/src/components/feedback/feedbackModal.tsx
@@ -137,11 +137,18 @@ const Dialog = styled.dialog`
 `;
 
 const Content = styled.div`
-  border-radius: 4px;
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+
+  border: 1px solid rgba(41, 35, 47, 0.13);
+  padding: 24px;
+  border-radius: 20px;
   background-color: #fff;
-  width: 500px;
+
+  width: 320px;
   max-width: 100%;
-  max-height: calc(100% - 64px);
+  max-height: calc(100% - 2rem);
   display: flex;
   flex-direction: column;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.2);
@@ -155,7 +162,7 @@ const Content = styled.div`
 const Header = styled.h2`
   font-size: 20px;
   font-weight: 600;
-  border-bottom: 1px solid #ccc;
-  padding: 20px 24px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 16px;
 `;
diff --git a/src/components/feedback/feedbackWidget.tsx b/src/components/feedback/feedbackWidget.tsx
index 74701746213ef..deb22d466a8ae 100644
--- a/src/components/feedback/feedbackWidget.tsx
+++ b/src/components/feedback/feedbackWidget.tsx
@@ -10,7 +10,7 @@ interface FeedbackWidgetProps {
 /**
  * The "Widget" connects the default Feedback button with the Feedback Modal
  */
-export default function FeedbackWidget({title = 'Got Feedback?'}: FeedbackWidgetProps) {
+export default function FeedbackWidget({title = 'Report a Bug'}: FeedbackWidgetProps) {
   // Don't render anything if Sentry is not already loaded
   if (!window.Sentry?.getCurrentHub?.()) {
     return null;
diff --git a/src/logos/feedback.svg b/src/logos/feedback.svg
new file mode 100644
index 0000000000000..b0b9c2851880b
--- /dev/null
+++ b/src/logos/feedback.svg
@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_57_80)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6622 15H12.3997C12.2129 14.9959 12.031 14.9396 11.8747 14.8375L8.04965 12.2H7.49956V19.1C7.4875 19.3348 7.3888 19.5568 7.22256 19.723C7.05632 19.8892 6.83435 19.9879 6.59956 20H2.04956C1.80193 19.9968 1.56535 19.8969 1.39023 19.7218C1.21511 19.5467 1.1153 19.3101 1.11206 19.0625V12.2H0.949652C0.824431 12.2017 0.700142 12.1783 0.584123 12.1311C0.468104 12.084 0.362708 12.014 0.274155 11.9255C0.185602 11.8369 0.115689 11.7315 0.0685419 11.6155C0.0213952 11.4995 -0.00202913 11.3752 -0.00034808 11.25V3.75C-0.00900498 3.62067 0.0092504 3.49095 0.0532651 3.36904C0.0972798 3.24712 0.166097 3.13566 0.255372 3.04168C0.344646 2.94771 0.452437 2.87327 0.571937 2.82307C0.691437 2.77286 0.82005 2.74798 0.949652 2.75H8.04965L11.8747 0.1625C12.031 0.0603649 12.2129 0.00407221 12.3997 0H15.6622C15.9098 0.00323746 16.1464 0.103049 16.3215 0.278167C16.4966 0.453286 16.5964 0.689866 16.5997 0.9375V3.25269C17.3969 3.42959 18.1345 3.83026 18.7211 4.41679C19.5322 5.22788 19.9878 6.32796 19.9878 7.47502C19.9878 8.62209 19.5322 9.72217 18.7211 10.5333C18.1345 11.1198 17.3969 11.5205 16.5997 11.6974V14.0125C16.6047 14.1393 16.5842 14.2659 16.5395 14.3847C16.4948 14.5035 16.4268 14.6121 16.3394 14.7042C16.252 14.7962 16.147 14.8698 16.0307 14.9206C15.9144 14.9714 15.7891 14.9984 15.6622 15ZM1.89695 10.325H1.88715V4.625H8.33715C8.52423 4.62301 8.70666 4.56654 8.86215 4.4625L12.6872 1.875H14.7247V13.125H12.6872L8.86215 10.4875C8.70666 10.3835 8.52423 10.327 8.33715 10.325H2.20217C2.15205 10.3167 2.10102 10.3125 2.04956 10.3125C1.9981 10.3125 1.94708 10.3167 1.89695 10.325ZM2.98706 12.2V18.1625H5.66206V12.2H2.98706ZM16.5997 9.93612V5.01393C16.6536 5.02355 16.7072 5.03495 16.7605 5.04814C17.1202 5.13709 17.4556 5.30487 17.7425 5.53934C18.0293 5.77381 18.2605 6.06912 18.4192 6.40389C18.578 6.73866 18.6603 7.10452 18.6603 7.47502C18.6603 7.84552 18.578 8.21139 18.4192 8.54616C18.2605 8.88093 18.0293 9.17624 17.7425 9.41071C17.4556 9.64518 17.1202 9.81296 16.7605 9.90191C16.7072 9.91509 16.6536 9.9265 16.5997 9.93612Z" fill="#2B2233"/>
+</g>
+<defs>
+<clipPath id="clip0_57_80">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+