diff --git a/packages/console/src/assets/images/free-plan-notification-image.svg b/packages/console/src/assets/images/free-plan-notification-image.svg deleted file mode 100644 index a0cd5b243..000000000 --- a/packages/console/src/assets/images/free-plan-notification-image.svg +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/console/src/pages/GetStarted/FreePlanNotification/index.tsx b/packages/console/src/pages/GetStarted/FreePlanNotification/index.tsx index dec4b80cb..e898a7cd4 100644 --- a/packages/console/src/pages/GetStarted/FreePlanNotification/index.tsx +++ b/packages/console/src/pages/GetStarted/FreePlanNotification/index.tsx @@ -1,14 +1,16 @@ +import { Theme } from '@logto/schemas'; import { useContext } from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import FreePlanNotificationImage from '@/assets/images/free-plan-notification-image.svg'; +import LandingImageDark from '@/assets/images/tenant-landing-page-dark.svg'; +import LandingImage from '@/assets/images/tenant-landing-page.svg'; import { isCloud } from '@/consts/env'; import { subscriptionPage } from '@/consts/pages'; import { ReservedPlanId } from '@/consts/subscriptions'; import { TenantsContext } from '@/contexts/TenantsProvider'; import TextLink from '@/ds-components/TextLink'; import useSubscription from '@/hooks/use-subscription'; -import useTenantPathname from '@/hooks/use-tenant-pathname'; +import useTheme from '@/hooks/use-theme'; import * as styles from './index.module.scss'; @@ -16,8 +18,10 @@ function FreePlanNotification() { const { currentTenantId } = useContext(TenantsContext); const { data: currentSubscription, error } = useSubscription(currentTenantId); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.get_started' }); - const { navigate } = useTenantPathname(); const isLoadingSubscription = !currentSubscription && !error; + const theme = useTheme(); + + const Image = theme === Theme.Light ? LandingImage : LandingImageDark; if ( !isCloud || @@ -30,7 +34,7 @@ function FreePlanNotification() { return (
- +
{t('title')}