diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts index 8459108d1fc2..b67cae1de13c 100644 --- a/packages/feedback/src/modal/components/Dialog.css.ts +++ b/packages/feedback/src/modal/components/Dialog.css.ts @@ -115,6 +115,12 @@ const FORM = ` flex: 1 0; } +.form fieldset { + border: none; + margin: 0; + padding: 0; +} + .form__right { flex: 0 0 auto; display: flex; diff --git a/packages/feedback/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx index a79e4d94194c..3d508f895429 100644 --- a/packages/feedback/src/modal/components/Form.tsx +++ b/packages/feedback/src/modal/components/Form.tsx @@ -61,6 +61,7 @@ export function Form({ submitButtonLabel, isRequiredLabel, } = options; + const [isSubmitting, setIsSubmitting] = useState(false); // TODO: set a ref on the form, and whenever an input changes call processForm() and setError() const [error, setError] = useState(null); @@ -97,6 +98,7 @@ export function Form({ const handleSubmit = useCallback( async (e: JSX.TargetedSubmitEvent) => { + setIsSubmitting(true); try { e.preventDefault(); if (!(e.target instanceof HTMLFormElement)) { @@ -133,8 +135,8 @@ export function Form({ setError(error as string); onSubmitError(error as Error); } - } catch { - // pass + } finally { + setIsSubmitting(false); } }, [screenshotInput && showScreenshotInput, onSubmitSuccess, onSubmitError], @@ -146,7 +148,7 @@ export function Form({ ) : null} -
+
{error ?
{error}
: null} @@ -201,6 +203,7 @@ export function Form({
- -
-
+ ); }