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