diff --git a/packages/compass-data-modeling/src/components/icons/insight.tsx b/packages/compass-data-modeling/src/components/icons/insight.tsx deleted file mode 100644 index 6da69cbcf22..00000000000 --- a/packages/compass-data-modeling/src/components/icons/insight.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useMemo } from 'react'; -import { palette, useDarkMode } from '@mongodb-js/compass-components'; - -const Insight: React.FunctionComponent = () => { - const darkMode = useDarkMode(); - const strokeColor = useMemo( - () => (darkMode ? palette.white : palette.black), - [darkMode] - ); - // Green color that doesn't change with dark mode - const fillColor = palette.green.base; - - return ( - - - - - - ); -}; - -export default Insight; diff --git a/packages/compass-data-modeling/src/components/saved-diagrams-list.spec.tsx b/packages/compass-data-modeling/src/components/saved-diagrams-list.spec.tsx index 56b7e49203c..2ac39169e8f 100644 --- a/packages/compass-data-modeling/src/components/saved-diagrams-list.spec.tsx +++ b/packages/compass-data-modeling/src/components/saved-diagrams-list.spec.tsx @@ -139,9 +139,7 @@ describe('SavedDiagramsList', function () { }); it('shows the empty state', function () { - expect( - screen.getByText('Design, Visualize, and Evolve your Data Model') - ).to.be.visible; + expect(screen.getByText('Visualize your Data Model')).to.be.visible; }); it('allows to start adding diagrams', function () { diff --git a/packages/compass-data-modeling/src/components/saved-diagrams-list.tsx b/packages/compass-data-modeling/src/components/saved-diagrams-list.tsx index 5431f3a3b31..821c3bcd126 100644 --- a/packages/compass-data-modeling/src/components/saved-diagrams-list.tsx +++ b/packages/compass-data-modeling/src/components/saved-diagrams-list.tsx @@ -11,6 +11,7 @@ import { VirtualGrid, Link, WorkspaceContainer, + Body, } from '@mongodb-js/compass-components'; import { useDataModelSavedItems } from '../provider'; import { @@ -23,7 +24,6 @@ import type { MongoDBDataModelDescription } from '../services/data-model-storage import CollaborateIcon from './icons/collaborate'; import SchemaVisualizationIcon from './icons/schema-visualization'; import FlexibilityIcon from './icons/flexibility'; -import InsightIcon from './icons/insight'; import { CARD_HEIGHT, CARD_WIDTH, DiagramCard } from './diagram-card'; import { DiagramListToolbar } from './diagram-list-toolbar'; import toNS from 'mongodb-ns'; @@ -69,27 +69,35 @@ const subTitleStyles = css({ const featuresListStyles = css({ display: 'flex', + flexDirection: 'row', justifyContent: 'center', + alignItems: 'flex-start', gap: spacing[600], marginTop: spacing[400], + marginBottom: spacing[400], +}); + +const featureItemTitleStyles = css({ + fontWeight: 'bold', }); const featureItemStyles = css({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', + display: 'grid', + gridTemplateRows: `${spacing[1800]}px 1fr 1fr`, + justifyItems: 'center', gap: spacing[400], + width: spacing[1400] * 3, }); -type Feature = 'visualization' | 'collaboration' | 'interactive' | 'insights'; +type Feature = 'visualization' | 'collaboration' | 'interactive'; const featureDescription: Record< Feature, { icon: React.FunctionComponent; title: string; subtitle: string } > = { visualization: { icon: SchemaVisualizationIcon, - title: 'Quick Visualization & Refactoring', - subtitle: 'Instantly visualize and refactor data models', + title: 'Quick Visualization', + subtitle: 'Instantly visualize your data models', }, collaboration: { icon: CollaborateIcon, @@ -101,11 +109,6 @@ const featureDescription: Record< title: 'Interactive Diagram Analysis', subtitle: 'Explore and annotate interactive diagrams', }, - insights: { - icon: InsightIcon, - title: 'Performance Insights & Optimization', - subtitle: 'Uncover performance insights & best practices', - }, }; const FeaturesList: React.FunctionComponent<{ features: Feature[] }> = ({ @@ -118,8 +121,8 @@ const FeaturesList: React.FunctionComponent<{ features: Feature[] }> = ({ return (
-

{title}

-

{subtitle}

+ {title} + {subtitle}
); })} @@ -127,6 +130,42 @@ const FeaturesList: React.FunctionComponent<{ features: Feature[] }> = ({ ); }; +const DiagramListEmptyContent: React.FunctionComponent<{ + onCreateDiagramClick: () => void; +}> = ({ onCreateDiagramClick }) => { + return ( + + + Your data model is the foundation of application performance. As + applications evolve, so must your schema—intelligently and + strategically. Minimize complexity, prevent performance bottlenecks, + and keep your development agile. + + + Data modeling documentation + + + } + subTitleClassName={subTitleStyles} + callToAction={ + + } + > + + ); +}; + export const SavedDiagramsList: React.FunctionComponent<{ onCreateDiagramClick: () => void; onOpenDiagramClick: (diagram: MongoDBDataModelDescription) => void; @@ -173,40 +212,7 @@ export const SavedDiagramsList: React.FunctionComponent<{ } if (items.length === 0) { return ( - - - Your data model is the foundation of application performance. As - applications evolve, so must your schema—intelligently and - strategically. Minimize complexity, prevent performance - bottlenecks, and keep your development agile. - - - Data Modeling Documentation - - - } - subTitleClassName={subTitleStyles} - callToAction={ - - } - > - + ); }