feat(feedback): New feedback button + form design

New design based on Jesse mocks

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>
+ );
 }

src/components/feedback/feedbackForm.tsx

@@ -32,57 +32,56 @@ 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();
  }
  }}
  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;
- }
 `;

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;
 `;

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;