Dark theme for Explorer (#2185)

* First dark theme commits for command bar

* Updated theme on sidebar

* Updated tabs, sidebar, splash screen

* settings theme changes

* Dark theme applied to Monaco editor

* Dark theme to stored procedures

* Fixed sidebar scroll

* Updated scroll issue in sidebar

* Command bar items fixed

* Fixed lint errors

* fixed lint errors

* settings side panel fixed

* Second last iteration for css

* Fixed all the issues of css

* Updated the theme icon for now on DE to change the theme from portal/DE itself

* Formatting issue resolved

* Remove CloudShellTerminalComponent changes - revert to master version

* Fixed test issue

* Fixed formatting issue

* Fix tests: update snapshots and revert xterm imports for compatibility

* Fix xterm imports in CloudShellTerminalComponent to use @xterm packages

* Fix Cloud Shell component imports for compatibility

* Update test snapshots

* Fix xterm package consistency across all CloudShell components

* Fix TypeScript compilation errors in CloudShell components and query Documents

- Standardized xterm package imports across CloudShell components to use legacy 'xterm' package
- Fixed Terminal type compatibility issues in CommonUtils.tsx
- Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations
- Applied code formatting to ensure consistency

* Update failing snapshot tests

- Updated TreeNodeComponent snapshot tests for loading states
- Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000)
- All snapshot tests now pass

* Fixed test issue

* Fixed test issue

* Updated the buttons for theme

* Updated the Theme changes based on portal theme changes

* Updated review comments

* Updated the duplicate code and fixed the fabric react error

* Few places styling added and resolving few comments

* Fixed errors

* Fixed comments

* Fixed comments

* Fixed comments

* Fixed full text policy issue for mongoru accounts

* Resolved comments for class Name and few others

* Added css for homepage in ru accounts

* Final commit with all the feedback issues resolved

* Lint error resolved

* Updated the review comments and few Ui issues

* Resolved review comments and changed header bg and active state color

* Moved svg code to different file and imported

* css fixed for the hpome page boxed for ru account

* Lint errors

* Fixed boxes issue in ru accounts

* Handled the initial theme from the portal

* Updated snap

* Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests

* Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation

* Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component

---------

Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com>
Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>

src/Explorer/Sidebar.tsx

@@ -24,7 +24,6 @@ import {
 } from "Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanel";
 import { Tabs } from "Explorer/Tabs/Tabs";
 import { CosmosFluentProvider, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
-import { ResourceTree } from "Explorer/Tree/ResourceTree";
 import { useDatabases } from "Explorer/useDatabases";
 import { KeyboardAction, KeyboardActionGroup, KeyboardActionHandler, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { isFabric, isFabricMirrored, isFabricNative, isFabricNativeReadOnly } from "Platform/Fabric/FabricUtil";
@@ -33,9 +32,11 @@ import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils";
 import { conditionalClass } from "Utils/StyleUtils";
 import { Allotment, AllotmentHandle } from "allotment";
 import { useSidePanel } from "hooks/useSidePanel";
+import { useTheme } from "hooks/useTheme";
 import useZoomLevel from "hooks/useZoomLevel";
 import { debounce } from "lodash";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { ResourceTree } from "./Tree/ResourceTree";
 
 const useSidebarStyles = makeStyles({
   sidebar: {
@@ -43,27 +44,55 @@ const useSidebarStyles = makeStyles({
   },
   sidebarContainer: {
     height: "100%",
+    width: "100%",
+    borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
+    transition: "all 0.2s ease-in-out",
+    display: "flex",
+    flexDirection: "column",
     backgroundColor: tokens.colorNeutralBackground1,
+    position: "relative",
   },
   expandedContent: {
     display: "grid",
     height: "100%",
+    width: "100%",
     gridTemplateRows: `calc(${tokens.layoutRowHeight} * 2) 1fr`,
   },
   floatingControlsContainer: {
-    position: "relative",
+    position: "absolute",
+    top: 0,
+    right: 0,
     zIndex: 1000,
-    width: "100%",
+    width: "auto",
+    padding: tokens.spacingHorizontalS,
   },
   floatingControls: {
     display: "flex",
     flexDirection: "row",
-    position: "absolute",
-    right: 0,
+    gap: tokens.spacingHorizontalXS,
   },
   floatingControlButton: {
     ...shorthands.border("none"),
     backgroundColor: "transparent",
+    color: tokens.colorNeutralForeground1,
+    cursor: "pointer",
+    padding: tokens.spacingHorizontalXS,
+    borderRadius: tokens.borderRadiusMedium,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      color: tokens.colorNeutralForeground1,
+    },
+    ":active": {
+      backgroundColor: tokens.colorNeutralBackground1Pressed,
+      color: tokens.colorNeutralForeground1,
+    },
+    ":disabled": {
+      color: tokens.colorNeutralForegroundDisabled,
+      cursor: "not-allowed",
+    },
   },
   globalCommandsContainer: {
     display: "grid",
@@ -71,7 +100,9 @@ const useSidebarStyles = makeStyles({
     justifyItems: "center",
     width: "100%",
     containerType: "size", // Use this container for "@container" queries below this.
+    padding: tokens.spacingHorizontalS,
     ...cosmosShorthands.borderBottom(),
+    backgroundColor: tokens.colorNeutralBackground1,
   },
   loadingProgressBar: {
     // Float above the content
@@ -84,7 +115,7 @@ const useSidebarStyles = makeStyles({
     animationDuration: "3s",
     animationName: {
       "0%": {
-        opacity: ".2", // matches indeterminate bar width
+        opacity: ".2",
       },
       "50%": {
         opacity: "1",
@@ -294,6 +325,9 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   const [expandedSize, setExpandedSize] = React.useState(300);
   const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo";
   const allotment = useRef<AllotmentHandle>(null);
+  // isDarkMode is used for styling in other parts of the component
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { isDarkMode } = useTheme();
   const isZoomed = useZoomLevel();
 
   const expand = useCallback(() => {