diff --git a/RELEASE.md b/RELEASE.md
index a1dd9159f..48e1dba5e 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -25,6 +25,7 @@ Please follow the established format:
- Refactor `node-list-tree` component. (#2193)
- Fix 404 error when accessing the experiment tracking page on the demo site (#2179)
- Add check for port availability before starting Kedro Viz to prevent unintended browser redirects when the port is already in use (#2176)
+- Update kedro-viz lite banner icon and message. (#2196)
- Include Kedro Viz version in telemetry.. (#2194)
diff --git a/cypress/tests/ui/flowchart/banners.cy.js b/cypress/tests/ui/flowchart/banners.cy.js
index bdeb20bb4..b7a66b4f5 100644
--- a/cypress/tests/ui/flowchart/banners.cy.js
+++ b/cypress/tests/ui/flowchart/banners.cy.js
@@ -17,8 +17,8 @@ describe('Banners in Kedro-Viz', () => {
// Assert after action
cy.get('[data-test="flowchart-wrapper--lite-banner"]').should('exist');
- cy.get('.banner-message-body').should('contains.text', 'please install the missing Kedro project dependencies')
- cy.get('.banner-message-title').should('contains.text', 'Missing dependencies')
+ cy.get('.banner-message-body').should('contains.text', 'Some features might be disabled in --lite mode due to missing dependencies')
+ cy.get('.banner-message-title').should('contains.text', 'Lite mode enabled')
// Test Learn more link
cy.get(".banner a")
diff --git a/src/components/flowchart-wrapper/flowchart-wrapper.js b/src/components/flowchart-wrapper/flowchart-wrapper.js
index 73fec5327..f6f5bfc16 100644
--- a/src/components/flowchart-wrapper/flowchart-wrapper.js
+++ b/src/components/flowchart-wrapper/flowchart-wrapper.js
@@ -19,7 +19,7 @@ import ExportModal from '../export-modal';
import FlowChart from '../flowchart';
import PipelineWarning from '../pipeline-warning';
import LoadingIcon from '../icons/loading';
-import AlertIcon from '../icons/alert';
+import InfoBannerIcon from '../icons/info-banner';
import MetaData from '../metadata';
import MetadataModal from '../metadata-modal';
import ShareableUrlMetadata from '../shareable-url-modal/shareable-url-metadata';
@@ -342,7 +342,7 @@ export const FlowChartWrapper = ({
{displayMetadataPanel && }
{showBanner(BANNER_KEYS.LITE) && (
}
+ icon={}
message={{
title: BANNER_METADATA.liteModeWarning.title,
body: BANNER_METADATA.liteModeWarning.body,
diff --git a/src/components/icons/info-banner.js b/src/components/icons/info-banner.js
new file mode 100644
index 000000000..d0eb20b2d
--- /dev/null
+++ b/src/components/icons/info-banner.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const InfoBannerIcon = ({ className }) => (
+
+);
+
+export default InfoBannerIcon;
diff --git a/src/config.js b/src/config.js
index daa602385..492eb466e 100644
--- a/src/config.js
+++ b/src/config.js
@@ -214,8 +214,8 @@ export const NODE_TYPES = {
export const BANNER_METADATA = {
liteModeWarning: {
- title: 'Missing dependencies',
- body: 'For the best experience with full functionality, please install the missing Kedro project dependencies.',
+ title: 'Lite mode enabled',
+ body: 'Some features might be disabled in --lite mode due to missing dependencies. You can find more information about lite mode in our docs.',
docsLink:
'https://docs.kedro.org/projects/kedro-viz/en/latest/kedro-viz_visualisation.html#visualise-a-kedro-project-without-installing-project-dependencies',
},