Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2026-02-04 20:10:52 +01:00
Code Issues Projects Releases Wiki Activity

chore: small UX adjustments in Enterprise Edge UI (#11104)

Browse Source 
https://linear.app/unleash/issue/2-4074/slight-ux-adjustments

Implements a few UX adjustments in Enterprise Edge UI.

### Semi-transparent groups
<img width="1347" height="809" alt="image"
src="https://github.com/user-attachments/assets/2e366d2d-40ce-40ce-9ee4-ad80b2922072"
/>

### Consistent spacing around page sections
<img width="1354" height="936" alt="image"
src="https://github.com/user-attachments/assets/111fcbcc-7823-4926-8f31-6931391f43df"
/>
This commit is contained in:
Nuno Góis 2025-12-09 14:12:49 +00:00 committed by GitHub
parent 99e733f95c
commit c0fc2032ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/component/admin/enterprise-edge/EnterpriseEdge.tsx
View File

@ -20,17 +20,18 @@ const StyledSeparator = styled('hr')(({ theme }) => ({
height: '1px',
background: theme.palette.divider,
width: '100%',
margin: theme.spacing(5, 0),
margin: theme.spacing(2, 0),
}));
export const EnterpriseEdge = () => {
usePageTitle('Enterprise Edge');
const { connectedEdges } = useConnectedEdges({ refreshInterval: 30_000 });
const hasConnectedEdges = connectedEdges.length > 0;
return (
<StyledPageContent header='Enterprise Edge'>
{connectedEdges.length > 0 && (
{hasConnectedEdges && (
<>
<StyledPageContentSection>
<EnterpriseEdgeInstances
@ -40,7 +41,7 @@ export const EnterpriseEdge = () => {
<StyledSeparator />
</>
)}
<StyledPageContentSection>
<StyledPageContentSection sx={{ pb: hasConnectedEdges ? 6 : 4 }}>
<EnterpriseEdgeExplanation />
</StyledPageContentSection>
</StyledPageContent>

8
frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstances.tsx
View File

@ -1,5 +1,5 @@
import { ArcherContainer, ArcherElement } from 'react-archer';
import { Typography, styled, useTheme } from '@mui/material';
import { Typography, alpha, styled, useTheme } from '@mui/material';
import { unknownify } from 'utils/unknownify';
import { useMemo } from 'react';
import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
@ -41,10 +41,10 @@ const StyledNode = styled('div')(({ theme }) => ({
},
}));
const StyledGroup = styled(StyledNode)({
backgroundColor: 'transparent',
const StyledGroup = styled(StyledNode)(({ theme }) => ({
backgroundColor: alpha(theme.palette.background.paper, 0.75),
position: 'relative',
});
}));
const StyledHostingBadge = styled(Badge)({
position: 'absolute',