diff --git a/packages/compass-query-history/src/components/toolbar/toolbar.tsx b/packages/compass-query-history/src/components/toolbar/toolbar.tsx index 8257fe79ce9..4915c7c31a4 100644 --- a/packages/compass-query-history/src/components/toolbar/toolbar.tsx +++ b/packages/compass-query-history/src/components/toolbar/toolbar.tsx @@ -9,6 +9,8 @@ import { css, spacing, useId, + uiColors, + withTheme, } from '@mongodb-js/compass-components'; import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging'; @@ -19,6 +21,14 @@ const toolbarStyles = css({ justifyContent: 'space-between', }); +const titleStylesDark = css({ + color: uiColors.green.light2, +}); + +const titleStylesLight = css({ + color: uiColors.green.dark2, +}); + const toolbarActionStyles = css({ display: 'flex', flexDirection: 'column', @@ -41,15 +51,17 @@ type ToolbarProps = { showFavorites: () => void; collapse: () => void; }; // Query history actions are not currently typed. + darkMode?: boolean; onClose?: () => void; showing: 'recent' | 'favorites'; }; -const Toolbar: React.FunctionComponent = ({ +function UnthemedToolbar({ actions, + darkMode, showing, onClose, -}) => { +}: ToolbarProps): React.ReactElement { const onViewSwitch = useCallback( (label: 'recent' | 'favorites') => { if (label === 'recent') { @@ -78,7 +90,11 @@ const Toolbar: React.FunctionComponent = ({ return (
-