From ad3ab0141e48e0555e13803945bd4bb2b41df978 Mon Sep 17 00:00:00 2001
From: Jong Eun Lee <jongeun@lablup.com>
Date: Tue, 12 Nov 2024 20:26:14 +0800
Subject: [PATCH] feat: Main layout NEO header

---
 react/package.json                            |   1 +
 react/pnpm-lock.yaml                          |   3 +
 react/src/components/BAIMenu.tsx              |  67 +++------
 .../src/components/BAINotificationButton.tsx  |  32 +++--
 react/src/components/BAISelect.tsx            |  52 ++++++-
 .../components/LoginSessionExtendButton.tsx   |  84 +++++++-----
 .../src/components/MainLayout/WebUIHeader.css |   8 --
 .../src/components/MainLayout/WebUIHeader.tsx | 128 ++++++++++--------
 react/src/components/ProjectSelect.tsx        |   7 +-
 react/src/components/ReverseThemeProvider.tsx |  29 ++++
 react/src/components/UserDropdownMenu.tsx     |  74 +++++-----
 react/src/components/WEBUIHelpButton.tsx      |   1 -
 .../src/components/WebUIThemeToggleButton.tsx |   1 -
 resources/i18n/de.json                        |   4 +-
 resources/i18n/el.json                        |   4 +-
 resources/i18n/en.json                        |   4 +-
 resources/i18n/es.json                        |   4 +-
 resources/i18n/fi.json                        |   4 +-
 resources/i18n/fr.json                        |   4 +-
 resources/i18n/id.json                        |   4 +-
 resources/i18n/it.json                        |   4 +-
 resources/i18n/ja.json                        |   4 +-
 resources/i18n/ko.json                        |   6 +-
 resources/i18n/mn.json                        |   4 +-
 resources/i18n/ms.json                        |   4 +-
 resources/i18n/pl.json                        |   4 +-
 resources/i18n/pt-BR.json                     |   4 +-
 resources/i18n/pt.json                        |   4 +-
 resources/i18n/ru.json                        |   4 +-
 resources/i18n/th.json                        |   4 +-
 resources/i18n/tr.json                        |   4 +-
 resources/i18n/vi.json                        |   4 +-
 resources/i18n/zh-CN.json                     |   4 +-
 resources/i18n/zh-TW.json                     |   4 +-
 resources/theme.json                          |  25 ++--
 35 files changed, 353 insertions(+), 245 deletions(-)
 delete mode 100644 react/src/components/MainLayout/WebUIHeader.css
 create mode 100644 react/src/components/ReverseThemeProvider.tsx

diff --git a/react/package.json b/react/package.json
index f6f87cb828..d9eec91688 100644
--- a/react/package.json
+++ b/react/package.json
@@ -26,6 +26,7 @@
     "ansi_up": "^6.0.2",
     "antd": "^5.20.0",
     "antd-style": "^3.6.2",
+    "classnames": "^2.5.1",
     "dayjs": "^1.11.12",
     "graphql": "^16.9.0",
     "i18next": "^23.12.2",
diff --git a/react/pnpm-lock.yaml b/react/pnpm-lock.yaml
index acb99c74f8..4483bdb2cd 100644
--- a/react/pnpm-lock.yaml
+++ b/react/pnpm-lock.yaml
@@ -77,6 +77,9 @@ importers:
       antd-style:
         specifier: ^3.6.2
         version: 3.6.2(@types/react@18.3.3)(antd@5.20.0(date-fns@2.30.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      classnames:
+        specifier: ^2.5.1
+        version: 2.5.1
       dayjs:
         specifier: ^1.11.12
         version: 1.11.12
diff --git a/react/src/components/BAIMenu.tsx b/react/src/components/BAIMenu.tsx
index 397124b750..480d50cce7 100644
--- a/react/src/components/BAIMenu.tsx
+++ b/react/src/components/BAIMenu.tsx
@@ -1,56 +1,29 @@
-import { ConfigProvider, Menu, MenuProps, theme } from 'antd';
+import { ConfigProvider, Menu, MenuProps } from 'antd';
 import React from 'react';
 
-// interface BAIMenuProps extends MenuProps {
-
-// }
-
 const BAIMenu: React.FC<MenuProps> = ({ ...props }) => {
-  const { token } = theme.useToken();
   return (
-    <>
-      <style>
-        {`
-          .bai-menu li.ant-menu-item.ant-menu-item-selected {
-            overflow: visible;
-            font-weight: 600;
-          }
-          
-          .bai-menu li.ant-menu-item.ant-menu-item-selected::before {
-            left: 0px;
-            top: 0;
-            bottom: 0;
-            position: absolute;
-            right: auto;
-            border-right: 3px solid ${token.colorPrimary};
-            transform: scaleY(1);
-            opacity: 1;
-            content: "";
-          }
-          `}
-      </style>
-      <ConfigProvider
-        theme={{
-          components: {
-            Menu: {
-              itemBorderRadius: 2,
-              itemMarginInline: 0,
-            },
+    <ConfigProvider
+      theme={{
+        components: {
+          Menu: {
+            itemBorderRadius: 2,
+            itemMarginInline: 0,
           },
+        },
+      }}
+    >
+      <Menu
+        style={{
+          backgroundColor: 'transparent',
+          borderRight: 'none',
+          paddingRight: 4,
         }}
-      >
-        <Menu
-          style={{
-            backgroundColor: 'transparent',
-            borderRight: 'none',
-            paddingRight: 4,
-          }}
-          mode="inline"
-          {...props}
-          className="bai-menu"
-        />
-      </ConfigProvider>
-    </>
+        // mode=""
+        {...props}
+        className="bai-menu"
+      />
+    </ConfigProvider>
   );
 };
 
diff --git a/react/src/components/BAINotificationButton.tsx b/react/src/components/BAINotificationButton.tsx
index 453c10efcb..2cbd2905e0 100644
--- a/react/src/components/BAINotificationButton.tsx
+++ b/react/src/components/BAINotificationButton.tsx
@@ -10,10 +10,15 @@ import { atom, useAtom } from 'jotai';
 import _ from 'lodash';
 import React, { useEffect } from 'react';
 
-interface Props extends ButtonProps {}
+interface Props extends ButtonProps {
+  buttonRender?: (defaultButton: React.ReactNode) => React.ReactNode;
+}
 export const isOpenDrawerState = atom(false);
 
-const BAINotificationButton: React.FC<Props> = ({ ...props }) => {
+const BAINotificationButton: React.FC<Props> = ({
+  buttonRender = (btn) => btn,
+  ...props
+}) => {
   const [notifications, { upsertNotification }] = useBAINotificationState();
   useBAINotificationEffect();
 
@@ -33,17 +38,18 @@ const BAINotificationButton: React.FC<Props> = ({ ...props }) => {
   });
   return (
     <>
-      <Button
-        size="large"
-        icon={
-          <Badge dot={hasRunningBackgroundTask}>
-            <BellOutlined />
-          </Badge>
-        }
-        type="text"
-        onClick={() => setIsOpenDrawer((v) => !v)}
-        {...props}
-      />
+      {buttonRender(
+        <Button
+          icon={
+            <Badge dot={hasRunningBackgroundTask}>
+              <BellOutlined />
+            </Badge>
+          }
+          type="text"
+          onClick={() => setIsOpenDrawer((v) => !v)}
+          {...props}
+        />,
+      )}
       <WEBUINotificationDrawer
         open={isOpenDrawer}
         onClose={() => setIsOpenDrawer((v) => !v)}
diff --git a/react/src/components/BAISelect.tsx b/react/src/components/BAISelect.tsx
index 2db26d4b57..312776b4eb 100644
--- a/react/src/components/BAISelect.tsx
+++ b/react/src/components/BAISelect.tsx
@@ -1,8 +1,45 @@
 import { Select, SelectProps } from 'antd';
+import { createStyles } from 'antd-style';
+import classNames from 'classnames';
 import _ from 'lodash';
 import React, { useLayoutEffect } from 'react';
 
+const useStyles = createStyles(({ css, token }) => ({
+  ghostSelect: css`
+    &.ant-select {
+      .ant-select-selector {
+        background-color: transparent;
+        border-color: ${token.colorBgBase} !important;
+        /* box-shadow: none; */
+        color: ${token.colorBgBase};
+        /* transition: color 0.3s, border-color 0.3s; */
+      }
+
+      &:hover .ant-select-selector {
+        background-color: rgb(255 255 255 / 10%);
+      }
+
+      &:active .ant-select-selector {
+        background-color: rgb(255 255 255 / 10%);
+      }
+
+      .ant-select-arrow {
+        color: ${token.colorBgBase};
+      }
+
+      &:hover .ant-select-arrow {
+        color: ${token.colorBgBase};
+      }
+
+      &:active .ant-select-arrow {
+        color: ${token.colorBgBase};
+      }
+    }
+  `,
+}));
+
 interface BAISelectProps extends SelectProps {
+  ghost?: boolean;
   autoSelectOption?: boolean | ((options: SelectProps['options']) => any);
 }
 /**
@@ -18,9 +55,12 @@ interface BAISelectProps extends SelectProps {
  */
 const BAISelect: React.FC<BAISelectProps> = ({
   autoSelectOption,
+  ghost,
   ...selectProps
 }) => {
   const { value, options, onChange } = selectProps;
+  const { styles } = useStyles();
+
   useLayoutEffect(() => {
     if (autoSelectOption && _.isEmpty(value) && options?.[0]) {
       if (_.isBoolean(autoSelectOption)) {
@@ -30,7 +70,17 @@ const BAISelect: React.FC<BAISelectProps> = ({
       }
     }
   }, [value, options, onChange, autoSelectOption]);
-  return <Select {...selectProps} />;
+
+  return (
+    <Select
+      {...selectProps}
+      className={
+        ghost
+          ? classNames(styles.ghostSelect, selectProps.className)
+          : selectProps.className
+      }
+    />
+  );
 };
 
 export default BAISelect;
diff --git a/react/src/components/LoginSessionExtendButton.tsx b/react/src/components/LoginSessionExtendButton.tsx
index b37679ce10..86f3dc4236 100644
--- a/react/src/components/LoginSessionExtendButton.tsx
+++ b/react/src/components/LoginSessionExtendButton.tsx
@@ -4,8 +4,9 @@ import { useSuspenseTanQuery } from '../hooks/reactQueryAlias';
 import BAIIntervalView from './BAIIntervalView';
 import Flex from './Flex';
 import { ClockCircleOutlined } from '@ant-design/icons';
-import { Button, Tooltip } from 'antd';
+import { Button, ConfigProvider, Grid, Tooltip } from 'antd';
 import { default as dayjs } from 'dayjs';
+import { Repeat2Icon } from 'lucide-react';
 import React, { useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -19,6 +20,8 @@ const LoginSessionExtendButton: React.FC<
   const [isPending, startTransition] = useTransition();
   const [fetchKey, updateFetchKey] = useUpdatableState('first');
 
+  const gridBreakpoint = Grid.useBreakpoint();
+
   const { data } = useSuspenseTanQuery<{
     expires: string;
   }>({
@@ -33,37 +36,56 @@ const LoginSessionExtendButton: React.FC<
   });
 
   return (
-    <Flex direction="row" gap="xxs">
-      <Tooltip title={t('general.RemainingLoginSessionTime')}>
-        <Flex gap={'xxs'}>
-          <ClockCircleOutlined />
-          <BAIIntervalView
-            callback={() => {
-              const diff = dayjs(data?.expires).diff(dayjs(), 'seconds');
-              const duration = dayjs.duration(Math.max(0, diff), 'seconds');
-              const days = duration.days();
-              if (duration.seconds() === 0) {
-                // @ts-ignore
-                if (globalThis.isElectron) {
-                  // @ts-ignore
-                  globalThis.location.href = globalThis.electronInitialHref;
-                } else {
-                  globalThis.location.reload();
-                }
-              }
-              return `${days ? days + 'd ' : ''}${duration.format('HH:mm:ss')}`;
-            }}
-            delay={100}
-          ></BAIIntervalView>
-        </Flex>
-      </Tooltip>
-      <Button
-        loading={isPending}
-        onClick={() => startTransition(() => updateFetchKey())}
-        size="small"
+    <Flex direction="row" gap="xs">
+      <BAIIntervalView
+        callback={() => {
+          const diff = dayjs(data?.expires).diff(dayjs(), 'seconds');
+          const duration = dayjs.duration(Math.max(0, diff), 'seconds');
+          const days = duration.days();
+          if (duration.seconds() === 0) {
+            // @ts-ignore
+            if (globalThis.isElectron) {
+              // @ts-ignore
+              globalThis.location.href = globalThis.electronInitialHref;
+            } else {
+              globalThis.location.reload();
+            }
+          }
+          return gridBreakpoint.lg
+            ? `${days ? days + 'd ' : ''}${duration.format('HH:mm:ss')}`
+            : days
+              ? days + 'd'
+              : duration.format('HH:mm:ss');
+        }}
+        delay={100}
+        render={(text) => {
+          return (
+            <Tooltip title={t('general.RemainingLoginSessionTime')}>
+              <Flex gap={'xxs'}>
+                <ClockCircleOutlined />
+                {text}
+              </Flex>
+            </Tooltip>
+          );
+        }}
+      />
+      <ConfigProvider
+        theme={{
+          token: {
+            // hack to change the primary hover color for header
+            colorPrimaryHover: 'rgb(255,255,255,0.15)',
+          },
+        }}
       >
-        {t('general.Extend')}
-      </Button>
+        <Tooltip title={t('general.ExtendLoginSession')}>
+          <Button
+            type="primary"
+            loading={isPending}
+            onClick={() => startTransition(() => updateFetchKey())}
+            icon={<Repeat2Icon />}
+          />
+        </Tooltip>
+      </ConfigProvider>
     </Flex>
   );
 };
diff --git a/react/src/components/MainLayout/WebUIHeader.css b/react/src/components/MainLayout/WebUIHeader.css
deleted file mode 100644
index 8f8a1fb81e..0000000000
--- a/react/src/components/MainLayout/WebUIHeader.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.webui-header-container,
-.webui-header-container .draggable {
-  -webkit-app-region: drag;
-}
-
-.webui-header-container .non-draggable {
-  -webkit-app-region: no-drag;
-}
diff --git a/react/src/components/MainLayout/WebUIHeader.tsx b/react/src/components/MainLayout/WebUIHeader.tsx
index 616599249c..5d5fae2f27 100644
--- a/react/src/components/MainLayout/WebUIHeader.tsx
+++ b/react/src/components/MainLayout/WebUIHeader.tsx
@@ -4,29 +4,37 @@ import {
   useCurrentProjectValue,
   useSetCurrentProject,
 } from '../../hooks/useCurrentProject';
-import { useScrollBreakPoint } from '../../hooks/useScrollBreackPoint';
 import BAINotificationButton from '../BAINotificationButton';
 import Flex, { FlexProps } from '../Flex';
 import LoginSessionExtendButton from '../LoginSessionExtendButton';
 import ProjectSelect from '../ProjectSelect';
+import ReverseThemeProvider from '../ReverseThemeProvider';
 import UserDropdownMenu from '../UserDropdownMenu';
 import WEBUIHelpButton from '../WEBUIHelpButton';
 import WebUIThemeToggleButton from '../WebUIThemeToggleButton';
-// @ts-ignore
-import rawCss from './WebUIHeader.css?raw';
-import { MenuOutlined } from '@ant-design/icons';
 import { theme, Button, Typography, Grid, Divider } from 'antd';
-import _ from 'lodash';
+import { createStyles } from 'antd-style';
+import { MenuIcon } from 'lucide-react';
 import { Suspense, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMatches } from 'react-router-dom';
+
+const useStyles = createStyles(({ css, token }) => ({
+  webuiHeader: css`
+    &,
+    & .draggable {
+      -webkit-app-region: drag;
+    }
+    & .non-draggable {
+      -webkit-app-region: no-drag;
+    }
+  `,
+}));
 
 export interface WebUIHeaderProps extends FlexProps {
   onClickMenuIcon?: () => void;
   containerElement?: HTMLDivElement | null;
 }
 
-export const HEADER_HEIGHT = 62;
 const WebUIHeader: React.FC<WebUIHeaderProps> = ({
   onClickMenuIcon,
   containerElement,
@@ -37,69 +45,68 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
   const currentProject = useCurrentProjectValue();
   const setCurrentProject = useSetCurrentProject();
   const baiClient = useSuspendedBackendaiClient();
-  const matches = useMatches();
-  const { y: scrolled } = useScrollBreakPoint(
-    {
-      y: 1,
-    },
-    containerElement,
-  );
   const gridBreakpoint = Grid.useBreakpoint();
 
-  const { md } = Grid.useBreakpoint();
-
   const [isPendingProjectChanged, startProjectChangedTransition] =
     useTransition();
   const [optimisticProjectId, setOptimisticProjectId] = useState(
     currentProject.id,
   );
+
+  const { styles } = useStyles();
+
   return (
     <Flex
       align="center"
       justify="between"
       direction="row"
       style={{
-        height: HEADER_HEIGHT,
+        height: token.Layout?.headerHeight || 60,
+        backgroundColor: token.Layout?.headerBg,
         paddingRight: token.marginMD,
         paddingLeft: token.marginMD,
-        backgroundColor: scrolled ? token.colorBgElevated : 'transparent',
-        boxShadow: scrolled ? `0 5px 6px -6px ${token.colorBorder}` : 'none',
-        transition: 'background-color 0.2s ease-in-out',
+        color: token.colorBgBase,
       }}
-      className={'webui-header-container'}
+      className={styles.webuiHeader}
     >
-      <style>{rawCss}</style>
       <Flex direction="row" gap={'sm'}>
-        <Button
-          icon={<MenuOutlined />}
-          type="text"
-          onClick={() => {
-            onClickMenuIcon?.();
-          }}
-          className="non-draggable"
-        />
-        <Typography.Title level={5} style={{ margin: 0 }}>
-          {/* @ts-ignore */}
-          {t(_.last(matches)?.handle?.labelKey) || ''}
-        </Typography.Title>
-      </Flex>
-      <Flex gap={md ? 'sm' : 'xs'}>
-        <Typography.Text type="secondary">
-          {t('webui.menu.Project')}
-        </Typography.Text>
+        <ReverseThemeProvider>
+          {!gridBreakpoint.sm && (
+            <Button
+              icon={<MenuIcon />}
+              type="text"
+              onClick={() => {
+                onClickMenuIcon?.();
+              }}
+              className="non-draggable"
+              style={{
+                marginLeft: token.marginSM * -1,
+              }}
+            />
+          )}
+          {gridBreakpoint.sm && (
+            <Typography.Text
+              style={{
+                fontWeight: 600, // semi-bold
+                fontSize: token.fontSizeLG,
+              }}
+            >
+              {t('webui.menu.Project')}
+            </Typography.Text>
+          )}
+        </ReverseThemeProvider>
         <Suspense>
           <ProjectSelect
             popupMatchSelectWidth={false}
             style={{
               minWidth: 100,
-              maxWidth: gridBreakpoint.lg ? undefined : 100,
+              maxWidth: gridBreakpoint.lg ? undefined : 150,
             }}
             loading={isPendingProjectChanged}
             disabled={isPendingProjectChanged}
             className="non-draggable"
             showSearch
             domain={currentDomainName}
-            size={gridBreakpoint.lg ? 'large' : 'middle'}
             value={
               isPendingProjectChanged ? optimisticProjectId : currentProject?.id
             }
@@ -111,20 +118,35 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
             }}
           />
         </Suspense>
-        <Flex direction="row" className="non-draggable">
-          <BAINotificationButton />
+      </Flex>
+      <Flex direction="row" className="non-draggable" gap="xxs" align="center">
+        {baiClient.supports('extend-login-session') &&
+          baiClient._config.enableExtendLoginSession && (
+            <Suspense>
+              <LoginSessionExtendButton />
+              {gridBreakpoint.md && (
+                <Divider
+                  type="vertical"
+                  style={{ borderColor: 'transparent' }}
+                />
+              )}
+            </Suspense>
+          )}
+        <BAINotificationButton
+          buttonRender={(btn) => (
+            <ReverseThemeProvider>{btn}</ReverseThemeProvider>
+          )}
+        />
+
+        <ReverseThemeProvider>
           <WebUIThemeToggleButton />
           <WEBUIHelpButton />
-          {baiClient.supports('extend-login-session') &&
-            baiClient._config.enableExtendLoginSession && (
-              <Suspense>
-                <Divider type="vertical" />
-                <LoginSessionExtendButton />
-                <Divider type="vertical" />
-              </Suspense>
-            )}
-          <UserDropdownMenu />
-        </Flex>
+        </ReverseThemeProvider>
+        <UserDropdownMenu
+          buttonRender={(btn) => (
+            <ReverseThemeProvider>{btn}</ReverseThemeProvider>
+          )}
+        />
       </Flex>
     </Flex>
   );
diff --git a/react/src/components/ProjectSelect.tsx b/react/src/components/ProjectSelect.tsx
index e61eca1c85..e016eefbc3 100644
--- a/react/src/components/ProjectSelect.tsx
+++ b/react/src/components/ProjectSelect.tsx
@@ -1,8 +1,9 @@
 import { useSuspendedBackendaiClient } from '../hooks';
 import { useCurrentUserInfo, useCurrentUserRole } from '../hooks/backendai';
 import useControllableState from '../hooks/useControllableState';
+import BAISelect from './BAISelect';
 import { ProjectSelectorQuery } from './__generated__/ProjectSelectorQuery.graphql';
-import { Select, SelectProps } from 'antd';
+import { SelectProps } from 'antd';
 import graphql from 'babel-plugin-relay/macro';
 import _ from 'lodash';
 import React from 'react';
@@ -123,7 +124,8 @@ const ProjectSelect: React.FC<ProjectSelectProps> = ({
     .value();
 
   return (
-    <Select
+    <BAISelect
+      ghost
       onChange={(value, option) => {
         setValue(value);
         onSelectProject?.(option as ProjectInfo);
@@ -135,6 +137,7 @@ const ProjectSelect: React.FC<ProjectSelectProps> = ({
       options={
         _.size(groupOptions) > 1 ? groupOptions : groupOptions[0]?.options
       }
+      style={{}}
     />
   );
 };
diff --git a/react/src/components/ReverseThemeProvider.tsx b/react/src/components/ReverseThemeProvider.tsx
new file mode 100644
index 0000000000..49a177fc88
--- /dev/null
+++ b/react/src/components/ReverseThemeProvider.tsx
@@ -0,0 +1,29 @@
+import { useCustomThemeConfig } from '../helper/customThemeConfig';
+import { theme, ConfigProvider, ConfigProviderProps } from 'antd';
+import _ from 'lodash';
+import React, { useContext } from 'react';
+
+interface ReverseThemeProviderProps extends ConfigProviderProps {
+  className?: string;
+}
+const ReverseThemeProvider: React.FC<ReverseThemeProviderProps> = ({
+  ...props
+}) => {
+  const themeConfig = useCustomThemeConfig();
+  const config = useContext(ConfigProvider.ConfigContext);
+  const isParentDark = config.theme?.algorithm === theme.darkAlgorithm;
+
+  return (
+    <ConfigProvider
+      {...props}
+      theme={{
+        ...(isParentDark
+          ? _.merge({}, themeConfig?.light, props.theme)
+          : _.merge({}, themeConfig?.dark, props.theme)),
+        algorithm: isParentDark ? theme.defaultAlgorithm : theme.darkAlgorithm,
+      }}
+    />
+  );
+};
+
+export default ReverseThemeProvider;
diff --git a/react/src/components/UserDropdownMenu.tsx b/react/src/components/UserDropdownMenu.tsx
index 9117a7cc6a..35e8e809c6 100644
--- a/react/src/components/UserDropdownMenu.tsx
+++ b/react/src/components/UserDropdownMenu.tsx
@@ -28,7 +28,7 @@ import {
   theme,
 } from 'antd';
 import _ from 'lodash';
-import React, { Suspense, useTransition } from 'react';
+import React, { Suspense, useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryLoader } from 'react-relay';
 
@@ -36,7 +36,9 @@ const UserProfileSettingModal = React.lazy(
   () => import('./UserProfileSettingModal'),
 );
 
-const UserDropdownMenu: React.FC = () => {
+const UserDropdownMenu: React.FC<{
+  buttonRender?: (defaultButton: React.ReactNode) => React.ReactNode;
+}> = ({ buttonRender = (btn) => btn }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const [userInfo] = useCurrentUserInfo();
@@ -169,47 +171,55 @@ const UserDropdownMenu: React.FC = () => {
   const [userProfileSettingQueryRef, loadUserProfileSettingQuery] =
     useQueryLoader<UserProfileSettingModalQuery>(UserProfileQuery);
 
+  const [open, setOpen] = useState(false);
   return (
     <>
       <Dropdown
         menu={{ items }}
         trigger={['click']}
-        // open={debouncedOpenToFixDropdownMenu}
         overlayStyle={{
           maxWidth: 300,
         }}
         placement="bottomRight"
+        open={open}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
       >
-        <Button
-          type="text"
-          size="large"
-          data-testid="user-dropdown-button"
-          // loading={isPendingInitializeSettingModal}
-          onClick={(e) => e.preventDefault()}
-          style={{
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: -2,
-            fontSize: token.fontSize,
-          }}
-          // icon={<UserOutlined />}
-          icon={
-            <Avatar
-              size={20}
-              icon={<UserOutlined style={{ fontSize: 13 }} />}
-              style={
-                {
-                  // border: 1,
+        {buttonRender(
+          <Button
+            type="text"
+            data-testid="user-dropdown-button"
+            // loading={isPendingInitializeSettingModal}
+            onClick={(e) => setOpen(!open)}
+            style={{
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginTop: -2,
+              fontSize: token.fontSizeLG,
+            }}
+            // icon={<UserOutlined />}
+            icon={
+              <Avatar
+                size={17}
+                icon={
+                  <UserOutlined
+                    style={{ fontSize: 10, color: token.colorPrimary }}
+                  />
                 }
-              }
-            ></Avatar>
-          }
-        >
-          {screens.lg && _.truncate(userInfo.username, { length: 30 })}
-        </Button>
+                style={{
+                  // border: 1,
+                  backgroundColor: token.colorBgBase,
+                }}
+              ></Avatar>
+            }
+          >
+            {screens.lg && _.truncate(userInfo.username, { length: 30 })}
+          </Button>,
+        )}
       </Dropdown>
       <Suspense>
         {userProfileSettingQueryRef && (
diff --git a/react/src/components/WEBUIHelpButton.tsx b/react/src/components/WEBUIHelpButton.tsx
index 742ec0d3e2..6016d39afa 100644
--- a/react/src/components/WEBUIHelpButton.tsx
+++ b/react/src/components/WEBUIHelpButton.tsx
@@ -35,7 +35,6 @@ const WEBUIHelpButton: React.FC<WEBUIHelpButtonProps> = ({ ...props }) => {
 
   return (
     <Button
-      size="large"
       icon={<QuestionCircleOutlined />}
       type="text"
       target="_blank"
diff --git a/react/src/components/WebUIThemeToggleButton.tsx b/react/src/components/WebUIThemeToggleButton.tsx
index a074030670..c82d379f1c 100644
--- a/react/src/components/WebUIThemeToggleButton.tsx
+++ b/react/src/components/WebUIThemeToggleButton.tsx
@@ -12,7 +12,6 @@ const WebUIThemeToggleButton: React.FC<WebUIThemeToggleButtonProps> = ({
 
   return (
     <Button
-      size="large"
       type="text"
       icon={isDarkMode ? <SunOutlined /> : <MoonOutlined />}
       onClick={() => {
diff --git a/resources/i18n/de.json b/resources/i18n/de.json
index 18e3ebca4c..c28ae92d64 100644
--- a/resources/i18n/de.json
+++ b/resources/i18n/de.json
@@ -526,11 +526,11 @@
     "General": "Allgemein",
     "Disabled": "Behinderte",
     "NSelected": "Ausgewählte(r) {{count}} Artikel",
-    "Extend": "Verlängern",
     "RemainingLoginSessionTime": "Zeit bis zur automatischen Abmeldung",
     "Change": "Ändern Sie",
     "MaxValueNotification": "{{name}} muss maximal {{max}} sein",
-    "TotalItems": "Insgesamt {{Gesamt}} Artikel"
+    "TotalItems": "Insgesamt {{Gesamt}} Artikel",
+    "ExtendLoginSession": "Eine Anmeldesitzung verlängern"
   },
   "credential": {
     "Permission": "Genehmigung",
diff --git a/resources/i18n/el.json b/resources/i18n/el.json
index d1240c7c5e..346ef753ee 100644
--- a/resources/i18n/el.json
+++ b/resources/i18n/el.json
@@ -526,11 +526,11 @@
     "General": "Γενικά",
     "Disabled": "Άτομα με ειδικές ανάγκες",
     "NSelected": "Επιλεγμένο {{count}} στοιχείο(α)",
-    "Extend": "Επεκτείνω",
     "RemainingLoginSessionTime": "Χρόνος μέχρι την αυτόματη αποσύνδεση",
     "Change": "Αλλαγή",
     "MaxValueNotification": "{{name}} πρέπει να είναι το μέγιστο {{max}}",
-    "TotalItems": "Σύνολο {{total}} στοιχείων"
+    "TotalItems": "Σύνολο {{total}} στοιχείων",
+    "ExtendLoginSession": "Επέκταση μιας περιόδου σύνδεσης"
   },
   "credential": {
     "Permission": "Αδεια",
diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index ca1934b8dd..4f79b871f4 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -654,11 +654,11 @@
     "General": "General",
     "Disabled": "Disabled",
     "NSelected": "Selected {{count}} item(s)",
-    "Extend": "Extend",
     "RemainingLoginSessionTime": "Time until auto logout",
     "Change": "Change",
     "MaxValueNotification": "{{name}} must be maximum {{max}}",
-    "TotalItems": "Total {{total}} items"
+    "TotalItems": "Total {{total}} items",
+    "ExtendLoginSession": "Extend a login session"
   },
   "credential": {
     "Permission": "Permission",
diff --git a/resources/i18n/es.json b/resources/i18n/es.json
index aadc59c2f1..0537b62cf5 100644
--- a/resources/i18n/es.json
+++ b/resources/i18n/es.json
@@ -571,11 +571,11 @@
     "General": "General",
     "Disabled": "Discapacitados",
     "NSelected": "Elemento(s) {{cuenta}} seleccionado(s)",
-    "Extend": "Extender",
     "RemainingLoginSessionTime": "Tiempo hasta el cierre de sesión automático",
     "Change": "Cambia",
     "MaxValueNotification": "{{name}} debe ser máximo {{max}}",
-    "TotalItems": "Total {{total}} artículos"
+    "TotalItems": "Total {{total}} artículos",
+    "ExtendLoginSession": "Prolongar una sesión de inicio de sesión"
   },
   "import": {
     "CleanUpImportTask": "Tarea de importación de limpieza...",
diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
index bbe45afe7c..346e516e8f 100644
--- a/resources/i18n/fi.json
+++ b/resources/i18n/fi.json
@@ -571,11 +571,11 @@
     "General": "Yleistä",
     "Disabled": "Vammaiset",
     "NSelected": "Valittu {{count}} kohde(t)",
-    "Extend": "Laajenna",
     "RemainingLoginSessionTime": "Aika automaattiseen uloskirjautumiseen asti",
     "Change": "Muuta",
     "MaxValueNotification": "{{name}} on oltava maksimi {{max}}",
-    "TotalItems": "Yhteensä {{total}} kohteita"
+    "TotalItems": "Yhteensä {{total}} kohteita",
+    "ExtendLoginSession": "Sisäänkirjautumisistunnon laajentaminen"
   },
   "import": {
     "CleanUpImportTask": "Tuontitehtävän siivous...",
diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
index d33e661fca..b34aa0def3 100644
--- a/resources/i18n/fr.json
+++ b/resources/i18n/fr.json
@@ -526,11 +526,11 @@
     "General": "Général",
     "Disabled": "Handicapés",
     "NSelected": "Élément(s) sélectionné(s) {{count}}",
-    "Extend": "Étendre",
     "RemainingLoginSessionTime": "Délai avant déconnexion automatique",
     "Change": "Changer",
     "MaxValueNotification": "{{nom}} doit être maximum {{max}}",
-    "TotalItems": "Total des éléments {{total}}"
+    "TotalItems": "Total des éléments {{total}}",
+    "ExtendLoginSession": "Prolonger une session de connexion"
   },
   "credential": {
     "Permission": "Autorisation",
diff --git a/resources/i18n/id.json b/resources/i18n/id.json
index a49ffb220d..ebb3e40793 100644
--- a/resources/i18n/id.json
+++ b/resources/i18n/id.json
@@ -527,11 +527,11 @@
     "General": "Umum",
     "Disabled": "Dinonaktifkan",
     "NSelected": "Item {{hitung}} yang dipilih",
-    "Extend": "Memperpanjang",
     "RemainingLoginSessionTime": "Waktu Hingga Keluar Otomatis",
     "Change": "Perubahan",
     "MaxValueNotification": "{{nama}} harus maksimal {{max}}",
-    "TotalItems": "Total item {{total}}"
+    "TotalItems": "Total item {{total}}",
+    "ExtendLoginSession": "Memperpanjang sesi masuk"
   },
   "credential": {
     "Permission": "Izin",
diff --git a/resources/i18n/it.json b/resources/i18n/it.json
index b5c657ef62..02bc06c14d 100644
--- a/resources/i18n/it.json
+++ b/resources/i18n/it.json
@@ -527,11 +527,11 @@
     "General": "Generale",
     "Disabled": "Disabili",
     "NSelected": "Articolo/i selezionato/i {{count}}",
-    "Extend": "Estendere",
     "RemainingLoginSessionTime": "Tempo fino alla disconnessione automatica",
     "Change": "Cambiamento",
     "MaxValueNotification": "{{nome}} deve essere massimo {{max}}",
-    "TotalItems": "Totale articoli {{totale}}"
+    "TotalItems": "Totale articoli {{totale}}",
+    "ExtendLoginSession": "Estendere una sessione di login"
   },
   "credential": {
     "Permission": "Autorizzazione",
diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
index 31a64e664d..9185d6bb7b 100644
--- a/resources/i18n/ja.json
+++ b/resources/i18n/ja.json
@@ -526,11 +526,11 @@
     "General": "一般",
     "Disabled": "無効",
     "NSelected": "選択された{{count}}項目（複数可）",
-    "Extend": "伸ばす",
     "RemainingLoginSessionTime": "自動ログアウトまでの時間",
     "Change": "変更",
     "MaxValueNotification": "{{ name }}最大値は{{ max }}です",
-    "TotalItems": "合計{{total}}項目"
+    "TotalItems": "合計{{total}}項目",
+    "ExtendLoginSession": "ログインセッションの延長"
   },
   "credential": {
     "Permission": "許可",
diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
index 57b143b3b0..f4cdec5b14 100644
--- a/resources/i18n/ko.json
+++ b/resources/i18n/ko.json
@@ -49,7 +49,7 @@
       "Environments&Presets": "실행환경 및 프리셋",
       "ComputationResources": "연산 자원",
       "Logs": "로그",
-      "Project": "현재 프로젝트",
+      "Project": "프로젝트",
       "Experiments": "실험",
       "PleaseChangeYourPassword": "비밀번호를 변경해주세요.",
       "PasswordChangePlace": "상단바의 사람 아이콘을 클릭하고 \"사용자 정보 변경\" 메뉴로 이동하세요.",
@@ -641,11 +641,11 @@
     "General": "일반",
     "Disabled": "비활성화",
     "NSelected": "{{count}}개 선택됨",
-    "Extend": "연장",
     "RemainingLoginSessionTime": "자동 로그아웃까지 남은 시간",
     "Change": "변경",
     "MaxValueNotification": "{{ name }} 최대 값은 {{ max }}입니다",
-    "TotalItems": "총 {{ total }}개"
+    "TotalItems": "총 {{ total }}개",
+    "ExtendLoginSession": "로그인 세션 연장"
   },
   "credential": {
     "Permission": "권한",
diff --git a/resources/i18n/mn.json b/resources/i18n/mn.json
index 45f52129da..862b9e8197 100644
--- a/resources/i18n/mn.json
+++ b/resources/i18n/mn.json
@@ -528,11 +528,11 @@
     "General": "Генерал",
     "Disabled": "Идэвхгүй",
     "NSelected": "Сонгосон {{count}} зүйл(үүд)",
-    "Extend": "Сунгах",
     "RemainingLoginSessionTime": "Автоматаар гарах хүртэл хугацаа",
     "Change": "Өөрчлөх",
     "MaxValueNotification": "{{name}} хамгийн ихдээ {{max}} байх ёстой",
-    "TotalItems": "Нийт {{total}} зүйл"
+    "TotalItems": "Нийт {{total}} зүйл",
+    "ExtendLoginSession": "Нэвтрэх сессийг сунгах"
   },
   "credential": {
     "Permission": "Зөвшөөрөл",
diff --git a/resources/i18n/ms.json b/resources/i18n/ms.json
index 8c306027d5..2db093205c 100644
--- a/resources/i18n/ms.json
+++ b/resources/i18n/ms.json
@@ -526,11 +526,11 @@
     "General": "Umum",
     "Disabled": "Dilumpuhkan",
     "NSelected": "{{count}} item yang dipilih",
-    "Extend": "Panjangkan",
     "RemainingLoginSessionTime": "__NOT_TRANSLATED__",
     "Change": "Berubah",
     "MaxValueNotification": "{{nama}} mestilah maksimum {{maks}}",
-    "TotalItems": "Jumlah {{total}} item"
+    "TotalItems": "Jumlah {{total}} item",
+    "ExtendLoginSession": "Lanjutkan sesi log masuk"
   },
   "credential": {
     "Permission": "Kebenaran",
diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
index ee44dd716e..f4e4ddb5ab 100644
--- a/resources/i18n/pl.json
+++ b/resources/i18n/pl.json
@@ -526,11 +526,11 @@
     "General": "Ogólne",
     "Disabled": "Wyłączony",
     "NSelected": "Wybrane elementy {{count}}",
-    "Extend": "Rozszerzyć",
     "RemainingLoginSessionTime": "Czas do automatycznego wylogowania",
     "Change": "Zmiana",
     "MaxValueNotification": "{{name}} musi być maksymalna {{max}}.",
-    "TotalItems": "Łącznie {{total}} pozycji"
+    "TotalItems": "Łącznie {{total}} pozycji",
+    "ExtendLoginSession": "Przedłużanie sesji logowania"
   },
   "credential": {
     "Permission": "Pozwolenie",
diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
index a430325dca..b465107f6f 100644
--- a/resources/i18n/pt-BR.json
+++ b/resources/i18n/pt-BR.json
@@ -526,11 +526,11 @@
     "General": "Geral",
     "Disabled": "Desativado",
     "NSelected": "Item(ns) {{contagem}} selecionado(s)",
-    "Extend": "Ampliar",
     "RemainingLoginSessionTime": "Tempo até ao encerramento automático da sessão",
     "Change": "Alterar",
     "MaxValueNotification": "{{nome}} deve ser o máximo {{max}}",
-    "TotalItems": "Total de itens {{total}}"
+    "TotalItems": "Total de itens {{total}}",
+    "ExtendLoginSession": "Prolongar uma sessão de início de sessão"
   },
   "credential": {
     "Permission": "Permissão",
diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
index d044f16a7f..355f792119 100644
--- a/resources/i18n/pt.json
+++ b/resources/i18n/pt.json
@@ -526,11 +526,11 @@
     "General": "Geral",
     "Disabled": "Desativado",
     "NSelected": "Item(ns) {{contagem}} selecionado(s)",
-    "Extend": "Ampliar",
     "RemainingLoginSessionTime": "Tempo até ao encerramento automático da sessão",
     "Change": "Alterar",
     "MaxValueNotification": "{{nome}} deve ser o máximo {{max}}",
-    "TotalItems": "Total de itens {{total}}"
+    "TotalItems": "Total de itens {{total}}",
+    "ExtendLoginSession": "Prolongar uma sessão de início de sessão"
   },
   "credential": {
     "Permission": "Permissão",
diff --git a/resources/i18n/ru.json b/resources/i18n/ru.json
index 0ca43ecbb4..f2b2772c69 100644
--- a/resources/i18n/ru.json
+++ b/resources/i18n/ru.json
@@ -526,11 +526,11 @@
     "General": "Общие сведения",
     "Disabled": "Инвалид",
     "NSelected": "Выбранный {{count}} элемент(ы)",
-    "Extend": "Продлевать",
     "RemainingLoginSessionTime": "Время до автоматического выхода из системы",
     "Change": "Изменить",
     "MaxValueNotification": "{{name}} должен быть максимальным {{max}}",
-    "TotalItems": "Всего {{total}} предметов"
+    "TotalItems": "Всего {{total}} предметов",
+    "ExtendLoginSession": "Продление сеанса входа в систему"
   },
   "credential": {
     "Permission": "Разрешение",
diff --git a/resources/i18n/th.json b/resources/i18n/th.json
index 0ab3c9e670..554ff11468 100644
--- a/resources/i18n/th.json
+++ b/resources/i18n/th.json
@@ -649,11 +649,11 @@
     "Session": "เซสชัน",
     "General": "ทั่วไป",
     "Disabled": "ปิดใช้งาน",
-    "Extend": "ขยาย",
     "RemainingLoginSessionTime": "เวลาจนกระทั่งออกจากระบบอัตโนมัติ",
     "Change": "เปลี่ยน",
     "MaxValueNotification": "{{name}} ต้องมีค่าสูงสุด {{max}}",
-    "TotalItems": "รวม {{total}} รายการ"
+    "TotalItems": "รวม {{total}} รายการ",
+    "ExtendLoginSession": "ขยายเซสชันการเข้าสู่ระบบ"
   },
   "credential": {
     "Permission": "สิทธิ์",
diff --git a/resources/i18n/tr.json b/resources/i18n/tr.json
index 1bdbd49955..a0400de72d 100644
--- a/resources/i18n/tr.json
+++ b/resources/i18n/tr.json
@@ -529,11 +529,11 @@
     "General": "Genel",
     "Disabled": "Engelli",
     "NSelected": "Seçilen {{count}} öğe(ler)",
-    "Extend": "Uzatmak",
     "RemainingLoginSessionTime": "Otomatik Çıkışa Kadar Geçen Süre",
     "Change": "Değişim",
     "MaxValueNotification": "{{name}} maksimum {{max}} olmalıdır",
-    "TotalItems": "Toplam {{toplam}} öğe"
+    "TotalItems": "Toplam {{toplam}} öğe",
+    "ExtendLoginSession": "Oturum açma oturumunu uzatma"
   },
   "credential": {
     "Permission": "izin",
diff --git a/resources/i18n/vi.json b/resources/i18n/vi.json
index eeb8819c17..bf22e8ce89 100644
--- a/resources/i18n/vi.json
+++ b/resources/i18n/vi.json
@@ -526,11 +526,11 @@
     "General": "Tổng quan",
     "Disabled": "Tàn tật",
     "NSelected": "Đã chọn {{count}} mục",
-    "Extend": "Mở rộng",
     "RemainingLoginSessionTime": "Thời gian cho đến khi tự động đăng xuất",
     "Change": "Thay đổi",
     "MaxValueNotification": "{{name}} phải tối đa {{max}}",
-    "TotalItems": "Tổng số {{total}} mặt hàng"
+    "TotalItems": "Tổng số {{total}} mặt hàng",
+    "ExtendLoginSession": "Gia hạn phiên đăng nhập"
   },
   "credential": {
     "Permission": "Sự cho phép",
diff --git a/resources/i18n/zh-CN.json b/resources/i18n/zh-CN.json
index 471cc20282..41bcd03bf3 100644
--- a/resources/i18n/zh-CN.json
+++ b/resources/i18n/zh-CN.json
@@ -526,11 +526,11 @@
     "General": "一般情况",
     "Disabled": "残疾",
     "NSelected": "已选择的 {{count}} 项目",
-    "Extend": "延长",
     "RemainingLoginSessionTime": "自动注销前的时间",
     "Change": "改变",
     "MaxValueNotification": "{{name}} 必须是最大值 {{max}}",
-    "TotalItems": "{{总计}}项目总数"
+    "TotalItems": "{{总计}}项目总数",
+    "ExtendLoginSession": "延长登录会话"
   },
   "credential": {
     "Permission": "允许",
diff --git a/resources/i18n/zh-TW.json b/resources/i18n/zh-TW.json
index 79d5821ed1..7fd0cbfddf 100644
--- a/resources/i18n/zh-TW.json
+++ b/resources/i18n/zh-TW.json
@@ -526,11 +526,11 @@
     "General": "一般情况",
     "Disabled": "残疾",
     "NSelected": "已选择的 {{count}} 项目",
-    "Extend": "延長",
     "RemainingLoginSessionTime": "自动注销前的时间",
     "Change": "改变",
     "MaxValueNotification": "{{name}} 必须是最大值 {{max}}",
-    "TotalItems": "{{总计}}项目总数"
+    "TotalItems": "{{总计}}项目总数",
+    "ExtendLoginSession": "延长登录会话"
   },
   "credential": {
     "Permission": "允許",
diff --git a/resources/theme.json b/resources/theme.json
index ad4851a698..252f4e58df 100644
--- a/resources/theme.json
+++ b/resources/theme.json
@@ -3,13 +3,9 @@
   "light" : {
     "token": {
       "fontFamily": "'Ubuntu', Roboto, sans-serif",
-      "colorPrimary": "#37B076",
-      "colorLink": "#37B076",
-      "colorLinkHover": "#71b98c",
-      "colorSuccess": "#37B076",
-      "colorBorder": "#DEE1E7",
-      "colorBorderSecondary": "#E1E1E2",
-      "colorWarning": "#f1a239"
+      "colorPrimary": "#FF7A00",
+      "colorLink": "#FF7A00",
+      "colorText": "#141414"
     },
     "components": {
       "Tag": {
@@ -19,16 +15,18 @@
         "headerBorderRadius": 0
       },
       "Layout": {
-        "lightSiderBg": "#F4F7FD",
-        "siderBg": "#2A2C30"
+        "lightSiderBg": "#FFF",
+        "siderBg": "#141414",
+        "headerBg": "#FF9729"
       }
     }
   },
   "dark": {
     "token": {
       "fontFamily": "'Ubuntu', Roboto, sans-serif",
-      "colorPrimary": "#25C2A0",
-      "colorLink": "#25C2A0"
+      "colorPrimary": "#DC6B03",
+      "colorLink": "#DC6B03",
+      "colorText": "#FFF"
     },
     "components": {
       "Tag": {
@@ -38,8 +36,9 @@
         "headerBorderRadius": 0
       },
       "Layout": {
-        "lightSiderBg": "#F4F7FD",
-        "siderBg": "#2A2C30"
+        "lightSiderBg": "#FFF",
+        "siderBg": "#141414",
+        "headerBg": "#E88A28"
       }
     }
   },