From 77fcc9e84089e1c728d24f0184aa39621257358d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Fri, 19 Jan 2024 14:50:54 +0000
Subject: [PATCH] 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)
---
 .../IncomingWebhooksForm/IncomingWebhooksForm.tsx          | 4 ++--
 .../IncomingWebhooksForm/IncomingWebhooksFormURL.tsx       | 7 +++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksForm.tsx b/frontend/src/component/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksForm.tsx
index b0a6c5bd51..7ab5618dd9 100644
--- a/frontend/src/component/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksForm.tsx
+++ b/frontend/src/component/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/frontend/src/component/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksFormURL.tsx b/frontend/src/component/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksFormURL.tsx
index bd378715d3..4deaed9bbe 100644
--- a/frontend/src/component/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksFormURL.tsx
+++ b/frontend/src/component/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>