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/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -18,6 +18,24 @@ import { useDatabases } from "../../useDatabases";
 import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
+const themedTextFieldStyles = {
+  fieldGroup: {
+    width: 300,
+    backgroundColor: "var(--colorNeutralBackground1)",
+    borderColor: "var(--colorNeutralStroke1)",
+    selectors: {
+      ":hover": { borderColor: "var(--colorNeutralStroke1Hover)" },
+    },
+  },
+  field: {
+    color: "var(--colorNeutralForeground1)",
+    backgroundColor: "var(--colorNeutralBackground1)",
+  },
+  subComponentStyles: {
+    label: { root: { color: "var(--colorNeutralForeground1)" } },
+  },
+};
+
 export interface DeleteCollectionConfirmationPaneProps {
   refreshDatabases: () => Promise<void>;
 }
@@ -126,12 +144,14 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
         <div className="panelMainContent">
           <div className="confirmDeleteInput">
             <span className="mandatoryStar">* </span>
-            <Text variant="small">{confirmContainer}</Text>
+            <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
+              {confirmContainer}
+            </Text>
             <TextField
               id="confirmCollectionId"
               autoFocus
               value={inputCollectionName}
-              styles={{ fieldGroup: { width: 300 } }}
+              styles={themedTextFieldStyles}
               onChange={(event, newInput?: string) => {
                 setInputCollectionName(newInput);
               }}
@@ -141,15 +161,15 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
           </div>
           {shouldRecordFeedback() && (
             <div className="deleteCollectionFeedback">
-              <Text variant="small" block>
+              <Text variant="small" block style={{ color: "var(--colorNeutralForeground1)" }}>
                 {t(Keys.panes.deleteCollection.feedbackTitle)}
               </Text>
-              <Text variant="small" block>
+              <Text variant="small" block style={{ color: "var(--colorNeutralForeground1)" }}>
                 {t(Keys.panes.deleteCollection.feedbackReason, { collectionName })}
               </Text>
               <TextField
                 id="deleteCollectionFeedbackInput"
-                styles={{ fieldGroup: { width: 300 } }}
+                styles={themedTextFieldStyles}
                 multiline
                 value={deleteCollectionFeedback}
                 rows={3}