feat(TestSubstep): put some space between info and test output

packages/web/src/components/TestSubstep/index.tsx

@@ -108,7 +108,7 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
           {!!error?.graphQLErrors?.length && (
             <Alert
               severity="error"
-              sx={{ mb: 1, fontWeight: 500, width: '100%' }}
+              sx={{ mb: 2, fontWeight: 500, width: '100%' }}
             >
               {serializeErrors(error.graphQLErrors).map((error: any) => (
                 <div>{error.message}</div>
@@ -116,7 +116,9 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
             </Alert>
           )}
 
-          {step.webhookUrl && <WebhookUrlInfo webhookUrl={step.webhookUrl} />}
+          {step.webhookUrl && (
+            <WebhookUrlInfo webhookUrl={step.webhookUrl} sx={{ mb: 2 }} />
+          )}
 
           {hasNoOutput && (
             <Alert severity="warning" sx={{ mb: 1, width: '100%' }}>

packages/web/src/components/WebhookUrlInfo/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import Typography from '@mui/material/Typography';
+import type { AlertProps } from '@mui/material/Alert';
 
 import { generateExternalLink } from '../../helpers/translation-values';
 import { WEBHOOK_DOCS } from '../../config/urls';
@@ -9,13 +10,13 @@ import { Alert } from './style';
 
 type WebhookUrlInfoProps = {
   webhookUrl: string;
-};
+} & AlertProps;
 
 function WebhookUrlInfo(props: WebhookUrlInfoProps): React.ReactElement {
-  const { webhookUrl } = props;
+  const { webhookUrl, ...alertProps } = props;
 
   return (
-    <Alert icon={false} color="info">
+    <Alert icon={false} color="info" {...alertProps}>
       <Typography variant="body2" textAlign="center">
         <FormattedMessage id="webhookUrlInfo.title" />
       </Typography>