Filtering DBs and option for pin(fav)(#2301)

* implemented search bar

* formatting corrected

* added pin(fav) and sorting in local in sidebar tree of DE

* reverted changes

* fixed lint and formatting issues

* fixed lint and formatting issues

* theme toggle button is disabled if in portal

* fixed lint error

* added link on disabled theme toggle button

* updated the variable for pin icon

* removed en-us from url

---------

Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>
Co-authored-by: sakshigupta12feb <sakshigupta12feb1@gmail.com>
Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>

src/Main.tsx

@@ -82,6 +82,32 @@ const useStyles = makeStyles({
     backgroundColor: "var(--colorNeutralBackground1)",
     color: "var(--colorNeutralForeground1)",
   },
+  splashContainer: {
+    zIndex: 5,
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "var(--colorNeutralBackground1)",
+    opacity: "0.7",
+  },
+  splashContent: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    textAlign: "center",
+    justifyContent: "center",
+  },
+  splashTitle: {
+    fontSize: "13px",
+    color: "var(--colorNeutralForeground1)",
+    margin: "6px 6px 12px 6px",
+  },
+  splashText: {
+    marginTop: "12px",
+    color: "var(--colorNeutralForeground2)",
+  },
 });
 
 const App = (): JSX.Element => {
@@ -234,15 +260,15 @@ function LoadingExplorer(): JSX.Element {
   const styles = useStyles();
   return (
     <div className={styles.root}>
-      <div className="splashLoaderContainer">
-        <div className="splashLoaderContentContainer">
+      <div className={styles.splashContainer}>
+        <div className={styles.splashContent}>
           <p className="connectExplorerContent">
             <img src={hdeConnectImage} alt="Azure Cosmos DB" />
           </p>
-          <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
+          <p className={styles.splashTitle} id="explorerLoadingStatusTitle">
             Welcome to Azure Cosmos DB
           </p>
-          <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
+          <p className={styles.splashText} id="explorerLoadingStatusText" role="alert">
             Connecting...
           </p>
         </div>