fix: incoming webhooks form UI adjustments (#5973)

Small UI improvements in the new incoming webhooks form after aligning with @nicolaesocaciu. ![image](https://github.com/Unleash/unleash/assets/14320932/6f829863-ab94-4d35-a1d7-d8722e8ec159)
Unleash · Jan 19, 2024 · 77fcc9e · 77fcc9e
1 parent 7b30ab0
commit 77fcc9e
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>