From 6bdb5bc8eb54d6b3938e794c00fc2bed742246ce Mon Sep 17 00:00:00 2001 From: Walter Tan Date: Wed, 28 May 2025 13:20:13 -0400 Subject: [PATCH 1/5] Add dark mode styles for covered queries --- .../create-index-form/index-flow-section.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx index 500461c2876..49d689abba2 100644 --- a/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx +++ b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx @@ -11,6 +11,7 @@ import { fontFamilies, InfoSprinkle, Tooltip, + useDarkMode, } from '@mongodb-js/compass-components'; import React, { useState, useCallback, useEffect } from 'react'; import { @@ -52,12 +53,18 @@ const coveredQueriesHeaderContainerStyles = css({ const coveredQueriesCalloutStyles = css({ border: `1px solid ${palette.gray.light2}`, - background: palette.gray.light3, borderRadius: '12px', padding: spacing[600], marginBottom: spacing[600], }); +const lightModeCoveredQueriesCalloutStyles = css({ + background: palette.gray.light3, +}); + +const darkModeCoveredQueriesCalloutStyles = css({ + background: palette.black, +}); const buttonContainerStyles = css({ display: 'flex', justifyContent: 'right', @@ -171,6 +178,7 @@ const IndexFlowSection = ({ onErrorEncountered, onErrorCleared, }: IndexFlowSectionProps) => { + const darkMode = useDarkMode(); const [isCodeEquivalentToggleChecked, setIsCodeEquivalentToggleChecked] = useState(false); const [hasFieldChanges, setHasFieldChanges] = useState(false); @@ -321,7 +329,14 @@ const IndexFlowSection = ({ -
+
{/* Covered Queries */} Date: Wed, 28 May 2025 13:20:49 -0400 Subject: [PATCH 2/5] Add light mode style to code editor --- .../create-index-form/query-flow-section.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx index 7e1ea1f2ace..e0163f223b7 100644 --- a/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx +++ b/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx @@ -6,6 +6,7 @@ import { cx, useFocusRing, ParagraphSkeleton, + useDarkMode, } from '@mongodb-js/compass-components'; import type { Document } from 'mongodb'; import React, { useMemo, useCallback } from 'react'; @@ -62,7 +63,6 @@ const codeEditorContainerStyles = css({ const codeEditorStyles = css({ borderRadius: editorContainerRadius, '& .cm-editor': { - background: `${palette.white} !important`, borderRadius: editorContainerRadius, }, '& .cm-content': { @@ -71,6 +71,12 @@ const codeEditorStyles = css({ }, }); +const lightModeCodeEditorStyles = css({ + '& .cm-editor': { + background: `${palette.white} !important`, + }, +}); + const indexSuggestionsLoaderStyles = css({ marginBottom: spacing[600], padding: spacing[600], @@ -111,6 +117,7 @@ const QueryFlowSection = ({ initialQuery: Document | null; }) => { const track = useTelemetry(); + const darkMode = useDarkMode(); const [inputQuery, setInputQuery] = React.useState( initialQuery ? JSON.stringify(initialQuery, null, 2) : '' ); @@ -205,7 +212,10 @@ const QueryFlowSection = ({ onChangeText={(text) => handleQueryInputChange(text)} placeholder="Type a query: { field: 'value' }" completer={completer} - className={codeEditorStyles} + className={cx( + codeEditorStyles, + !darkMode && lightModeCodeEditorStyles + )} />
From dcbf132f0e1a6751094365d02e24ecfc1221ff13 Mon Sep 17 00:00:00 2001 From: Walter Tan Date: Tue, 3 Jun 2025 13:04:31 -0400 Subject: [PATCH 3/5] Add light mode styles for skeleton loader --- .../create-index-form/query-flow-section.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx index e0163f223b7..9e3be232b4a 100644 --- a/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx +++ b/packages/compass-indexes/src/components/create-index-form/query-flow-section.tsx @@ -80,9 +80,12 @@ const lightModeCodeEditorStyles = css({ const indexSuggestionsLoaderStyles = css({ marginBottom: spacing[600], padding: spacing[600], + borderRadius: editorContainerRadius, +}); + +const indexSuggestionsLoaderLightStyles = css({ background: palette.gray.light3, border: `1px solid ${palette.gray.light2}`, - borderRadius: editorContainerRadius, }); const insightStyles = css({ @@ -240,7 +243,10 @@ const QueryFlowSection = ({ {isFetchingIndexSuggestions ? ( ) : ( indexSuggestions && ( From b5b278c4f0f06f7c000e50447675834a6f579eb0 Mon Sep 17 00:00:00 2001 From: Walter Tan Date: Tue, 3 Jun 2025 18:24:13 -0400 Subject: [PATCH 4/5] Fix subtitle color --- .../create-index-modal/create-index-modal-header.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.tsx b/packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.tsx index 16472de7b70..498d6c62721 100644 --- a/packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.tsx +++ b/packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.tsx @@ -5,6 +5,7 @@ import { css, palette, Link, + useDarkMode, } from '@mongodb-js/compass-components'; import React from 'react'; @@ -13,18 +14,23 @@ const headerStyle = css({ paddingBottom: 0, }); -const subtitleStyle = css({ +const subtitleLightStyle = css({ color: palette.gray.dark1, }); +const subtitleDarkStyle = css({ + color: palette.gray.light1, +}); + const CreateIndexModalHeader = () => { + const darkMode = useDarkMode(); return (

Create Index

The best indexes for your application should consider a number of factors, such as your data model, and the queries you use most often. To From f0c1b87a07d6331393e8a33b5cd5f905c9b0a511 Mon Sep 17 00:00:00 2001 From: Walter Tan Date: Tue, 3 Jun 2025 18:25:54 -0400 Subject: [PATCH 5/5] Fix border styling --- .../create-index-form/index-flow-section.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx index 49d689abba2..3c4985cbb89 100644 --- a/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx +++ b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx @@ -42,6 +42,10 @@ const indexFieldsCalloutStyles = css({ marginBottom: spacing[600], }); +const indexFieldsCalloutDarkStyles = css({ + border: `1px solid ${palette.gray.base}`, +}); + const codeEquivalentToggleLabelStyles = css({ marginRight: spacing[100], fontWeight: 'normal', @@ -52,17 +56,18 @@ const coveredQueriesHeaderContainerStyles = css({ }); const coveredQueriesCalloutStyles = css({ - border: `1px solid ${palette.gray.light2}`, borderRadius: '12px', padding: spacing[600], marginBottom: spacing[600], }); const lightModeCoveredQueriesCalloutStyles = css({ + border: `1px solid ${palette.gray.light2}`, background: palette.gray.light3, }); const darkModeCoveredQueriesCalloutStyles = css({ + border: `1px solid ${palette.gray.dark2}`, background: palette.black, }); const buttonContainerStyles = css({ @@ -274,7 +279,12 @@ const IndexFlowSection = ({ />
-
+
{isCodeEquivalentToggleChecked ? (