diff --git a/frontend/src/app/Header.tsx b/frontend/src/app/Header.tsx index 70a9491c20..6301a32c45 100644 --- a/frontend/src/app/Header.tsx +++ b/frontend/src/app/Header.tsx @@ -8,7 +8,6 @@ import { MastheadMain, MastheadToggle, PageToggleButton, - Switch, } from '@patternfly/react-core'; import { BarsIcon } from '@patternfly/react-icons'; import { Link } from 'react-router-dom'; diff --git a/frontend/src/app/HeaderTools.tsx b/frontend/src/app/HeaderTools.tsx index 6850b98896..349d18ae32 100644 --- a/frontend/src/app/HeaderTools.tsx +++ b/frontend/src/app/HeaderTools.tsx @@ -43,7 +43,7 @@ const HeaderTools: React.FC = ({ onNotificationsClick }) => { React.useEffect(() => { window.isSwitched = !isChecked; - }, [window.isSwitched]); + }, [isChecked]); const handleChange = (_event: React.FormEvent, checked: boolean) => { setIsChecked(!checked); @@ -147,13 +147,13 @@ const HeaderTools: React.FC = ({ onNotificationsClick }) => { - + {!dashboardConfig.spec.dashboardConfig.disableAppLauncher ? ( diff --git a/frontend/src/components/DashboardDescriptionListGroup.tsx b/frontend/src/components/DashboardDescriptionListGroup.tsx index 5789df3828..dec37ad67b 100644 --- a/frontend/src/components/DashboardDescriptionListGroup.tsx +++ b/frontend/src/components/DashboardDescriptionListGroup.tsx @@ -97,7 +97,9 @@ const DashboardDescriptionListGroup: React.FC{title} )} - + {isEditing ? contentWhenEditing : isEmpty ? contentWhenEmpty : children} diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx index a9547ff662..21ae40ab4f 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { DrawerPanelBody, Tab, TabContent, Tabs } from '@patternfly/react-core'; import SelectedNodeDetailsTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeDetailsTab'; import SelectedNodeInputOutputTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/SelectedNodeInputOutputTab'; -import LogsTab from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/runLogs/LogsTab'; import './PipelineRunDrawer.scss'; import { PipelineTask } from '~/concepts/pipelines/topology'; import { Execution } from '~/third_party/mlmd'; @@ -53,7 +52,7 @@ const PipelineRunDrawerRightTabs: React.FC = ({ title: 'Logs', isDisabled: !task.status?.podName, // content: , - content: <> + content: <>, }, }; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index a887c2af38..302ad472ac 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import { BrowserRouter as Router } from 'react-router-dom'; import { Provider } from 'react-redux'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; import { sdkStore, store } from './redux/store/store'; import App from './app/App'; import SDKInitialize from './SDKInitialize'; import { BrowserStorageContextProvider } from './components/browserStorage/BrowserStorageContext'; import ErrorBoundary from './components/error/ErrorBoundary'; import { ReduxContext } from './redux/context'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; /** /** diff --git a/frontend/src/pages/home/Home.tsx b/frontend/src/pages/home/Home.tsx index 9e8bb78967..46d7d44c44 100644 --- a/frontend/src/pages/home/Home.tsx +++ b/frontend/src/pages/home/Home.tsx @@ -1,11 +1,5 @@ import * as React from 'react'; -import { - Bullseye, - EmptyState, - Page, - PageSection, - PageSectionVariants, -} from '@patternfly/react-core'; +import { Bullseye, EmptyState, PageSection, PageSectionVariants } from '@patternfly/react-core'; import { HomeIcon } from '@patternfly/react-icons'; import { ODH_PRODUCT_NAME } from '~/utilities/const'; import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable'; diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss index 0abde4d247..e9dc5b4d0c 100644 --- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss +++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/MUI-theme.scss @@ -48,19 +48,37 @@ --mui-menu-toggle--PaddingInlineStart: 10px; --mui-menu-toggle--PaddingInlineEnd: 10px; - // Tabs - --mui-tabs__link--hover--BackgroundColor: transparent; - --mui-tabs__item--PaddingBlockStart: 0; - --mui-tabs__item--PaddingBlockEnd: 0; - --mui-tabs__item--PaddingInlineStart: 0; - --mui-tabs__item--PaddingInlineEnd: 0; - --mui-tabs__link--PaddingBlockStart: 12px; - --mui-tabs__link--PaddingBlockEnd: 12px; - --mui-tabs__link--PaddingInlineStart: 16px; - --mui-tabs__link--PaddingInlineEnd: 16px; - --mui-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default); - --mui-tabs__item--m-current__link--after--BorderWidth: 2px; - --mui-tabs__link--FontSize: 0.875rem; + // Table + --mui-table__button--BackgroundColor: none; + --mui-table__button--hover--BackgroundColor: none; + --mui-table__button--Color: var(--pf-v6-c-table--cell--Color); + --mui-table__button--PaddingBlockStart: 0; + --mui-table__button--PaddingBlockEnd: 0; + --mui-table__button--PaddingInlineStart: 0; + --mui-table__button--PaddingInlineEnd: 0; + --mui-table--cell--PaddingInlineStart: 16px; + --mui-table--cell--PaddingInlineEnd: 16px; + --mui-table--cell--PaddingBlockStart: 16px; + --mui-table--cell--PaddingBlockEnd: 16px; + --mui-table--cell--first-last-child--PaddingInline: 0px; + --mui-table__thead--cell--FontSize: 14px; + --mui-table__sort-indicator--MarginInlineStart: 4px; + + letter-spacing: 0.01071em; + + // Tabs + --mui-tabs__link--hover--BackgroundColor: transparent; + --mui-tabs__item--PaddingBlockStart: 0; + --mui-tabs__item--PaddingBlockEnd: 0; + --mui-tabs__item--PaddingInlineStart: 0; + --mui-tabs__item--PaddingInlineEnd: 0; + --mui-tabs__link--PaddingBlockStart: 12px; + --mui-tabs__link--PaddingBlockEnd: 12px; + --mui-tabs__link--PaddingInlineStart: 16px; + --mui-tabs__link--PaddingInlineEnd: 16px; + --mui-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default); + --mui-tabs__item--m-current__link--after--BorderWidth: 2px; + --mui-tabs__link--FontSize: 0.875rem; --mui-text-transform: uppercase; @@ -196,27 +214,25 @@ } .mui-theme .pf-v6-c-table { - --pf-v6-c-table__sort--m-selected__button--Color: #000000de; - --pf-v6-c-table__button--BackgroundColor: none; - --pf-v6-c-table__button--hover--BackgroundColor: none; - --pf-v6-c-table__sort-indicator--Color: #666; - --pf-v6-c-table__sort__button--hover__sort-indicator--Color: #00000050; - --pf-v6-c-table__sort__button--hover__text--Color: #00000099; - --pf-v6-c-table--cell--Color: rgba(0, 0, 0, 0.87); + --pf-v6-c-table__sort--m-selected__button--Color: var(--mui-palette-text-primary); + --pf-v6-c-table__sort-indicator--Color: var(--mui-palette-text-secondary); + --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--mui-palette-text-secondary); + --pf-v6-c-table__sort__button--hover__text--Color: var(--mui-palette-text-secondary); + --pf-v6-c-table--cell--Color: var(--mui-palette-text-primary); --pf-v6-c-table__button--Color: var(--pf-v6-c-table--cell--Color); - --pf-v6-c-table__button--PaddingBlockStart: 0; - --pf-v6-c-table__button--PaddingBlockEnd: 0; - --pf-v6-c-table__button--PaddingInlineStart: 0; - --pf-v6-c-table__button--PaddingInlineEnd: 0; - --pf-v6-c-table--cell--PaddingInlineStart: 16px; - --pf-v6-c-table--cell--PaddingInlineEnd: 16px; - --pf-v6-c-table--cell--PaddingBlockStart: 16px; - --pf-v6-c-table--cell--PaddingBlockEnd: 16px; - --pf-v6-c-table--cell--first-last-child--PaddingInline: 0px; - --pf-v6-c-table__thead--cell--FontWeight: 500; - --pf-v6-c-table__thead--cell--FontSize: 14px; - --pf-v6-c-table__tr--BorderBlockEndColor: rgba(224, 224, 224, 1); - --pf-v6-c-table__sort-indicator--MarginInlineStart: 4px; + --pf-v6-c-table__button--PaddingBlockStart: var(--mui-table__button--PaddingBlockStart); + --pf-v6-c-table__button--PaddingBlockEnd: var(--mui-table__button--PaddingBlockEnd); + --pf-v6-c-table__button--PaddingInlineStart: var(--mui-table__button--PaddingInlineStart); + --pf-v6-c-table__button--PaddingInlineEnd: var(--mui-table__button--PaddingInlineEnd); + --pf-v6-c-table--cell--PaddingInlineStart: var(--mui-table--cell--PaddingInlineStart); + --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd); + --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart); + --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd); + --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--mui-table--cell--first-last-child--PaddingInline); + --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-font-weight); + --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize); + --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300); + --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--mui-table__sort-indicator--MarginInlineStart); letter-spacing: 0.01071em; } @@ -228,7 +244,7 @@ .mui-theme .pf-v6-c-table__sort-indicator { font-size: 18px; opacity: 0; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transform-origin: center center; } diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx index 79b9012d80..badf015a26 100644 --- a/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx +++ b/frontend/src/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx @@ -15,8 +15,7 @@ import { import { asEnumMember } from '~/utilities/utils'; import RegisteredModelTable from './RegisteredModelTable'; import RegisteredModelsTableToolbar from './RegisteredModelsTableToolbar'; -import './MUI-theme.scss' -import { createTheme } from "@mui/material/styles"; +import './MUI-theme.scss'; type RegisteredModelListViewProps = { registeredModels: RegisteredModel[]; @@ -34,9 +33,6 @@ const RegisteredModelListView: React.FC = ({ const searchTypes = React.useMemo(() => [SearchType.KEYWORD], []); // TODO Add owner once RHOAIENG-7566 is completed. - const theme = createTheme({ cssVariables: true }); - console.log("what is theme vars", theme); - console.log("spacing", theme.spacing(2)); if (unfilteredRegisteredModels.length === 0) { return ( = ({ // for loaded first, you'll get an infinite spinner. if (error) { if (error.response?.status === 403) { - return ; + return ( + + ); } return (