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 (
{subtitle}
+ {title} + {subtitle}