From f833f2f31918fc657bf548feda8a825270446d34 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Tue, 24 Sep 2024 10:59:42 -0400
Subject: [PATCH] wip model details

---
 .../BYONImageModal/DisplayedContentTableRow.tsx |  3 ++-
 .../ModelVersions/ModelVersionsTable.tsx        |  2 +-
 .../screens/RegisteredModels/MUI-theme.scss     | 17 +++++++++++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/BYONImages/BYONImageModal/DisplayedContentTableRow.tsx b/frontend/src/pages/BYONImages/BYONImageModal/DisplayedContentTableRow.tsx
index 102a3827ea..f757a55f27 100644
--- a/frontend/src/pages/BYONImages/BYONImageModal/DisplayedContentTableRow.tsx
+++ b/frontend/src/pages/BYONImages/BYONImageModal/DisplayedContentTableRow.tsx
@@ -4,6 +4,7 @@ import { ActionList, ActionListItem, Button, TextInput } from '@patternfly/react
 import { CheckIcon, MinusCircleIcon, PencilAltIcon, TimesIcon } from '@patternfly/react-icons';
 import { BYONImagePackage } from '~/types';
 import { DisplayedContentTab } from './ManageBYONImageModal';
+import EditIcon from '@mui/icons-material/Edit';
 
 type DisplayedContentTableRowProps = {
   tabKey: DisplayedContentTab;
@@ -111,7 +112,7 @@ const DisplayedContentTableRow: React.FC<DisplayedContentTableRowProps> = ({
               <>
                 <ActionListItem>
                   <Button
-                    icon={<PencilAltIcon />}
+                    icon={<EditIcon />}
                     aria-label="Edit displayed content"
                     isDisabled={isEditing}
                     variant="plain"
diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable.tsx
index f04f6943d2..091b58da8a 100644
--- a/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable.tsx
+++ b/frontend/src/pages/modelRegistry/screens/ModelVersions/ModelVersionsTable.tsx
@@ -22,7 +22,7 @@ const ModelVersionsTable: React.FC<ModelVersionsTableProps> = ({
     data={modelVersions}
     columns={mvColumns}
     toolbarContent={toolbarContent}
-    enablePagination
+    enablePagination="compact"
     emptyTableView={<DashboardEmptyTableView onClearFilters={clearFilters} />}
     rowRenderer={(mv) => (
       <ModelVersionsTableRow key={mv.name} modelVersion={mv} refresh={refresh} />
diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
index 49cad463a7..e554d9e9d6 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
+++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss
@@ -103,6 +103,21 @@
   letter-spacing: 0.02857em;
 }
 
+.mui-theme .pf-v6-c-description-list__text:focus-within .pf-v6-c-form-control
+ {
+  --pf-v6-c-form-control--after--BorderWidth: 2px;
+  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-main);
+}
+
+.pf-v6-c-form-control > :is(input,select,textarea):focus {
+  outline-offset: 0;
+}
+
+.pf-v6-c-menu-toggle.pf-m-primary:is(:hover,:focus) {
+  --pf-v6-c-menu-toggle--BackgroundColor: rgb(23, 105, 170);
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-palette-primary-main);
+}
+
 .mui-theme .pf-v6-c-menu-toggle__button {
   text-transform: uppercase;
   font-weight: var(--mui-button-font-weight);
@@ -272,6 +287,8 @@
 .mui-theme .pf-v6-c-pagination__page-menu .pf-v6-c-menu-toggle {
   --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
   text-transform: none;
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: none;
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: none;
 }
 
 .mui-theme .pf-v6-c-pagination__page-menu::before {