Fix UI bugs in PF Theme

Signed-off-by: Jenny <[email protected]>

remove diff file

Signed-off-by: Jenny <[email protected]>

Author: jenny-s51

workspaces/frontend/src/app/App.tsx

@@ -2,9 +2,12 @@ import * as React from 'react';
 import '@patternfly/react-core/dist/styles/base.css';
 import './app.css';
 import {
+  Brand,
   Flex,
   Masthead,
+  MastheadBrand,
   MastheadContent,
+  MastheadLogo,
   MastheadMain,
   MastheadToggle,
   Page,
@@ -18,6 +21,7 @@ import AppRoutes from './AppRoutes';
 import NavSidebar from './NavSidebar';
 import { NotebookContextProvider } from './context/NotebookContext';
 import { isMUITheme, Theme } from './const';
+import logoDarkTheme from '~/images/logo-dark-theme.svg';
 
 const App: React.FC = () => {
   React.useEffect(() => {
@@ -37,6 +41,16 @@ const App: React.FC = () => {
             <BarsIcon />
           </PageToggleButton>
         </MastheadToggle>
+        {!isMUITheme() ? (
+          <MastheadBrand>
+            <MastheadLogo component="a">
+            
+              <Brand src={logoDarkTheme} alt="Kubeflow" heights={{ default: '36px' }} />
+            </MastheadLogo>
+          </MastheadBrand>
+        ) : (
+          ''
+        )}
       </MastheadMain>
       <MastheadContent>
         <Flex>

workspaces/frontend/src/app/NavSidebar.tsx

@@ -10,6 +10,7 @@ import {
   PageSidebarBody,
 } from '@patternfly/react-core';
 import { useNavData, isNavDataGroup, NavDataHref, NavDataGroup } from './AppRoutes';
+import { isMUITheme, LOGO_LIGHT } from "./const";
 
 const NavHref: React.FC<{ item: NavDataHref }> = ({ item }) => (
   <NavItem key={item.label} data-id={item.label} itemId={item.label}>
@@ -49,13 +50,17 @@ const NavSidebar: React.FC = () => {
       <PageSidebarBody>
         <Nav id="nav-primary-simple">
           <NavList id="nav-list-simple">
-            <NavItem>
-              <Brand
-                className="kubeflow_brand"
-                src={`${window.location.origin}/images/logo.svg`}
-                alt="Kubeflow Logo"
-              />
-            </NavItem>
+            {isMUITheme() ? (
+              <NavItem>
+                <Brand
+                  className="kubeflow_brand"
+                  src={`${window.location.origin}/images/${LOGO_LIGHT}`}
+                  alt="Kubeflow Logo"
+                />
+              </NavItem>
+            ) : (
+              ''
+            )}
             {navData.map((item) =>
               isNavDataGroup(item) ? (
                 <NavGroup key={item.label} item={item} />
@@ -70,4 +75,4 @@ const NavSidebar: React.FC = () => {
   );
 };
 
-export default NavSidebar;
+export default NavSidebar;

workspaces/frontend/src/app/const.ts

@@ -8,3 +8,5 @@ export enum Theme {
 
 export const isMUITheme = (): boolean => STYLE_THEME === Theme.MUI;
 const STYLE_THEME = process.env.STYLE_THEME || Theme.MUI;
+
+export const LOGO_LIGHT = process.env.LOGO || 'logo.svg';

workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreation.tsx

@@ -68,8 +68,8 @@ const WorkspaceCreation: React.FunctionComponent = () => {
 
   return (
     <>
-      <PageGroup stickyOnBreakpoint={{ default: 'top' }}>
-        <PageSection isFilled={false}>
+      <PageGroup isFilled={false} stickyOnBreakpoint={{ default: 'top' }}>
+        <PageSection>
           <Stack hasGutter>
             <StackItem>
               <Flex>