diff --git a/packages/console/src/assets/images/cloud-logo.svg b/packages/console/src/assets/images/cloud-logo.svg new file mode 100644 index 000000000..5666bc519 --- /dev/null +++ b/packages/console/src/assets/images/cloud-logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/console/src/containers/AppContent/components/Topbar/index.module.scss b/packages/console/src/containers/AppContent/components/Topbar/index.module.scss index 6e89e14cb..cc1d44f95 100644 --- a/packages/console/src/containers/AppContent/components/Topbar/index.module.scss +++ b/packages/console/src/containers/AppContent/components/Topbar/index.module.scss @@ -8,7 +8,7 @@ align-items: center; .logo { - width: 94px; + width: auto; height: 30px; color: var(--color-text); } diff --git a/packages/console/src/containers/AppContent/components/Topbar/index.tsx b/packages/console/src/containers/AppContent/components/Topbar/index.tsx index b29d2056a..c98d07577 100644 --- a/packages/console/src/containers/AppContent/components/Topbar/index.tsx +++ b/packages/console/src/containers/AppContent/components/Topbar/index.tsx @@ -1,6 +1,7 @@ import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; +import CloudLogo from '@/assets/images/cloud-logo.svg'; import Logo from '@/assets/images/logo.svg'; import Spacer from '@/components/Spacer'; import { isCloud } from '@/consts/cloud'; @@ -11,26 +12,26 @@ import UserInfo from '../UserInfo'; import * as styles from './index.module.scss'; type Props = { - isLogoOnly?: boolean; className?: string; }; -const Topbar = ({ isLogoOnly = false, className }: Props) => { +const Topbar = ({ className }: Props) => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const LogtoLogo = isCloud ? CloudLogo : Logo; return (
- -
-
{t('title')}
- - {!isLogoOnly && ( + + {!isCloud && ( <> - - {isCloud && } - +
+
{t('title')}
)} + + + {isCloud && } +
); }; diff --git a/packages/console/src/onboarding/components/Topbar/index.module.scss b/packages/console/src/onboarding/components/Topbar/index.module.scss new file mode 100644 index 000000000..2012be4e1 --- /dev/null +++ b/packages/console/src/onboarding/components/Topbar/index.module.scss @@ -0,0 +1,15 @@ +@use '@/scss/underscore' as _; + +.topbar { + flex: 0 0 64px; + width: 100%; + padding: 0 _.unit(6); + display: flex; + align-items: center; + + .logo { + width: auto; + height: 30px; + color: var(--color-text); + } +} diff --git a/packages/console/src/onboarding/components/Topbar/index.tsx b/packages/console/src/onboarding/components/Topbar/index.tsx new file mode 100644 index 000000000..84cac5d41 --- /dev/null +++ b/packages/console/src/onboarding/components/Topbar/index.tsx @@ -0,0 +1,11 @@ +import CloudLogo from '@/assets/images/cloud-logo.svg'; + +import * as styles from './index.module.scss'; + +const Topbar = () => ( +
+ +
+); + +export default Topbar; diff --git a/packages/console/src/onboarding/containers/AppContent/index.tsx b/packages/console/src/onboarding/containers/AppContent/index.tsx index a6f357abc..767f1a678 100644 --- a/packages/console/src/onboarding/containers/AppContent/index.tsx +++ b/packages/console/src/onboarding/containers/AppContent/index.tsx @@ -1,12 +1,12 @@ import { Outlet } from 'react-router-dom'; -import Topbar from '@/containers/AppContent/components/Topbar'; +import Topbar from '@/onboarding/components/Topbar'; import * as styles from './index.module.scss'; const AppContent = () => (
- +