1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

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)
This commit is contained in:
Nuno Góis 2024-01-19 14:50:54 +00:00 committed by GitHub
parent 7b30ab09d2
commit 77fcc9e840
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 6 deletions

View File

@ -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={

View File

@ -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>