From 0b7748d74012c5749fd7d1c37cd4a13d99564b2c Mon Sep 17 00:00:00 2001
From: mmelko <mmelko@redhat.com>
Date: Thu, 9 May 2024 14:09:59 +0200
Subject: [PATCH] refactor(preferences-plugin): adjust the look to be
 consistent with the rest of the plugins

(cherry picked from commit c9a09dde4bf64a38c9c557530736bbe4a72bc601)
---
 .../src/preferences/HawtioPreferences.tsx     | 50 +++++++------------
 1 file changed, 19 insertions(+), 31 deletions(-)

diff --git a/packages/hawtio/src/preferences/HawtioPreferences.tsx b/packages/hawtio/src/preferences/HawtioPreferences.tsx
index 1744b77a..bae3ff93 100644
--- a/packages/hawtio/src/preferences/HawtioPreferences.tsx
+++ b/packages/hawtio/src/preferences/HawtioPreferences.tsx
@@ -1,15 +1,5 @@
 import { helpRegistry } from '@hawtiosrc/help/registry'
-import {
-  Card,
-  Nav,
-  NavItem,
-  NavList,
-  PageGroup,
-  PageNavigation,
-  PageSection,
-  PageSectionVariants,
-  Title,
-} from '@patternfly/react-core'
+import { Divider, Nav, NavItem, NavList, PageSection, PageSectionVariants, Title } from '@patternfly/react-core'
 import React from 'react'
 import { NavLink, Navigate, Route, Routes, useLocation } from 'react-router-dom'
 import help from './help.md'
@@ -28,28 +18,26 @@ export const HawtioPreferences: React.FunctionComponent = () => {
       <PageSection variant={PageSectionVariants.light}>
         <Title headingLevel='h1'>Preferences</Title>
       </PageSection>
-      <PageGroup>
-        <PageNavigation>
-          <Nav aria-label='Nav' variant='tertiary'>
-            <NavList>
-              {preferencesRegistry.getPreferences().map(prefs => (
-                <NavItem key={prefs.id} isActive={location.pathname === `/preferences/${prefs.id}`}>
-                  <NavLink to={prefs.id}>{prefs.title}</NavLink>
-                </NavItem>
-              ))}
-            </NavList>
-          </Nav>
-        </PageNavigation>
-      </PageGroup>
-      <PageSection>
-        <Card isFullHeight>
-          <Routes>
+      <Divider />
+      <PageSection type='tabs' hasShadowBottom>
+        <Nav aria-label='Nav' variant='tertiary'>
+          <NavList>
             {preferencesRegistry.getPreferences().map(prefs => (
-              <Route key={prefs.id} path={prefs.id} element={React.createElement(prefs.component)} />
+              <NavItem key={prefs.id} isActive={location.pathname === `/preferences/${prefs.id}`}>
+                <NavLink to={prefs.id}>{prefs.title}</NavLink>
+              </NavItem>
             ))}
-            <Route path='/' element={<Navigate to={'home'} />} />
-          </Routes>
-        </Card>
+          </NavList>
+        </Nav>
+      </PageSection>
+      <Divider />
+      <PageSection variant={PageSectionVariants.light}>
+        <Routes>
+          {preferencesRegistry.getPreferences().map(prefs => (
+            <Route key={prefs.id} path={prefs.id} element={React.createElement(prefs.component)} />
+          ))}
+          <Route path='/' element={<Navigate to={'home'} />} />
+        </Routes>
       </PageSection>
     </React.Fragment>
   )