From 692a3b3e465ead1192fb7f9e00248486e07bc325 Mon Sep 17 00:00:00 2001
From: mmelko <mmelko@redhat.com>
Date: Fri, 3 May 2024 13:53:42 +0200
Subject: [PATCH]  refactor(connect-plugin): adjust the look to be consistent
 with the rest of the plugins

---
 packages/hawtio/src/plugins/connect/Connect.tsx       | 11 ++++++++---
 .../hawtio/src/plugins/connect/discover/Discover.tsx  |  4 +++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/hawtio/src/plugins/connect/Connect.tsx b/packages/hawtio/src/plugins/connect/Connect.tsx
index f4d4f5ab..88ac988d 100644
--- a/packages/hawtio/src/plugins/connect/Connect.tsx
+++ b/packages/hawtio/src/plugins/connect/Connect.tsx
@@ -1,10 +1,11 @@
 import {
+  Divider,
   Nav,
   NavItem,
   NavList,
   PageGroup,
-  PageNavigation,
   PageSection,
+  PageSectionVariants,
   Popover,
   Text,
   TextContent,
@@ -53,9 +54,13 @@ export const Connect: React.FunctionComponent = () => {
             Connect <ConnectHint />
           </Title>
         </PageSection>
-        <PageNavigation>{nav}</PageNavigation>
+        <Divider />
+        <PageSection type='tabs' variant={PageSectionVariants.light} hasShadowBottom>
+          {nav}
+        </PageSection>
+        <Divider />
       </PageGroup>
-      <PageSection id='connect-main'>
+      <PageSection id='connect-main' variant={PageSectionVariants.light}>
         <Routes>
           {routes}
           {/* connect/login should be hidden to nav */}
diff --git a/packages/hawtio/src/plugins/connect/discover/Discover.tsx b/packages/hawtio/src/plugins/connect/discover/Discover.tsx
index d91c4f87..c266df3c 100644
--- a/packages/hawtio/src/plugins/connect/discover/Discover.tsx
+++ b/packages/hawtio/src/plugins/connect/discover/Discover.tsx
@@ -194,7 +194,9 @@ export const Discover: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Card style={{ marginBottom: '1rem' }}>{toolbar}</Card>
+      <Card style={{ marginBottom: '1rem' }} isFlat>
+        {toolbar}
+      </Card>
       <Gallery hasGutter minWidths={{ default: '400px' }}>
         {label === 'Agent' &&
           filteredAgents.map((agent, index) => (