Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

fix: incoming webhooks form UI adjustments (#5973)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/component/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksForm.tsx
View File

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

7
frontend/src/component/incomingWebhooks/IncomingWebhooksModal/IncomingWebhooksForm/IncomingWebhooksFormURL.tsx
View File

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