fix: incoming webhooks form ui adjustments

Unleash · Jan 19, 2024 · feac399 · feac399
1 parent 7b30ab0
commit feac399
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/...nent/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksForm.tsx b/...nent/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksForm.tsx
@@ -30,7 +30,7 @@ const StyledInputDescription = styled('p')(({ theme }) => ({
     color: theme.palette.text.primary,
     marginBottom: theme.spacing(1),
     '&:not(:first-of-type)': {
-        marginTop: theme.spacing(4),
+        marginTop: theme.spacing(3),
     },
 }));
 
@@ -105,7 +105,6 @@ export const IncomingWebhooksForm = ({
 
     return (
         <div>
-            <IncomingWebhooksFormURL name={name} />
             <StyledRaisedSection>
                 <FormSwitch checked={enabled} setChecked={setEnabled}>
                     Incoming webhook status
@@ -136,6 +135,7 @@ export const IncomingWebhooksForm = ({
                 onChange={(e) => setDescription(e.target.value)}
                 autoComplete='off'
             />
+            <IncomingWebhooksFormURL name={name} />
             <ConditionallyRender
                 condition={incomingWebhook === undefined}
                 show={

diff --git a/...t/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksFormURL.tsx b/...t/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksFormURL.tsx
@@ -7,23 +7,22 @@ import useToast from 'hooks/useToast';
 const StyledIncomingWebhookUrlSection = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center',
     padding: theme.spacing(1.5),
     gap: theme.spacing(1.5),
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
     marginBottom: theme.spacing(4),
+    marginTop: theme.spacing(3),
 }));
 
 const StyledIncomingWebhookUrlSectionDescription = styled('p')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
-    color: theme.palette.text.secondary,
 }));
 
 const StyledIncomingWebhookUrl = styled('div')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
     backgroundColor: theme.palette.background.elevation2,
-    padding: theme.spacing(1),
+    padding: theme.spacing(0.5, 1, 0.5, 2),
     width: '100%',
     borderRadius: theme.shape.borderRadiusMedium,
     display: 'flex',
@@ -60,7 +59,7 @@ export const IncomingWebhooksFormURL = ({
             <StyledIncomingWebhookUrl>
                 {url}
                 <Tooltip title='Copy URL' arrow>
-                    <IconButton onClick={onCopyToClipboard} size='small'>
+                    <IconButton onClick={onCopyToClipboard} size='large'>
                         <CopyIcon />
                     </IconButton>
                 </Tooltip>