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..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 @@ -11,6 +11,7 @@ import { fontFamilies, InfoSprinkle, Tooltip, + useDarkMode, } from '@mongodb-js/compass-components'; import React, { useState, useCallback, useEffect } from 'react'; import { @@ -41,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', @@ -51,13 +56,20 @@ 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({ + 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({ display: 'flex', justifyContent: 'right', @@ -171,6 +183,7 @@ const IndexFlowSection = ({ onErrorEncountered, onErrorCleared, }: IndexFlowSectionProps) => { + const darkMode = useDarkMode(); const [isCodeEquivalentToggleChecked, setIsCodeEquivalentToggleChecked] = useState(false); const [hasFieldChanges, setHasFieldChanges] = useState(false); @@ -266,7 +279,12 @@ const IndexFlowSection = ({ /> -
+
{isCodeEquivalentToggleChecked ? (
-
+
{/* Covered Queries */} { const track = useTelemetry(); + const darkMode = useDarkMode(); const [inputQuery, setInputQuery] = React.useState( initialQuery ? JSON.stringify(initialQuery, null, 2) : '' ); @@ -205,7 +215,10 @@ const QueryFlowSection = ({ onChangeText={(text) => handleQueryInputChange(text)} placeholder="Type a query: { field: 'value' }" completer={completer} - className={codeEditorStyles} + className={cx( + codeEditorStyles, + !darkMode && lightModeCodeEditorStyles + )} />
@@ -230,7 +243,10 @@ const QueryFlowSection = ({ {isFetchingIndexSuggestions ? ( ) : ( indexSuggestions && ( 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