From c0fc2032ae30fb4c9919e79cb0327f5c7b478f68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 9 Dec 2025 14:12:49 +0000
Subject: [PATCH] chore: small UX adjustments in Enterprise Edge UI (#11104)

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"
/>
---
 .../component/admin/enterprise-edge/EnterpriseEdge.tsx    | 7 ++++---
 .../EnterpriseEdgeInstances/EnterpriseEdgeInstances.tsx   | 8 ++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/admin/enterprise-edge/EnterpriseEdge.tsx b/frontend/src/component/admin/enterprise-edge/EnterpriseEdge.tsx
index 3425b3e78d..f9cfef5e34 100644
--- a/frontend/src/component/admin/enterprise-edge/EnterpriseEdge.tsx
+++ b/frontend/src/component/admin/enterprise-edge/EnterpriseEdge.tsx
@@ -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>
diff --git a/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstances.tsx b/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstances.tsx
index 449cc0a5f6..10ed86611d 100644
--- a/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstances.tsx
+++ b/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstances.tsx
@@ -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',