Skip to content

Commit a211e1e

Browse files
NatSquaredNatSquared
committed
Update styles in ConfigSummary
1 parent 4d995cb commit a211e1e

1 file changed

Lines changed: 47 additions & 46 deletions

File tree

‎web/src/components/engagement/admin/view/ConfigSummary.tsx‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -50,54 +50,55 @@ export const ConfigSummary = () => {
5050
Engagement URL
5151
</BodyText>
5252
</Grid>
53-
<Grid container spacing={1} alignItems="center">
53+
<Grid container columnSpacing={1} alignItems="center">
5454
<LiveAnnouncer>
5555
<LiveMessage aria-live="assertive" message={tooltipOpen ? 'Copied!' : ''} />
56-
<Tooltip arrow open={tooltipOpen} title="Copied!" placement="top">
57-
<Suspense
58-
fallback={
59-
<Skeleton
60-
sx={{ display: 'inline-block' }}
61-
variant="circular"
62-
height="32px"
63-
width="32px"
64-
/>
65-
}
66-
>
67-
<Await resolve={slug}>
68-
{(slug: string) => (
69-
<IconButton
70-
size="small"
71-
sx={{
72-
backgroundColor: 'primary.light',
73-
color: 'white',
74-
width: '32px',
75-
height: '32px',
76-
'&:hover': {
77-
backgroundColor: 'primary.main',
78-
},
79-
...globalFocusVisible,
80-
display: 'inline-block',
81-
}}
82-
onClick={() => {
83-
navigator.clipboard.writeText(
84-
`${siteUrl}${getPath(ROUTES.PUBLIC_ENGAGEMENT_BY_SLUG, { slug, language: language.id })}`,
85-
);
86-
setTooltipOpen(true);
87-
}}
88-
aria-label="Press enter to copy engagement URL to clipboard"
89-
>
90-
<FontAwesomeIcon
91-
fontSize={16}
92-
icon={faCopy}
93-
style={{ position: 'relative', bottom: '4px' }}
94-
/>
95-
</IconButton>
96-
)}
97-
</Await>
98-
</Suspense>
99-
</Tooltip>
100-
<BodyText sx={{ display: 'inline' }}>
56+
<BodyText component="span" display="inline" alignItems="center">
57+
<Tooltip arrow open={tooltipOpen} title="Copied!" placement="top">
58+
<Suspense
59+
fallback={
60+
<Skeleton
61+
sx={{ display: 'inline-block', verticalAlign: 'middle', mr: 1 }}
62+
variant="circular"
63+
height="32px"
64+
width="32px"
65+
/>
66+
}
67+
>
68+
<Await resolve={slug}>
69+
{(slug: string) => (
70+
<IconButton
71+
size="small"
72+
sx={{
73+
mr: 1,
74+
backgroundColor: 'primary.light',
75+
color: 'white',
76+
width: '32px',
77+
height: '32px',
78+
'&:hover': {
79+
backgroundColor: 'primary.main',
80+
},
81+
...globalFocusVisible,
82+
display: 'inline-block',
83+
}}
84+
onClick={() => {
85+
navigator.clipboard.writeText(
86+
`${siteUrl}${getPath(ROUTES.PUBLIC_ENGAGEMENT_BY_SLUG, { slug, language: language.id })}`,
87+
);
88+
setTooltipOpen(true);
89+
}}
90+
aria-label="Press enter to copy engagement URL to clipboard"
91+
>
92+
<FontAwesomeIcon
93+
fontSize={16}
94+
icon={faCopy}
95+
style={{ position: 'relative', bottom: '4px' }}
96+
/>
97+
</IconButton>
98+
)}
99+
</Await>
100+
</Suspense>
101+
</Tooltip>
101102
<BodyText bold component="span">
102103
{siteUrl}/
103104
</BodyText>

0 commit comments

Comments
 (0)