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/SplashScreen/SplashScreenButton.tsx

@@ -1,4 +1,5 @@
 import { Stack, Text } from "@fluentui/react";
+import { makeStyles } from "@fluentui/react-components";
 import React from "react";
 import { KeyCodes } from "../../Common/Constants";
 
@@ -10,6 +11,38 @@ interface SplashScreenButtonProps {
   imgSize?: number;
 }
 
+const useStyles = makeStyles({
+  button: {
+    border: "1px solid var(--colorNeutralStroke1)",
+    boxSizing: "border-box",
+    boxShadow: "var(--shadow4)",
+    borderRadius: "4px",
+    padding: "32px 16px",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+    width: "100%",
+    minHeight: "150px",
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: "var(--colorNeutralBackground1Hover)",
+    },
+  },
+  content: {
+    marginLeft: "16px",
+    textAlign: "left",
+  },
+  title: {
+    fontSize: "18px",
+    fontWeight: "600",
+    color: "var(--colorNeutralForeground1)",
+    marginBottom: "8px",
+  },
+  description: {
+    fontSize: "13px",
+    color: "var(--colorNeutralForeground2)",
+  },
+});
+
 export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
   imgSrc,
   title,
@@ -17,19 +50,12 @@ export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
   onClick,
   imgSize,
 }: SplashScreenButtonProps): JSX.Element => {
+  const styles = useStyles();
+
   return (
     <Stack
       horizontal
-      style={{
-        border: "1px solid #949494",
-        boxSizing: "border-box",
-        boxShadow: "0 4px 4px rgba(0, 0, 0, 0.25)",
-        borderRadius: 4,
-        padding: "32px 16px",
-        backgroundColor: "#ffffff",
-        width: "100%",
-        minHeight: 150,
-      }}
+      className={styles.button}
       onClick={onClick}
       onKeyPress={(event: React.KeyboardEvent) => {
         if (event.charCode === KeyCodes.Space || event.charCode === KeyCodes.Enter) {
@@ -43,9 +69,9 @@ export const SplashScreenButton: React.FC<SplashScreenButtonProps> = ({
       <div>
         <img src={imgSrc} alt={title} aria-hidden="true" {...(imgSize ? { height: imgSize, width: imgSize } : {})} />
       </div>
-      <Stack style={{ marginLeft: 16 }}>
-        <Text style={{ fontSize: 18, fontWeight: 600 }}>{title}</Text>
-        <Text style={{ fontSize: 13 }}>{description}</Text>
+      <Stack className={styles.content}>
+        <Text className={styles.title}>{title}</Text>
+        <Text className={styles.description}>{description}</Text>
       </Stack>
     </Stack>
   );