Add sharedThroughput db tests

DataExplorer.nuspec

@@ -19,6 +19,6 @@
     </frameworkAssemblies>
   </metadata>
   <files>
-    <file src="**\*" exclude="obj\**\*" target="content"/>
+    <file src="**\*" target="content"/>
   </files>
 </package>

images/DocumentIcon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
-  <path d="M4 4c0-1.1.9-2 2-2h3.59c.4 0 .78.16 1.06.44l3.91 3.91c.28.28.44.67.44 1.06V14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 9 6.5V3H6Zm4 .2v3.3c0 .28.22.5.5.5h3.3L10 3.2ZM17 9a1 1 0 0 0-1-1v6a3 3 0 0 1-3 3H6a1 1 0 0 0 1 1h6.06A3.94 3.94 0 0 0 17 14.06V9Z" />
-</svg>

images/MoonIcon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M7.85032 3.0153C10.4276 3.21621 12.4563 5.37119 12.4563 8C12.4563 10.7614 10.2177 13 7.45629 13C5.70158 13 4.15722 12.0961 3.26465 10.7271C4.66791 10.3479 6.58077 9.42526 7.42438 7.17555C7.97709 5.70162 8.00857 4.23763 7.85032 3.0153ZM13.4563 8C13.4563 4.68629 10.77 2 7.45629 2C7.38577 2 7.31552 2.00122 7.24555 2.00364C7.09984 2.00867 6.96358 2.07706 6.87247 2.19089C6.78136 2.30471 6.74447 2.45263 6.77147 2.59591C7.00024 3.81021 7.05064 5.32413 6.48805 6.82444C5.68804 8.95787 3.68609 9.66359 2.41062 9.89533C2.25698 9.92325 2.1252 10.0213 2.05438 10.1605C1.98356 10.2997 1.98182 10.4639 2.04969 10.6046C3.01873 12.6128 5.07502 14 7.45629 14C10.77 14 13.4563 11.3137 13.4563 8Z" fill="#0078d4" />
-</svg>

images/SunIcon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8 1.33C8.276 1.33 8.5 1.554 8.5 1.83V2.83C8.5 3.106 8.276 3.33 8 3.33C7.724 3.33 7.5 3.106 7.5 2.83V1.83C7.5 1.554 7.724 1.33 8 1.33ZM8 11.33C9.841 11.33 11.33 9.841 11.33 8C11.33 6.159 9.841 4.67 8 4.67C6.159 4.67 4.67 6.159 4.67 8C4.67 9.841 6.159 11.33 8 11.33ZM8 10.33C6.711 10.33 5.67 9.289 5.67 8C5.67 6.711 6.711 5.67 8 5.67C9.289 5.67 10.33 6.711 10.33 8C10.33 9.289 9.289 10.33 8 10.33ZM14.17 8.5C14.446 8.5 14.67 8.276 14.67 8C14.67 7.724 14.446 7.5 14.17 7.5H13.17C12.894 7.5 12.67 7.724 12.67 8C12.67 8.276 12.894 8.5 13.17 8.5H14.17ZM8 12.67C8.276 12.67 8.5 12.894 8.5 13.17V14.17C8.5 14.446 8.276 14.67 8 14.67C7.724 14.67 7.5 14.446 7.5 14.17V13.17C7.5 12.894 7.724 12.67 8 12.67ZM2.83 8.5C3.106 8.5 3.33 8.276 3.33 8C3.33 7.724 3.106 7.5 2.83 7.5H1.83C1.554 7.5 1.33 7.724 1.33 8C1.33 8.276 1.554 8.5 1.83 8.5H2.83ZM2.813 2.813C3.009 2.617 3.325 2.617 3.521 2.813L4.521 3.813C4.717 4.009 4.717 4.325 4.521 4.521C4.325 4.717 4.009 4.717 3.813 4.521L2.813 3.521C2.617 3.325 2.617 3.009 2.813 2.813ZM3.521 13.187C3.325 13.383 3.009 13.383 2.813 13.187C2.617 12.991 2.617 12.675 2.813 12.479L3.813 11.479C4.009 11.283 4.325 11.283 4.521 11.479C4.717 11.675 4.717 11.991 4.521 12.187L3.521 13.187ZM13.187 2.813C12.991 2.617 12.675 2.617 12.479 2.813L11.479 3.813C11.283 4.009 11.283 4.325 11.479 4.521C11.675 4.717 11.991 4.717 12.187 4.521L13.187 3.521C13.383 3.325 13.383 3.009 13.187 2.813ZM12.479 13.187C12.675 13.383 12.991 13.383 13.187 13.187C13.383 12.991 13.383 12.675 13.187 12.479L12.187 11.479C11.991 11.283 11.675 11.283 11.479 11.479C11.283 11.675 11.283 11.991 11.479 12.187L12.479 13.187Z" fill="#0078d4" />
-</svg>

images/moon-blue.svg

@@ -1,3 +0,0 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 7.5C4 5.567 5.567 4 7.5 4C8.5 4 9.4 4.4 10 5.1C9.5 4.8 8.9 4.6 8.3 4.6C6.8 4.6 5.6 5.8 5.6 7.3C5.6 8.8 6.8 10 8.3 10C8.9 10 9.5 9.8 10 9.5C9.4 10.2 8.5 10.6 7.5 10.6C5.567 10.6 4 9.033 4 7.1V7.5Z" fill="#0078D4"/>
-</svg>

images/sun-blue.svg

@@ -1,11 +0,0 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 2C6 1.44772 6.44772 1 7 1C7.55228 1 8 1.44772 8 2C8 2.55228 7.55228 3 7 3C6.44772 3 6 2.55228 6 2Z" fill="#0078D4"/>
-<path d="M6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13Z" fill="#0078D4"/>
-<path d="M1 7C1 6.44772 1.44772 6 2 6C2.55228 6 3 6.44772 3 7C3 7.55228 2.55228 8 2 8C1.44772 8 1 7.55228 1 7Z" fill="#0078D4"/>
-<path d="M12 7C12 6.44772 12.4477 6 13 6C13.5523 6 14 6.44772 14 7C14 7.55228 13.5523 8 13 8C12.4477 8 12 7.55228 12 7Z" fill="#0078D4"/>
-<path d="M2.63604 3.63604C3.02656 3.24551 3.65973 3.24551 4.05025 3.63604C4.44078 4.02656 4.44078 4.65973 4.05025 5.05025C3.65973 5.44078 3.02656 5.44078 2.63604 5.05025C2.24551 4.65973 2.24551 4.02656 2.63604 3.63604Z" fill="#0078D4"/>
-<path d="M10.9497 9.94975C11.3403 9.55922 11.9734 9.55922 12.364 9.94975C12.7545 10.3403 12.7545 10.9734 12.364 11.364C11.9734 11.7545 11.3403 11.7545 10.9497 11.364C10.5592 10.9734 10.5592 10.3403 10.9497 9.94975Z" fill="#0078D4"/>
-<path d="M10.9497 5.05025C10.5592 4.65973 10.5592 4.02656 10.9497 3.63604C11.3403 3.24551 11.9734 3.24551 12.364 3.63604C12.7545 4.02656 12.7545 4.65973 12.364 5.05025C11.9734 5.44078 11.3403 5.44078 10.9497 5.05025Z" fill="#0078D4"/>
-<path d="M2.63604 11.364C2.24551 10.9734 2.24551 10.3403 2.63604 9.94975C3.02656 9.55922 3.65973 9.55922 4.05025 9.94975C4.44078 10.3403 4.44078 10.9734 4.05025 11.364C3.65973 11.7545 3.02656 11.7545 2.63604 11.364Z" fill="#0078D4"/>
-<circle cx="7.5" cy="7.5" r="2.5" fill="#0078D4"/>
-</svg>

less/Common/Constants.less

@@ -128,7 +128,7 @@
 @provisionDatabaseThroughputInfo: 200px;
 
 //tabs container
-@ActiveTabHeight: 32px;
+@ActiveTabHeight: 31px;
 @ActiveTabWidth: 141px;
 @TabsHeight: 30px;
 @TabsWidth: 140px;
@@ -237,11 +237,11 @@
 *********************************************************************************************/
 
 .hover() {
-  background-color: var(--colorNeutralBackground1Hover);
+  background-color: @AccentLight;
 }
 
 .active() {
-  background-color: var(--colorNeutralBackground1Hover);
+  background-color: @AccentExtra;
 }
 
 .focus() {

less/documentDB.less

@@ -1740,7 +1740,7 @@ input::-webkit-calendar-picker-indicator {
   flex: 1;
   padding-left: 34px;
   padding-right: 34px;
-  color: var(--colorNeutralForeground1);
+  color: @BaseDark;
   overflow-y: auto;
   overflow-x: auto;
   margin: (2 * @MediumSpace) 0px;
@@ -1749,6 +1749,7 @@ input::-webkit-calendar-picker-indicator {
 .contextual-pane .panelMainContent {
   padding-left: 34px;
   padding-right: 34px;
+  color: @BaseDark;
   margin: (2 * @MediumSpace) 0px;
 }
 
@@ -1913,8 +1914,7 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  background-color: var(--colorNeutralBackground1);
+  background-color: #f2f2f2;
-  color: var(--colorNeutralForeground1);
 
   .nav-tabs {
     display: flex;
@@ -1922,19 +1922,11 @@ input::-webkit-calendar-picker-indicator::after {
     align-items: flex-end;
     height: 100%;
     margin-bottom: -0.5px;
-    background-color: var(--colorNeutralBackground1Selected);
 
     li {
+      // Override the bootstrap defaults here to align with our layout constants.
       margin-bottom: 0px;
       height: 32px;
-
-      &:hover {
-        background-color: var(--colorNeutralBackground1Hover);
-      }
-
-      &:active {
-        background-color: var(--colorNeutralBackground1Pressed);
-      }
     }
   }
 }
@@ -1948,9 +1940,8 @@ input::-webkit-calendar-picker-indicator::after {
 .nav.nav-tabs.qslevel > li > a:hover {
   border: none;
   border-radius: 0;
-  background-color: var(--colorNeutralBackground1Selected);
+  background-color: transparent !important;
   border-color: transparent;
-  color: var(--colorNeutralForeground1);
 }
 
 .numbersize {
@@ -2385,8 +2376,6 @@ a:link {
   display: flex;
   flex-direction: column;
   min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
 }
 
 .tabs {
@@ -2642,16 +2631,14 @@ a:link {
 }
 
 .tabPanesContainer {
+  display: flex;
   flex-grow: 1;
   overflow: hidden;
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
 }
 
 .tabs-container {
   height: 100%;
   width: 100%;
-  overflow-y: auto;
 }
 
 .paddingspan4 {
@@ -2668,18 +2655,24 @@ a:link {
 .nav-tabs > li.active > .tabNavContentContainer,
 .nav-tabs > li.active > .tabNavContentContainer:focus,
 .nav-tabs > li.active > .tabNavContentContainer:hover {
-  color: var(--colorNeutralForeground1);
+  color: #555;
   cursor: default;
-  background-color: var(--colorNeutralBackground1);
+  background-color: @BaseLight;
-  border-color: var(--colorNeutralStroke1);
+  border-color: @BaseMedium;
+  border-bottom-color: @BaseLight;
   border-style: solid;
   border-width: 1px;
   height: @ActiveTabHeight;
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active .contentWrapper .tabNavText  {
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
-  border-bottom: 2px solid var(--colorCompoundBrandBackground);
+  font-weight: bolder;
+  border-bottom: 2px solid rgba(0, 120, 212, 1);
+}
+
+.nav-tabs > li.active:focus > .tabNavContentContainer {
+  .focus();
 }
 
 .tabNavContentContainer {
@@ -2688,7 +2681,7 @@ a:link {
   justify-content: space-between;
   border-radius: 2px 2px 0 0;
   padding: @DefaultSpace 0px @SmallSpace 0px;
-  color: var(--colorNeutralForeground1);
+  color: @BaseHigh;
   width: @TabsWidth;
   text-align: center;
   position: relative;
@@ -2696,21 +2689,19 @@ a:link {
 
   &:hover {
     text-decoration: none;
-    background-color: var(--colorNeutralBackground1Hover);
+    background-color: @BaseMediumLow;
-    border-color: transparent;
+    border-color: @BaseMediumLow;
   }
 
   &:active {
-    background-color: var(--colorNeutralBackground1Pressed);
+    background-color: @BaseMediumLow;
   }
 
   .tab_Content {
     .flex-display();
     width: @TabsWidth;
-    border-right: @ButtonBorderWidth solid var(--colorNeutralStroke1);
+    border-right: @ButtonBorderWidth solid @BaseMedium;
     white-space: nowrap;
-    color: var(--colorNeutralForeground1);
-
     .contentWrapper {
       .flex-display();
       width: @ContentWrapper;
@@ -2732,8 +2723,9 @@ a:link {
             background-image: url(../images/error_no_outline.svg);
             background-repeat: no-repeat;
             background-position: center;
+            background-size: 3px;
             display: block;
-            margin: 4px 0px 0px 6px;
+            margin: 1px 0px 0px 6px;
           }
         }
 
@@ -2758,60 +2750,39 @@ a:link {
         .loadingIcon {
           width: @LoadingErrorIconSize;
           height: @LoadingErrorIconSize;
-          margin-top: 1px;
+          margin: 0px 0px @SmallSpace @SmallSpace;
-        }
-
-        .warningIconContainer {
-          width: @ErrorIconContainer;
-          height: @ErrorIconContainer;
-          margin-top: 1px;
         }
       }
 
       .tabNavText {
         margin-left: @SmallSpace;
         margin-right: 2px;
-        color: var(--colorNeutralForeground1);
+        color: @BaseDark;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         flex-grow: 1;
-        font-size: 12px;
       }
     }
 
     .tabIconSection {
+      width: 29px;
       position: relative;
+      padding-top: 2px;
 
       .cancelButton {
         padding: 0px @SmallSpace 0px @SmallSpace;
-        color: var(--colorNeutralForeground1);
-        width: 16px;
-        height: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
 
         &:hover {
-          background-color: var(--colorNeutralBackground1Hover);
+          .hover();
-          color: var(--colorNeutralForeground1);
         }
 
         &:focus {
-          background-color: var(--colorNeutralBackground1Pressed);
+          .focus();
-          color: var(--colorNeutralForeground1);
         }
 
         &:active {
-          background-color: var(--colorNeutralBackground1Pressed);
+          .active();
-          color: var(--colorNeutralForeground1);
-        }
-
-        &::before {
-          content: "×";
-          font-size: 16px;
-          line-height: 1;
         }
       }
     }
@@ -3166,12 +3137,3 @@ a:link {
 .sidebarContainer {
   height: 100%;
 }
-
-.close-Icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}

less/documentDBFabric.less

@@ -7,7 +7,6 @@ html {
 body {
   font-family: @FabricFont;
   background-color: #f5f5f5;
-  --colorCompoundBrandBackground: @FabricAccentMedium;
 }
 
 a {
@@ -42,7 +41,7 @@ a:focus {
 }
 
 .nav-tabs-margin {
-  padding-top: 0px;
+  padding-top: 5px;
   background-color: #ffffff;
 }
 
@@ -69,20 +68,17 @@ a:focus {
 }
 
 .nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: none;
+  border-bottom: 2px solid #e0e0e0;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: none;
+  border-bottom: 2px solid @FabricAccentMedium;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   border-bottom: 0px none transparent;
 }
-.nav-tabs > li.active .contentWrapper .tabNavText  {
-  border-bottom: 2px solid @FabricAccentMedium;
-}
 
 .tabNavContentContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;

less/forms.less

@@ -1,227 +1,211 @@
 @import "./Common/Constants";
 
 .dirty {
-  border: 1px solid #9b4f96;
+    border: 1px solid #9b4f96;
 }
 
 .dirty:focus {
-  outline: 1px solid #9b4f96;
+    outline: 1px solid #9b4f96;
 }
 
 .tabForm {
-  padding: 12px 20px 20px 20px;
+    padding: 12px 20px 20px 20px;
-  margin-left: 3px;
+    margin-left: 3px;
 }
 
 .storedTabForm {
-  padding-top: @LargeSpace;
+    padding-top: @LargeSpace;
 }
 
 .scaleSettingScrollable {
-  overflow-y: auto;
+    overflow-y: auto;
-  overflow-x: hidden;
+    overflow-x: hidden;
-  height: 100%;
+    height:100%;
 }
 
 .disableFocusDefaults[tabindex] {
-  &:focus {
+    &:focus {
-    outline: none;
+        outline: none;
-  }
+    }
 
-  &:active {
+    &:active {
-    outline: none;
+        outline: none;
-  }
+    }
 }
 
 .indexingPolicyEditor {
-  width: 100%;
+    width: 100%;
-  height: calc(~"100vh - 400px");
+    height: calc(~"100vh - 400px");
 }
 
 .scaleDivison {
-  padding: @MediumSpace 0px @DefaultSpace 0px;
+    padding: @MediumSpace 0px @DefaultSpace 0px;
 }
 
 .scaleSettingTitle {
-  font-size: 14px;
+    font-size: 14px;
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .autoScaleThroughputTitle {
-  margin-bottom: @SmallSpace;
+    margin-bottom: @SmallSpace;
 }
 
 .autoScaleDescription {
-  margin-top: 6px;
+    margin-top: 6px;
-  margin-bottom: @SmallSpace;
+    margin-bottom: @SmallSpace;
 }
 
 .ssExpandCollapseIcon {
-  width: 10px;
+    width: 10px;
-  height: 10px;
+    height: 10px;
 }
 
 .ssCollapseIcon {
-  margin-bottom: 5px;
+    margin-bottom: 5px;
 }
 
 .ssTextAllignment {
-  padding-left: 19px;
+    padding-left: 19px;
 }
 
 .throughputStorageBlock {
-  border-top: 1px solid #bbb;
+    border-top: 1px solid #bbb;
-  border-bottom: 1px solid #bbb;
+    border-bottom: 1px solid #bbb;
-  background-color: #ccc;
+    background-color: #ccc;
-  padding-left: 10px;
+    padding-left: 10px;
-  width: 315px;
+    width: 315px;
 }
 
 .storageCapacityTitle {
-  padding: @LargeSpace 0px;
+    padding: @LargeSpace 0px;
+
 }
 .throughputStorageValue {
-  font-size: 12px;
+    font-size: 12px;
 }
 
-.estimatedCost,
+.estimatedCost, .largePartitionKeyEnabled {
-.largePartitionKeyEnabled {
+    padding: @SmallSpace 0px @LargeSpace;
-  padding: @SmallSpace 0px @LargeSpace;
 }
 
 .storagePadding {
-  padding-top: 6px;
+    padding-top: 6px;
-  padding-bottom: 14px;
+    padding-bottom: 14px;
 }
 
 .dirtyTextbox {
-  width: 176px;
+    width: 176px;
-  margin-top: 7px;
+    margin-top: 7px;
-  padding-left: 5px;
+    padding-left: 5px;
 }
 
 .formTitleFirst {
-  padding: @DefaultSpace (2 * @MediumSpace);
+    padding: @DefaultSpace (2 * @MediumSpace);
 }
 
 .formTitleTextbox {
-  padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
+    padding: 0px 0px @DefaultSpace (2 * @MediumSpace);
 }
 
 .formTree {
-  border: 1px solid var(--colorNeutralStroke1);
+    border: 1px solid #969696;
-  color: var(--colorNeutralForeground1);
+    color: #393939;
-  background-color: var(--colorNeutralBackground1);
+    padding: 0px 12px 1px 8px;
-  padding: 0px 12px 1px 8px;
 }
 
 .formTree:hover {
-  border: 1px solid var(--colorNeutralStroke1Hover);
+    border: 1px solid #969696;
-  background-color: var(--colorNeutralBackground1Hover);
+    background-color: #e6f8fe;
-}
-
-.formTree::placeholder {
-  color: var(--colorNeutralForeground2);
-  opacity: 1;
 }
 
 .formTree:active {
-  border: 1px solid var(--colorNeutralStroke1Pressed);
+    border: 1px solid #1ebbee;
-  background-color: var(--colorNeutralBackground1Pressed);
 }
 
 .scaleForm {
-  padding-left: 8px;
+    padding-left: 8px;
-  color: @BaseDark;
+    color: @BaseDark;
-  border: 1px solid #969696;
+    border: 1px solid #969696;
-  min-width: @ScaleFormWidth;
+    min-width: @ScaleFormWidth;
 
-  &:hover {
+    &:hover {
-    background-color: #e6f8fe;
+        background-color: #e6f8fe;
-  }
+    }    
 }
 
 .formTitle {
-  margin-top: 16px;
+    margin-top: 16px;
-  margin-bottom: 4px;
+    margin-bottom: 4px; 
 }
 
+
 .spUdfTriggerHeader {
-  padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace);
+    padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace); 
 }
 
 .storedUdfTriggerEditor {
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
 }
 
 .unselectedRadio {
-  background-color: white;
+    background-color: white;
-  border-color: #eee !important;
+    border-color: #EEE!important;
-  color: black !important;
+    color: black!important;
 }
 
 .disabledRadio {
-  background-color: #a19f9d;
+    background-color: #A19F9D;
-  border-color: #eee !important;
+    border-color: #EEE!important;
-  color: white !important;
+    color: white!important;
 }
 
 .selectedRadio {
-  background-color: @AccentMediumHigh;
+    background-color: @AccentMediumHigh;
-  border-color: #eee !important;
+    border-color: #EEE!important;
-  color: white !important;
+    color: white!important;
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .selectedRadio:hover {
-  background-color: @AccentMediumHigh;
+    background-color: @AccentMediumHigh;
-  border-color: #eee !important;
+    border-color: #EEE!important;
-  color: white !important;
+    color: white!important;
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .selectedRadio:active {
-  background-color: #0072c6;
+    background-color: #0072c6;
-  border-color: #eee !important;
+    border-color: #EEE!important;
-  color: white !important;
+    color: white!important;
-  cursor: pointer;
+    cursor: pointer;
-  border: 1px solid #0072c6;
+    border: 1px solid #0072c6;
 }
 
 .selectedRadio.dirty {
-  background-color: #9b4f96;
+    background-color: #9b4f96;
 }
 
 .tabs {
-  margin: 0;
+    margin: 0;
 }
 
 .formReadOnly {
-  background-color: #ddd;
+    background-color: #ddd;
-  border: 1px solid #969696;
+    border: 1px solid #969696;
-  min-width: 184px;
+    min-width: 184px;
-  padding-left: 8px;
+    padding-left: 8px;
 }
 
 .migration:disabled {
-  background-color: #ccc;
+    background-color: #ccc;
 }
 
 .trigger-field {
-  width: 40%;
+    width: 40%;
-  margin-top: 10px;
+    margin-top: 10px
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
 }
-
-.trigger-field input::placeholder {
-  color: var(--colorNeutralForeground3);
-  opacity: 1;
-}
-
 .trigger-form {
-  background-color: var(--colorNeutralBackground1);
+    padding: 10px 30px 10px 30px;
-  color: var(--colorNeutralForeground1);
+}
-  padding: 10px 30px;
-}

less/hostedexplorer.less

@@ -255,7 +255,7 @@ body {
                 flex: 1;
                 padding-left: 34px;
                 padding-right: 34px;
-                color: var(--colorNeutralForeground1);
+                color: @BaseDark;
                 overflow-y: auto;
                 overflow-x: hidden;
                 margin: (2 * @MediumSpace) 0px;

less/tree.less

@@ -0,0 +1,270 @@
+@import "./Common/Constants";
+
+.resourceTree {
+  height: 100%;
+  flex: 0 0 auto;
+  .main {
+    height: 100%;
+  }
+}
+
+.resourceTreeScroll {
+  height: 100%;
+  display: flex;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 10px;
+}
+
+.userSelectNone {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.treeHovermargin {
+  margin-left: 16px;
+}
+
+.highlight {
+  padding: @SmallSpace 2px;
+  outline: 0;
+
+  &:hover {
+    .hover();
+  }
+
+  &:active {
+    .active();
+  }
+
+  &:focus {
+    .focus();
+  }
+}
+
+.contextmenushowing {
+  background-color: #eee;
+}
+
+.collectionstree {
+  width: 100%;
+  margin-top: @DefaultSpace;
+
+  .databaseList {
+    list-style-type: none;
+    padding-left: 0px;
+
+    .collectionList {
+      padding-left: (2 * @MediumSpace);
+    }
+
+    .collectionChildList {
+      padding-left: @LargeSpace;
+    }
+
+    .databaseDocuments {
+      padding-left: (5 * @MediumSpace);
+    }
+  }
+}
+
+.pointerCursor {
+  cursor: pointer;
+}
+
+.menuEllipsis {
+  padding-right: 6px;
+  font-weight: bold;
+  font-size: 18px;
+  position: relative;
+  top: -5px;
+  left: 0px;
+  float: right;
+  display: none;
+  padding-left: 6px !important;
+  line-height: @TreeLineHeight;
+}
+
+.databaseMenu {
+  .flex-display();
+}
+
+.databaseMenu:hover .menuEllipsis,
+.databaseMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.databaseCollChildTextOverflow {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex: 1;
+}
+
+.collectionMenu {
+  .flex-display();
+}
+
+.collectionMenu:hover .menuEllipsis,
+.collectionMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.documentsMenu:hover .menuEllipsis,
+.documentsMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.treeChildMenu {
+  display: flex;
+}
+
+.storedProcedureMenu:hover .menuEllipsis,
+.storedProcedureMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.childMenu {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: (6 * @MediumSpace);
+  width: 100%;
+}
+
+.storedChildMenu:hover .menuEllipsis,
+.storedChildMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.contextmenu6 {
+  top: -29px;
+}
+
+.userDefinedMenu:hover .contextmenu6 {
+  display: block;
+}
+
+.userDefinedchildMenu:hover .menuEllipsis,
+.userDefinedchildMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.triggersMenu:hover .menuEllipsis,
+.triggersMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.triggersChildMenu:hover .menuEllipsis,
+.triggersChildMenu:focus .menuEllipsis {
+  display: block;
+}
+
+.databaseId {
+  font-size: 14px;
+}
+
+.storedUdfTriggerMenu {
+  padding-left: 0px;
+}
+
+.collectionstree img {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-top;
+}
+
+img.collectionsTreeCollapseExpand {
+  width: 10px;
+  height: 10px;
+  vertical-align: middle;
+  margin-bottom: 5px;
+}
+
+.collapsed::before {
+  content: "\23F5";
+  margin-left: 0px;
+  font-size: 15px;
+}
+
+.expanded::before {
+  content: "\23F7";
+  margin-left: 0px;
+  font-size: 15px;
+}
+
+.collectionMenuChildren {
+  padding-left: 42px;
+}
+
+.main-nav {
+  width: 100vh;
+  height: 40px;
+  background: white;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform: rotate(-90deg) translateX(-100%);
+  -webkit-transform: rotate(-90deg) translateX(-100%);
+  -ms-transform: rotate(-90deg) translateX(-100%);
+  border-bottom: 1px solid #ccc;
+}
+
+.main-nav-img {
+  width: 16px;
+  height: 16px;
+  margin: -32px 0 0 0;
+  transform: rotate(-90deg) translateX(-100%);
+  -webkit-transform: rotate(-90deg) translateX(-100%);
+  -ms-transform: rotate(-90deg) translateX(-100%);
+}
+
+.main-nav-img.main-nav-sub-img {
+  width: 16px;
+  height: 16px;
+  margin: 0px 0px 0 0;
+  transform: rotate(180deg) translateX(0%);
+  -webkit-transform: rotate(180deg) translateX(0%);
+  -ms-transform: rotate(180deg) translateX(0%);
+  position: absolute;
+  right: -8px;
+  top: 16px;
+}
+
+ul.nav {
+  margin: 0 auto;
+  margin-top: 0px;
+  margin-left: 0px;
+}
+
+.mini ul.nav li {
+  float: right;
+  line-height: 25px;
+  height: auto;
+  margin-top: 3px;
+}
+
+.spancolchildstyle {
+  padding: 4px;
+}
+
+.contextmenubutton {
+  float: right;
+  display: none;
+}
+
+.highlight:hover > .contextmenubutton {
+  display: unset;
+}
+
+.highlight:hover > .contextmenubutton::after {
+  content: "\2026";
+  font-size: 12px;
+}
+
+.showEllipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

package-lock.json

@@ -116,7 +116,6 @@
         "tinykeys": "2.1.0",
         "underscore": "1.12.1",
         "utility-types": "3.10.0",
-        "web-vitals": "4.2.4",
         "uuid": "9.0.0",
         "zustand": "3.5.0"
       },
@@ -35931,11 +35930,6 @@
         "defaults": "^1.0.3"
       }
     },
-    "node_modules/web-vitals": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
-      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw=="
-    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "license": "BSD-2-Clause"

package.json

@@ -111,7 +111,6 @@
     "tinykeys": "2.1.0",
     "underscore": "1.12.1",
     "utility-types": "3.10.0",
-    "web-vitals": "4.2.4",
     "uuid": "9.0.0",
     "zustand": "3.5.0"
   },

src/Common/Upload/Upload.tsx

@@ -50,33 +50,10 @@ export const Upload: FunctionComponent<UploadProps> = ({
   const title = label + " to upload";
   return (
     <div>
-      <span className="renewUploadItemsHeader" style={{ color: "var(--colorNeutralForeground1)" }}>
+      <span className="renewUploadItemsHeader">{label}</span>
-        {label}
-      </span>
       {tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
       <Stack horizontal>
-        <TextField
+        <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
-          styles={{
-            fieldGroup: {
-              width: 300,
-              backgroundColor: "var(--colorNeutralBackground3)",
-              borderColor: "var(--colorNeutralStroke1)",
-            },
-            field: {
-              backgroundColor: "var(--colorNeutralBackground3)",
-              color: "var(--colorNeutralForeground1)",
-            },
-            subComponentStyles: {
-              label: {
-                root: {
-                  color: "var(--colorNeutralForeground1)",
-                },
-              },
-            },
-          }}
-          readOnly
-          value={selectedFilesTitle.toString()}
-        />
         <input
           type="file"
           id="importFileInput"

src/Contracts/MessageTypes.ts

@@ -50,5 +50,4 @@ export enum MessageTypes {
   OpenCESCVAFeedbackBlade,
   ActivateTab,
   OpenContainerCopyFeedbackBlade,
-  UpdateTheme,
 }

src/Contracts/ViewModels.ts

@@ -7,7 +7,7 @@ import {
   TriggerDefinition,
   UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
-import type Explorer from "../Explorer/Explorer";
+import Explorer from "../Explorer/Explorer";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
 import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import ConflictId from "../Explorer/Tree/ConflictId";
@@ -447,9 +447,6 @@ export interface DataExplorerInputsFrame {
   aadToken?: string;
   containerCopyEnabled?: boolean;
   sessionId?: string;
-  theme?: {
-    mode: number;
-  };
 }
 
 export interface SelfServeFrameInputs {
@@ -483,6 +480,3 @@ export interface DropdownOption<T> {
   value: T;
   disable?: boolean;
 }
-
-// Remove the duplicate Explorer interface and export the type
-export type { Explorer };

src/Explorer/ContainerCopy/Actions/CopyJobActions.test.tsx

@@ -433,7 +433,7 @@ describe("CopyJobActions", () => {
       (dataTransferService.listByDatabaseAccount as jest.Mock).mockRejectedValue(abortError);
 
       await expect(getCopyJobs()).rejects.toMatchObject({
-        message: expect.stringContaining("Previous copy job request was cancelled."),
+        message: expect.stringContaining("Please wait for the current fetch request to complete"),
       });
     });
 

src/Explorer/ContainerCopy/Actions/CopyJobActions.tsx

@@ -124,7 +124,8 @@ export const getCopyJobs = async (): Promise<CopyJobType[]> => {
     const errorContent = JSON.stringify(error.content || error.message || error);
     if (errorContent.includes("signal is aborted without reason")) {
       throw {
-        message: "Previous copy job request was cancelled.",
+        message:
+          "Please wait for the current fetch request to complete. The previous copy job fetch request was aborted.",
       };
     } else {
       throw error;

src/Explorer/ContainerCopy/ContainerCopyMessages.ts

@@ -162,10 +162,10 @@ export default {
       viewDetails: "View Details",
     },
     Status: {
-      Pending: "Queued",
+      Pending: "Pending",
-      InProgress: "Running",
+      InProgress: "In Progress",
-      Running: "Running",
+      Running: "In Progress",
-      Partitioning: "Running",
+      Partitioning: "In Progress",
       Paused: "Paused",
       Completed: "Completed",
       Failed: "Failed",

src/Explorer/ContainerCopy/Context/CopyJobContext.test.tsx

@@ -59,8 +59,15 @@ describe("CopyJobContext", () => {
         jobName: "",
         migrationType: CopyJobMigrationType.Offline,
         source: {
-          subscription: null,
+          subscription: {
-          account: null,
+            subscriptionId: "test-subscription-id",
+          },
+          account: {
+            id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/test-account",
+            name: "test-account",
+            location: "East US",
+            kind: "GlobalDocumentDB",
+          },
           databaseId: "",
           containerId: "",
         },
@@ -598,8 +605,8 @@ describe("CopyJobContext", () => {
         </CopyJobContextProvider>,
       );
 
-      expect(contextValue.copyJobState.source?.subscription?.subscriptionId).toBeUndefined();
+      expect(contextValue.copyJobState.source.subscription.subscriptionId).toBe("test-subscription-id");
-      expect(contextValue.copyJobState.source?.account?.name).toBeUndefined();
+      expect(contextValue.copyJobState.source.account.name).toBe("test-account");
     });
 
     it("should initialize target with userContext values", () => {

src/Explorer/ContainerCopy/Context/CopyJobContext.tsx

@@ -1,4 +1,5 @@
 import Explorer from "Explorer/Explorer";
+import { Subscription } from "Contracts/DataModels";
 import React from "react";
 import { userContext } from "UserContext";
 import { CopyJobMigrationType } from "../Enums/CopyJobEnums";
@@ -23,8 +24,10 @@ const getInitialCopyJobState = (): CopyJobContextState => {
     jobName: "",
     migrationType: CopyJobMigrationType.Offline,
     source: {
-      subscription: null,
+      subscription: {
-      account: null,
+        subscriptionId: userContext.subscriptionId || "",
+      } as Subscription,
+      account: userContext.databaseAccount || null,
       databaseId: "",
       containerId: "",
     },

src/Explorer/ContainerCopy/CopyJobUtils.ts

@@ -147,7 +147,7 @@ export function isEqual(prevJobs: CopyJobType[], newJobs: CopyJobType[]): boolea
 }
 
 const truncateLength = 5;
-export const truncateName = (name: string, length: number = truncateLength): string => {
+const truncateName = (name: string, length: number = truncateLength): string => {
   return name.length <= length ? name : name.slice(0, length);
 };
 

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.test.tsx

@@ -1,409 +1,219 @@
 import "@testing-library/jest-dom";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import React from "react";
-import { configContext, Platform } from "../../../../../../ConfigContext";
+import { DropdownOptionType } from "../../../../Types/CopyJobTypes";
-import { DatabaseAccount } from "../../../../../../Contracts/DataModels";
-import * as useDatabaseAccountsHook from "../../../../../../hooks/useDatabaseAccounts";
-import { apiType, userContext } from "../../../../../../UserContext";
-import ContainerCopyMessages from "../../../../ContainerCopyMessages";
-import { CopyJobContext } from "../../../../Context/CopyJobContext";
-import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
-import { CopyJobContextProviderType, CopyJobContextState } from "../../../../Types/CopyJobTypes";
 import { AccountDropdown } from "./AccountDropdown";
 
-jest.mock("../../../../../../hooks/useDatabaseAccounts");
-jest.mock("../../../../../../UserContext", () => ({
-  userContext: {
-    databaseAccount: null as DatabaseAccount | null,
-  },
-  apiType: jest.fn(),
-}));
-jest.mock("../../../../../../ConfigContext", () => ({
-  configContext: {
-    platform: "Portal",
-  },
-  Platform: {
-    Portal: "Portal",
-    Hosted: "Hosted",
-  },
-}));
-
-const mockUseDatabaseAccounts = useDatabaseAccountsHook.useDatabaseAccounts as jest.MockedFunction<
-  typeof useDatabaseAccountsHook.useDatabaseAccounts
->;
-
 describe("AccountDropdown", () => {
-  const mockSetCopyJobState = jest.fn();
+  const mockOnChange = jest.fn();
-  const mockCopyJobState = {
+
-    jobName: "",
+  const mockAccountOptions: DropdownOptionType[] = [
-    migrationType: CopyJobMigrationType.Offline,
+    {
-    source: {
+      key: "account-1",
-      subscription: {
+      text: "Development Account",
-        subscriptionId: "test-subscription-id",
+      data: {
-        displayName: "Test Subscription",
+        id: "account-1",
+        name: "Development Account",
+        location: "East US",
+        resourceGroup: "dev-rg",
+        kind: "GlobalDocumentDB",
+        properties: {
+          documentEndpoint: "https://dev-account.documents.azure.com:443/",
+          provisioningState: "Succeeded",
+          consistencyPolicy: {
+            defaultConsistencyLevel: "Session",
+          },
+        },
       },
-      account: null,
-      databaseId: "",
-      containerId: "",
     },
-    target: {
+    {
-      subscriptionId: "",
+      key: "account-2",
-      account: null,
+      text: "Production Account",
-      databaseId: "",
+      data: {
-      containerId: "",
+        id: "account-2",
+        name: "Production Account",
+        location: "West US 2",
+        resourceGroup: "prod-rg",
+        kind: "GlobalDocumentDB",
+        properties: {
+          documentEndpoint: "https://prod-account.documents.azure.com:443/",
+          provisioningState: "Succeeded",
+          consistencyPolicy: {
+            defaultConsistencyLevel: "Strong",
+          },
+        },
+      },
     },
-    sourceReadAccessFromTarget: false,
+    {
-  } as CopyJobContextState;
+      key: "account-3",
-
+      text: "Testing Account",
-  const mockCopyJobContextValue = {
+      data: {
-    copyJobState: mockCopyJobState,
+        id: "account-3",
-    setCopyJobState: mockSetCopyJobState,
+        name: "Testing Account",
-    flow: null,
+        location: "Central US",
-    setFlow: jest.fn(),
+        resourceGroup: "test-rg",
-    contextError: null,
+        kind: "GlobalDocumentDB",
-    setContextError: jest.fn(),
+        properties: {
-    resetCopyJobState: jest.fn(),
+          documentEndpoint: "https://test-account.documents.azure.com:443/",
-  } as CopyJobContextProviderType;
+          provisioningState: "Succeeded",
-
+          consistencyPolicy: {
-  const mockDatabaseAccount1: DatabaseAccount = {
+            defaultConsistencyLevel: "Eventual",
-    id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account1",
+          },
-    name: "test-account-1",
+        },
-    kind: "GlobalDocumentDB",
+      },
-    location: "East US",
-    type: "Microsoft.DocumentDB/databaseAccounts",
-    tags: {},
-    properties: {
-      documentEndpoint: "https://account1.documents.azure.com:443/",
-      capabilities: [],
-      enableMultipleWriteLocations: false,
     },
-  };
+  ];
-
-  const mockDatabaseAccount2: DatabaseAccount = {
-    id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account2",
-    name: "test-account-2",
-    kind: "GlobalDocumentDB",
-    location: "West US",
-    type: "Microsoft.DocumentDB/databaseAccounts",
-    tags: {},
-    properties: {
-      documentEndpoint: "https://account2.documents.azure.com:443/",
-      capabilities: [],
-      enableMultipleWriteLocations: false,
-    },
-  };
-
-  const mockNonSqlAccount: DatabaseAccount = {
-    id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/mongo-account",
-    name: "mongo-account",
-    kind: "MongoDB",
-    location: "Central US",
-    type: "Microsoft.DocumentDB/databaseAccounts",
-    tags: {},
-    properties: {
-      documentEndpoint: "https://mongo-account.documents.azure.com:443/",
-      capabilities: [],
-      enableMultipleWriteLocations: false,
-    },
-  };
-
-  const renderWithContext = (contextValue = mockCopyJobContextValue) => {
-    return render(
-      <CopyJobContext.Provider value={contextValue}>
-        <AccountDropdown />
-      </CopyJobContext.Provider>,
-    );
-  };
 
   beforeEach(() => {
     jest.clearAllMocks();
-    (apiType as jest.MockedFunction<any>).mockImplementation((account: DatabaseAccount) => {
-      return account.kind === "MongoDB" ? "MongoDB" : "SQL";
-    });
   });
 
-  describe("Rendering", () => {
+  describe("Snapshot Testing", () => {
-    it("should render dropdown with correct label and placeholder", () => {
+    it("matches snapshot with all account options", () => {
-      mockUseDatabaseAccounts.mockReturnValue([]);
+      const { container } = render(
-
+        <AccountDropdown options={mockAccountOptions} disabled={false} onChange={mockOnChange} />,
-      renderWithContext();
-
-      expect(
-        screen.getByText(`${ContainerCopyMessages.sourceAccountDropdownLabel}:`, { exact: true }),
-      ).toBeInTheDocument();
-      expect(screen.getByRole("combobox")).toHaveAttribute(
-        "aria-label",
-        ContainerCopyMessages.sourceAccountDropdownLabel,
       );
+
+      expect(container.firstChild).toMatchSnapshot();
     });
 
-    it("should render disabled dropdown when no subscription is selected", () => {
+    it("matches snapshot with selected account", () => {
-      mockUseDatabaseAccounts.mockReturnValue([]);
+      const { container } = render(
-      const contextWithoutSubscription = {
+        <AccountDropdown
-        ...mockCopyJobContextValue,
+          options={mockAccountOptions}
-        copyJobState: {
+          selectedKey="account-2"
-          ...mockCopyJobState,
+          disabled={false}
-          source: {
+          onChange={mockOnChange}
-            ...mockCopyJobState.source,
+        />,
-            subscription: null,
+      );
-          },
-        } as CopyJobContextState,
-      };
 
-      renderWithContext(contextWithoutSubscription);
+      expect(container.firstChild).toMatchSnapshot();
-
-      const dropdown = screen.getByRole("combobox");
-      expect(dropdown).toHaveAttribute("aria-disabled", "true");
     });
 
-    it("should render disabled dropdown when no accounts are available", () => {
+    it("matches snapshot with disabled dropdown", () => {
-      mockUseDatabaseAccounts.mockReturnValue([]);
+      const { container } = render(
+        <AccountDropdown
+          options={mockAccountOptions}
+          selectedKey="account-1"
+          disabled={true}
+          onChange={mockOnChange}
+        />,
+      );
 
-      renderWithContext();
+      expect(container.firstChild).toMatchSnapshot();
-
-      const dropdown = screen.getByRole("combobox");
-      expect(dropdown).toHaveAttribute("aria-disabled", "true");
     });
 
-    it("should render enabled dropdown when accounts are available", () => {
+    it("matches snapshot with empty options", () => {
-      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
+      const { container } = render(<AccountDropdown options={[]} disabled={false} onChange={mockOnChange} />);
 
-      renderWithContext();
+      expect(container.firstChild).toMatchSnapshot();
-
-      const dropdown = screen.getByRole("combobox");
-      expect(dropdown).toHaveAttribute("aria-disabled", "false");
-    });
-  });
-
-  describe("Account filtering", () => {
-    it("should filter accounts to only show SQL API accounts", () => {
-      const allAccounts = [mockDatabaseAccount1, mockDatabaseAccount2, mockNonSqlAccount];
-      mockUseDatabaseAccounts.mockReturnValue(allAccounts);
-
-      renderWithContext();
-
-      expect(mockUseDatabaseAccounts).toHaveBeenCalledWith("test-subscription-id");
-
-      expect(apiType as jest.MockedFunction<any>).toHaveBeenCalledWith(mockDatabaseAccount1);
-      expect(apiType as jest.MockedFunction<any>).toHaveBeenCalledWith(mockDatabaseAccount2);
-      expect(apiType as jest.MockedFunction<any>).toHaveBeenCalledWith(mockNonSqlAccount);
-    });
-  });
-
-  describe("Account selection", () => {
-    it("should auto-select the first SQL account when no account is currently selected", async () => {
-      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
-
-      renderWithContext();
-
-      await waitFor(() => {
-        expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-      });
-
-      const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
-      const newState = stateUpdateFunction(mockCopyJobState);
-      expect(newState.source.account).toBe(mockDatabaseAccount1);
     });
 
-    it("should auto-select predefined account from userContext if available", async () => {
+    it("matches snapshot with single option", () => {
-      const userContextAccount = {
+      const { container } = render(
-        ...mockDatabaseAccount2,
+        <AccountDropdown
-        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account2",
+          options={[mockAccountOptions[0]]}
-      };
+          selectedKey="account-1"
+          disabled={false}
+          onChange={mockOnChange}
+        />,
+      );
 
-      (userContext as any).databaseAccount = userContextAccount;
+      expect(container.firstChild).toMatchSnapshot();
-
-      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
-
-      renderWithContext();
-
-      await waitFor(() => {
-        expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-      });
-
-      const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
-      const newState = stateUpdateFunction(mockCopyJobState);
-      expect(newState.source.account).toBe(mockDatabaseAccount2);
     });
 
-    it("should keep current account if it exists in the filtered list", async () => {
+    it("matches snapshot with special characters in options", () => {
-      const contextWithSelectedAccount = {
+      const specialOptions = [
-        ...mockCopyJobContextValue,
+        {
-        copyJobState: {
+          key: "special",
-          ...mockCopyJobState,
+          text: 'Account with & <special> "characters"',
-          source: {
+          data: {
-            ...mockCopyJobState.source,
+            id: "special",
-            account: mockDatabaseAccount1,
+            name: 'Account with & <special> "characters"',
+            location: "East US",
           },
         },
-      };
+      ];
 
-      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
+      const { container } = render(
+        <AccountDropdown options={specialOptions} disabled={false} onChange={mockOnChange} />,
+      );
 
-      renderWithContext(contextWithSelectedAccount);
+      expect(container.firstChild).toMatchSnapshot();
-
-      await waitFor(() => {
-        expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-      });
-
-      const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
-      const newState = stateUpdateFunction(contextWithSelectedAccount.copyJobState);
-      expect(newState).toBe(contextWithSelectedAccount.copyJobState);
     });
 
-    it("should handle account change when user selects different account", async () => {
+    it("matches snapshot with long account name", () => {
-      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
+      const longNameOption = [
-
+        {
-      renderWithContext();
+          key: "long",
-
+          text: "This is an extremely long account name that tests how the component handles text overflow and layout constraints in the dropdown",
-      const dropdown = screen.getByRole("combobox");
+          data: {
-      fireEvent.click(dropdown);
+            id: "long",
-
+            name: "This is an extremely long account name that tests how the component handles text overflow and layout constraints in the dropdown",
-      await waitFor(() => {
+            location: "North Central US",
-        const option = screen.getByText("test-account-2");
-        fireEvent.click(option);
-      });
-
-      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-    });
-  });
-
-  describe("ID normalization", () => {
-    it("should normalize account ID for Portal platform", () => {
-      const portalAccount = {
-        ...mockDatabaseAccount1,
-        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account1",
-      };
-
-      (configContext as any).platform = Platform.Portal;
-      mockUseDatabaseAccounts.mockReturnValue([portalAccount]);
-
-      const contextWithSelectedAccount = {
-        ...mockCopyJobContextValue,
-        copyJobState: {
-          ...mockCopyJobState,
-          source: {
-            ...mockCopyJobState.source,
-            account: portalAccount,
           },
         },
-      };
+      ];
 
-      renderWithContext(contextWithSelectedAccount);
+      const { container } = render(
+        <AccountDropdown options={longNameOption} selectedKey="long" disabled={false} onChange={mockOnChange} />,
+      );
 
-      const dropdown = screen.getByRole("combobox");
+      expect(container.firstChild).toMatchSnapshot();
-      expect(dropdown).toMatchSnapshot();
     });
 
-    it("should normalize account ID for Hosted platform", () => {
+    it("matches snapshot with disabled state and no selection", () => {
-      const hostedAccount = {
+      const { container } = render(
-        ...mockDatabaseAccount1,
+        <AccountDropdown options={mockAccountOptions} disabled={true} onChange={mockOnChange} />,
-        id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDB/databaseAccounts/account1",
+      );
-      };
 
-      (configContext as any).platform = Platform.Hosted;
+      expect(container.firstChild).toMatchSnapshot();
-      mockUseDatabaseAccounts.mockReturnValue([hostedAccount]);
+    });
 
-      const contextWithSelectedAccount = {
+    it("matches snapshot with multiple account types", () => {
-        ...mockCopyJobContextValue,
+      const mixedAccountOptions = [
-        copyJobState: {
+        {
-          ...mockCopyJobState,
+          key: "sql-account",
-          source: {
+          text: "SQL API Account",
-            ...mockCopyJobState.source,
+          data: {
-            account: hostedAccount,
+            id: "sql-account",
+            name: "SQL API Account",
+            kind: "GlobalDocumentDB",
+            location: "East US",
           },
         },
-      };
+        {
-
+          key: "mongo-account",
-      renderWithContext(contextWithSelectedAccount);
+          text: "MongoDB Account",
-
+          data: {
-      const dropdown = screen.getByRole("combobox");
+            id: "mongo-account",
-      expect(dropdown).toBeInTheDocument();
+            name: "MongoDB Account",
-    });
+            kind: "MongoDB",
-  });
+            location: "West US",
-
-  describe("Edge cases", () => {
-    it("should handle empty account list gracefully", () => {
-      mockUseDatabaseAccounts.mockReturnValue([]);
-
-      renderWithContext();
-
-      const dropdown = screen.getByRole("combobox");
-      expect(dropdown).toHaveAttribute("aria-disabled", "true");
-    });
-
-    it("should handle null account list gracefully", () => {
-      mockUseDatabaseAccounts.mockReturnValue(null as any);
-
-      renderWithContext();
-
-      const dropdown = screen.getByRole("combobox");
-      expect(dropdown).toHaveAttribute("aria-disabled", "true");
-    });
-
-    it("should handle undefined subscription ID", () => {
-      const contextWithoutSubscription = {
-        ...mockCopyJobContextValue,
-        copyJobState: {
-          ...mockCopyJobState,
-          source: {
-            ...mockCopyJobState.source,
-            subscription: null,
-          },
-        } as CopyJobContextState,
-      };
-
-      mockUseDatabaseAccounts.mockReturnValue([]);
-
-      renderWithContext(contextWithoutSubscription);
-
-      expect(mockUseDatabaseAccounts).toHaveBeenCalledWith(undefined);
-    });
-
-    it("should not update state if account is already selected and the same", async () => {
-      const selectedAccount = mockDatabaseAccount1;
-      const contextWithSelectedAccount = {
-        ...mockCopyJobContextValue,
-        copyJobState: {
-          ...mockCopyJobState,
-          source: {
-            ...mockCopyJobState.source,
-            account: selectedAccount,
           },
         },
-      };
+        {
+          key: "cassandra-account",
+          text: "Cassandra Account",
+          data: {
+            id: "cassandra-account",
+            name: "Cassandra Account",
+            kind: "Cassandra",
+            location: "Central US",
+          },
+        },
+      ];
 
-      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1, mockDatabaseAccount2]);
+      const { container } = render(
+        <AccountDropdown
+          options={mixedAccountOptions}
+          selectedKey="mongo-account"
+          disabled={false}
+          onChange={mockOnChange}
+        />,
+      );
 
-      renderWithContext(contextWithSelectedAccount);
+      expect(container.firstChild).toMatchSnapshot();
-
-      await waitFor(() => {
-        expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
-      });
-
-      const stateUpdateFunction = mockSetCopyJobState.mock.calls[0][0];
-      const newState = stateUpdateFunction(contextWithSelectedAccount.copyJobState);
-      expect(newState).toBe(contextWithSelectedAccount.copyJobState);
-    });
-  });
-
-  describe("Accessibility", () => {
-    it("should have proper aria-label", () => {
-      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1]);
-
-      renderWithContext();
-
-      const dropdown = screen.getByRole("combobox");
-      expect(dropdown).toHaveAttribute("aria-label", ContainerCopyMessages.sourceAccountDropdownLabel);
-    });
-
-    it("should have required attribute", () => {
-      mockUseDatabaseAccounts.mockReturnValue([mockDatabaseAccount1]);
-
-      renderWithContext();
-
-      const dropdown = screen.getByRole("combobox");
-      expect(dropdown).toHaveAttribute("aria-required", "true");
     });
   });
 });

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.tsx

@@ -1,91 +1,31 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import { Dropdown } from "@fluentui/react";
-import { configContext, Platform } from "ConfigContext";
+import React from "react";
-import React, { useEffect } from "react";
-import { DatabaseAccount } from "../../../../../../Contracts/DataModels";
-import { useDatabaseAccounts } from "../../../../../../hooks/useDatabaseAccounts";
-import { apiType, userContext } from "../../../../../../UserContext";
 import ContainerCopyMessages from "../../../../ContainerCopyMessages";
-import { useCopyJobContext } from "../../../../Context/CopyJobContext";
+import { DropdownOptionType } from "../../../../Types/CopyJobTypes";
 import FieldRow from "../../Components/FieldRow";
 
-interface AccountDropdownProps {}
+interface AccountDropdownProps {
+  options: DropdownOptionType[];
+  selectedKey?: string;
+  disabled: boolean;
+  onChange: (_ev?: React.FormEvent, option?: DropdownOptionType) => void;
+}
 
-const normalizeAccountId = (id: string) => {
+export const AccountDropdown: React.FC<AccountDropdownProps> = React.memo(
-  if (configContext.platform === Platform.Portal) {
+  ({ options, selectedKey, disabled, onChange }) => (
-    return id.replace("/Microsoft.DocumentDb/", "/Microsoft.DocumentDB/");
-  } else if (configContext.platform === Platform.Hosted) {
-    return id.replace("/Microsoft.DocumentDB/", "/Microsoft.DocumentDb/");
-  } else {
-    return id;
-  }
-};
-
-export const AccountDropdown: React.FC<AccountDropdownProps> = () => {
-  const { copyJobState, setCopyJobState } = useCopyJobContext();
-
-  const selectedSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
-  const allAccounts: DatabaseAccount[] = useDatabaseAccounts(selectedSubscriptionId);
-  const sqlApiOnlyAccounts: DatabaseAccount[] = (allAccounts || []).filter((account) => apiType(account) === "SQL");
-
-  const updateCopyJobState = (newAccount: DatabaseAccount) => {
-    setCopyJobState((prevState) => {
-      if (prevState.source?.account?.id !== newAccount.id) {
-        return {
-          ...prevState,
-          source: {
-            ...prevState.source,
-            account: newAccount,
-          },
-        };
-      }
-      return prevState;
-    });
-  };
-
-  useEffect(() => {
-    if (sqlApiOnlyAccounts && sqlApiOnlyAccounts.length > 0 && selectedSubscriptionId) {
-      const currentAccountId = copyJobState?.source?.account?.id;
-      const predefinedAccountId = userContext.databaseAccount?.id;
-      const selectedAccountId = currentAccountId || predefinedAccountId;
-
-      const targetAccount: DatabaseAccount | null =
-        sqlApiOnlyAccounts.find((account) => account.id === selectedAccountId) || null;
-      updateCopyJobState(targetAccount || sqlApiOnlyAccounts[0]);
-    }
-  }, [sqlApiOnlyAccounts?.length, selectedSubscriptionId]);
-
-  const accountOptions =
-    sqlApiOnlyAccounts?.map((account) => ({
-      key: normalizeAccountId(account.id),
-      text: account.name,
-      data: account,
-    })) || [];
-
-  const handleAccountChange = (_ev?: React.FormEvent, option?: (typeof accountOptions)[0]) => {
-    const selectedAccount = option?.data as DatabaseAccount;
-
-    if (selectedAccount) {
-      updateCopyJobState(selectedAccount);
-    }
-  };
-
-  const isAccountDropdownDisabled = !selectedSubscriptionId || accountOptions.length === 0;
-  const selectedAccountId = normalizeAccountId(copyJobState?.source?.account?.id ?? "");
-
-  return (
     <FieldRow label={ContainerCopyMessages.sourceAccountDropdownLabel}>
       <Dropdown
         placeholder={ContainerCopyMessages.sourceAccountDropdownPlaceholder}
         ariaLabel={ContainerCopyMessages.sourceAccountDropdownLabel}
-        options={accountOptions}
+        options={options}
-        disabled={isAccountDropdownDisabled}
+        disabled={disabled}
         required
-        selectedKey={selectedAccountId}
+        selectedKey={selectedKey}
-        onChange={handleAccountChange}
+        onChange={onChange}
-        data-test="account-dropdown"
       />
     </FieldRow>
-  );
+  ),
-};
+  (prev, next) => prev.options.length === next.options.length && prev.selectedKey === next.selectedKey,
+);

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/SubscriptionDropdown.test.tsx

@@ -1,295 +1,118 @@
 import "@testing-library/jest-dom";
-import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import React from "react";
-import { Subscription } from "../../../../../../Contracts/DataModels";
+import { DropdownOptionType } from "../../../../Types/CopyJobTypes";
-import Explorer from "../../../../../Explorer";
-import CopyJobContextProvider from "../../../../Context/CopyJobContext";
 import { SubscriptionDropdown } from "./SubscriptionDropdown";
 
-jest.mock("../../../../../../hooks/useSubscriptions");
-jest.mock("../../../../../../UserContext");
-jest.mock("../../../../ContainerCopyMessages");
-
-const mockUseSubscriptions = jest.requireMock("../../../../../../hooks/useSubscriptions").useSubscriptions;
-const mockUserContext = jest.requireMock("../../../../../../UserContext").userContext;
-const mockContainerCopyMessages = jest.requireMock("../../../../ContainerCopyMessages").default;
-
-mockContainerCopyMessages.subscriptionDropdownLabel = "Subscription";
-mockContainerCopyMessages.subscriptionDropdownPlaceholder = "Select a subscription";
-
 describe("SubscriptionDropdown", () => {
-  let mockExplorer: Explorer;
+  const mockOnChange = jest.fn();
-  const mockSubscriptions: Subscription[] = [
+
+  const mockSubscriptionOptions: DropdownOptionType[] = [
     {
-      subscriptionId: "sub-1",
+      key: "sub-1",
-      displayName: "Subscription One",
+      text: "Development Subscription",
-      state: "Enabled",
+      data: {
-      tenantId: "tenant-1",
+        subscriptionId: "sub-1",
+        displayName: "Development Subscription",
+        authorizationSource: "RoleBased",
+        subscriptionPolicies: {
+          quotaId: "quota-1",
+          spendingLimit: "Off",
+          locationPlacementId: "loc-1",
+        },
+      },
     },
     {
-      subscriptionId: "sub-2",
+      key: "sub-2",
-      displayName: "Subscription Two",
+      text: "Production Subscription",
-      state: "Enabled",
+      data: {
-      tenantId: "tenant-1",
+        subscriptionId: "sub-2",
+        displayName: "Production Subscription",
+        authorizationSource: "RoleBased",
+        subscriptionPolicies: {
+          quotaId: "quota-2",
+          spendingLimit: "On",
+          locationPlacementId: "loc-2",
+        },
+      },
     },
     {
-      subscriptionId: "sub-3",
+      key: "sub-3",
-      displayName: "Another Subscription",
+      text: "Testing Subscription",
-      state: "Enabled",
+      data: {
-      tenantId: "tenant-1",
+        subscriptionId: "sub-3",
+        displayName: "Testing Subscription",
+        authorizationSource: "Legacy",
+        subscriptionPolicies: {
+          quotaId: "quota-3",
+          spendingLimit: "Off",
+          locationPlacementId: "loc-3",
+        },
+      },
     },
   ];
 
-  const renderWithProvider = (children: React.ReactNode) => {
-    return render(<CopyJobContextProvider explorer={mockExplorer}>{children}</CopyJobContextProvider>);
-  };
-
   beforeEach(() => {
     jest.clearAllMocks();
-    mockExplorer = {} as Explorer;
-
-    mockUseSubscriptions.mockReturnValue(mockSubscriptions);
-    mockUserContext.subscriptionId = "sub-1";
   });
 
-  describe("Rendering", () => {
+  describe("Snapshot Testing", () => {
-    it("should render subscription dropdown with correct attributes", () => {
+    it("matches snapshot with all subscription options", () => {
-      renderWithProvider(<SubscriptionDropdown />);
+      const { container } = render(<SubscriptionDropdown options={mockSubscriptionOptions} onChange={mockOnChange} />);
 
-      const dropdown = screen.getByRole("combobox");
+      expect(container.firstChild).toMatchSnapshot();
-      expect(dropdown).toBeInTheDocument();
-      expect(dropdown).toHaveAttribute("aria-label", "Subscription");
-      expect(dropdown).toHaveAttribute("data-test", "subscription-dropdown");
-      expect(dropdown).toBeRequired();
     });
 
-    it("should render field label correctly", () => {
+    it("matches snapshot with selected subscription", () => {
-      renderWithProvider(<SubscriptionDropdown />);
+      const { container } = render(
-
+        <SubscriptionDropdown options={mockSubscriptionOptions} selectedKey="sub-2" onChange={mockOnChange} />,
-      expect(screen.getByText("Subscription:")).toBeInTheDocument();
-    });
-
-    it("should show placeholder when no subscription is selected", async () => {
-      mockUserContext.subscriptionId = "";
-      mockUseSubscriptions.mockReturnValue([]);
-
-      renderWithProvider(<SubscriptionDropdown />);
-
-      await waitFor(() => {
-        const dropdown = screen.getByRole("combobox");
-        expect(dropdown).toHaveTextContent("Select a subscription");
-      });
-    });
-  });
-
-  describe("Subscription Options", () => {
-    it("should populate dropdown with available subscriptions", async () => {
-      renderWithProvider(<SubscriptionDropdown />);
-
-      const dropdown = screen.getByRole("combobox");
-      fireEvent.click(dropdown);
-
-      await waitFor(() => {
-        expect(screen.getByText("Subscription One", { selector: ".ms-Dropdown-optionText" })).toBeInTheDocument();
-        expect(screen.getByText("Subscription Two", { selector: ".ms-Dropdown-optionText" })).toBeInTheDocument();
-        expect(screen.getByText("Another Subscription", { selector: ".ms-Dropdown-optionText" })).toBeInTheDocument();
-      });
-    });
-
-    it("should handle empty subscriptions list", () => {
-      mockUseSubscriptions.mockReturnValue([]);
-
-      renderWithProvider(<SubscriptionDropdown />);
-
-      const dropdown = screen.getByRole("combobox");
-      expect(dropdown).toBeInTheDocument();
-      expect(dropdown).toHaveTextContent("Select a subscription");
-    });
-
-    it("should handle undefined subscriptions", () => {
-      mockUseSubscriptions.mockReturnValue(undefined);
-
-      renderWithProvider(<SubscriptionDropdown />);
-
-      const dropdown = screen.getByRole("combobox");
-      expect(dropdown).toBeInTheDocument();
-      expect(dropdown).toHaveTextContent("Select a subscription");
-    });
-  });
-
-  describe("Selection Logic", () => {
-    it("should auto-select subscription based on userContext.subscriptionId on mount", async () => {
-      mockUserContext.subscriptionId = "sub-2";
-
-      renderWithProvider(<SubscriptionDropdown />);
-
-      await waitFor(() => {
-        const dropdown = screen.getByRole("combobox");
-        expect(dropdown).toHaveTextContent("Subscription Two");
-      });
-    });
-
-    it("should maintain current selection when subscriptions list updates with same subscription", async () => {
-      renderWithProvider(<SubscriptionDropdown />);
-
-      await waitFor(() => {
-        const dropdown = screen.getByRole("combobox");
-        expect(dropdown).toHaveTextContent("Subscription One");
-      });
-
-      act(() => {
-        mockUseSubscriptions.mockReturnValue([...mockSubscriptions]);
-      });
-
-      await waitFor(() => {
-        const dropdown = screen.getByRole("combobox");
-        expect(dropdown).toHaveTextContent("Subscription One");
-      });
-    });
-
-    it("should prioritize current copyJobState subscription over userContext subscription", async () => {
-      mockUserContext.subscriptionId = "sub-2";
-
-      const { rerender } = renderWithProvider(<SubscriptionDropdown />);
-
-      await waitFor(() => {
-        const dropdown = screen.getByRole("combobox");
-        expect(dropdown).toHaveTextContent("Subscription Two");
-      });
-
-      const dropdown = screen.getByRole("combobox");
-      fireEvent.click(dropdown);
-
-      await waitFor(() => {
-        const option = screen.getByText("Another Subscription");
-        fireEvent.click(option);
-      });
-
-      rerender(
-        <CopyJobContextProvider explorer={mockExplorer}>
-          <SubscriptionDropdown />
-        </CopyJobContextProvider>,
       );
 
-      await waitFor(() => {
+      expect(container.firstChild).toMatchSnapshot();
-        const dropdown = screen.getByRole("combobox");
-        expect(dropdown).toHaveTextContent("Another Subscription");
-      });
     });
 
-    it("should handle subscription selection change", async () => {
+    it("matches snapshot with empty options", () => {
-      renderWithProvider(<SubscriptionDropdown />);
+      const { container } = render(<SubscriptionDropdown options={[]} onChange={mockOnChange} />);
 
-      const dropdown = screen.getByRole("combobox");
+      expect(container.firstChild).toMatchSnapshot();
-      fireEvent.click(dropdown);
-
-      await waitFor(() => {
-        const option = screen.getByText("Subscription Two");
-        fireEvent.click(option);
-      });
-
-      await waitFor(() => {
-        expect(dropdown).toHaveTextContent("Subscription Two");
-      });
     });
 
-    it("should not auto-select if target subscription not found in list", async () => {
+    it("matches snapshot with single option", () => {
-      mockUserContext.subscriptionId = "non-existent-sub";
+      const { container } = render(
+        <SubscriptionDropdown options={[mockSubscriptionOptions[0]]} selectedKey="sub-1" onChange={mockOnChange} />,
+      );
 
-      renderWithProvider(<SubscriptionDropdown />);
+      expect(container.firstChild).toMatchSnapshot();
-
-      await waitFor(() => {
-        const dropdown = screen.getByRole("combobox");
-        expect(dropdown).toHaveTextContent("Select a subscription");
-      });
-    });
-  });
-
-  describe("Context State Management", () => {
-    it("should update copyJobState when subscription is selected", async () => {
-      renderWithProvider(<SubscriptionDropdown />);
-
-      const dropdown = screen.getByRole("combobox");
-      fireEvent.click(dropdown);
-
-      await waitFor(() => {
-        const option = screen.getByText("Subscription Two");
-        fireEvent.click(option);
-      });
-      await waitFor(() => {
-        expect(dropdown).toHaveTextContent("Subscription Two");
-      });
     });
 
-    it("should reset account when subscription changes", async () => {
+    it("matches snapshot with special characters in options", () => {
-      renderWithProvider(<SubscriptionDropdown />);
+      const specialOptions = [
+        {
+          key: "special",
+          text: 'Subscription with & <special> "characters"',
+          data: { subscriptionId: "special" },
+        },
+      ];
 
-      await waitFor(() => {
+      const { container } = render(<SubscriptionDropdown options={specialOptions} onChange={mockOnChange} />);
-        const dropdown = screen.getByRole("combobox");
-        expect(dropdown).toHaveTextContent("Subscription One");
-      });
-      const dropdown = screen.getByRole("combobox");
-      fireEvent.click(dropdown);
 
-      await waitFor(() => {
+      expect(container.firstChild).toMatchSnapshot();
-        const option = screen.getByText("Subscription Two");
-        fireEvent.click(option);
-      });
-
-      await waitFor(() => {
-        expect(dropdown).toHaveTextContent("Subscription Two");
-      });
     });
 
-    it("should not update state if same subscription is selected", async () => {
+    it("matches snapshot with long subscription name", () => {
-      renderWithProvider(<SubscriptionDropdown />);
+      const longNameOption = [
+        {
+          key: "long",
+          text: "This is an extremely long subscription name that tests how the component handles text overflow and layout constraints",
+          data: { subscriptionId: "long" },
+        },
+      ];
 
-      await waitFor(() => {
+      const { container } = render(
-        const dropdown = screen.getByRole("combobox");
+        <SubscriptionDropdown options={longNameOption} selectedKey="long" onChange={mockOnChange} />,
-        expect(dropdown).toHaveTextContent("Subscription One");
+      );
-      });
 
-      const dropdown = screen.getByRole("combobox");
+      expect(container.firstChild).toMatchSnapshot();
-      fireEvent.click(dropdown);
-
-      await waitFor(() => {
-        const option = screen.getByText("Subscription One", { selector: ".ms-Dropdown-optionText" });
-        fireEvent.click(option);
-      });
-
-      await waitFor(() => {
-        expect(dropdown).toHaveTextContent("Subscription One");
-      });
-    });
-  });
-
-  describe("Edge Cases", () => {
-    it("should handle subscription change event with option missing data", async () => {
-      renderWithProvider(<SubscriptionDropdown />);
-
-      const dropdown = screen.getByRole("combobox");
-      fireEvent.click(dropdown);
-      expect(dropdown).toBeInTheDocument();
-    });
-
-    it("should handle subscriptions loading state", () => {
-      mockUseSubscriptions.mockReturnValue(undefined);
-
-      renderWithProvider(<SubscriptionDropdown />);
-
-      const dropdown = screen.getByRole("combobox");
-      expect(dropdown).toBeInTheDocument();
-      expect(dropdown).toHaveTextContent("Select a subscription");
-    });
-
-    it("should work when both userContext.subscriptionId and copyJobState subscription are null", () => {
-      mockUserContext.subscriptionId = "";
-
-      renderWithProvider(<SubscriptionDropdown />);
-
-      const dropdown = screen.getByRole("combobox");
-      expect(dropdown).toBeInTheDocument();
-      expect(dropdown).toHaveTextContent("Select a subscription");
     });
   });
 });

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/SubscriptionDropdown.tsx

@@ -1,79 +1,29 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/display-name */
 import { Dropdown } from "@fluentui/react";
-import React, { useEffect } from "react";
+import React from "react";
-import { Subscription } from "../../../../../../Contracts/DataModels";
-import { useSubscriptions } from "../../../../../../hooks/useSubscriptions";
-import { userContext } from "../../../../../../UserContext";
 import ContainerCopyMessages from "../../../../ContainerCopyMessages";
-import { useCopyJobContext } from "../../../../Context/CopyJobContext";
+import { DropdownOptionType } from "../../../../Types/CopyJobTypes";
 import FieldRow from "../../Components/FieldRow";
 
-interface SubscriptionDropdownProps {}
+interface SubscriptionDropdownProps {
+  options: DropdownOptionType[];
+  selectedKey?: string;
+  onChange: (_ev?: React.FormEvent, option?: DropdownOptionType) => void;
+}
 
-export const SubscriptionDropdown: React.FC<SubscriptionDropdownProps> = React.memo(() => {
+export const SubscriptionDropdown: React.FC<SubscriptionDropdownProps> = React.memo(
-  const { copyJobState, setCopyJobState } = useCopyJobContext();
+  ({ options, selectedKey, onChange }) => (
-  const subscriptions: Subscription[] = useSubscriptions();
-
-  const updateCopyJobState = (newSubscription: Subscription) => {
-    setCopyJobState((prevState) => {
-      if (prevState.source?.subscription?.subscriptionId !== newSubscription.subscriptionId) {
-        return {
-          ...prevState,
-          source: {
-            ...prevState.source,
-            subscription: newSubscription,
-            account: null,
-          },
-        };
-      }
-      return prevState;
-    });
-  };
-
-  useEffect(() => {
-    if (subscriptions && subscriptions.length > 0) {
-      const currentSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
-      const predefinedSubscriptionId = userContext.subscriptionId;
-      const selectedSubscriptionId = currentSubscriptionId || predefinedSubscriptionId;
-
-      const targetSubscription: Subscription | null =
-        subscriptions.find((sub) => sub.subscriptionId === selectedSubscriptionId) || null;
-
-      if (targetSubscription) {
-        updateCopyJobState(targetSubscription);
-      }
-    }
-  }, [subscriptions?.length]);
-
-  const subscriptionOptions =
-    subscriptions?.map((sub) => ({
-      key: sub.subscriptionId,
-      text: sub.displayName,
-      data: sub,
-    })) || [];
-
-  const handleSubscriptionChange = (_ev?: React.FormEvent, option?: (typeof subscriptionOptions)[0]) => {
-    const selectedSubscription = option?.data as Subscription;
-
-    if (selectedSubscription) {
-      updateCopyJobState(selectedSubscription);
-    }
-  };
-
-  const selectedSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
-
-  return (
     <FieldRow label={ContainerCopyMessages.subscriptionDropdownLabel}>
       <Dropdown
         placeholder={ContainerCopyMessages.subscriptionDropdownPlaceholder}
         ariaLabel={ContainerCopyMessages.subscriptionDropdownLabel}
-        data-test="subscription-dropdown"
+        options={options}
-        options={subscriptionOptions}
         required
-        selectedKey={selectedSubscriptionId}
+        selectedKey={selectedKey}
-        onChange={handleSubscriptionChange}
+        onChange={onChange}
       />
     </FieldRow>
-  );
+  ),
-});
+  (prev, next) => prev.options.length === next.options.length && prev.selectedKey === next.selectedKey,
+);

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/__snapshots__/AccountDropdown.test.tsx.snap

@@ -1,37 +1,514 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AccountDropdown ID normalization should normalize account ID for Portal platform 1`] = `
+exports[`AccountDropdown Snapshot Testing matches snapshot with all account options 1`] = `
 <div
-  aria-disabled="false"
+  class="ms-Stack flex-row css-109"
-  aria-expanded="false"
-  aria-haspopup="listbox"
-  aria-label="Account"
-  aria-required="true"
-  class="ms-Dropdown is-required dropdown-132"
-  data-is-focusable="true"
-  data-ktp-target="true"
-  data-test="account-dropdown"
-  id="Dropdown21"
-  role="combobox"
-  tabindex="0"
 >
-  <span
+  <div
-    aria-invalid="false"
+    class="ms-StackItem flex-fixed-width css-110"
-    class="ms-Dropdown-title title-137"
-    id="Dropdown21-option"
   >
-    test-account-1
+    <label
-  </span>
+      class="field-label "
-  <span
-    class="ms-Dropdown-caretDownWrapper caretDownWrapper-134"
-  >
-    <i
-      aria-hidden="true"
-      class="ms-Dropdown-caretDown caretDown-136"
-      data-icon-name="ChevronDown"
     >
-      
+      Account
-    </i>
+      : 
-  </span>
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Account"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown0"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
+          id="Dropdown0-option"
+        >
+          Select an account
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AccountDropdown Snapshot Testing matches snapshot with disabled dropdown 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Account
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-disabled="true"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Account"
+        aria-required="true"
+        class="ms-Dropdown is-disabled is-required dropdown-133"
+        data-is-focusable="false"
+        data-ktp-target="true"
+        id="Dropdown2"
+        role="combobox"
+        tabindex="-1"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title title-138"
+          id="Dropdown2-option"
+        >
+          Development Account
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-135"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-137"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AccountDropdown Snapshot Testing matches snapshot with disabled state and no selection 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Account
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-disabled="true"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Account"
+        aria-required="true"
+        class="ms-Dropdown is-disabled is-required dropdown-133"
+        data-is-focusable="false"
+        data-ktp-target="true"
+        id="Dropdown7"
+        role="combobox"
+        tabindex="-1"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-134"
+          id="Dropdown7-option"
+        >
+          Select an account
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-135"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-137"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AccountDropdown Snapshot Testing matches snapshot with empty options 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Account
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Account"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown3"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
+          id="Dropdown3-option"
+        >
+          Select an account
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AccountDropdown Snapshot Testing matches snapshot with long account name 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Account
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Account"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown6"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title title-132"
+          id="Dropdown6-option"
+        >
+          This is an extremely long account name that tests how the component handles text overflow and layout constraints in the dropdown
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AccountDropdown Snapshot Testing matches snapshot with multiple account types 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Account
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Account"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown8"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title title-132"
+          id="Dropdown8-option"
+        >
+          MongoDB Account
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AccountDropdown Snapshot Testing matches snapshot with selected account 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Account
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Account"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown1"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title title-132"
+          id="Dropdown1-option"
+        >
+          Production Account
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AccountDropdown Snapshot Testing matches snapshot with single option 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Account
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Account"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown4"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title title-132"
+          id="Dropdown4-option"
+        >
+          Development Account
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AccountDropdown Snapshot Testing matches snapshot with special characters in options 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Account
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Account"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown5"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
+          id="Dropdown5-option"
+        >
+          Select an account
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
 </div>
 `;

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/__snapshots__/SubscriptionDropdown.test.tsx.snap

@@ -0,0 +1,337 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SubscriptionDropdown Snapshot Testing matches snapshot with all subscription options 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Subscription
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Subscription"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown0"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
+          id="Dropdown0-option"
+        >
+          Select a subscription
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SubscriptionDropdown Snapshot Testing matches snapshot with empty options 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Subscription
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Subscription"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown2"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
+          id="Dropdown2-option"
+        >
+          Select a subscription
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SubscriptionDropdown Snapshot Testing matches snapshot with long subscription name 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Subscription
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Subscription"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown5"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title title-132"
+          id="Dropdown5-option"
+        >
+          This is an extremely long subscription name that tests how the component handles text overflow and layout constraints
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SubscriptionDropdown Snapshot Testing matches snapshot with selected subscription 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Subscription
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Subscription"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown1"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title title-132"
+          id="Dropdown1-option"
+        >
+          Production Subscription
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SubscriptionDropdown Snapshot Testing matches snapshot with single option 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Subscription
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Subscription"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown3"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title title-132"
+          id="Dropdown3-option"
+        >
+          Development Subscription
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SubscriptionDropdown Snapshot Testing matches snapshot with special characters in options 1`] = `
+<div
+  class="ms-Stack flex-row css-109"
+>
+  <div
+    class="ms-StackItem flex-fixed-width css-110"
+  >
+    <label
+      class="field-label "
+    >
+      Subscription
+      : 
+    </label>
+  </div>
+  <div
+    class="ms-StackItem flex-grow-col css-110"
+  >
+    <div
+      class="ms-Dropdown-container"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-label="Subscription"
+        aria-required="true"
+        class="ms-Dropdown is-required dropdown-111"
+        data-is-focusable="true"
+        data-ktp-target="true"
+        id="Dropdown4"
+        role="combobox"
+        tabindex="0"
+      >
+        <span
+          aria-invalid="false"
+          class="ms-Dropdown-title ms-Dropdown-titleIsPlaceHolder title-112"
+          id="Dropdown4-option"
+        >
+          Select a subscription
+        </span>
+        <span
+          class="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
+        >
+          <i
+            aria-hidden="true"
+            class="ms-Dropdown-caretDown caretDown-131"
+            data-icon-name="ChevronDown"
+          >
+            
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/SelectAccount.test.tsx

@@ -1,170 +1,480 @@
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { apiType } from "UserContext";
+import { DatabaseAccount, Subscription } from "../../../../../Contracts/DataModels";
+import { useDatabaseAccounts } from "../../../../../hooks/useDatabaseAccounts";
+import { useSubscriptions } from "../../../../../hooks/useSubscriptions";
 import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
-import { CopyJobContextProviderType } from "../../../Types/CopyJobTypes";
+import { CopyJobContextProviderType, CopyJobContextState } from "../../../Types/CopyJobTypes";
 import SelectAccount from "./SelectAccount";
 
+jest.mock("UserContext", () => ({
+  apiType: jest.fn(),
+}));
+
+jest.mock("../../../../../hooks/useDatabaseAccounts");
+jest.mock("../../../../../hooks/useSubscriptions");
 jest.mock("../../../Context/CopyJobContext", () => ({
-  useCopyJobContext: jest.fn(),
+  useCopyJobContext: () => mockContextValue,
+}));
+
+jest.mock("./Utils/selectAccountUtils", () => ({
+  useDropdownOptions: jest.fn(),
+  useEventHandlers: jest.fn(),
 }));
 
 jest.mock("./Components/SubscriptionDropdown", () => ({
-  SubscriptionDropdown: jest.fn(() => <div data-testid="subscription-dropdown">Subscription Dropdown</div>),
+  SubscriptionDropdown: jest.fn(({ options, selectedKey, onChange, ...props }) => (
-}));
+    <div data-testid="subscription-dropdown" data-selected={selectedKey} {...props}>
-
+      {options?.map((option: any) => (
-jest.mock("./Components/AccountDropdown", () => ({
+        <div
-  AccountDropdown: jest.fn(() => <div data-testid="account-dropdown">Account Dropdown</div>),
+          key={option.key}
-}));
+          data-testid={`subscription-option-${option.key}`}
-
+          onClick={() => onChange?.(undefined, option)}
-jest.mock("./Components/MigrationTypeCheckbox", () => ({
+        >
-  MigrationTypeCheckbox: jest.fn(({ checked, onChange }: { checked: boolean; onChange: () => void }) => (
+          {option.text}
-    <div data-testid="migration-type-checkbox">
+        </div>
-      <input
+      ))}
-        type="checkbox"
-        checked={checked}
-        onChange={onChange}
-        data-testid="migration-checkbox-input"
-        aria-label="Migration Type Checkbox"
-      />
-      Copy container in offline mode
     </div>
   )),
 }));
 
-describe("SelectAccount", () => {
+jest.mock("./Components/AccountDropdown", () => ({
-  const mockSetCopyJobState = jest.fn();
+  AccountDropdown: jest.fn(({ options, selectedKey, disabled, onChange, ...props }) => (
+    <div data-testid="account-dropdown" data-selected={selectedKey} data-disabled={disabled} {...props}>
+      {options?.map((option: any) => (
+        <div
+          key={option.key}
+          data-testid={`account-option-${option.key}`}
+          onClick={() => onChange?.(undefined, option)}
+        >
+          {option.text}
+        </div>
+      ))}
+    </div>
+  )),
+}));
 
-  const defaultContextValue: CopyJobContextProviderType = {
+jest.mock("./Components/MigrationTypeCheckbox", () => ({
-    copyJobState: {
+  MigrationTypeCheckbox: jest.fn(({ checked, onChange, ...props }) => (
-      jobName: "",
+    <div data-testid="migration-type-checkbox" data-checked={checked} {...props}>
-      migrationType: CopyJobMigrationType.Online,
+      <input
-      source: {
+        type="checkbox"
-        subscription: null as any,
+        checked={checked}
-        account: null as any,
+        onChange={(e) => onChange?.(e, e.target.checked)}
-        databaseId: "",
+        data-testid="migration-checkbox-input"
-        containerId: "",
+      />
-      },
+    </div>
-      target: {
+  )),
-        subscriptionId: "",
+}));
-        account: null as any,
+
-        databaseId: "",
+jest.mock("../../../ContainerCopyMessages", () => ({
-        containerId: "",
+  selectAccountDescription: "Select your source account and subscription",
-      },
+}));
-      sourceReadAccessFromTarget: false,
+
+const mockUseDatabaseAccounts = useDatabaseAccounts as jest.MockedFunction<typeof useDatabaseAccounts>;
+const mockUseSubscriptions = useSubscriptions as jest.MockedFunction<typeof useSubscriptions>;
+const mockApiType = apiType as jest.MockedFunction<typeof apiType>;
+
+import { useDropdownOptions, useEventHandlers } from "./Utils/selectAccountUtils";
+const mockUseDropdownOptions = useDropdownOptions as jest.MockedFunction<typeof useDropdownOptions>;
+const mockUseEventHandlers = useEventHandlers as jest.MockedFunction<typeof useEventHandlers>;
+
+const mockSubscriptions = [
+  {
+    subscriptionId: "sub-1",
+    displayName: "Test Subscription 1",
+    authorizationSource: "RoleBased",
+    subscriptionPolicies: {
+      quotaId: "quota-1",
+      spendingLimit: "Off",
+      locationPlacementId: "loc-1",
     },
-    setCopyJobState: mockSetCopyJobState,
+  },
-    flow: { currentScreen: "selectAccount" },
+  {
-    setFlow: jest.fn(),
+    subscriptionId: "sub-2",
-    contextError: null,
+    displayName: "Test Subscription 2",
-    setContextError: jest.fn(),
+    authorizationSource: "RoleBased",
-    explorer: {} as any,
+    subscriptionPolicies: {
-    resetCopyJobState: jest.fn(),
+      quotaId: "quota-2",
-  };
+      spendingLimit: "On",
+      locationPlacementId: "loc-2",
+    },
+  },
+] as Subscription[];
 
+const mockAccounts = [
+  {
+    id: "/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1",
+    name: "test-cosmos-account-1",
+    location: "East US",
+    kind: "GlobalDocumentDB",
+    properties: {
+      documentEndpoint: "https://account-1.documents.azure.com/",
+      capabilities: [],
+      enableFreeTier: false,
+    },
+  },
+  {
+    id: "/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-2",
+    name: "test-cosmos-account-2",
+    location: "West US",
+    kind: "MongoDB",
+    properties: {
+      documentEndpoint: "https://account-2.documents.azure.com/",
+      capabilities: [],
+    },
+  },
+] as DatabaseAccount[];
+
+const mockDropdownOptions = {
+  subscriptionOptions: [
+    { key: "sub-1", text: "Test Subscription 1", data: mockSubscriptions[0] },
+    { key: "sub-2", text: "Test Subscription 2", data: mockSubscriptions[1] },
+  ],
+  accountOptions: [{ key: mockAccounts[0].id, text: mockAccounts[0].name, data: mockAccounts[0] }],
+};
+
+const mockEventHandlers = {
+  handleSelectSourceAccount: jest.fn(),
+  handleMigrationTypeChange: jest.fn(),
+};
+
+let mockContextValue = {
+  copyJobState: {
+    jobName: "",
+    migrationType: CopyJobMigrationType.Offline,
+    source: {
+      subscription: null,
+      account: null,
+      databaseId: "",
+      containerId: "",
+    },
+    target: {
+      subscriptionId: "",
+      account: null,
+      databaseId: "",
+      containerId: "",
+    },
+    sourceReadAccessFromTarget: false,
+  } as CopyJobContextState,
+  setCopyJobState: jest.fn(),
+  flow: null,
+  setFlow: jest.fn(),
+  contextError: null,
+  setContextError: jest.fn(),
+  resetCopyJobState: jest.fn(),
+  explorer: {} as any,
+} as CopyJobContextProviderType;
+
+describe("SelectAccount Component", () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    (useCopyJobContext as jest.Mock).mockReturnValue(defaultContextValue);
+
+    mockContextValue = {
+      copyJobState: {
+        jobName: "",
+        migrationType: CopyJobMigrationType.Offline,
+        source: {
+          subscription: null,
+          account: null,
+          databaseId: "",
+          containerId: "",
+        },
+        target: {
+          subscriptionId: "",
+          account: null,
+          databaseId: "",
+          containerId: "",
+        },
+        sourceReadAccessFromTarget: false,
+      } as CopyJobContextState,
+      setCopyJobState: jest.fn(),
+      flow: null,
+      setFlow: jest.fn(),
+      contextError: null,
+      setContextError: jest.fn(),
+      resetCopyJobState: jest.fn(),
+      explorer: {} as any,
+    };
+
+    mockUseSubscriptions.mockReturnValue(mockSubscriptions);
+    mockUseDatabaseAccounts.mockReturnValue(mockAccounts);
+    mockApiType.mockReturnValue("SQL");
+    mockUseDropdownOptions.mockReturnValue(mockDropdownOptions);
+    mockUseEventHandlers.mockReturnValue(mockEventHandlers);
   });
 
-  afterEach(() => {
+  describe("Rendering", () => {
-    jest.clearAllMocks();
+    it("should render component with default state", () => {
-  });
-
-  describe("Component Rendering", () => {
-    it("should render the component with all required elements", () => {
       const { container } = render(<SelectAccount />);
 
-      expect(container.firstChild).toHaveAttribute("data-test", "Panel:SelectAccountContainer");
+      expect(screen.getByText("Select your source account and subscription")).toBeInTheDocument();
-      expect(container.firstChild).toHaveClass("selectAccountContainer");
-
-      expect(screen.getByText(/Please select a source account from which to copy/i)).toBeInTheDocument();
-
       expect(screen.getByTestId("subscription-dropdown")).toBeInTheDocument();
       expect(screen.getByTestId("account-dropdown")).toBeInTheDocument();
       expect(screen.getByTestId("migration-type-checkbox")).toBeInTheDocument();
+      expect(container).toMatchSnapshot();
     });
 
-    it("should render correctly with snapshot", () => {
+    it("should render with selected subscription", () => {
+      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
+
       const { container } = render(<SelectAccount />);
-      expect(container.firstChild).toMatchSnapshot();
+
+      expect(screen.getByTestId("subscription-dropdown")).toHaveAttribute("data-selected", "sub-1");
+      expect(container).toMatchSnapshot();
+    });
+
+    it("should render with selected account", () => {
+      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
+      mockContextValue.copyJobState.source.account = mockAccounts[0];
+
+      const { container } = render(<SelectAccount />);
+
+      expect(screen.getByTestId("account-dropdown")).toHaveAttribute("data-selected", mockAccounts[0].id);
+      expect(container).toMatchSnapshot();
+    });
+
+    it("should render with offline migration type checked", () => {
+      mockContextValue.copyJobState.migrationType = CopyJobMigrationType.Offline;
+
+      const { container } = render(<SelectAccount />);
+
+      expect(screen.getByTestId("migration-type-checkbox")).toHaveAttribute("data-checked", "true");
+      expect(container).toMatchSnapshot();
+    });
+
+    it("should render with online migration type unchecked", () => {
+      mockContextValue.copyJobState.migrationType = CopyJobMigrationType.Online;
+
+      const { container } = render(<SelectAccount />);
+
+      expect(screen.getByTestId("migration-type-checkbox")).toHaveAttribute("data-checked", "false");
+      expect(container).toMatchSnapshot();
     });
   });
 
-  describe("Migration Type Functionality", () => {
+  describe("Hook Integration", () => {
-    it("should display migration type checkbox as unchecked when migrationType is Online", () => {
+    it("should call useSubscriptions hook", () => {
-      (useCopyJobContext as jest.Mock).mockReturnValue({
-        ...defaultContextValue,
-        copyJobState: {
-          ...defaultContextValue.copyJobState,
-          migrationType: CopyJobMigrationType.Online,
-        },
-      });
-
       render(<SelectAccount />);
-
+      expect(mockUseSubscriptions).toHaveBeenCalledTimes(1);
-      const checkbox = screen.getByTestId("migration-checkbox-input");
-      expect(checkbox).not.toBeChecked();
     });
 
-    it("should display migration type checkbox as checked when migrationType is Offline", () => {
+    it("should call useDatabaseAccounts with selected subscription ID", () => {
-      (useCopyJobContext as jest.Mock).mockReturnValue({
+      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
-        ...defaultContextValue,
-        copyJobState: {
-          ...defaultContextValue.copyJobState,
-          migrationType: CopyJobMigrationType.Offline,
-        },
-      });
-
       render(<SelectAccount />);
 
-      const checkbox = screen.getByTestId("migration-checkbox-input");
+      expect(mockUseDatabaseAccounts).toHaveBeenCalledWith("sub-1");
-      expect(checkbox).toBeChecked();
     });
 
-    it("should call setCopyJobState with Online migration type when checkbox is unchecked", () => {
+    it("should call useDatabaseAccounts with undefined when no subscription selected", () => {
-      (useCopyJobContext as jest.Mock).mockReturnValue({
+      render(<SelectAccount />);
-        ...defaultContextValue,
+      expect(mockUseDatabaseAccounts).toHaveBeenCalledWith(undefined);
-        copyJobState: {
+    });
-          ...defaultContextValue.copyJobState,
+
-          migrationType: CopyJobMigrationType.Offline,
+    it("should filter accounts to SQL API only", () => {
-        },
+      mockApiType.mockReturnValueOnce("SQL").mockReturnValueOnce("Mongo");
-      });
+      render(<SelectAccount />);
+
+      expect(mockApiType).toHaveBeenCalledTimes(2);
+      expect(mockApiType).toHaveBeenCalledWith(mockAccounts[0]);
+      expect(mockApiType).toHaveBeenCalledWith(mockAccounts[1]);
+    });
+
+    it("should call useDropdownOptions with correct parameters", () => {
+      const sqlOnlyAccounts = [mockAccounts[0]]; // Only SQL account
+      mockApiType.mockImplementation((account) => (account === mockAccounts[0] ? "SQL" : "Mongo"));
 
       render(<SelectAccount />);
 
+      expect(mockUseDropdownOptions).toHaveBeenCalledWith(mockSubscriptions, sqlOnlyAccounts);
+    });
+
+    it("should call useEventHandlers with setCopyJobState", () => {
+      render(<SelectAccount />);
+      expect(mockUseEventHandlers).toHaveBeenCalledWith(mockContextValue.setCopyJobState);
+    });
+  });
+
+  describe("Event Handling", () => {
+    it("should handle subscription selection", () => {
+      render(<SelectAccount />);
+
+      const subscriptionOption = screen.getByTestId("subscription-option-sub-1");
+      fireEvent.click(subscriptionOption);
+
+      expect(mockEventHandlers.handleSelectSourceAccount).toHaveBeenCalledWith("subscription", mockSubscriptions[0]);
+    });
+
+    it("should handle account selection", () => {
+      render(<SelectAccount />);
+
+      const accountOption = screen.getByTestId(`account-option-${mockAccounts[0].id}`);
+      fireEvent.click(accountOption);
+
+      expect(mockEventHandlers.handleSelectSourceAccount).toHaveBeenCalledWith("account", mockAccounts[0]);
+    });
+
+    it("should handle migration type change", () => {
+      render(<SelectAccount />);
       const checkbox = screen.getByTestId("migration-checkbox-input");
       fireEvent.click(checkbox);
 
-      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+      expect(mockEventHandlers.handleMigrationTypeChange).toHaveBeenCalledWith(expect.any(Object), false);
-
-      const updateFunction = mockSetCopyJobState.mock.calls[0][0];
-      const previousState = {
-        ...defaultContextValue.copyJobState,
-        migrationType: CopyJobMigrationType.Offline,
-      };
-      const result = updateFunction(previousState);
-
-      expect(result).toEqual({
-        ...previousState,
-        migrationType: CopyJobMigrationType.Online,
-      });
     });
   });
 
-  describe("Performance and Optimization", () => {
+  describe("Dropdown States", () => {
-    it("should maintain referential equality of handler functions between renders", async () => {
+    it("should disable account dropdown when no subscription is selected", () => {
-      const { rerender } = render(<SelectAccount />);
+      render(<SelectAccount />);
 
-      const migrationCheckbox = (await import("./Components/MigrationTypeCheckbox")).MigrationTypeCheckbox as jest.Mock;
+      expect(screen.getByTestId("account-dropdown")).toHaveAttribute("data-disabled", "true");
-      const firstRenderHandler = migrationCheckbox.mock.calls[migrationCheckbox.mock.calls.length - 1][0].onChange;
+    });
 
-      rerender(<SelectAccount />);
+    it("should enable account dropdown when subscription is selected", () => {
+      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
 
-      const secondRenderHandler = migrationCheckbox.mock.calls[migrationCheckbox.mock.calls.length - 1][0].onChange;
+      render(<SelectAccount />);
 
-      expect(firstRenderHandler).toBe(secondRenderHandler);
+      expect(screen.getByTestId("account-dropdown")).toHaveAttribute("data-disabled", "false");
+    });
+  });
+
+  describe("Component Props", () => {
+    it("should pass correct props to SubscriptionDropdown", () => {
+      render(<SelectAccount />);
+
+      const dropdown = screen.getByTestId("subscription-dropdown");
+      expect(dropdown).not.toHaveAttribute("data-selected");
+    });
+
+    it("should pass selected subscription ID to SubscriptionDropdown", () => {
+      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
+
+      render(<SelectAccount />);
+
+      const dropdown = screen.getByTestId("subscription-dropdown");
+      expect(dropdown).toHaveAttribute("data-selected", "sub-1");
+    });
+
+    it("should pass correct props to AccountDropdown", () => {
+      render(<SelectAccount />);
+
+      const dropdown = screen.getByTestId("account-dropdown");
+      expect(dropdown).not.toHaveAttribute("data-selected");
+      expect(dropdown).toHaveAttribute("data-disabled", "true");
+    });
+
+    it("should pass selected account ID to AccountDropdown", () => {
+      mockContextValue.copyJobState.source.account = mockAccounts[0];
+
+      render(<SelectAccount />);
+
+      const dropdown = screen.getByTestId("account-dropdown");
+      expect(dropdown).toHaveAttribute("data-selected", mockAccounts[0].id);
+    });
+
+    it("should pass correct checked state to MigrationTypeCheckbox", () => {
+      mockContextValue.copyJobState.migrationType = CopyJobMigrationType.Offline;
+
+      render(<SelectAccount />);
+
+      const checkbox = screen.getByTestId("migration-type-checkbox");
+      expect(checkbox).toHaveAttribute("data-checked", "true");
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle empty subscriptions array", () => {
+      mockUseSubscriptions.mockReturnValue([]);
+      mockUseDropdownOptions.mockReturnValue({
+        subscriptionOptions: [],
+        accountOptions: [],
+      });
+
+      const { container } = render(<SelectAccount />);
+      expect(container).toMatchSnapshot();
+    });
+
+    it("should handle empty accounts array", () => {
+      mockUseDatabaseAccounts.mockReturnValue([]);
+      mockUseDropdownOptions.mockReturnValue({
+        subscriptionOptions: mockDropdownOptions.subscriptionOptions,
+        accountOptions: [],
+      });
+
+      const { container } = render(<SelectAccount />);
+      expect(container).toMatchSnapshot();
+    });
+
+    it("should handle null subscription in context", () => {
+      mockContextValue.copyJobState.source.subscription = null;
+
+      const { container } = render(<SelectAccount />);
+      expect(container).toMatchSnapshot();
+    });
+
+    it("should handle null account in context", () => {
+      mockContextValue.copyJobState.source.account = null;
+
+      const { container } = render(<SelectAccount />);
+      expect(container).toMatchSnapshot();
+    });
+
+    it("should handle undefined subscriptions from hook", () => {
+      mockUseSubscriptions.mockReturnValue(undefined as any);
+      mockUseDropdownOptions.mockReturnValue({
+        subscriptionOptions: [],
+        accountOptions: [],
+      });
+
+      const { container } = render(<SelectAccount />);
+      expect(container).toMatchSnapshot();
+    });
+
+    it("should handle undefined accounts from hook", () => {
+      mockUseDatabaseAccounts.mockReturnValue(undefined as any);
+      mockUseDropdownOptions.mockReturnValue({
+        subscriptionOptions: mockDropdownOptions.subscriptionOptions,
+        accountOptions: [],
+      });
+
+      const { container } = render(<SelectAccount />);
+      expect(container).toMatchSnapshot();
+    });
+
+    it("should filter out non-SQL accounts correctly", () => {
+      const mixedAccounts = [
+        { ...mockAccounts[0], kind: "GlobalDocumentDB" },
+        { ...mockAccounts[1], kind: "MongoDB" },
+      ];
+
+      mockUseDatabaseAccounts.mockReturnValue(mixedAccounts);
+      mockApiType.mockImplementation((account) => (account.kind === "GlobalDocumentDB" ? "SQL" : "Mongo"));
+
+      render(<SelectAccount />);
+      expect(mockApiType).toHaveBeenCalledTimes(2);
+
+      const sqlOnlyAccounts = mixedAccounts.filter((account) => apiType(account) === "SQL");
+      expect(mockUseDropdownOptions).toHaveBeenCalledWith(mockSubscriptions, sqlOnlyAccounts);
+    });
+  });
+
+  describe("Complete Workflow", () => {
+    it("should render complete workflow with all selections", () => {
+      mockContextValue.copyJobState.source.subscription = mockSubscriptions[0];
+      mockContextValue.copyJobState.source.account = mockAccounts[0];
+      mockContextValue.copyJobState.migrationType = CopyJobMigrationType.Online;
+
+      const { container } = render(<SelectAccount />);
+
+      expect(screen.getByTestId("subscription-dropdown")).toHaveAttribute("data-selected", "sub-1");
+      expect(screen.getByTestId("account-dropdown")).toHaveAttribute("data-selected", mockAccounts[0].id);
+      expect(screen.getByTestId("account-dropdown")).toHaveAttribute("data-disabled", "false");
+      expect(screen.getByTestId("migration-type-checkbox")).toHaveAttribute("data-checked", "false");
+
+      expect(container).toMatchSnapshot();
     });
   });
 });

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/SelectAccount.tsx

@@ -1,37 +1,52 @@
-import { Stack, Text } from "@fluentui/react";
+/* eslint-disable react/display-name */
+import { Stack } from "@fluentui/react";
 import React from "react";
+import { apiType } from "UserContext";
+import { DatabaseAccount, Subscription } from "../../../../../Contracts/DataModels";
+import { useDatabaseAccounts } from "../../../../../hooks/useDatabaseAccounts";
+import { useSubscriptions } from "../../../../../hooks/useSubscriptions";
 import ContainerCopyMessages from "../../../ContainerCopyMessages";
 import { useCopyJobContext } from "../../../Context/CopyJobContext";
 import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
 import { AccountDropdown } from "./Components/AccountDropdown";
 import { MigrationTypeCheckbox } from "./Components/MigrationTypeCheckbox";
 import { SubscriptionDropdown } from "./Components/SubscriptionDropdown";
+import { useDropdownOptions, useEventHandlers } from "./Utils/selectAccountUtils";
 
 const SelectAccount = React.memo(() => {
   const { copyJobState, setCopyJobState } = useCopyJobContext();
+  const selectedSubscriptionId = copyJobState?.source?.subscription?.subscriptionId;
+  const selectedSourceAccountId = copyJobState?.source?.account?.id;
 
-  const handleMigrationTypeChange = (_ev?: React.FormEvent<HTMLElement>, checked?: boolean) => {
+  const subscriptions: Subscription[] = useSubscriptions();
-    setCopyJobState((prevState) => ({
+  const allAccounts: DatabaseAccount[] = useDatabaseAccounts(selectedSubscriptionId);
-      ...prevState,
+  const sqlApiOnlyAccounts: DatabaseAccount[] = allAccounts?.filter((account) => apiType(account) === "SQL");
-      migrationType: checked ? CopyJobMigrationType.Offline : CopyJobMigrationType.Online,
+
-    }));
+  const { subscriptionOptions, accountOptions } = useDropdownOptions(subscriptions, sqlApiOnlyAccounts);
-  };
+  const { handleSelectSourceAccount, handleMigrationTypeChange } = useEventHandlers(setCopyJobState);
 
   const migrationTypeChecked = copyJobState?.migrationType === CopyJobMigrationType.Offline;
 
   return (
-    <Stack data-test="Panel:SelectAccountContainer" className="selectAccountContainer" tokens={{ childrenGap: 15 }}>
+    <Stack className="selectAccountContainer" tokens={{ childrenGap: 15 }}>
-      <Text>{ContainerCopyMessages.selectAccountDescription}</Text>
+      <span>{ContainerCopyMessages.selectAccountDescription}</span>
 
-      <SubscriptionDropdown />
+      <SubscriptionDropdown
+        options={subscriptionOptions}
+        selectedKey={selectedSubscriptionId}
+        onChange={(_ev, option) => handleSelectSourceAccount("subscription", option?.data)}
+      />
 
-      <AccountDropdown />
+      <AccountDropdown
+        options={accountOptions}
+        selectedKey={selectedSourceAccountId}
+        disabled={!selectedSubscriptionId}
+        onChange={(_ev, option) => handleSelectSourceAccount("account", option?.data)}
+      />
 
       <MigrationTypeCheckbox checked={migrationTypeChecked} onChange={handleMigrationTypeChange} />
     </Stack>
   );
 });
 
-SelectAccount.displayName = "SelectAccount";
-
 export default SelectAccount;

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Utils/selectAccountUtils.test.tsx

@@ -0,0 +1,526 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render } from "@testing-library/react";
+import React from "react";
+import { noop } from "underscore";
+import { DatabaseAccount, Subscription } from "../../../../../../Contracts/DataModels";
+import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
+import { CopyJobContextState } from "../../../../Types/CopyJobTypes";
+import { useDropdownOptions, useEventHandlers } from "./selectAccountUtils";
+
+jest.mock("../../../Utils/useCopyJobPrerequisitesCache", () => ({
+  useCopyJobPrerequisitesCache: jest.fn(() => ({
+    setValidationCache: jest.fn(),
+  })),
+}));
+
+const mockSubscriptions: Subscription[] = [
+  {
+    subscriptionId: "sub-1",
+    displayName: "Test Subscription 1",
+    state: "Enabled",
+    subscriptionPolicies: {
+      locationPlacementId: "test",
+      quotaId: "test",
+      spendingLimit: "Off",
+    },
+  },
+  {
+    subscriptionId: "sub-2",
+    displayName: "Test Subscription 2",
+    state: "Enabled",
+    subscriptionPolicies: {
+      locationPlacementId: "test",
+      quotaId: "test",
+      spendingLimit: "Off",
+    },
+  },
+];
+
+const mockAccounts: DatabaseAccount[] = [
+  {
+    id: "account-1",
+    name: "Test Account 1",
+    location: "East US",
+    type: "Microsoft.DocumentDB/databaseAccounts",
+    kind: "GlobalDocumentDB",
+    properties: {
+      documentEndpoint: "https://test1.documents.azure.com:443/",
+      gremlinEndpoint: "https://test1.gremlin.cosmosdb.azure.com:443/",
+      tableEndpoint: "https://test1.table.cosmosdb.azure.com:443/",
+      cassandraEndpoint: "https://test1.cassandra.cosmosdb.azure.com:443/",
+      capabilities: [],
+      writeLocations: [],
+      readLocations: [],
+      locations: [],
+      ipRules: [],
+      enableMultipleWriteLocations: false,
+      isVirtualNetworkFilterEnabled: false,
+      enableFreeTier: false,
+      enableAnalyticalStorage: false,
+      publicNetworkAccess: "Enabled",
+      defaultIdentity: "",
+      disableLocalAuth: false,
+    },
+  },
+  {
+    id: "account-2",
+    name: "Test Account 2",
+    location: "West US",
+    type: "Microsoft.DocumentDB/databaseAccounts",
+    kind: "GlobalDocumentDB",
+    properties: {
+      documentEndpoint: "https://test2.documents.azure.com:443/",
+      gremlinEndpoint: "https://test2.gremlin.cosmosdb.azure.com:443/",
+      tableEndpoint: "https://test2.table.cosmosdb.azure.com:443/",
+      cassandraEndpoint: "https://test2.cassandra.cosmosdb.azure.com:443/",
+      capabilities: [],
+      writeLocations: [],
+      readLocations: [],
+      locations: [],
+      enableMultipleWriteLocations: false,
+      isVirtualNetworkFilterEnabled: false,
+      enableFreeTier: false,
+      enableAnalyticalStorage: false,
+      publicNetworkAccess: "Enabled",
+      defaultIdentity: "",
+      disableLocalAuth: false,
+    },
+  },
+];
+
+const DropdownOptionsTestComponent: React.FC<{
+  subscriptions: Subscription[];
+  accounts: DatabaseAccount[];
+  onResult?: (result: { subscriptionOptions: any[]; accountOptions: any[] }) => void;
+}> = ({ subscriptions, accounts, onResult }) => {
+  const result = useDropdownOptions(subscriptions, accounts);
+
+  React.useEffect(() => {
+    if (onResult) {
+      onResult(result);
+    }
+  }, [result, onResult]);
+
+  return (
+    <div>
+      <div data-testid="subscription-options-count">{result.subscriptionOptions.length}</div>
+      <div data-testid="account-options-count">{result.accountOptions.length}</div>
+    </div>
+  );
+};
+
+const EventHandlersTestComponent: React.FC<{
+  setCopyJobState: jest.Mock;
+  onResult?: (result: any) => void;
+}> = ({ setCopyJobState, onResult }) => {
+  const result = useEventHandlers(setCopyJobState);
+
+  React.useEffect(() => {
+    if (onResult) {
+      onResult(result);
+    }
+  }, [result, onResult]);
+
+  return (
+    <div>
+      <button
+        data-testid="select-subscription-button"
+        onClick={() => result.handleSelectSourceAccount("subscription", mockSubscriptions[0] as any)}
+      >
+        Select Subscription
+      </button>
+      <button
+        data-testid="select-account-button"
+        onClick={() => result.handleSelectSourceAccount("account", mockAccounts[0] as any)}
+      >
+        Select Account
+      </button>
+      <button data-testid="migration-type-button" onClick={(e) => result.handleMigrationTypeChange(e, true)}>
+        Change Migration Type
+      </button>
+    </div>
+  );
+};
+
+describe("selectAccountUtils", () => {
+  describe("useDropdownOptions", () => {
+    it("should return empty arrays when subscriptions and accounts are undefined", () => {
+      let capturedResult: any;
+
+      render(
+        <DropdownOptionsTestComponent
+          subscriptions={undefined as any}
+          accounts={undefined as any}
+          onResult={(result) => {
+            capturedResult = result;
+          }}
+        />,
+      );
+
+      expect(capturedResult).toEqual({
+        subscriptionOptions: [],
+        accountOptions: [],
+      });
+    });
+
+    it("should return empty arrays when subscriptions and accounts are empty arrays", () => {
+      let capturedResult: any;
+
+      render(
+        <DropdownOptionsTestComponent
+          subscriptions={[]}
+          accounts={[]}
+          onResult={(result) => {
+            capturedResult = result;
+          }}
+        />,
+      );
+
+      expect(capturedResult).toEqual({
+        subscriptionOptions: [],
+        accountOptions: [],
+      });
+    });
+
+    it("should transform subscriptions into dropdown options correctly", () => {
+      let capturedResult: any;
+
+      render(
+        <DropdownOptionsTestComponent
+          subscriptions={mockSubscriptions}
+          accounts={[]}
+          onResult={(result) => {
+            capturedResult = result;
+          }}
+        />,
+      );
+
+      expect(capturedResult.subscriptionOptions).toHaveLength(2);
+      expect(capturedResult.subscriptionOptions[0]).toEqual({
+        key: "sub-1",
+        text: "Test Subscription 1",
+        data: mockSubscriptions[0],
+      });
+      expect(capturedResult.subscriptionOptions[1]).toEqual({
+        key: "sub-2",
+        text: "Test Subscription 2",
+        data: mockSubscriptions[1],
+      });
+    });
+
+    it("should transform accounts into dropdown options correctly", () => {
+      let capturedResult: any;
+
+      render(
+        <DropdownOptionsTestComponent
+          subscriptions={[]}
+          accounts={mockAccounts}
+          onResult={(result) => {
+            capturedResult = result;
+          }}
+        />,
+      );
+
+      expect(capturedResult.accountOptions).toHaveLength(2);
+      expect(capturedResult.accountOptions[0]).toEqual({
+        key: "account-1",
+        text: "Test Account 1",
+        data: mockAccounts[0],
+      });
+      expect(capturedResult.accountOptions[1]).toEqual({
+        key: "account-2",
+        text: "Test Account 2",
+        data: mockAccounts[1],
+      });
+    });
+
+    it("should handle both subscriptions and accounts correctly", () => {
+      let capturedResult: any;
+
+      render(
+        <DropdownOptionsTestComponent
+          subscriptions={mockSubscriptions}
+          accounts={mockAccounts}
+          onResult={(result) => {
+            capturedResult = result;
+          }}
+        />,
+      );
+
+      expect(capturedResult.subscriptionOptions).toHaveLength(2);
+      expect(capturedResult.accountOptions).toHaveLength(2);
+    });
+  });
+
+  describe("useEventHandlers", () => {
+    let mockSetCopyJobState: jest.Mock;
+    let mockSetValidationCache: jest.Mock;
+
+    beforeEach(async () => {
+      mockSetCopyJobState = jest.fn();
+      mockSetValidationCache = jest.fn();
+
+      const { useCopyJobPrerequisitesCache } = await import("../../../Utils/useCopyJobPrerequisitesCache");
+      (useCopyJobPrerequisitesCache as unknown as jest.Mock).mockReturnValue({
+        setValidationCache: mockSetValidationCache,
+      });
+    });
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it("should handle subscription selection correctly", () => {
+      const { getByTestId } = render(
+        <EventHandlersTestComponent setCopyJobState={mockSetCopyJobState} onResult={noop} />,
+      );
+
+      fireEvent.click(getByTestId("select-subscription-button"));
+
+      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+      expect(mockSetValidationCache).toHaveBeenCalledWith(new Map<string, boolean>());
+
+      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
+      const mockPrevState: CopyJobContextState = {
+        source: {
+          subscription: null,
+          account: { id: "existing-account" } as any,
+        },
+        migrationType: CopyJobMigrationType.Online,
+      } as any;
+
+      const newState = stateUpdater(mockPrevState);
+      expect(newState).toEqual({
+        source: {
+          subscription: mockSubscriptions[0],
+          account: null,
+        },
+        migrationType: CopyJobMigrationType.Online,
+      });
+    });
+
+    it("should handle account selection correctly", () => {
+      const { getByTestId } = render(
+        <EventHandlersTestComponent setCopyJobState={mockSetCopyJobState} onResult={noop} />,
+      );
+
+      fireEvent.click(getByTestId("select-account-button"));
+
+      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+      expect(mockSetValidationCache).toHaveBeenCalledWith(new Map<string, boolean>());
+
+      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
+      const mockPrevState: CopyJobContextState = {
+        source: {
+          subscription: { subscriptionId: "existing-sub" } as any,
+          account: null,
+        },
+        migrationType: CopyJobMigrationType.Online,
+      } as any;
+
+      const newState = stateUpdater(mockPrevState);
+      expect(newState).toEqual({
+        source: {
+          subscription: { subscriptionId: "existing-sub" },
+          account: mockAccounts[0],
+        },
+        migrationType: CopyJobMigrationType.Online,
+      });
+    });
+
+    it("should handle subscription selection with undefined data", () => {
+      let capturedHandlers: any;
+
+      render(
+        <EventHandlersTestComponent
+          setCopyJobState={mockSetCopyJobState}
+          onResult={(result) => {
+            capturedHandlers = result;
+          }}
+        />,
+      );
+
+      capturedHandlers.handleSelectSourceAccount("subscription", undefined);
+
+      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+
+      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
+      const mockPrevState: CopyJobContextState = {
+        source: {
+          subscription: { subscriptionId: "existing-sub" } as any,
+          account: { id: "existing-account" } as any,
+        },
+        migrationType: CopyJobMigrationType.Online,
+      } as any;
+
+      const newState = stateUpdater(mockPrevState);
+      expect(newState).toEqual({
+        source: {
+          subscription: null,
+          account: null,
+        },
+        migrationType: CopyJobMigrationType.Online,
+      });
+    });
+
+    it("should handle account selection with undefined data", () => {
+      let capturedHandlers: any;
+
+      render(
+        <EventHandlersTestComponent
+          setCopyJobState={mockSetCopyJobState}
+          onResult={(result) => {
+            capturedHandlers = result;
+          }}
+        />,
+      );
+
+      capturedHandlers.handleSelectSourceAccount("account", undefined);
+
+      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+
+      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
+      const mockPrevState: CopyJobContextState = {
+        source: {
+          subscription: { subscriptionId: "existing-sub" } as any,
+          account: { id: "existing-account" } as any,
+        },
+        migrationType: CopyJobMigrationType.Online,
+      } as any;
+
+      const newState = stateUpdater(mockPrevState);
+      expect(newState).toEqual({
+        source: {
+          subscription: { subscriptionId: "existing-sub" },
+          account: null,
+        },
+        migrationType: CopyJobMigrationType.Online,
+      });
+    });
+
+    it("should handle migration type change to offline", () => {
+      const { getByTestId } = render(<EventHandlersTestComponent setCopyJobState={mockSetCopyJobState} />);
+
+      fireEvent.click(getByTestId("migration-type-button"));
+
+      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+      expect(mockSetValidationCache).toHaveBeenCalledWith(new Map<string, boolean>());
+
+      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
+      const mockPrevState: CopyJobContextState = {
+        source: {
+          subscription: null,
+          account: null,
+        },
+        migrationType: CopyJobMigrationType.Online,
+      } as any;
+
+      const newState = stateUpdater(mockPrevState);
+      expect(newState).toEqual({
+        source: {
+          subscription: null,
+          account: null,
+        },
+        migrationType: CopyJobMigrationType.Offline,
+      });
+    });
+
+    it("should handle migration type change to online when checked is false", () => {
+      let capturedHandlers: any;
+
+      render(
+        <EventHandlersTestComponent
+          setCopyJobState={mockSetCopyJobState}
+          onResult={(result) => {
+            capturedHandlers = result;
+          }}
+        />,
+      );
+
+      capturedHandlers.handleMigrationTypeChange(undefined, false);
+
+      expect(mockSetCopyJobState).toHaveBeenCalledWith(expect.any(Function));
+
+      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
+      const mockPrevState: CopyJobContextState = {
+        source: {
+          subscription: null,
+          account: null,
+        },
+        migrationType: CopyJobMigrationType.Offline,
+      } as any;
+
+      const newState = stateUpdater(mockPrevState);
+      expect(newState).toEqual({
+        source: {
+          subscription: null,
+          account: null,
+        },
+        migrationType: CopyJobMigrationType.Online,
+      });
+    });
+
+    it("should preserve other state properties when updating", () => {
+      let capturedHandlers: any;
+
+      render(
+        <EventHandlersTestComponent
+          setCopyJobState={mockSetCopyJobState}
+          onResult={(result) => {
+            capturedHandlers = result;
+          }}
+        />,
+      );
+
+      capturedHandlers.handleSelectSourceAccount("subscription", mockSubscriptions[0] as Subscription);
+
+      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
+      const mockPrevState = {
+        jobName: "Test Job",
+        source: {
+          subscription: null,
+          account: null,
+          databaseId: "test-database-id",
+          containerId: "test-container-id",
+        },
+        migrationType: CopyJobMigrationType.Online,
+        target: {
+          account: { id: "dest-account" } as DatabaseAccount,
+          databaseId: "test-database-id",
+          containerId: "test-container-id",
+          subscriptionId: "dest-sub-id",
+        },
+      } as CopyJobContextState;
+
+      const newState = stateUpdater(mockPrevState);
+      expect(newState.target).toEqual(mockPrevState.target);
+    });
+
+    it("should return the same state for unknown selection type", () => {
+      let capturedHandlers: any;
+
+      render(
+        <EventHandlersTestComponent
+          setCopyJobState={mockSetCopyJobState}
+          onResult={(result) => {
+            capturedHandlers = result;
+          }}
+        />,
+      );
+
+      capturedHandlers.handleSelectSourceAccount("unknown" as any, mockSubscriptions[0] as any);
+
+      const stateUpdater = mockSetCopyJobState.mock.calls[0][0];
+      const mockPrevState: CopyJobContextState = {
+        source: {
+          subscription: { subscriptionId: "existing-sub" } as any,
+          account: { id: "existing-account" } as any,
+        },
+        migrationType: CopyJobMigrationType.Online,
+      } as any;
+
+      const newState = stateUpdater(mockPrevState);
+      expect(newState).toEqual(mockPrevState);
+    });
+  });
+});

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Utils/selectAccountUtils.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { DatabaseAccount, Subscription } from "../../../../../../Contracts/DataModels";
+import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
+import { CopyJobContextProviderType, CopyJobContextState, DropdownOptionType } from "../../../../Types/CopyJobTypes";
+import { useCopyJobPrerequisitesCache } from "../../../Utils/useCopyJobPrerequisitesCache";
+
+export function useDropdownOptions(
+  subscriptions: Subscription[],
+  accounts: DatabaseAccount[],
+): {
+  subscriptionOptions: DropdownOptionType[];
+  accountOptions: DropdownOptionType[];
+} {
+  const subscriptionOptions =
+    subscriptions?.map((sub) => ({
+      key: sub.subscriptionId,
+      text: sub.displayName,
+      data: sub,
+    })) || [];
+
+  const normalizeAccountId = (id: string) => {
+    if (!id) {
+      return id;
+    }
+    return id.replace(/\/Microsoft\.DocumentDb\//i, "/Microsoft.DocumentDB/");
+  };
+
+  const accountOptions =
+    accounts?.map((account) => ({
+      key: normalizeAccountId(account.id),
+      text: account.name,
+      data: account,
+    })) || [];
+
+  return { subscriptionOptions, accountOptions };
+}
+
+type setCopyJobStateType = CopyJobContextProviderType["setCopyJobState"];
+
+export function useEventHandlers(setCopyJobState: setCopyJobStateType) {
+  const { setValidationCache } = useCopyJobPrerequisitesCache();
+  const handleSelectSourceAccount = (
+    type: "subscription" | "account",
+    data: (Subscription & DatabaseAccount) | undefined,
+  ) => {
+    setCopyJobState((prevState: CopyJobContextState) => {
+      if (type === "subscription") {
+        return {
+          ...prevState,
+          source: {
+            ...prevState.source,
+            subscription: data || null,
+            account: null,
+          },
+        };
+      }
+      if (type === "account") {
+        return {
+          ...prevState,
+          source: {
+            ...prevState.source,
+            account: data || null,
+          },
+        };
+      }
+      return prevState;
+    });
+    setValidationCache(new Map<string, boolean>());
+  };
+
+  const handleMigrationTypeChange = React.useCallback((_ev?: React.FormEvent<HTMLElement>, checked?: boolean) => {
+    setCopyJobState((prevState: CopyJobContextState) => ({
+      ...prevState,
+      migrationType: checked ? CopyJobMigrationType.Offline : CopyJobMigrationType.Online,
+    }));
+    setValidationCache(new Map<string, boolean>());
+  }, []);
+
+  return { handleSelectSourceAccount, handleMigrationTypeChange };
+}

src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/__snapshots__/SelectAccount.test.tsx.snap

@@ -1,34 +1,510 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectAccount Component Rendering should render correctly with snapshot 1`] = `
+exports[`SelectAccount Component Complete Workflow should render complete workflow with all selections 1`] = `
-<div
+<div>
-  class="ms-Stack selectAccountContainer css-109"
-  data-test="Panel:SelectAccountContainer"
->
-  <span
-    class="css-110"
-  >
-    Please select a source account from which to copy.
-  </span>
   <div
-    data-testid="subscription-dropdown"
+    class="ms-Stack selectAccountContainer css-109"
   >
-    Subscription Dropdown
+    <span>
-  </div>
+      Select your source account and subscription
-  <div
+    </span>
-    data-testid="account-dropdown"
+    <div
-  >
+      data-selected="sub-1"
-    Account Dropdown
+      data-testid="subscription-dropdown"
-  </div>
+    >
-  <div
+      <div
-    data-testid="migration-type-checkbox"
+        data-testid="subscription-option-sub-1"
-  >
+      >
-    <input
+        Test Subscription 1
-      aria-label="Migration Type Checkbox"
+      </div>
-      data-testid="migration-checkbox-input"
+      <div
-      type="checkbox"
+        data-testid="subscription-option-sub-2"
-    />
+      >
-    Copy container in offline mode
+        Test Subscription 2
+      </div>
+    </div>
+    <div
+      data-disabled="false"
+      data-selected="/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
+      data-testid="account-dropdown"
+    >
+      <div
+        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
+      >
+        test-cosmos-account-1
+      </div>
+    </div>
+    <div
+      data-checked="false"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SelectAccount Component Edge Cases should handle empty accounts array 1`] = `
+<div>
+  <div
+    class="ms-Stack selectAccountContainer css-109"
+  >
+    <span>
+      Select your source account and subscription
+    </span>
+    <div
+      data-testid="subscription-dropdown"
+    >
+      <div
+        data-testid="subscription-option-sub-1"
+      >
+        Test Subscription 1
+      </div>
+      <div
+        data-testid="subscription-option-sub-2"
+      >
+        Test Subscription 2
+      </div>
+    </div>
+    <div
+      data-disabled="true"
+      data-testid="account-dropdown"
+    />
+    <div
+      data-checked="true"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        checked=""
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SelectAccount Component Edge Cases should handle empty subscriptions array 1`] = `
+<div>
+  <div
+    class="ms-Stack selectAccountContainer css-109"
+  >
+    <span>
+      Select your source account and subscription
+    </span>
+    <div
+      data-testid="subscription-dropdown"
+    />
+    <div
+      data-disabled="true"
+      data-testid="account-dropdown"
+    />
+    <div
+      data-checked="true"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        checked=""
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SelectAccount Component Edge Cases should handle null account in context 1`] = `
+<div>
+  <div
+    class="ms-Stack selectAccountContainer css-109"
+  >
+    <span>
+      Select your source account and subscription
+    </span>
+    <div
+      data-testid="subscription-dropdown"
+    >
+      <div
+        data-testid="subscription-option-sub-1"
+      >
+        Test Subscription 1
+      </div>
+      <div
+        data-testid="subscription-option-sub-2"
+      >
+        Test Subscription 2
+      </div>
+    </div>
+    <div
+      data-disabled="true"
+      data-testid="account-dropdown"
+    >
+      <div
+        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
+      >
+        test-cosmos-account-1
+      </div>
+    </div>
+    <div
+      data-checked="true"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        checked=""
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SelectAccount Component Edge Cases should handle null subscription in context 1`] = `
+<div>
+  <div
+    class="ms-Stack selectAccountContainer css-109"
+  >
+    <span>
+      Select your source account and subscription
+    </span>
+    <div
+      data-testid="subscription-dropdown"
+    >
+      <div
+        data-testid="subscription-option-sub-1"
+      >
+        Test Subscription 1
+      </div>
+      <div
+        data-testid="subscription-option-sub-2"
+      >
+        Test Subscription 2
+      </div>
+    </div>
+    <div
+      data-disabled="true"
+      data-testid="account-dropdown"
+    >
+      <div
+        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
+      >
+        test-cosmos-account-1
+      </div>
+    </div>
+    <div
+      data-checked="true"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        checked=""
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SelectAccount Component Edge Cases should handle undefined accounts from hook 1`] = `
+<div>
+  <div
+    class="ms-Stack selectAccountContainer css-109"
+  >
+    <span>
+      Select your source account and subscription
+    </span>
+    <div
+      data-testid="subscription-dropdown"
+    >
+      <div
+        data-testid="subscription-option-sub-1"
+      >
+        Test Subscription 1
+      </div>
+      <div
+        data-testid="subscription-option-sub-2"
+      >
+        Test Subscription 2
+      </div>
+    </div>
+    <div
+      data-disabled="true"
+      data-testid="account-dropdown"
+    />
+    <div
+      data-checked="true"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        checked=""
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SelectAccount Component Edge Cases should handle undefined subscriptions from hook 1`] = `
+<div>
+  <div
+    class="ms-Stack selectAccountContainer css-109"
+  >
+    <span>
+      Select your source account and subscription
+    </span>
+    <div
+      data-testid="subscription-dropdown"
+    />
+    <div
+      data-disabled="true"
+      data-testid="account-dropdown"
+    />
+    <div
+      data-checked="true"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        checked=""
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SelectAccount Component Rendering should render component with default state 1`] = `
+<div>
+  <div
+    class="ms-Stack selectAccountContainer css-109"
+  >
+    <span>
+      Select your source account and subscription
+    </span>
+    <div
+      data-testid="subscription-dropdown"
+    >
+      <div
+        data-testid="subscription-option-sub-1"
+      >
+        Test Subscription 1
+      </div>
+      <div
+        data-testid="subscription-option-sub-2"
+      >
+        Test Subscription 2
+      </div>
+    </div>
+    <div
+      data-disabled="true"
+      data-testid="account-dropdown"
+    >
+      <div
+        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
+      >
+        test-cosmos-account-1
+      </div>
+    </div>
+    <div
+      data-checked="true"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        checked=""
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SelectAccount Component Rendering should render with offline migration type checked 1`] = `
+<div>
+  <div
+    class="ms-Stack selectAccountContainer css-109"
+  >
+    <span>
+      Select your source account and subscription
+    </span>
+    <div
+      data-testid="subscription-dropdown"
+    >
+      <div
+        data-testid="subscription-option-sub-1"
+      >
+        Test Subscription 1
+      </div>
+      <div
+        data-testid="subscription-option-sub-2"
+      >
+        Test Subscription 2
+      </div>
+    </div>
+    <div
+      data-disabled="true"
+      data-testid="account-dropdown"
+    >
+      <div
+        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
+      >
+        test-cosmos-account-1
+      </div>
+    </div>
+    <div
+      data-checked="true"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        checked=""
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SelectAccount Component Rendering should render with online migration type unchecked 1`] = `
+<div>
+  <div
+    class="ms-Stack selectAccountContainer css-109"
+  >
+    <span>
+      Select your source account and subscription
+    </span>
+    <div
+      data-testid="subscription-dropdown"
+    >
+      <div
+        data-testid="subscription-option-sub-1"
+      >
+        Test Subscription 1
+      </div>
+      <div
+        data-testid="subscription-option-sub-2"
+      >
+        Test Subscription 2
+      </div>
+    </div>
+    <div
+      data-disabled="true"
+      data-testid="account-dropdown"
+    >
+      <div
+        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
+      >
+        test-cosmos-account-1
+      </div>
+    </div>
+    <div
+      data-checked="false"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SelectAccount Component Rendering should render with selected account 1`] = `
+<div>
+  <div
+    class="ms-Stack selectAccountContainer css-109"
+  >
+    <span>
+      Select your source account and subscription
+    </span>
+    <div
+      data-selected="sub-1"
+      data-testid="subscription-dropdown"
+    >
+      <div
+        data-testid="subscription-option-sub-1"
+      >
+        Test Subscription 1
+      </div>
+      <div
+        data-testid="subscription-option-sub-2"
+      >
+        Test Subscription 2
+      </div>
+    </div>
+    <div
+      data-disabled="false"
+      data-selected="/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
+      data-testid="account-dropdown"
+    >
+      <div
+        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
+      >
+        test-cosmos-account-1
+      </div>
+    </div>
+    <div
+      data-checked="true"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        checked=""
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SelectAccount Component Rendering should render with selected subscription 1`] = `
+<div>
+  <div
+    class="ms-Stack selectAccountContainer css-109"
+  >
+    <span>
+      Select your source account and subscription
+    </span>
+    <div
+      data-selected="sub-1"
+      data-testid="subscription-dropdown"
+    >
+      <div
+        data-testid="subscription-option-sub-1"
+      >
+        Test Subscription 1
+      </div>
+      <div
+        data-testid="subscription-option-sub-2"
+      >
+        Test Subscription 2
+      </div>
+    </div>
+    <div
+      data-disabled="false"
+      data-testid="account-dropdown"
+    >
+      <div
+        data-testid="account-option-/subscriptions/sub-1/resourceGroups/rg-1/providers/Microsoft.DocumentDB/databaseAccounts/account-1"
+      >
+        test-cosmos-account-1
+      </div>
+    </div>
+    <div
+      data-checked="true"
+      data-testid="migration-type-checkbox"
+    >
+      <input
+        checked=""
+        data-testid="migration-checkbox-input"
+        type="checkbox"
+      />
+    </div>
   </div>
 </div>
 `;

src/Explorer/ContainerCopy/CreateCopyJob/Utils/useCopyJobNavigation.ts

@@ -39,7 +39,6 @@ export function useCopyJobNavigation() {
   const [state, dispatch] = useReducer(navigationReducer, { screenHistory: [SCREEN_KEYS.SelectAccount] });
 
   const handlePrevious = useCallback(() => {
-    setContextError(null);
     dispatch({ type: "PREVIOUS" });
   }, [dispatch]);
 

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobStatusWithIcon.test.tsx

@@ -52,7 +52,7 @@ describe("CopyJobStatusWithIcon", () => {
 
       const spinner = container.querySelector('[class*="ms-Spinner"]');
       expect(spinner).toBeInTheDocument();
-      expect(container).toHaveTextContent("Running");
+      expect(container).toHaveTextContent("In Progress");
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -83,18 +83,18 @@ describe("CopyJobStatusWithIcon", () => {
     it("provides meaningful text content for screen readers", () => {
       const { container } = render(<CopyJobStatusWithIcon status={CopyJobStatusType.InProgress} />);
 
-      expect(container).toHaveTextContent("Running");
+      expect(container).toHaveTextContent("In Progress");
     });
   });
 
   describe("Icon and Status Mapping", () => {
     it("renders correct status text based on mapping", () => {
       const statusMappings = [
-        { status: CopyJobStatusType.Pending, expectedText: "Queued" },
+        { status: CopyJobStatusType.Pending, expectedText: "Pending" },
         { status: CopyJobStatusType.Paused, expectedText: "Paused" },
         { status: CopyJobStatusType.Failed, expectedText: "Failed" },
         { status: CopyJobStatusType.Completed, expectedText: "Completed" },
-        { status: CopyJobStatusType.Running, expectedText: "Running" },
+        { status: CopyJobStatusType.Running, expectedText: "In Progress" },
       ];
 
       statusMappings.forEach(({ status, expectedText }) => {

src/Explorer/ContainerCopy/MonitorCopyJobs/Components/__snapshots__/CopyJobStatusWithIcon.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders InProgress with spin
   <span
     class="css-112"
   >
-    Running
+    In Progress
   </span>
 </div>
 `;
@@ -35,7 +35,7 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders Partitioning with sp
   <span
     class="css-112"
   >
-    Running
+    In Progress
   </span>
 </div>
 `;
@@ -55,7 +55,7 @@ exports[`CopyJobStatusWithIcon Spinner Status Types renders Running with spinner
   <span
     class="css-112"
   >
-    Running
+    In Progress
   </span>
 </div>
 `;
@@ -181,7 +181,7 @@ exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders
   <span
     class="css-112"
   >
-    Queued
+    Pending
   </span>
 </div>
 `;

src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobs.tsx

@@ -44,9 +44,7 @@ const MonitorCopyJobs = forwardRef<MonitorCopyJobsRef, MonitorCopyJobsProps>(({
         return isEqual(prevJobs, normalizedResponse) ? prevJobs : normalizedResponse;
       });
     } catch (error) {
-      if (error.message !== "Previous copy job request was cancelled.") {
+      setError(error.message || "Failed to load copy jobs. Please try again later.");
-        setError(error.message || "Failed to load copy jobs. Please try again later.");
-      }
     } finally {
       if (isFirstFetchRef.current) {
         setLoading(false);

src/Explorer/ContainerCopy/Types/CopyJobTypes.ts

@@ -56,14 +56,14 @@ export interface CopyJobContextState {
   migrationType: CopyJobMigrationType;
   sourceReadAccessFromTarget?: boolean;
   source: {
-    subscription: Subscription | null;
+    subscription: Subscription;
-    account: DatabaseAccount | null;
+    account: DatabaseAccount;
     databaseId: string;
     containerId: string;
   };
   target: {
     subscriptionId: string;
-    account: DatabaseAccount | null;
+    account: DatabaseAccount;
     databaseId: string;
     containerId: string;
   };

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -58,7 +58,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
           aria-expanded={this.state.isExpanded}
         >
           <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
-          <Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>{this.props.title}</Label>
+          <Label>{this.props.title}</Label>
           {this.props.tooltipContent && (
             <TooltipHost
               directionalHint={DirectionalHint.bottomLeftEdge}
@@ -79,14 +79,6 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
                 id={`delete-${this.props.title.split(" ").join("-")}`}
                 iconProps={{ iconName: "Delete" }}
                 style={{ height: 27, marginRight: "20px" }}
-                styles={{
-                  rootHovered: {
-                    backgroundColor: "transparent",
-                  },
-                  rootPressed: {
-                    backgroundColor: "transparent",
-                  },
-                }}
                 onClick={(event) => {
                   event.stopPropagation();
                   this.props.onDelete();

src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap

@@ -20,15 +20,7 @@ exports[`CollapsibleSectionComponent renders 1`] = `
     <Icon
       iconName="ChevronDown"
     />
-    <StyledLabelBase
+    <StyledLabelBase>
-      styles={
-        {
-          "root": {
-            "color": "var(--colorNeutralForeground1)",
-          },
-        }
-      }
-    >
       Sample title
     </StyledLabelBase>
   </Stack>

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -58,26 +58,6 @@ export interface CommandButtonComponentProps {
    */
   tooltipText?: string;
 
-  /**
-   * Custom styles to apply to the button using Fluent UI theme tokens
-   */
-  styles?: {
-    root?: {
-      backgroundColor?: string;
-      color?: string;
-      selectors?: {
-        ":hover"?: {
-          backgroundColor?: string;
-          color?: string;
-        };
-        ":active"?: {
-          backgroundColor?: string;
-          color?: string;
-        };
-      };
-    };
-  };
-
   /**
    * tabindex for the command button
    */
@@ -270,8 +250,6 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
       contentClassName += " hasHiddenItems";
     }
 
-    const style = this.props.styles?.root || {};
-
     return (
       <div className="commandButtonReact">
         <span
@@ -284,7 +262,6 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
           aria-disabled={this.props.disabled}
           aria-haspopup={this.props.hasPopup}
           aria-label={this.props.ariaLabel}
-          style={style}
           onClick={(e: React.MouseEvent<HTMLSpanElement>) => this.commandClickCallback(e)}
         >
           <div className={contentClassName}>

src/Explorer/Controls/Dialog.tsx

@@ -179,18 +179,8 @@ export const Dialog: FC = () => {
       title,
       subText,
       styles: {
-        title: {
+        title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
-          fontSize: DIALOG_TITLE_FONT_SIZE,
+        subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE },
-          fontWeight: DIALOG_TITLE_FONT_WEIGHT,
-        },
-        subText: {
-          fontSize: DIALOG_SUBTEXT_FONT_SIZE,
-          color: "var(--colorNeutralForeground2)",
-        },
-        content: {
-          backgroundColor: "var(--colorNeutralBackground1)",
-          color: "var(--colorNeutralForeground1)",
-        },
       },
       showCloseButton: showCloseButton || false,
       onDismiss,
@@ -198,60 +188,18 @@ export const Dialog: FC = () => {
     modalProps: { isBlocking: isModal, isDarkOverlay: false },
     minWidth: DIALOG_MIN_WIDTH,
     maxWidth: DIALOG_MAX_WIDTH,
-    styles: {
-      main: {
-        backgroundColor: "var(--colorNeutralBackground1)",
-        selectors: {
-          ".ms-Dialog-title": { color: "var(--colorNeutralForeground1)" },
-        },
-      },
-    },
   };
 
   const primaryButtonProps: IButtonProps = {
     text: primaryButtonText,
     disabled: primaryButtonDisabled || false,
     onClick: onPrimaryButtonClick,
-    styles: {
-      root: {
-        backgroundColor: "var(--colorBrandBackground)",
-        color: "var(--colorNeutralForegroundOnBrand)",
-        selectors: {
-          ":hover": {
-            backgroundColor: "var(--colorBrandBackgroundHover)",
-            color: "var(--colorNeutralForegroundOnBrand)",
-          },
-          ":active": {
-            backgroundColor: "var(--colorBrandBackgroundPressed)",
-            color: "var(--colorNeutralForegroundOnBrand)",
-          },
-        },
-      },
-    },
   };
   const secondaryButtonProps: IButtonProps =
     secondaryButtonText && onSecondaryButtonClick
       ? {
           text: secondaryButtonText,
           onClick: onSecondaryButtonClick,
-          styles: {
-            root: {
-              backgroundColor: "var(--colorNeutralBackground2)",
-              color: "var(--colorNeutralForeground1)",
-              borderColor: "var(--colorNeutralStroke1)",
-              selectors: {
-                ":hover": {
-                  backgroundColor: "var(--colorNeutralBackground3)",
-                  color: "var(--colorNeutralForeground1)",
-                },
-                ":active": {
-                  backgroundColor: "var(--colorNeutralBackground3)",
-                  color: "var(--colorNeutralForeground1)",
-                  borderColor: "var(--colorCompoundBrandStroke1)",
-                },
-              },
-            },
-          },
         }
       : undefined;
   return visible ? (

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -1,5 +1,4 @@
 import { Spinner, SpinnerSize } from "@fluentui/react";
-import { monacoTheme, useThemeStore } from "hooks/useTheme";
 import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
 // import "./EditorReact.less";
@@ -67,7 +66,6 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
   private rootNode: HTMLElement;
   public editor: monaco.editor.IStandaloneCodeEditor;
   private selectionListener: monaco.IDisposable;
-  private themeUnsubscribe: () => void;
   monacoApi: {
     default: typeof monaco;
     Emitter: typeof monaco.Emitter;
@@ -96,13 +94,6 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
   public componentDidMount(): void {
     this.createEditor(this.configureEditor.bind(this));
 
-    this.themeUnsubscribe = useThemeStore.subscribe((state) => {
-      if (this.editor) {
-        const newTheme = state.isDarkMode ? "vs-dark" : "vs";
-        this.monacoApi?.editor.setTheme(newTheme);
-      }
-    });
-
     setTimeout(() => {
       const suggestionWidget = this.editor?.getDomNode()?.querySelector(".suggest-widget") as HTMLElement;
       if (suggestionWidget) {
@@ -137,7 +128,6 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   public componentWillUnmount(): void {
     this.selectionListener && this.selectionListener.dispose();
-    this.themeUnsubscribe && this.themeUnsubscribe();
   }
 
   public render(): JSX.Element {
@@ -221,7 +211,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
       ariaLabel: this.props.ariaLabel,
       fontSize: this.props.fontSize || 12,
       automaticLayout: true,
-      theme: monacoTheme(),
+      theme: this.props.theme,
       wordWrap: this.props.wordWrap || "off",
       lineNumbers: this.props.lineNumbers || "off",
       lineNumbersMinChars: this.props.lineNumbersMinChars,

src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx

@@ -2,7 +2,6 @@ import {
   DefaultButton,
   Dropdown,
   IDropdownOption,
-  IDropdownStyles,
   IStyleFunctionOrObject,
   ITextFieldStyleProps,
   ITextFieldStyles,
@@ -36,167 +35,31 @@ export interface FullTextPolicyData {
 const labelStyles = {
   root: {
     fontSize: 12,
-    color: "var(--colorNeutralForeground1)",
   },
 };
 
 const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
   fieldGroup: {
     height: 27,
-    backgroundColor: "var(--colorNeutralBackground2)",
-    borderColor: "var(--colorNeutralStroke1)",
   },
   field: {
     fontSize: 12,
     padding: "0 8px",
-    color: "var(--colorNeutralForeground1)",
-    backgroundColor: "var(--colorNeutralBackground2)",
-  },
-  root: {
-    selectors: {
-      input: {
-        backgroundColor: "var(--colorNeutralBackground2)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "input:hover": {
-        backgroundColor: "var(--colorNeutralBackground2)",
-        borderColor: "var(--colorNeutralStroke1)",
-      },
-      "input:focus": {
-        backgroundColor: "var(--colorNeutralBackground2)",
-        borderColor: "var(--colorBrandBackground)",
-      },
-    },
   },
 };
 
-const dropdownStyles: Partial<IDropdownStyles> = {
+const dropdownStyles = {
-  root: {
+  title: {
-    width: "40%",
+    height: 27,
-    marginTop: "10px",
+    lineHeight: "24px",
-    selectors: {
+    fontSize: 12,
-      "&:hover .ms-Dropdown-title": {
-        color: "var(--colorNeutralForeground1)",
-        backgroundColor: "var(--colorNeutralBackground2)",
-        borderColor: "var(--colorNeutralStroke1)",
-      },
-      "&:hover span.ms-Dropdown-title": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&:focus .ms-Dropdown-title": {
-        color: "var(--colorNeutralForeground1)",
-        backgroundColor: "var(--colorNeutralBackground2)",
-      },
-      "&:focus span.ms-Dropdown-title": {
-        color: "var(--colorNeutralForeground1)",
-      },
-    },
-  },
-  label: {
-    color: "var(--colorNeutralForeground1)",
   },
   dropdown: {
-    backgroundColor: "var(--colorNeutralBackground2)",
+    height: 27,
-    borderColor: "var(--colorNeutralStroke1)",
+    lineHeight: "24px",
-    color: "var(--colorNeutralForeground1)",
-  },
-  title: {
-    backgroundColor: "var(--colorNeutralBackground2)",
-    color: "var(--colorNeutralForeground1)",
-    borderColor: "var(--colorNeutralStroke1)",
-    selectors: {
-      "&:hover": {
-        backgroundColor: "var(--colorNeutralBackground2)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&:focus": {
-        backgroundColor: "var(--colorNeutralBackground2)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&:hover .ms-Dropdown-titleText": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&:focus .ms-Dropdown-titleText": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      "& .ms-Dropdown-titleText": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&.ms-Dropdown-title--hasPlaceholder": {
-        color: "var(--colorNeutralForeground2)",
-      },
-    },
-  },
-  errorMessage: {
-    color: "var(--colorNeutralForeground1)",
-  },
-  caretDown: {
-    color: "var(--colorNeutralForeground1)",
-  },
-  callout: {
-    backgroundColor: "var(--colorNeutralBackground2)",
-    border: "1px solid var(--colorNeutralStroke1)",
-  },
-  dropdownItems: {
-    backgroundColor: "var(--colorNeutralBackground2)",
   },
   dropdownItem: {
-    backgroundColor: "transparent",
+    fontSize: 12,
-    color: "var(--colorNeutralForeground1)",
-    minHeight: "36px",
-    lineHeight: "36px",
-    selectors: {
-      "&:hover": {
-        backgroundColor: "rgba(255, 255, 255, 0.1)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&:hover .ms-Dropdown-optionText": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&:focus": {
-        backgroundColor: "rgba(255, 255, 255, 0.1)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&:active": {
-        backgroundColor: "rgba(255, 255, 255, 0.15)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "& .ms-Dropdown-optionText": {
-        color: "var(--colorNeutralForeground1)",
-      },
-    },
-  },
-  dropdownItemSelected: {
-    backgroundColor: "rgba(255, 255, 255, 0.08)",
-    color: "var(--colorNeutralForeground1)",
-    minHeight: "36px",
-    lineHeight: "36px",
-    selectors: {
-      "&:hover": {
-        backgroundColor: "rgba(255, 255, 255, 0.1)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&:hover .ms-Dropdown-optionText": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&:focus": {
-        backgroundColor: "rgba(255, 255, 255, 0.1)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&:active": {
-        backgroundColor: "rgba(255, 255, 255, 0.15)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "& .ms-Dropdown-optionText": {
-        color: "var(--colorNeutralForeground1)",
-      },
-    },
-  },
-  dropdownOptionText: {
-    color: "var(--colorNeutralForeground1)",
-  },
-  dropdownItemHeader: {
-    color: "var(--colorNeutralForeground1)",
   },
 };
 
@@ -363,32 +226,7 @@ export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPolicies
             </Stack>
           </CollapsibleSectionComponent>
         ))}
-      <DefaultButton
+      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
-        id={`add-vector-policy`}
-        styles={{
-          root: {
-            maxWidth: 170,
-            fontSize: 12,
-            color: "var(--colorNeutralForeground1)",
-            backgroundColor: "transparent",
-            borderColor: "var(--colorNeutralStroke1)",
-          },
-          rootHovered: {
-            color: "var(--colorNeutralForeground1)",
-            backgroundColor: "transparent",
-            borderColor: "var(--colorNeutralForeground1)",
-          },
-          rootPressed: {
-            color: "var(--colorNeutralForeground1)",
-            backgroundColor: "transparent",
-            borderColor: "var(--colorNeutralForeground1)",
-          },
-          rootDisabled: {
-            backgroundColor: "transparent",
-          },
-        }}
-        onClick={onAdd}
-      >
         Add full text path
       </DefaultButton>
     </Stack>

src/Explorer/Controls/Settings/SettingsComponent.less

@@ -4,8 +4,6 @@
   height: 100%;
   overflow-y: auto;
   width: 100%;
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
 }
 
 .settingsV2ToolTip {
@@ -25,8 +23,6 @@
   overflow-y: auto;
   width: 100%;
   font-family: @DataExplorerFont;
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
 }
 
 .settingsV2Editor {

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,4 +1,4 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack } from "@fluentui/react";
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
 import { sendMessage } from "Common/MessageHandler";
 import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import {
@@ -1477,111 +1477,31 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       selectedKey: SettingsV2TabTypes[this.state.selectedTab],
     };
 
-    const pivotStyles = {
+    const pivotItems = tabs.map((tab) => {
-      root: {
+      const pivotItemProps: IPivotItemProps = {
-        backgroundColor: "var(--colorNeutralBackground1)",
+        itemKey: SettingsV2TabTypes[tab.tab],
-        color: "var(--colorNeutralForeground1)",
+        style: { marginTop: 20 },
-        selectors: {
+        headerText: getTabTitle(tab.tab),
-          "& .ms-Pivot-link": {
+        headerButtonProps: {
-            color: "var(--colorNeutralForeground1)",
+          "data-test": `settings-tab-header/${SettingsV2TabTypes[tab.tab]}`,
-          },
-          "& .ms-Pivot-link.is-selected::before": {
-            backgroundColor: "var(--colorCompoundBrandBackground)",
-          },
         },
-      },
+      };
-      link: {
-        backgroundColor: "var(--colorNeutralBackground1)",
-        color: "var(--colorNeutralForeground1)",
-        selectors: {
-          "&:hover": {
-            backgroundColor: "var(--colorNeutralBackground1)",
-            color: "var(--colorNeutralForeground1)",
-          },
-          "&:active": {
-            backgroundColor: "var(--colorNeutralBackground1)",
-            color: "var(--colorNeutralForeground1)",
-          },
-          '&[aria-selected="true"]': {
-            backgroundColor: "var(--colorNeutralBackground1)",
-            color: "var(--colorNeutralForeground1)",
-            selectors: {
-              "&:hover": {
-                backgroundColor: "var(--colorNeutralBackground1)",
-                color: "var(--colorNeutralForeground1)",
-              },
-              "&:active": {
-                backgroundColor: "var(--colorNeutralBackground1)",
-                color: "var(--colorNeutralForeground1)",
-              },
-            },
-          },
-        },
-      },
 
-      itemContainer: {
+      return (
-        // padding: '20px 24px',
+        <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
-        backgroundColor: "var(--colorNeutralBackground1)",
+          {tab.content}
-        color: "var(--colorNeutralForeground1)",
+        </PivotItem>
-      },
+      );
-    };
+    });
-
-    const contentStyles = {
-      root: {
-        backgroundColor: "var(--colorNeutralBackground1)",
-        color: "var(--colorNeutralForeground1)",
-        // padding: '20px 24px'
-      },
-    };
 
     return (
-      <div
+      <div className="settingsV2MainContainer">
-        className="settingsV2MainContainer"
-        style={
-          {
-            backgroundColor: "var(--colorNeutralBackground1)",
-            color: "var(--colorNeutralForeground1)",
-            position: "relative",
-          } as React.CSSProperties
-        }
-      >
         {this.shouldShowKeyspaceSharedThroughputMessage() && (
           <div>This table shared throughput is configured at the keyspace</div>
         )}
 
-        <div
+        <div className="settingsV2TabsContainer">
-          className="settingsV2TabsContainer"
+          <Pivot {...pivotProps}>{pivotItems}</Pivot>
-          style={
-            {
-              backgroundColor: "var(--colorNeutralBackground1)",
-              color: "var(--colorNeutralForeground1)",
-              position: "relative",
-              padding: "20px 24px",
-            } as React.CSSProperties
-          }
-        >
-          <Pivot {...pivotProps} styles={pivotStyles}>
-            {tabs.map((tab) => {
-              const pivotItemProps: IPivotItemProps = {
-                itemKey: SettingsV2TabTypes[tab.tab],
-                style: {
-                  marginTop: 20,
-                  backgroundColor: "var(--colorNeutralBackground1)",
-                  color: "var(--colorNeutralForeground1)",
-                },
-                headerText: getTabTitle(tab.tab),
-                headerButtonProps: {
-                  "data-test": `settings-tab-header/${SettingsV2TabTypes[tab.tab]}`,
-                },
-              };
-
-              return (
-                <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
-                  <Stack styles={contentStyles}>{tab.content}</Stack>
-                </PivotItem>
-              );
-            })}
-          </Pivot>
         </div>
       </div>
     );

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -63,7 +63,7 @@ export interface PriceBreakdown {
 
 export type editorType = "indexPolicy" | "computedProperties" | "dataMasking";
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -119,89 +119,15 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
 
 export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };
 
-export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = {
+export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };
-  root: { paddingLeft: 10, width: 210 },
-  fieldGroup: {
-    backgroundColor: "var(--colorNeutralBackground2)",
-    borderColor: "var(--colorNeutralStroke1)",
-  },
-  field: {
-    color: "var(--colorNeutralForeground1)",
-    backgroundColor: "var(--colorNeutralBackground2)",
-  },
-};
 
-export const shortWidthDropDownStyles: Partial<IDropdownStyles> = {
+export const shortWidthDropDownStyles: Partial<IDropdownStyles> = { dropdown: { paddingleft: 10, width: 202 } };
-  dropdown: { paddingLeft: 10, width: 202 },
-  title: {
-    backgroundColor: "var(--colorNeutralBackground2)",
-    color: "var(--colorNeutralForeground1)",
-    borderColor: "var(--colorNeutralStroke1)",
-  },
-  caretDown: {
-    color: "var(--colorNeutralForeground1)",
-  },
-  callout: {
-    backgroundColor: "var(--colorNeutralBackground2)",
-    border: "1px solid var(--colorNeutralStroke1)",
-  },
-  dropdownItems: {
-    backgroundColor: "var(--colorNeutralBackground2)",
-  },
-  dropdownItem: {
-    backgroundColor: "transparent",
-    color: "var(--colorNeutralForeground1)",
-    selectors: {
-      "&:hover": {
-        backgroundColor: "rgba(255, 255, 255, 0.1)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&:focus": {
-        backgroundColor: "rgba(255, 255, 255, 0.1)",
-        color: "var(--colorNeutralForeground1)",
-      },
-    },
-  },
-  dropdownItemSelected: {
-    backgroundColor: "rgba(255, 255, 255, 0.08)",
-    color: "var(--colorNeutralForeground1)",
-    selectors: {
-      "&:hover": {
-        backgroundColor: "rgba(255, 255, 255, 0.1)",
-        color: "var(--colorNeutralForeground1)",
-      },
-    },
-  },
-  dropdownOptionText: {
-    color: "var(--colorNeutralForeground1)",
-  },
-};
 
 export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
   root: {
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
     selectors: {
       ":hover": {
-        backgroundColor: "var(--colorNeutralBackground1Hover)",
+        background: "transparent",
-        color: "var(--colorNeutralForeground1)",
-      },
-      ":hover .ms-DetailsRow-cell": {
-        backgroundColor: "var(--colorNeutralBackground1Hover)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "&.ms-DetailsRow": {
-        backgroundColor: "var(--colorNeutralBackground1)",
-      },
-    },
-  },
-  cell: {
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
-    selectors: {
-      ":hover": {
-        backgroundColor: "var(--colorNeutralBackground1Hover)",
-        color: "var(--colorNeutralForeground1)",
       },
     },
   },
@@ -209,11 +135,9 @@ export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
 
 export const transparentDetailsHeaderStyle: Partial<IDetailsColumnStyles> = {
   root: {
-    color: "var(--colorNeutralForeground1)",
     selectors: {
       ":hover": {
-        background: "var(--colorNeutralBackground1Hover)",
+        background: "transparent",
-        color: "var(--colorNeutralForeground1)",
       },
     },
   },
@@ -225,35 +149,6 @@ export const customDetailsListStyles: Partial<IDetailsListStyles> = {
       ".ms-FocusZone": {
         paddingTop: 0,
       },
-      ".ms-DetailsHeader": {
-        backgroundColor: "var(--colorNeutralBackground1)",
-      },
-      ".ms-DetailsHeader-cell": {
-        color: "var(--colorNeutralForeground1)",
-        backgroundColor: "var(--colorNeutralBackground1)",
-        selectors: {
-          ":hover": {
-            backgroundColor: "var(--colorNeutralBackground1Hover)",
-            color: "var(--colorNeutralForeground1)",
-          },
-        },
-      },
-      ".ms-DetailsHeader-cellTitle": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      ".ms-DetailsRow": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      ".ms-DetailsRow-cell": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      // Tooltip styling for cells
-      ".ms-TooltipHost": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      ".ms-DetailsRow-cell .ms-TooltipHost": {
-        color: "var(--colorNeutralForeground1)",
-      },
     },
   },
 };
@@ -271,18 +166,7 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
 };
 
 export const messageBarStyles: Partial<IMessageBarStyles> = {
-  root: {
+  root: { marginTop: "5px", backgroundColor: "white" },
-    marginTop: "5px",
-    backgroundColor: "var(--colorNeutralBackground1)",
-    selectors: {
-      "&.ms-MessageBar--severeWarning": {
-        backgroundColor: "var(--colorNeutralBackground4)",
-      },
-      "&.ms-MessageBar--warning": {
-        backgroundColor: "var(--colorNeutralBackground3)",
-      },
-    },
-  },
   text: { fontSize: 14 },
 };
 
@@ -338,11 +222,9 @@ export const getEstimatedSpendingElement = (
   const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
   return (
     <Stack>
-      <Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>Cost estimate*</Text>
+      <Text style={{ fontWeight: 600 }}>Cost estimate*</Text>
       {costElement}
-      <Text style={{ fontWeight: 600, marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
+      <Text style={{ fontWeight: 600, marginTop: 15 }}>How we calculate this</Text>
-        How we calculate this
-      </Text>
       <Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
         <span>
           {numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@@ -356,7 +238,7 @@ export const getEstimatedSpendingElement = (
           {priceBreakdown.pricePerRu}/RU
         </span>
       </Stack>
-      <Text style={{ marginTop: 15, color: "var(--colorNeutralForeground1)" }}>
+      <Text style={{ marginTop: 15 }}>
         <em>*{estimatedCostDisclaimer}</em>
       </Text>
     </Stack>
@@ -403,7 +285,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
 
 export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
   return (
-    <Text id="updateThroughputDelayedApplyWarningMessage">
+    <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
       Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your
       number of physical partitions. You can increase your throughput to {instantMaximumThroughput} instantly or proceed
       with this value and wait until the scale-up is completed.
@@ -421,7 +303,7 @@ export const getUpdateThroughputBeyondSupportLimitMessage = (
         Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
         There are three options you can choose from to proceed:
       </Text>
-      <ol style={{ fontSize: 14, color: "var(--colorNeutralForeground1)", marginTop: "5px" }}>
+      <ol style={{ fontSize: 14, color: "windowtext", marginTop: "5px" }}>
         <li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
         {instantMaximumThroughput < maximumThroughput && (
           <li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
@@ -457,7 +339,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele
 };
 
 export const saveThroughputWarningMessage: JSX.Element = (
-  <Text>
+  <Text styles={infoAndToolTipTextStyle}>
     Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
     before saving your changes
   </Text>
@@ -577,13 +459,9 @@ export const changeFeedPolicyToolTip: JSX.Element = (
 );
 
 export const mongoIndexingPolicyDisclaimer: JSX.Element = (
-  <Text style={{ color: "var(--colorNeutralForeground1)" }}>
+  <Text>
     For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
-    <Link
+    <Link href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types" target="_blank">
-      href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
-      target="_blank"
-      style={{ color: "var(--colorBrandForeground1)" }}
-    >
       {` Compound indexes `}
     </Link>
     are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo
@@ -592,7 +470,7 @@ export const mongoIndexingPolicyDisclaimer: JSX.Element = (
 );
 
 export const mongoCompoundIndexNotSupportedMessage: JSX.Element = (
-  <Text style={{ color: "var(--colorNeutralForeground1)" }}>
+  <Text>
     Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this
     collection, use the Mongo Shell.
   </Text>
@@ -641,50 +519,14 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
   fieldGroup: {
     height: 25,
     width: 300,
-    backgroundColor: "var(--colorNeutralBackground2)",
+    borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
-    borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "var(--colorNeutralStroke1)",
     selectors: {
       ":disabled": {
-        backgroundColor: "var(--colorNeutralBackground2)",
+        backgroundColor: StyleConstants.BaseMedium,
-        borderColor: "var(--colorNeutralStroke1)",
+        borderColor: StyleConstants.BaseMediumHigh,
-        color: "var(--colorNeutralForeground2)",
-      },
-      input: {
-        backgroundColor: "var(--colorNeutralBackground2)",
-        color: "var(--colorNeutralForeground1)",
-      },
-      "input:disabled": {
-        backgroundColor: "var(--colorNeutralBackground2)",
-        color: "var(--colorNeutralForeground2)",
-      },
-      "input#autopilotInput": {
-        backgroundColor: "var(--colorNeutralBackground4)",
-        color: "var(--colorNeutralForeground1)",
       },
     },
   },
-  field: {
-    backgroundColor: "var(--colorNeutralBackground2)",
-    color: "var(--colorNeutralForeground1)",
-    selectors: {
-      ":disabled": {
-        backgroundColor: "var(--colorNeutralBackground2)",
-        color: "var(--colorNeutralForeground2)",
-      },
-    },
-  },
-  subComponentStyles: {
-    label: {
-      root: {
-        color: "var(--colorNeutralForeground1)",
-      },
-    },
-  },
-  suffix: {
-    backgroundColor: "var(--colorNeutralBackground2)",
-    color: "var(--colorNeutralForeground1)",
-    border: "1px solid var(--colorNeutralStroke1)",
-  },
 });
 
 export const getChoiceGroupStyles = (
@@ -692,28 +534,6 @@ export const getChoiceGroupStyles = (
   baseline: isDirtyTypes,
   isHorizontal?: boolean,
 ): Partial<IChoiceGroupStyles> => ({
-  label: {
-    color: "var(--colorNeutralForeground1)",
-  },
-  root: {
-    selectors: {
-      ".ms-ChoiceFieldLabel": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      ".ms-ChoiceField-innerField": {
-        color: "var(--colorNeutralForeground1)",
-      },
-    },
-  },
   flexContainer: [
     {
       selectors: {
@@ -728,16 +548,6 @@ export const getChoiceGroupStyles = (
           fontSize: 14,
           fontFamily: StyleConstants.DataExplorerFont,
           padding: "2px 5px",
-          color: "var(--colorNeutralForeground1)",
-        },
-        ".ms-ChoiceFieldLabel": {
-          color: "var(--colorNeutralForeground1)",
-        },
-        ".ms-ChoiceFieldLabel:hover": {
-          color: "var(--colorNeutralForeground1)",
-        },
-        ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-          color: "var(--colorNeutralForeground1)",
         },
       },
       display: isHorizontal ? "inline-flex" : "default",

src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx

@@ -1,11 +1,11 @@
-import { FontIcon, IMessageBarStyles, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react";
+import { FontIcon, Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react";
 import * as DataModels from "Contracts/DataModels";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "Explorer/Controls/Settings/SettingsRenderUtils";
 import { isDirty } from "Explorer/Controls/Settings/SettingsUtils";
 import { loadMonaco } from "Explorer/LazyMonaco";
-import { monacoTheme, useThemeStore } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
+
 export interface ComputedPropertiesComponentProps {
   computedPropertiesContent: DataModels.ComputedProperties;
   computedPropertiesContentBaseline: DataModels.ComputedProperties;
@@ -27,24 +27,6 @@ export class ComputedPropertiesComponent extends React.Component<
   private shouldCheckComponentIsDirty = true;
   private computedPropertiesDiv = React.createRef<HTMLDivElement>();
   private computedPropertiesEditor: monaco.editor.IStandaloneCodeEditor;
-  private themeUnsubscribe: () => void;
-
-  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
-    root: {
-      selectors: {
-        "&.ms-MessageBar--warning": {
-          backgroundColor: "var(--colorStatusWarningBackground1)",
-          border: "1px solid var(--colorStatusWarningBorder1)",
-        },
-        ".ms-MessageBar-icon": {
-          color: "var(--colorNeutralForeground1)",
-        },
-        ".ms-MessageBar-text": {
-          color: "var(--colorNeutralForeground1)",
-        },
-      },
-    },
-  };
 
   constructor(props: ComputedPropertiesComponentProps) {
     super(props);
@@ -66,10 +48,6 @@ export class ComputedPropertiesComponent extends React.Component<
     this.onComponentUpdate();
   }
 
-  componentWillUnmount(): void {
-    this.themeUnsubscribe && this.themeUnsubscribe();
-  }
-
   public resetComputedPropertiesEditor = (): void => {
     if (!this.computedPropertiesEditor) {
       this.createComputedPropertiesEditor();
@@ -108,16 +86,8 @@ export class ComputedPropertiesComponent extends React.Component<
       value: value,
       language: "json",
       ariaLabel: "Computed properties",
-      theme: monacoTheme(),
     });
     if (this.computedPropertiesEditor) {
-      // Subscribe to theme changes
-      this.themeUnsubscribe = useThemeStore.subscribe(() => {
-        if (this.computedPropertiesEditor) {
-          monaco.editor.setTheme(monacoTheme());
-        }
-      });
-
       const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();
       computedPropertiesEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
       this.props.logComputedPropertiesSuccessMessage();
@@ -141,15 +111,11 @@ export class ComputedPropertiesComponent extends React.Component<
     return (
       <Stack {...titleAndInputStackProps}>
         {isDirty(this.props.computedPropertiesContent, this.props.computedPropertiesContentBaseline) && (
-          <MessageBar
+          <MessageBar messageBarType={MessageBarType.warning}>
-            messageBarType={MessageBarType.warning}
-            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
-            styles={this.darkThemeMessageBarStyles}
-          >
             {unsavedEditorWarningMessage("computedProperties")}
           </MessageBar>
         )}
-        <Text style={{ marginLeft: "30px", marginBottom: "10px", color: "var(--colorNeutralForeground1)" }}>
+        <Text style={{ marginLeft: "30px", marginBottom: "10px" }}>
           <Link target="_blank" href="https://aka.ms/computed-properties-preview/">
             {"Learn more"} <FontIcon iconName="NavigateExternalInline" />
           </Link>

src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx

@@ -6,6 +6,7 @@ import {
   conflictResolutionCustomToolTip,
   conflictResolutionLwwTooltip,
   getChoiceGroupStyles,
+  getTextFieldStyles,
   subComponentStackProps,
 } from "../SettingsRenderUtils";
 import { isDirty } from "../SettingsUtils";
@@ -105,46 +106,10 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
       id="conflictResolutionLwwTextField"
       label={"Conflict Resolver Property"}
       onRenderLabel={this.onRenderLwwComponentTextField}
-      styles={{
+      styles={getTextFieldStyles(
-        fieldGroup: {
+        this.props.conflictResolutionPolicyPath,
-          height: 25,
+        this.props.conflictResolutionPolicyPathBaseline,
-          width: 300,
+      )}
-          backgroundColor: "var(--colorNeutralBackground2)",
-          borderColor: "var(--colorNeutralStroke1)",
-          selectors: {
-            ":disabled": {
-              backgroundColor: "var(--colorNeutralBackground2)",
-              borderColor: "var(--colorNeutralStroke1)",
-              color: "var(--colorNeutralForeground2)",
-            },
-            input: {
-              backgroundColor: "var(--colorNeutralBackground2)",
-              color: "var(--colorNeutralForeground1)",
-            },
-            "input:disabled": {
-              backgroundColor: "var(--colorNeutralBackground2)",
-              color: "var(--colorNeutralForeground2)",
-            },
-          },
-        },
-        field: {
-          backgroundColor: "var(--colorNeutralBackground2)",
-          color: "var(--colorNeutralForeground1)",
-          selectors: {
-            ":disabled": {
-              backgroundColor: "var(--colorNeutralBackground2)",
-              color: "var(--colorNeutralForeground2)",
-            },
-          },
-        },
-        subComponentStyles: {
-          label: {
-            root: {
-              color: "var(--colorNeutralForeground1)",
-            },
-          },
-        },
-      }}
       value={this.props.conflictResolutionPolicyPath}
       onChange={this.onConflictResolutionPolicyPathChange}
     />
@@ -154,57 +119,19 @@ export class ConflictResolutionComponent extends React.Component<ConflictResolut
     <ToolTipLabelComponent label={props.label} toolTipElement={conflictResolutionCustomToolTip} />
   );
 
-  private getConflictResolutionCustomComponent = (): JSX.Element => {
+  private getConflictResolutionCustomComponent = (): JSX.Element => (
-    return (
+    <TextField
-      <TextField
+      id="conflictResolutionCustomTextField"
-        id="conflictResolutionCustomTextField"
+      label="Stored procedure"
-        label="Stored procedure"
+      onRenderLabel={this.onRenderCustomComponentTextField}
-        onRenderLabel={this.onRenderCustomComponentTextField}
+      styles={getTextFieldStyles(
-        styles={{
+        this.props.conflictResolutionPolicyProcedure,
-          fieldGroup: {
+        this.props.conflictResolutionPolicyProcedureBaseline,
-            height: 25,
+      )}
-            width: 300,
+      value={this.props.conflictResolutionPolicyProcedure}
-            backgroundColor: "var(--colorNeutralBackground2)",
+      onChange={this.onConflictResolutionPolicyProcedureChange}
-            borderColor: "var(--colorNeutralStroke1)",
+    />
-            selectors: {
+  );
-              ":disabled": {
-                backgroundColor: "var(--colorNeutralBackground2)",
-                borderColor: "var(--colorNeutralStroke1)",
-                color: "var(--colorNeutralForeground2)",
-              },
-              input: {
-                backgroundColor: "var(--colorNeutralBackground2)",
-                color: "var(--colorNeutralForeground1)",
-              },
-              "input:disabled": {
-                backgroundColor: "var(--colorNeutralBackground2)",
-                color: "var(--colorNeutralForeground2)",
-              },
-            },
-          },
-          field: {
-            backgroundColor: "var(--colorNeutralBackground2)",
-            color: "var(--colorNeutralForeground1)",
-            selectors: {
-              ":disabled": {
-                backgroundColor: "var(--colorNeutralBackground2)",
-                color: "var(--colorNeutralForeground2)",
-              },
-            },
-          },
-          subComponentStyles: {
-            label: {
-              root: {
-                color: "var(--colorNeutralForeground1)",
-              },
-            },
-          },
-        }}
-        value={this.props.conflictResolutionPolicyProcedure}
-        onChange={this.onConflictResolutionPolicyProcedureChange}
-      />
-    );
-  };
 
   public render(): JSX.Element {
     return (

src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx

@@ -102,57 +102,11 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
 
   return (
     <div>
-      <Pivot
+      <Pivot onLinkClick={onPivotChange} selectedKey={ContainerPolicyTabTypes[selectedTab]}>
-        onLinkClick={onPivotChange}
-        selectedKey={ContainerPolicyTabTypes[selectedTab]}
-        styles={{
-          root: {
-            color: "var(--colorNeutralForeground1)",
-          },
-          link: {
-            color: "var(--colorNeutralForeground1)",
-            backgroundColor: "transparent",
-            selectors: {
-              ":hover": {
-                color: "var(--colorNeutralForeground1)",
-                backgroundColor: "transparent",
-              },
-              ":active": {
-                color: "var(--colorNeutralForeground1)",
-                backgroundColor: "transparent",
-              },
-            },
-          },
-          linkIsSelected: {
-            color: "var(--colorNeutralForeground1)",
-            backgroundColor: "transparent",
-            selectors: {
-              ":before": {
-                color: "var(--colorNeutralForeground1)",
-                backgroundColor: "var(--colorBrandForeground1)",
-              },
-              ":hover": {
-                color: "var(--colorNeutralForeground1)",
-                backgroundColor: "transparent",
-              },
-              ":active": {
-                color: "var(--colorNeutralForeground1)",
-                backgroundColor: "transparent",
-              },
-            },
-          },
-          linkContent: {
-            color: "inherit",
-          },
-          text: {
-            color: "inherit",
-          },
-        }}
-      >
         {isVectorSearchEnabled && (
           <PivotItem
             itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]}
-            style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
+            style={{ marginTop: 20 }}
             headerText="Vector Policy"
           >
             <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@@ -174,7 +128,7 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
         {isFullTextSearchEnabled && (
           <PivotItem
             itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]}
-            style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
+            style={{ marginTop: 20 }}
             headerText="Full Text Policy"
           >
             <Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@@ -190,27 +144,7 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
               ) : (
                 <DefaultButton
                   id={"create-full-text-policy"}
-                  styles={{
+                  styles={{ root: { fontSize: 12 } }}
-                    root: {
-                      fontSize: 12,
-                      color: "var(--colorNeutralForeground1)",
-                      backgroundColor: "transparent",
-                      borderColor: "var(--colorNeutralForeground1)",
-                    },
-                    rootHovered: {
-                      color: "var(--colorNeutralForeground1)",
-                      backgroundColor: "transparent",
-                      borderColor: "var(--colorNeutralForeground1)",
-                    },
-                    rootPressed: {
-                      color: "var(--colorNeutralForeground1)",
-                      backgroundColor: "transparent",
-                      borderColor: "var(--colorNeutralForeground1)",
-                    },
-                    rootDisabled: {
-                      backgroundColor: "transparent",
-                    },
-                  }}
                   onClick={() => {
                     checkAndSendFullTextPolicyToSettings({
                       defaultLanguage: getFullTextLanguageOptions()[0].key as never,

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx

@@ -1,5 +1,4 @@
-import { IMessageBarStyles, MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
-import { monacoTheme, useThemeStore } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
@@ -7,6 +6,7 @@ import { loadMonaco } from "../../../LazyMonaco";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
 import { isDirty, isIndexTransforming } from "../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
+
 export interface IndexingPolicyComponentProps {
   shouldDiscardIndexingPolicy: boolean;
   resetShouldDiscardIndexingPolicy: () => void;
@@ -31,24 +31,6 @@ export class IndexingPolicyComponent extends React.Component<
   private shouldCheckComponentIsDirty = true;
   private indexingPolicyDiv = React.createRef<HTMLDivElement>();
   private indexingPolicyEditor: monaco.editor.IStandaloneCodeEditor;
-  private themeUnsubscribe: () => void;
-
-  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
-    root: {
-      selectors: {
-        "&.ms-MessageBar--warning": {
-          backgroundColor: "var(--colorStatusWarningBackground1)",
-          border: "1px solid var(--colorStatusWarningBorder1)",
-        },
-        ".ms-MessageBar-icon": {
-          color: "var(--colorNeutralForeground1)",
-        },
-        ".ms-MessageBar-text": {
-          color: "var(--colorNeutralForeground1)",
-        },
-      },
-    },
-  };
 
   constructor(props: IndexingPolicyComponentProps) {
     super(props);
@@ -70,10 +52,6 @@ export class IndexingPolicyComponent extends React.Component<
     this.onComponentUpdate();
   }
 
-  componentWillUnmount(): void {
-    this.themeUnsubscribe && this.themeUnsubscribe();
-  }
-
   public resetIndexingPolicyEditor = (): void => {
     if (!this.indexingPolicyEditor) {
       this.createIndexingPolicyEditor();
@@ -109,30 +87,18 @@ export class IndexingPolicyComponent extends React.Component<
   };
 
   private async createIndexingPolicyEditor(): Promise<void> {
-    if (!this.indexingPolicyDiv.current) {
-      return;
-    }
     const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
     const monaco = await loadMonaco();
-    if (this.indexingPolicyDiv.current) {
+    this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
-      this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+      value: value,
-        value: value,
+      language: "json",
-        language: "json",
+      readOnly: isIndexTransforming(this.props.indexTransformationProgress),
-        readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+      ariaLabel: "Indexing Policy",
-        ariaLabel: "Indexing Policy",
+    });
-        theme: monacoTheme(),
+    if (this.indexingPolicyEditor) {
-      });
+      const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
-      if (this.indexingPolicyEditor) {
+      indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
-        this.themeUnsubscribe = useThemeStore.subscribe(() => {
+      this.props.logIndexingPolicySuccessMessage();
-          if (this.indexingPolicyEditor) {
-            monaco.editor.setTheme(monacoTheme());
-          }
-        });
-
-        const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
-        indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
-        this.props.logIndexingPolicySuccessMessage();
-      }
     }
   }
 
@@ -155,13 +121,7 @@ export class IndexingPolicyComponent extends React.Component<
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
-          <MessageBar
+          <MessageBar messageBarType={MessageBarType.warning}>{unsavedEditorWarningMessage("indexPolicy")}</MessageBar>
-            messageBarType={MessageBarType.warning}
-            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
-            styles={this.darkThemeMessageBarStyles}
-          >
-            {unsavedEditorWarningMessage("indexPolicy")}
-          </MessageBar>
         )}
         <div className="settingsV2Editor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
       </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -3,7 +3,6 @@ import {
   DetailsListLayoutMode,
   IColumn,
   IconButton,
-  IMessageBarStyles,
   MessageBar,
   MessageBarType,
   SelectionMode,
@@ -31,12 +30,12 @@ import {
 } from "../../SettingsRenderUtils";
 import {
   AddMongoIndexProps,
-  getMongoIndexType,
-  getMongoIndexTypeText,
-  isIndexTransforming,
   MongoIndexIdField,
   MongoIndexTypes,
   MongoNotificationType,
+  getMongoIndexType,
+  getMongoIndexTypeText,
+  isIndexTransforming,
 } from "../../SettingsUtils";
 import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
 import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
@@ -64,24 +63,6 @@ interface MongoIndexDisplayProps {
 export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingPolicyComponentProps> {
   private shouldCheckComponentIsDirty = true;
   private addMongoIndexComponentRefs: React.RefObject<AddMongoIndexComponent>[] = [];
-
-  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
-    root: {
-      selectors: {
-        "&.ms-MessageBar--warning": {
-          backgroundColor: "var(--colorStatusWarningBackground1)",
-          border: "1px solid var(--colorStatusWarningBorder1)",
-        },
-        ".ms-MessageBar-icon": {
-          color: "var(--colorNeutralForeground1)",
-        },
-        ".ms-MessageBar-text": {
-          color: "var(--colorNeutralForeground1)",
-        },
-      },
-    },
-  };
-
   private initialIndexesColumns: IColumn[] = [
     { key: "definition", name: "Definition", fieldName: "definition", minWidth: 100, maxWidth: 200, isResizable: true },
     { key: "type", name: "Type", fieldName: "type", minWidth: 100, maxWidth: 200, isResizable: true },
@@ -190,8 +171,8 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
     let mongoIndexDisplayProps: MongoIndexDisplayProps;
     if (type) {
       mongoIndexDisplayProps = {
-        definition: <Text style={{ color: "var(--colorNeutralForeground1)" }}>{definition}</Text>,
+        definition: <Text>{definition}</Text>,
-        type: <Text style={{ color: "var(--colorNeutralForeground1)" }}>{getMongoIndexTypeText(type)}</Text>,
+        type: <Text>{getMongoIndexTypeText(type)}</Text>,
         actionButton: definition === MongoIndexIdField ? <></> : this.getActionButton(arrayPosition, isCurrentIndex),
       };
     }
@@ -325,15 +306,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
           indexTransformationProgress={this.props.indexTransformationProgress}
           refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
         />
-        {warningMessage && (
+        {warningMessage && <MessageBar messageBarType={MessageBarType.warning}>{warningMessage}</MessageBar>}
-          <MessageBar
-            messageBarType={MessageBarType.warning}
-            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
-            styles={this.darkThemeMessageBarStyles}
-          >
-            {warningMessage}
-          </MessageBar>
-        )}
       </>
     );
   };

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap

@@ -22,14 +22,6 @@ exports[`AddMongoIndexComponent renders 1`] = `
       onChange={[Function]}
       styles={
         {
-          "field": {
-            "backgroundColor": "var(--colorNeutralBackground2)",
-            "color": "var(--colorNeutralForeground1)",
-          },
-          "fieldGroup": {
-            "backgroundColor": "var(--colorNeutralBackground2)",
-            "borderColor": "var(--colorNeutralStroke1)",
-          },
           "root": {
             "paddingLeft": 10,
             "width": 210,
@@ -57,52 +49,10 @@ exports[`AddMongoIndexComponent renders 1`] = `
       selectedKey="Single"
       styles={
         {
-          "callout": {
-            "backgroundColor": "var(--colorNeutralBackground2)",
-            "border": "1px solid var(--colorNeutralStroke1)",
-          },
-          "caretDown": {
-            "color": "var(--colorNeutralForeground1)",
-          },
           "dropdown": {
-            "paddingLeft": 10,
+            "paddingleft": 10,
             "width": 202,
           },
-          "dropdownItem": {
-            "backgroundColor": "transparent",
-            "color": "var(--colorNeutralForeground1)",
-            "selectors": {
-              "&:focus": {
-                "backgroundColor": "rgba(255, 255, 255, 0.1)",
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "&:hover": {
-                "backgroundColor": "rgba(255, 255, 255, 0.1)",
-                "color": "var(--colorNeutralForeground1)",
-              },
-            },
-          },
-          "dropdownItemSelected": {
-            "backgroundColor": "rgba(255, 255, 255, 0.08)",
-            "color": "var(--colorNeutralForeground1)",
-            "selectors": {
-              "&:hover": {
-                "backgroundColor": "rgba(255, 255, 255, 0.1)",
-                "color": "var(--colorNeutralForeground1)",
-              },
-            },
-          },
-          "dropdownItems": {
-            "backgroundColor": "var(--colorNeutralBackground2)",
-          },
-          "dropdownOptionText": {
-            "color": "var(--colorNeutralForeground1)",
-          },
-          "title": {
-            "backgroundColor": "var(--colorNeutralBackground2)",
-            "borderColor": "var(--colorNeutralStroke1)",
-            "color": "var(--colorNeutralForeground1)",
-          },
         }
       }
     />

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap

@@ -1,13 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MongoIndexingPolicyComponent error shown for collection with compound indexes 1`] = `
-<Text
+<Text>
-  style={
-    {
-      "color": "var(--colorNeutralForeground1)",
-    }
-  }
->
   Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this collection, use the Mongo Shell.
 </Text>
 `;
@@ -23,21 +17,10 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
   <IndexingPolicyRefreshComponent
     refreshIndexTransformationProgress={[Function]}
   />
-  <Text
+  <Text>
-    style={
-      {
-        "color": "var(--colorNeutralForeground1)",
-      }
-    }
-  >
     For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
     <StyledLinkBase
       href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
-      style={
-        {
-          "color": "var(--colorBrandForeground1)",
-        }
-      }
       target="_blank"
     >
        Compound indexes 
@@ -100,37 +83,9 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
           {
             "root": {
               "selectors": {
-                ".ms-DetailsHeader": {
-                  "backgroundColor": "var(--colorNeutralBackground1)",
-                },
-                ".ms-DetailsHeader-cell": {
-                  "backgroundColor": "var(--colorNeutralBackground1)",
-                  "color": "var(--colorNeutralForeground1)",
-                  "selectors": {
-                    ":hover": {
-                      "backgroundColor": "var(--colorNeutralBackground1Hover)",
-                      "color": "var(--colorNeutralForeground1)",
-                    },
-                  },
-                },
-                ".ms-DetailsHeader-cellTitle": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
-                ".ms-DetailsRow": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
-                ".ms-DetailsRow-cell": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
-                ".ms-DetailsRow-cell .ms-TooltipHost": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
                 ".ms-FocusZone": {
                   "paddingTop": 0,
                 },
-                ".ms-TooltipHost": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
               },
             },
           }

src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx

@@ -1,7 +1,6 @@
 import {
   DefaultButton,
   FontWeights,
-  IMessageBarStyles,
   Link,
   MessageBar,
   MessageBarType,
@@ -33,23 +32,6 @@ export interface PartitionKeyComponentProps {
   isReadOnly?: boolean; // true: cannot change partition key
 }
 
-const darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
-  root: {
-    selectors: {
-      "&.ms-MessageBar--warning": {
-        backgroundColor: "var(--colorStatusWarningBackground1)",
-        border: "1px solid var(--colorStatusWarningBorder1)",
-      },
-      ".ms-MessageBar-icon": {
-        color: "var(--colorNeutralForeground1)",
-      },
-      ".ms-MessageBar-text": {
-        color: "var(--colorNeutralForeground1)",
-      },
-    },
-  },
-};
-
 export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
   database,
   collection,
@@ -84,15 +66,13 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
   const partitionKeyValue = getPartitionKeyValue();
 
   const textHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold, fontSize: 16, color: "var(--colorNeutralForeground1)" },
+    root: { fontWeight: FontWeights.semibold, fontSize: 16 },
   };
 
   const textSubHeadingStyle = {
-    root: { fontWeight: FontWeights.semibold, color: "var(--colorNeutralForeground1)" },
+    root: { fontWeight: FontWeights.semibold },
-  };
-  const textSubHeadingStyle1 = {
-    root: { color: "var(--colorNeutralForeground1)" },
   };
+
   const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
     if (isCurrentJobInProgress(currentJob)) {
       const jobName = currentJob?.properties?.jobName;
@@ -188,33 +168,26 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
             <Text styles={textSubHeadingStyle}>Partitioning</Text>
           </Stack>
           <Stack tokens={{ childrenGap: 5 }}>
-            <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
+            <Text>{partitionKeyValue}</Text>
-            <Text styles={textSubHeadingStyle1}>
+            <Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
-              {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
-            </Text>
           </Stack>
         </Stack>
       </Stack>
 
       {!isReadOnly && (
         <>
-          <MessageBar
+          <MessageBar messageBarType={MessageBarType.warning}>
-            messageBarType={MessageBarType.warning}
-            messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
-            styles={darkThemeMessageBarStyles}
-          >
             To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to
             the source container for the entire duration of the partition key change process.
             <Link
               href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
               target="_blank"
               underline
-              style={{ color: "var(--colorBrandForeground1)" }}
             >
               Learn more
             </Link>
           </MessageBar>
-          <Text styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>
+          <Text>
             To change the partition key, a new destination container must be created or an existing destination
             container selected. Data will then be copied to the destination container.
           </Text>

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx

@@ -1,15 +1,4 @@
-import {
+import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
-  ChoiceGroup,
-  IChoiceGroupOption,
-  Label,
-  Link,
-  MessageBar,
-  Stack,
-  Text,
-  TextField,
-  TooltipHost,
-  mergeStyleSets,
-} from "@fluentui/react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
@@ -36,11 +25,6 @@ import {
 } from "../SettingsUtils";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 
-const classNames = mergeStyleSets({
-  hintText: {
-    color: "var(--colorNeutralForeground1)", // theme-aware
-  },
-});
 export interface SubSettingsComponentProps {
   collection: ViewModels.Collection;
   timeToLive: TtlType;
@@ -201,31 +185,13 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
     userContext.apiType === "Mongo" ? (
       <MessageBar
         messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-        styles={{
+        styles={{ text: { fontSize: 14 } }}
-          root: {
-            backgroundColor: "var(--colorNeutralBackground1)",
-            color: "var(--colorNeutralForeground1)",
-          },
-          text: {
-            fontSize: 14,
-            color: "var(--colorNeutralForeground1)",
-          },
-          icon: {
-            color: "var(--colorNeutralForeground1)",
-          },
-        }}
       >
-        <Text style={{ color: "var(--colorNeutralForeground1)" }}>
+        To enable time-to-live (TTL) for your collection/documents,
-          To enable time-to-live (TTL) for your collection/documents,{" "}
+        <Link href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live" target="_blank">
-          <Link
+          create a TTL index
-            href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live"
+        </Link>
-            target="_blank"
+        .
-            style={{ color: "var(--colorBrandForeground1)" }}
-          >
-            create a TTL index
-          </Link>
-          .
-        </Text>
       </MessageBar>
     ) : (
       <Stack {...titleAndInputStackProps}>
@@ -353,34 +319,23 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   private getPartitionKeyComponent = (): JSX.Element => (
     <Stack {...titleAndInputStackProps}>
       {this.getPartitionKeyVisible() && (
-        <TooltipHost
+        <TextField
-          content={`This ${this.partitionKeyName.toLowerCase()} is used to distribute data across multiple partitions for scalability. The value "${
+          label={this.partitionKeyName}
-            this.partitionKeyValue
+          disabled
-          }" determines how documents are partitioned.`}
+          styles={getTextFieldStyles(undefined, undefined)}
-          styles={{
+          defaultValue={this.partitionKeyValue}
-            root: {
+        />
-              display: "block",
-            },
-          }}
-        >
-          <TextField
-            label={this.partitionKeyName}
-            disabled
-            styles={getTextFieldStyles(undefined, undefined)}
-            defaultValue={this.partitionKeyValue}
-          />
-        </TooltipHost>
       )}
 
       {userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
-        <Text className={classNames.hintText}>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
+        <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
       )}
 
       {userContext.apiType === "SQL" &&
         (this.isHierarchicalPartitionedContainer() ? (
-          <Text className={classNames.hintText}>Hierarchically partitioned container.</Text>
+          <Text>Hierarchically partitioned container.</Text>
         ) : (
-          <Text className={classNames.hintText}>Non-hierarchically partitioned container.</Text>
+          <Text>Non-hierarchically partitioned container.</Text>
         ))}
     </Stack>
   );

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx

@@ -65,7 +65,7 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
 
   return (
     <Stack tokens={{ childrenGap: "m" }} styles={{ root: { width: "70%", maxWidth: 700 } }}>
-      <Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>Throughput Buckets</Label>
+      <Label>Throughput Buckets</Label>
       <Stack>
         {throughputBuckets?.map((bucket) => (
           <Stack key={bucket.id} horizontal tokens={{ childrenGap: 8 }} verticalAlign="center">
@@ -77,15 +77,7 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
               onChange={(newValue) => handleBucketChange(bucket.id, newValue)}
               showValue={false}
               label={`Bucket ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
-              styles={{
+              styles={{ root: { flex: 2, maxWidth: 400 } }}
-                root: { flex: 2, maxWidth: 400 },
-                titleLabel: {
-                  color:
-                    bucket.maxThroughputPercentage === 100
-                      ? "var(--colorNeutralForeground4)"
-                      : "var(--colorNeutralForeground1)",
-                },
-              }}
               disabled={bucket.maxThroughputPercentage === 100}
             />
             <TextField

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -3,7 +3,6 @@ import {
   ChoiceGroup,
   FontIcon,
   IChoiceGroupOption,
-  IMessageBarStyles,
   IProgressIndicatorStyles,
   ISeparatorStyles,
   Label,
@@ -38,6 +37,7 @@ import {
   getUpdateThroughputBeyondInstantLimitMessage,
   getUpdateThroughputBeyondSupportLimitMessage,
   manualToAutoscaleDisclaimerElement,
+  messageBarStyles,
   noLeftPaddingCheckBoxStyle,
   relaxedSpacingStackProps,
   saveThroughputWarningMessage,
@@ -101,13 +101,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     { key: "false", text: "Manual" },
   ];
 
-  // Style constants for theme-aware colors and layout
-  private static readonly TEXT_COLOR_PRIMARY = "var(--colorNeutralForeground1)";
-  private static readonly TEXT_COLOR_SECONDARY = "var(--colorNeutralForeground2)";
-  private static readonly TEXT_WIDTH_50 = "50%";
-  private static readonly TEXT_WIDTH_33 = "33%";
-  private static readonly LOCALE_EN_US = "en-US";
-
   componentDidMount(): void {
     this.onComponentUpdate();
   }
@@ -243,24 +236,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
+          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
-            Updated cost per month
-          </Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text
+            <Text style={{ width: "50%" }}>
-              style={{
-                width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
-                color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
-              }}
-            >
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
             </Text>
-            <Text
+            <Text style={{ width: "50%" }}>
-              style={{
-                width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
-                color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
-              }}
-            >
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -273,24 +254,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
+          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
-            Current cost per month
+          <Stack horizontal style={{ marginTop: 5 }}>
-          </Text>
+            <Text style={{ width: "50%" }}>
-          <Stack horizontal style={{ marginTop: 5, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
-            <Text
-              style={{
-                width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
-                color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
-              }}
-            >
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
             </Text>
-            <Text
+            <Text style={{ width: "50%" }}>
-              style={{
-                width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_50,
-                color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
-              }}
-            >
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
             </Text>
           </Stack>
@@ -300,12 +269,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
     return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true);
   };
-  settingsAndScaleStyle = {
+
-    root: {
-      width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_33,
-      color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
-    },
-  };
   private getEstimatedManualSpendElement = (
     throughput: number,
     serverId: string,
@@ -325,17 +289,15 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       );
       return (
         <div>
-          <Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
+          <Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
-            Updated cost per month
-          </Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
-            <Text style={this.settingsAndScaleStyle.root}>
+            <Text style={{ width: "33%" }}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
             </Text>
-            <Text style={this.settingsAndScaleStyle.root}>
+            <Text style={{ width: "33%" }}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
             </Text>
-            <Text style={this.settingsAndScaleStyle.root}>
+            <Text style={{ width: "33%" }}>
               {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
             </Text>
           </Stack>
@@ -348,17 +310,15 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return (
         <Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
           {newThroughput && newThroughputCostElement()}
-          <Text style={{ fontWeight: 600, color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY }}>
+          <Text style={{ fontWeight: 600 }}>Current cost per month</Text>
-            Current cost per month
-          </Text>
           <Stack horizontal style={{ marginTop: 5 }}>
-            <Text style={this.settingsAndScaleStyle.root}>
+            <Text style={{ width: "33%" }}>
               {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
             </Text>
-            <Text style={this.settingsAndScaleStyle.root}>
+            <Text style={{ width: "33%" }}>
               {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
             </Text>
-            <Text style={this.settingsAndScaleStyle.root}>
+            <Text style={{ width: "33%" }}>
               {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
             </Text>
           </Stack>
@@ -421,7 +381,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             {this.overrideWithProvisionedThroughputSettings() && (
               <MessageBar
                 messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-                styles={this.darkThemeMessageBarStyles}
+                styles={messageBarStyles}
               >
                 {manualToAutoscaleDisclaimerElement}
               </MessageBar>
@@ -447,8 +407,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
     return (
       <Stack {...titleAndInputStackProps}>
-        <Label style={{ color: "var(--colorNeutralForeground1)" }}>Storage capacity</Label>
+        <Label>Storage capacity</Label>
-        <Text style={{ color: "var(--colorNeutralForeground1)" }}>{capacity}</Text>
+        <Text>{capacity}</Text>
       </Stack>
     );
   };
@@ -458,7 +418,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       {
         selectors: {
           "::before": {
-            backgroundColor: "var(--colorNeutralStroke2)",
+            backgroundColor: "rgb(200, 200, 200)",
             height: "3px",
             marginTop: "-1px",
           },
@@ -497,10 +457,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       {
         backgroundColor:
           this.getCurrentRuRange() === "instant"
-            ? "var(--colorBrandBackground)"
+            ? "rgb(0, 120, 212)"
             : this.getCurrentRuRange() === "delayed"
-            ? "var(--colorStatusWarningBackground1)"
+            ? "rgb(255 216 109)"
-            : "var(--colorStatusDangerBackground1)",
+            : "rgb(251, 217, 203)",
       },
     ],
   });
@@ -537,17 +497,14 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     <Stack>
       <Stack horizontal>
         <Stack.Item style={{ width: "34%" }}>
-          <span>{this.props.minimum.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}</span>
+          <span>{this.props.minimum.toLocaleString()}</span>
         </Stack.Item>
         <Stack.Item style={{ width: "66%" }}>
           <span style={{ float: "left", transform: "translateX(-50%)" }}>
-            {this.props.instantMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
+            {this.props.instantMaximumThroughput.toLocaleString()}
-          </span>
-          <span style={{ float: "right" }}>
-            {this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
           </span>
           <span style={{ float: "right" }} data-test="soft-allowed-maximum-throughput">
-            {this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
+            {this.props.softAllowedMaximumThroughput.toLocaleString()}
           </span>
         </Stack.Item>
       </Stack>
@@ -590,41 +547,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     }
   };
 
-  private darkThemeMessageBarStyles: Partial<IMessageBarStyles> = {
-    root: {
-      marginTop: "5px",
-      selectors: {
-        "&.ms-MessageBar--severeWarning": {
-          backgroundColor: "var(--colorStatusDangerBackground1)",
-          border: "1px solid var(--colorStatusDangerBorder1)",
-        },
-        "&.ms-MessageBar--warning": {
-          backgroundColor: "var(--colorStatusWarningBackground1)",
-          border: "1px solid var(--colorStatusWarningBorder1)",
-        },
-        "&.ms-MessageBar--info": {
-          backgroundColor: "var(--colorNeutralBackground3)",
-          border: "1px solid var(--colorNeutralStroke1)",
-        },
-        ".ms-MessageBar-icon": {
-          color: "var(--colorNeutralForeground1)",
-        },
-        ".ms-MessageBar-text": {
-          color: "var(--colorNeutralForeground1)",
-        },
-      },
-    },
-  };
-
   private getThroughputWarningMessageBar = (): JSX.Element => {
     const isSevereWarning: boolean =
       this.currentThroughputValue() > this.props.softAllowedMaximumThroughput ||
       this.currentThroughputValue() < this.props.minimum;
     return (
-      <MessageBar
+      <MessageBar messageBarType={isSevereWarning ? MessageBarType.severeWarning : MessageBarType.warning}>
-        messageBarType={isSevereWarning ? MessageBarType.severeWarning : MessageBarType.warning}
-        styles={this.darkThemeMessageBarStyles}
-      >
         {this.getThroughputWarningMessageText()}
       </MessageBar>
     );
@@ -637,13 +565,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           {/* Column 1: Minimum RU/s */}
           <Stack tokens={{ childrenGap: 4 }}>
             <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-              <Text
+              <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
-                variant="small"
-                style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
-              >
                 Minimum RU/s
               </Text>
-              <FontIcon iconName="Info" style={{ fontSize: 12, color: "var(--colorNeutralForeground2)" }} />
+              <FontIcon iconName="Info" style={{ fontSize: 12, color: "#666" }} />
             </Stack>
             <Text
               style={{
@@ -658,7 +583,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
                 alignItems: "center",
                 justifyContent: "center",
                 boxSizing: "border-box",
-                color: "var(--colorNeutralForeground1)",
               }}
             >
               {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)}
@@ -672,7 +596,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
               fontSize: 12,
               fontWeight: 400,
               paddingBottom: 6,
-              color: "var(--colorNeutralForeground1)",
             }}
           >
             x 10 =
@@ -681,13 +604,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           {/* Column 3: Maximum RU/s */}
           <Stack tokens={{ childrenGap: 4 }}>
             <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-              <Text
+              <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
-                variant="small"
-                style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
-              >
                 Maximum RU/s
               </Text>
-              <FontIcon iconName="Info" style={{ fontSize: 12, color: "var(--colorNeutralForeground2)" }} />
+              <FontIcon iconName="Info" style={{ fontSize: 12, color: "#666" }} />
             </Stack>
             <TextField
               required
@@ -696,25 +616,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
               key="auto pilot throughput input"
               styles={{
                 ...getTextFieldStyles(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline),
-                fieldGroup: {
+                fieldGroup: { width: 100, height: 28 },
-                  width: 100,
+                field: { fontSize: 14, fontWeight: 400 },
-                  height: 28,
-                  backgroundColor: "var(--colorNeutralBackground4)",
-                },
-                field: {
-                  fontSize: 14,
-                  fontWeight: 400,
-                  color: "var(--colorNeutralForeground1)",
-                  backgroundColor: "var(--colorNeutralBackground4)",
-                },
-                root: {
-                  selectors: {
-                    input: {
-                      backgroundColor: "var(--colorNeutralBackground4)",
-                      color: "var(--colorNeutralForeground1)",
-                    },
-                  },
-                },
               }}
               disabled={this.overrideWithProvisionedThroughputSettings()}
               step={AutoPilotUtils.autoPilotIncrementStep}
@@ -771,7 +674,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </Stack>
           )}
           {this.props.isAutoPilotSelected ? (
-            <Text style={{ marginTop: "40px", color: "var(--colorNeutralForeground1)" }}>
+            <Text style={{ marginTop: "40px" }}>
               Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "}
               <b>
                 {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "}
@@ -784,7 +687,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
               {this.state.exceedFreeTierThroughput && (
                 <MessageBar
                   messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
-                  styles={this.darkThemeMessageBarStyles}
+                  styles={messageBarStyles}
                   style={{ marginTop: "40px" }}
                 >
                   {`Billing will apply if you provision more than ${SharedConstants.FreeTierLimits.RU} RU/s of manual throughput, or if the resource scales beyond ${SharedConstants.FreeTierLimits.RU} RU/s with autoscale.`}
@@ -793,7 +696,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
             </>
           )}
           {!this.overrideWithProvisionedThroughputSettings() && (
-            <Text style={{ color: "var(--colorNeutralForeground1)" }}>
+            <Text>
               Estimate your required RU/s with
               <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
                 {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
@@ -834,7 +737,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         {warningMessage && (
           <MessageBar
             messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
-            styles={this.darkThemeMessageBarStyles}
             role="alert"
           >
             {warningMessage}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -16,35 +16,17 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       }
     }
     role="alert"
-    styles={
-      {
-        "root": {
-          "marginTop": "5px",
-          "selectors": {
-            "&.ms-MessageBar--info": {
-              "backgroundColor": "var(--colorNeutralBackground3)",
-              "border": "1px solid var(--colorNeutralStroke1)",
-            },
-            "&.ms-MessageBar--severeWarning": {
-              "backgroundColor": "var(--colorStatusDangerBackground1)",
-              "border": "1px solid var(--colorStatusDangerBorder1)",
-            },
-            "&.ms-MessageBar--warning": {
-              "backgroundColor": "var(--colorStatusWarningBackground1)",
-              "border": "1px solid var(--colorStatusWarningBorder1)",
-            },
-            ".ms-MessageBar-icon": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-            ".ms-MessageBar-text": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-          },
-        },
-      }
-    }
   >
-    <Text>
+    <Text
+      styles={
+        {
+          "root": {
+            "color": "windowtext",
+            "fontSize": 14,
+          },
+        }
+      }
+    >
       Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
     </Text>
   </StyledMessageBar>
@@ -59,7 +41,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             styles={
               {
                 "root": {
-                  "color": "var(--colorNeutralForeground1)",
+                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -80,27 +62,11 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       styles={
         {
           "root": {
+            "backgroundColor": "white",
             "marginTop": "5px",
-            "selectors": {
+          },
-              "&.ms-MessageBar--info": {
+          "text": {
-                "backgroundColor": "var(--colorNeutralBackground3)",
+            "fontSize": 14,
-                "border": "1px solid var(--colorNeutralStroke1)",
-              },
-              "&.ms-MessageBar--severeWarning": {
-                "backgroundColor": "var(--colorStatusDangerBackground1)",
-                "border": "1px solid var(--colorStatusDangerBorder1)",
-              },
-              "&.ms-MessageBar--warning": {
-                "backgroundColor": "var(--colorStatusWarningBackground1)",
-                "border": "1px solid var(--colorStatusWarningBorder1)",
-              },
-              ".ms-MessageBar-icon": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-MessageBar-text": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-            },
           },
         }
       }
@@ -110,7 +76,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         styles={
           {
             "root": {
-              "color": "var(--colorNeutralForeground1)",
+              "color": "windowtext",
               "fontSize": 14,
             },
           }
@@ -155,47 +121,15 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                 ".ms-ChoiceField-field.is-checked::before": {
                   "borderColor": undefined,
                 },
-                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
                 ".ms-ChoiceField-wrapper label": {
-                  "color": "var(--colorNeutralForeground1)",
                   "fontFamily": undefined,
                   "fontSize": 14,
                   "padding": "2px 5px",
                   "whiteSpace": "nowrap",
                 },
-                ".ms-ChoiceFieldLabel": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
-                ".ms-ChoiceFieldLabel:hover": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
               },
             },
           ],
-          "label": {
-            "color": "var(--colorNeutralForeground1)",
-          },
-          "root": {
-            "selectors": {
-              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceField-innerField": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-            },
-          },
         }
       }
     />
@@ -251,7 +185,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               <Text
                 style={
                   {
-                    "color": "var(--colorNeutralForeground1)",
                     "fontWeight": 600,
                     "lineHeight": "20px",
                   }
@@ -264,7 +197,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                 iconName="Info"
                 style={
                   {
-                    "color": "var(--colorNeutralForeground2)",
+                    "color": "#666",
                     "fontSize": 12,
                   }
                 }
@@ -277,7 +210,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                   "backgroundColor": "transparent",
                   "border": "none",
                   "boxSizing": "border-box",
-                  "color": "var(--colorNeutralForeground1)",
                   "display": "flex",
                   "fontFamily": "Segoe UI",
                   "fontSize": 14,
@@ -294,7 +226,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
           <Text
             style={
               {
-                "color": "var(--colorNeutralForeground1)",
                 "fontFamily": "Segoe UI",
                 "fontSize": 12,
                 "fontWeight": 400,
@@ -323,7 +254,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               <Text
                 style={
                   {
-                    "color": "var(--colorNeutralForeground1)",
                     "fontWeight": 600,
                     "lineHeight": "20px",
                   }
@@ -336,7 +266,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                 iconName="Info"
                 style={
                   {
-                    "color": "var(--colorNeutralForeground2)",
+                    "color": "#666",
                     "fontSize": 12,
                   }
                 }
@@ -355,36 +285,13 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               styles={
                 {
                   "field": {
-                    "backgroundColor": "var(--colorNeutralBackground4)",
-                    "color": "var(--colorNeutralForeground1)",
                     "fontSize": 14,
                     "fontWeight": 400,
                   },
                   "fieldGroup": {
-                    "backgroundColor": "var(--colorNeutralBackground4)",
                     "height": 28,
                     "width": 100,
                   },
-                  "root": {
-                    "selectors": {
-                      "input": {
-                        "backgroundColor": "var(--colorNeutralBackground4)",
-                        "color": "var(--colorNeutralForeground1)",
-                      },
-                    },
-                  },
-                  "subComponentStyles": {
-                    "label": {
-                      "root": {
-                        "color": "var(--colorNeutralForeground1)",
-                      },
-                    },
-                  },
-                  "suffix": {
-                    "backgroundColor": "var(--colorNeutralBackground2)",
-                    "border": "1px solid var(--colorNeutralStroke1)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
                 }
               }
               type="number"
@@ -426,15 +333,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                 >
                   5,000
                 </span>
-                <span
-                  style={
-                    {
-                      "float": "right",
-                    }
-                  }
-                >
-                  1,000,000
-                </span>
                 <span
                   data-test="soft-allowed-maximum-throughput"
                   style={
@@ -454,7 +352,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                 {
                   "progressBar": [
                     {
-                      "backgroundColor": "var(--colorStatusDangerBackground1)",
+                      "backgroundColor": "rgb(251, 217, 203)",
                     },
                   ],
                 }
@@ -478,7 +376,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "var(--colorNeutralStroke2)",
+                              "backgroundColor": "rgb(200, 200, 200)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -506,7 +404,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "var(--colorNeutralStroke2)",
+                              "backgroundColor": "rgb(200, 200, 200)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -523,39 +421,12 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
           </Stack>
           <StyledMessageBar
             messageBarType={3}
-            styles={
-              {
-                "root": {
-                  "marginTop": "5px",
-                  "selectors": {
-                    "&.ms-MessageBar--info": {
-                      "backgroundColor": "var(--colorNeutralBackground3)",
-                      "border": "1px solid var(--colorNeutralStroke1)",
-                    },
-                    "&.ms-MessageBar--severeWarning": {
-                      "backgroundColor": "var(--colorStatusDangerBackground1)",
-                      "border": "1px solid var(--colorStatusDangerBorder1)",
-                    },
-                    "&.ms-MessageBar--warning": {
-                      "backgroundColor": "var(--colorStatusWarningBackground1)",
-                      "border": "1px solid var(--colorStatusWarningBorder1)",
-                    },
-                    ".ms-MessageBar-icon": {
-                      "color": "var(--colorNeutralForeground1)",
-                    },
-                    ".ms-MessageBar-text": {
-                      "color": "var(--colorNeutralForeground1)",
-                    },
-                  },
-                },
-              }
-            }
           >
             <Text
               styles={
                 {
                   "root": {
-                    "color": "var(--colorNeutralForeground1)",
+                    "color": "windowtext",
                     "fontSize": 14,
                   },
                 }
@@ -576,7 +447,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         <Text
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "marginTop": "40px",
             }
           }
@@ -608,22 +478,10 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               }
             }
           >
-            <StyledLabelBase
+            <StyledLabelBase>
-              style={
-                {
-                  "color": "var(--colorNeutralForeground1)",
-                }
-              }
-            >
               Storage capacity
             </StyledLabelBase>
-            <Text
+            <Text>
-              style={
-                {
-                  "color": "var(--colorNeutralForeground1)",
-                }
-              }
-            >
               Unlimited
             </Text>
           </Stack>
@@ -642,7 +500,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         <Text
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
             }
           }
@@ -665,7 +522,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             <Text
               style={
                 {
-                  "color": "var(--colorNeutralForeground1)",
                   "fontWeight": 600,
                 }
               }
@@ -684,7 +540,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               <Text
                 style={
                   {
-                    "color": "var(--colorNeutralForeground1)",
                     "width": "50%",
                   }
                 }
@@ -697,7 +552,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
               <Text
                 style={
                   {
-                    "color": "var(--colorNeutralForeground1)",
                     "width": "50%",
                   }
                 }
@@ -712,7 +566,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
           <Text
             style={
               {
-                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               }
             }
@@ -723,7 +576,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             horizontal={true}
             style={
               {
-                "color": "var(--colorNeutralForeground1)",
                 "marginTop": 5,
               }
             }
@@ -731,7 +583,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             <Text
               style={
                 {
-                  "color": "var(--colorNeutralForeground1)",
                   "width": "50%",
                 }
               }
@@ -744,7 +595,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             <Text
               style={
                 {
-                  "color": "var(--colorNeutralForeground1)",
                   "width": "50%",
                 }
               }
@@ -759,7 +609,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         <Text
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
               "marginTop": 15,
             }
@@ -793,7 +642,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         <Text
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "marginTop": 15,
             }
           }
@@ -828,7 +676,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             styles={
               {
                 "root": {
-                  "color": "var(--colorNeutralForeground1)",
+                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -869,47 +717,15 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                 ".ms-ChoiceField-field.is-checked::before": {
                   "borderColor": "",
                 },
-                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
                 ".ms-ChoiceField-wrapper label": {
-                  "color": "var(--colorNeutralForeground1)",
                   "fontFamily": undefined,
                   "fontSize": 14,
                   "padding": "2px 5px",
                   "whiteSpace": "nowrap",
                 },
-                ".ms-ChoiceFieldLabel": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
-                ".ms-ChoiceFieldLabel:hover": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
               },
             },
           ],
-          "label": {
-            "color": "var(--colorNeutralForeground1)",
-          },
-          "root": {
-            "selectors": {
-              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceField-innerField": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-            },
-          },
         }
       }
     />
@@ -949,53 +765,17 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
           step={100}
           styles={
             {
-              "field": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-                "color": "var(--colorNeutralForeground1)",
-                "selectors": {
-                  ":disabled": {
-                    "backgroundColor": "var(--colorNeutralBackground2)",
-                    "color": "var(--colorNeutralForeground2)",
-                  },
-                },
-              },
               "fieldGroup": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
+                "borderColor": "",
-                "borderColor": "var(--colorNeutralStroke1)",
                 "height": 25,
                 "selectors": {
                   ":disabled": {
-                    "backgroundColor": "var(--colorNeutralBackground2)",
+                    "backgroundColor": undefined,
-                    "borderColor": "var(--colorNeutralStroke1)",
+                    "borderColor": undefined,
-                    "color": "var(--colorNeutralForeground2)",
-                  },
-                  "input": {
-                    "backgroundColor": "var(--colorNeutralBackground2)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  "input#autopilotInput": {
-                    "backgroundColor": "var(--colorNeutralBackground4)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  "input:disabled": {
-                    "backgroundColor": "var(--colorNeutralBackground2)",
-                    "color": "var(--colorNeutralForeground2)",
                   },
                 },
                 "width": 300,
               },
-              "subComponentStyles": {
-                "label": {
-                  "root": {
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                },
-              },
-              "suffix": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-                "border": "1px solid var(--colorNeutralStroke1)",
-                "color": "var(--colorNeutralForeground1)",
-              },
             }
           }
           type="number"
@@ -1034,15 +814,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                 >
                   5,000
                 </span>
-                <span
-                  style={
-                    {
-                      "float": "right",
-                    }
-                  }
-                >
-                  1,000,000
-                </span>
                 <span
                   data-test="soft-allowed-maximum-throughput"
                   style={
@@ -1062,7 +833,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                 {
                   "progressBar": [
                     {
-                      "backgroundColor": "var(--colorStatusDangerBackground1)",
+                      "backgroundColor": "rgb(251, 217, 203)",
                     },
                   ],
                 }
@@ -1086,7 +857,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "var(--colorNeutralStroke2)",
+                              "backgroundColor": "rgb(200, 200, 200)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -1114,7 +885,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "var(--colorNeutralStroke2)",
+                              "backgroundColor": "rgb(200, 200, 200)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -1131,39 +902,12 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
           </Stack>
           <StyledMessageBar
             messageBarType={3}
-            styles={
-              {
-                "root": {
-                  "marginTop": "5px",
-                  "selectors": {
-                    "&.ms-MessageBar--info": {
-                      "backgroundColor": "var(--colorNeutralBackground3)",
-                      "border": "1px solid var(--colorNeutralStroke1)",
-                    },
-                    "&.ms-MessageBar--severeWarning": {
-                      "backgroundColor": "var(--colorStatusDangerBackground1)",
-                      "border": "1px solid var(--colorStatusDangerBorder1)",
-                    },
-                    "&.ms-MessageBar--warning": {
-                      "backgroundColor": "var(--colorStatusWarningBackground1)",
-                      "border": "1px solid var(--colorStatusWarningBorder1)",
-                    },
-                    ".ms-MessageBar-icon": {
-                      "color": "var(--colorNeutralForeground1)",
-                    },
-                    ".ms-MessageBar-text": {
-                      "color": "var(--colorNeutralForeground1)",
-                    },
-                  },
-                },
-              }
-            }
           >
             <Text
               styles={
                 {
                   "root": {
-                    "color": "var(--colorNeutralForeground1)",
+                    "color": "windowtext",
                     "fontSize": 14,
                   },
                 }
@@ -1181,13 +925,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             </Text>
           </StyledMessageBar>
         </Stack>
-        <Text
+        <Text>
-          style={
-            {
-              "color": "var(--colorNeutralForeground1)",
-            }
-          }
-        >
           Estimate your required RU/s with
           <StyledLinkBase
             href="https://cosmos.azure.com/capacitycalculator/"
@@ -1231,22 +969,10 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
               }
             }
           >
-            <StyledLabelBase
+            <StyledLabelBase>
-              style={
-                {
-                  "color": "var(--colorNeutralForeground1)",
-                }
-              }
-            >
               Storage capacity
             </StyledLabelBase>
-            <Text
+            <Text>
-              style={
-                {
-                  "color": "var(--colorNeutralForeground1)",
-                }
-              }
-            >
               Unlimited
             </Text>
           </Stack>
@@ -1265,7 +991,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         <Text
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
             }
           }
@@ -1287,7 +1012,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
           <Text
             style={
               {
-                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               }
             }
@@ -1305,7 +1029,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             <Text
               style={
                 {
-                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1318,7 +1041,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             <Text
               style={
                 {
-                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1331,7 +1053,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             <Text
               style={
                 {
-                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1346,7 +1067,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         <Text
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
               "marginTop": 15,
             }
@@ -1379,7 +1099,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         <Text
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "marginTop": 15,
             }
           }
@@ -1414,7 +1133,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             styles={
               {
                 "root": {
-                  "color": "var(--colorNeutralForeground1)",
+                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -1455,47 +1174,15 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                 ".ms-ChoiceField-field.is-checked::before": {
                   "borderColor": "",
                 },
-                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
                 ".ms-ChoiceField-wrapper label": {
-                  "color": "var(--colorNeutralForeground1)",
                   "fontFamily": undefined,
                   "fontSize": 14,
                   "padding": "2px 5px",
                   "whiteSpace": "nowrap",
                 },
-                ".ms-ChoiceFieldLabel": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
-                ".ms-ChoiceFieldLabel:hover": {
-                  "color": "var(--colorNeutralForeground1)",
-                },
               },
             },
           ],
-          "label": {
-            "color": "var(--colorNeutralForeground1)",
-          },
-          "root": {
-            "selectors": {
-              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceField-innerField": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-            },
-          },
         }
       }
     />
@@ -1535,53 +1222,17 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
           step={100}
           styles={
             {
-              "field": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-                "color": "var(--colorNeutralForeground1)",
-                "selectors": {
-                  ":disabled": {
-                    "backgroundColor": "var(--colorNeutralBackground2)",
-                    "color": "var(--colorNeutralForeground2)",
-                  },
-                },
-              },
               "fieldGroup": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
+                "borderColor": "",
-                "borderColor": "var(--colorNeutralStroke1)",
                 "height": 25,
                 "selectors": {
                   ":disabled": {
-                    "backgroundColor": "var(--colorNeutralBackground2)",
+                    "backgroundColor": undefined,
-                    "borderColor": "var(--colorNeutralStroke1)",
+                    "borderColor": undefined,
-                    "color": "var(--colorNeutralForeground2)",
-                  },
-                  "input": {
-                    "backgroundColor": "var(--colorNeutralBackground2)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  "input#autopilotInput": {
-                    "backgroundColor": "var(--colorNeutralBackground4)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  "input:disabled": {
-                    "backgroundColor": "var(--colorNeutralBackground2)",
-                    "color": "var(--colorNeutralForeground2)",
                   },
                 },
                 "width": 300,
               },
-              "subComponentStyles": {
-                "label": {
-                  "root": {
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                },
-              },
-              "suffix": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-                "border": "1px solid var(--colorNeutralStroke1)",
-                "color": "var(--colorNeutralForeground1)",
-              },
             }
           }
           type="number"
@@ -1620,15 +1271,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                 >
                   5,000
                 </span>
-                <span
-                  style={
-                    {
-                      "float": "right",
-                    }
-                  }
-                >
-                  1,000,000
-                </span>
                 <span
                   data-test="soft-allowed-maximum-throughput"
                   style={
@@ -1648,7 +1290,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                 {
                   "progressBar": [
                     {
-                      "backgroundColor": "var(--colorStatusDangerBackground1)",
+                      "backgroundColor": "rgb(251, 217, 203)",
                     },
                   ],
                 }
@@ -1672,7 +1314,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "var(--colorNeutralStroke2)",
+                              "backgroundColor": "rgb(200, 200, 200)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -1700,7 +1342,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
                         {
                           "selectors": {
                             "::before": {
-                              "backgroundColor": "var(--colorNeutralStroke2)",
+                              "backgroundColor": "rgb(200, 200, 200)",
                               "height": "3px",
                               "marginTop": "-1px",
                             },
@@ -1717,39 +1359,12 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
           </Stack>
           <StyledMessageBar
             messageBarType={3}
-            styles={
-              {
-                "root": {
-                  "marginTop": "5px",
-                  "selectors": {
-                    "&.ms-MessageBar--info": {
-                      "backgroundColor": "var(--colorNeutralBackground3)",
-                      "border": "1px solid var(--colorNeutralStroke1)",
-                    },
-                    "&.ms-MessageBar--severeWarning": {
-                      "backgroundColor": "var(--colorStatusDangerBackground1)",
-                      "border": "1px solid var(--colorStatusDangerBorder1)",
-                    },
-                    "&.ms-MessageBar--warning": {
-                      "backgroundColor": "var(--colorStatusWarningBackground1)",
-                      "border": "1px solid var(--colorStatusWarningBorder1)",
-                    },
-                    ".ms-MessageBar-icon": {
-                      "color": "var(--colorNeutralForeground1)",
-                    },
-                    ".ms-MessageBar-text": {
-                      "color": "var(--colorNeutralForeground1)",
-                    },
-                  },
-                },
-              }
-            }
           >
             <Text
               styles={
                 {
                   "root": {
-                    "color": "var(--colorNeutralForeground1)",
+                    "color": "windowtext",
                     "fontSize": 14,
                   },
                 }
@@ -1767,13 +1382,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             </Text>
           </StyledMessageBar>
         </Stack>
-        <Text
+        <Text>
-          style={
-            {
-              "color": "var(--colorNeutralForeground1)",
-            }
-          }
-        >
           Estimate your required RU/s with
           <StyledLinkBase
             href="https://cosmos.azure.com/capacitycalculator/"
@@ -1800,22 +1409,10 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
               }
             }
           >
-            <StyledLabelBase
+            <StyledLabelBase>
-              style={
-                {
-                  "color": "var(--colorNeutralForeground1)",
-                }
-              }
-            >
               Storage capacity
             </StyledLabelBase>
-            <Text
+            <Text>
-              style={
-                {
-                  "color": "var(--colorNeutralForeground1)",
-                }
-              }
-            >
               Unlimited
             </Text>
           </Stack>
@@ -1834,7 +1431,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
         <Text
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
             }
           }
@@ -1856,7 +1452,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
           <Text
             style={
               {
-                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               }
             }
@@ -1874,7 +1469,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             <Text
               style={
                 {
-                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1887,7 +1481,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             <Text
               style={
                 {
-                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1900,7 +1493,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             <Text
               style={
                 {
-                  "color": "var(--colorNeutralForeground1)",
                   "width": "33%",
                 }
               }
@@ -1915,7 +1507,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
         <Text
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
               "marginTop": 15,
             }
@@ -1948,7 +1539,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
         <Text
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "marginTop": 15,
             }
           }

src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx

@@ -1,5 +1,5 @@
-import { DirectionalHint, IIconStyles, Icon, Stack, Text, TooltipHost } from "@fluentui/react";
 import * as React from "react";
+import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "@fluentui/react";
 import { toolTipLabelStackTokens } from "../SettingsRenderUtils";
 
 export interface ToolTipLabelComponentProps {
@@ -14,9 +14,7 @@ export class ToolTipLabelComponent extends React.Component<ToolTipLabelComponent
     return (
       <>
         <Stack horizontal verticalAlign="center" tokens={toolTipLabelStackTokens}>
-          {this.props.label && (
+          {this.props.label && <Text style={{ fontWeight: 600 }}>{this.props.label}</Text>}
-            <Text style={{ fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>{this.props.label}</Text>
-          )}
           {this.props.toolTipElement && (
             <TooltipHost
               content={this.props.toolTipElement}

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap

@@ -11,7 +11,6 @@ exports[`ComputedPropertiesComponent renders 1`] = `
   <Text
     style={
       {
-        "color": "var(--colorNeutralForeground1)",
         "marginBottom": "10px",
         "marginLeft": "30px",
       }

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ConflictResolutionComponent.test.tsx.snap

@@ -37,47 +37,15 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
               ".ms-ChoiceField-field.is-checked::before": {
                 "borderColor": undefined,
               },
-              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
               ".ms-ChoiceField-wrapper label": {
-                "color": "var(--colorNeutralForeground1)",
                 "fontFamily": undefined,
                 "fontSize": 14,
                 "padding": "2px 5px",
                 "whiteSpace": "nowrap",
               },
-              ".ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceFieldLabel:hover": {
-                "color": "var(--colorNeutralForeground1)",
-              },
             },
           },
         ],
-        "label": {
-          "color": "var(--colorNeutralForeground1)",
-        },
-        "root": {
-          "selectors": {
-            ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-            ".ms-ChoiceField-innerField": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-            ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-            ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-            ".ms-ChoiceFieldLabel": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-          },
-        },
       }
     }
   />
@@ -88,44 +56,17 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
     onRenderLabel={[Function]}
     styles={
       {
-        "field": {
-          "backgroundColor": "var(--colorNeutralBackground2)",
-          "color": "var(--colorNeutralForeground1)",
-          "selectors": {
-            ":disabled": {
-              "backgroundColor": "var(--colorNeutralBackground2)",
-              "color": "var(--colorNeutralForeground2)",
-            },
-          },
-        },
         "fieldGroup": {
-          "backgroundColor": "var(--colorNeutralBackground2)",
+          "borderColor": "",
-          "borderColor": "var(--colorNeutralStroke1)",
           "height": 25,
           "selectors": {
             ":disabled": {
-              "backgroundColor": "var(--colorNeutralBackground2)",
+              "backgroundColor": undefined,
-              "borderColor": "var(--colorNeutralStroke1)",
+              "borderColor": undefined,
-              "color": "var(--colorNeutralForeground2)",
-            },
-            "input": {
-              "backgroundColor": "var(--colorNeutralBackground2)",
-              "color": "var(--colorNeutralForeground1)",
-            },
-            "input:disabled": {
-              "backgroundColor": "var(--colorNeutralBackground2)",
-              "color": "var(--colorNeutralForeground2)",
             },
           },
           "width": 300,
         },
-        "subComponentStyles": {
-          "label": {
-            "root": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-          },
-        },
       }
     }
     value=""
@@ -170,47 +111,15 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
               ".ms-ChoiceField-field.is-checked::before": {
                 "borderColor": "",
               },
-              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
               ".ms-ChoiceField-wrapper label": {
-                "color": "var(--colorNeutralForeground1)",
                 "fontFamily": undefined,
                 "fontSize": 14,
                 "padding": "2px 5px",
                 "whiteSpace": "nowrap",
               },
-              ".ms-ChoiceFieldLabel": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              ".ms-ChoiceFieldLabel:hover": {
-                "color": "var(--colorNeutralForeground1)",
-              },
             },
           },
         ],
-        "label": {
-          "color": "var(--colorNeutralForeground1)",
-        },
-        "root": {
-          "selectors": {
-            ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-            ".ms-ChoiceField-innerField": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-            ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-            ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-            ".ms-ChoiceFieldLabel": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-          },
-        },
       }
     }
   />
@@ -221,44 +130,17 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
     onRenderLabel={[Function]}
     styles={
       {
-        "field": {
-          "backgroundColor": "var(--colorNeutralBackground2)",
-          "color": "var(--colorNeutralForeground1)",
-          "selectors": {
-            ":disabled": {
-              "backgroundColor": "var(--colorNeutralBackground2)",
-              "color": "var(--colorNeutralForeground2)",
-            },
-          },
-        },
         "fieldGroup": {
-          "backgroundColor": "var(--colorNeutralBackground2)",
+          "borderColor": "",
-          "borderColor": "var(--colorNeutralStroke1)",
           "height": 25,
           "selectors": {
             ":disabled": {
-              "backgroundColor": "var(--colorNeutralBackground2)",
+              "backgroundColor": undefined,
-              "borderColor": "var(--colorNeutralStroke1)",
+              "borderColor": undefined,
-              "color": "var(--colorNeutralForeground2)",
-            },
-            "input": {
-              "backgroundColor": "var(--colorNeutralBackground2)",
-              "color": "var(--colorNeutralForeground1)",
-            },
-            "input:disabled": {
-              "backgroundColor": "var(--colorNeutralBackground2)",
-              "color": "var(--colorNeutralForeground2)",
             },
           },
           "width": 300,
         },
-        "subComponentStyles": {
-          "label": {
-            "root": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-          },
-        },
       }
     }
     value=""

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/PartitionKeyComponent.test.tsx.snap

@@ -26,7 +26,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
       styles={
         {
           "root": {
-            "color": "var(--colorNeutralForeground1)",
             "fontSize": 16,
             "fontWeight": 600,
           },
@@ -55,7 +54,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
           styles={
             {
               "root": {
-                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               },
             }
@@ -68,7 +66,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
           styles={
             {
               "root": {
-                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               },
             }
@@ -84,79 +81,26 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
           }
         }
       >
-        <Text
+        <Text />
-          styles={
+        <Text>
-            {
-              "root": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-            }
-          }
-        />
-        <Text
-          styles={
-            {
-              "root": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-            }
-          }
-        >
           Non-hierarchical
         </Text>
       </Stack>
     </Stack>
   </Stack>
   <StyledMessageBar
-    messageBarIconProps={
-      {
-        "className": "messageBarWarningIcon",
-        "iconName": "WarningSolid",
-      }
-    }
     messageBarType={5}
-    styles={
-      {
-        "root": {
-          "selectors": {
-            "&.ms-MessageBar--warning": {
-              "backgroundColor": "var(--colorStatusWarningBackground1)",
-              "border": "1px solid var(--colorStatusWarningBorder1)",
-            },
-            ".ms-MessageBar-icon": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-            ".ms-MessageBar-text": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-          },
-        },
-      }
-    }
   >
     To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to the source container for the entire duration of the partition key change process.
     <StyledLinkBase
       href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
-      style={
-        {
-          "color": "var(--colorBrandForeground1)",
-        }
-      }
       target="_blank"
       underline={true}
     >
       Learn more
     </StyledLinkBase>
   </StyledMessageBar>
-  <Text
+  <Text>
-    styles={
-      {
-        "root": {
-          "color": "var(--colorNeutralForeground1)",
-        },
-      }
-    }
-  >
     To change the partition key, a new destination container must be created or an existing destination container selected. Data will then be copied to the destination container.
   </Text>
   <CustomizedPrimaryButton
@@ -214,7 +158,6 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
           styles={
             {
               "root": {
-                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               },
             }
@@ -227,7 +170,6 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
           styles={
             {
               "root": {
-                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
               },
             }
@@ -243,24 +185,8 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
           }
         }
       >
-        <Text
+        <Text />
-          styles={
+        <Text>
-            {
-              "root": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-            }
-          }
-        />
-        <Text
-          styles={
-            {
-              "root": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-            }
-          }
-        >
           Non-hierarchical
         </Text>
       </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap

@@ -14,7 +14,6 @@ exports[`ToolTipLabelComponent renders 1`] = `
     <Text
       style={
         {
-          "color": "var(--colorNeutralForeground1)",
           "fontWeight": 600,
         }
       }

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -3,76 +3,13 @@
 exports[`SettingsComponent renders 1`] = `
 <div
   className="settingsV2MainContainer"
-  style={
-    {
-      "backgroundColor": "var(--colorNeutralBackground1)",
-      "color": "var(--colorNeutralForeground1)",
-      "position": "relative",
-    }
-  }
 >
   <div
     className="settingsV2TabsContainer"
-    style={
-      {
-        "backgroundColor": "var(--colorNeutralBackground1)",
-        "color": "var(--colorNeutralForeground1)",
-        "padding": "20px 24px",
-        "position": "relative",
-      }
-    }
   >
     <StyledPivot
       onLinkClick={[Function]}
       selectedKey="ScaleTab"
-      styles={
-        {
-          "itemContainer": {
-            "backgroundColor": "var(--colorNeutralBackground1)",
-            "color": "var(--colorNeutralForeground1)",
-          },
-          "link": {
-            "backgroundColor": "var(--colorNeutralBackground1)",
-            "color": "var(--colorNeutralForeground1)",
-            "selectors": {
-              "&:active": {
-                "backgroundColor": "var(--colorNeutralBackground1)",
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "&:hover": {
-                "backgroundColor": "var(--colorNeutralBackground1)",
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "&[aria-selected="true"]": {
-                "backgroundColor": "var(--colorNeutralBackground1)",
-                "color": "var(--colorNeutralForeground1)",
-                "selectors": {
-                  "&:active": {
-                    "backgroundColor": "var(--colorNeutralBackground1)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  "&:hover": {
-                    "backgroundColor": "var(--colorNeutralBackground1)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                },
-              },
-            },
-          },
-          "root": {
-            "backgroundColor": "var(--colorNeutralBackground1)",
-            "color": "var(--colorNeutralForeground1)",
-            "selectors": {
-              "& .ms-Pivot-link": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "& .ms-Pivot-link.is-selected::before": {
-                "backgroundColor": "var(--colorCompoundBrandBackground)",
-              },
-            },
-          },
-        }
-      }
     >
       <PivotItem
         headerButtonProps={
@@ -85,102 +22,89 @@ exports[`SettingsComponent renders 1`] = `
         key="ScaleTab"
         style={
           {
-            "backgroundColor": "var(--colorNeutralBackground1)",
-            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
       >
-        <Stack
+        <ScaleComponent
-          styles={
+          collection={
             {
-              "root": {
+              "analyticalStorageTtl": [Function],
-                "backgroundColor": "var(--colorNeutralBackground1)",
+              "changeFeedPolicy": [Function],
-                "color": "var(--colorNeutralForeground1)",
+              "computedProperties": [Function],
+              "conflictResolutionPolicy": [Function],
+              "container": Explorer {
+                "_isInitializingNotebooks": false,
+                "isFixedCollectionWithSharedThroughputSupported": [Function],
+                "isTabsContentExpanded": [Function],
+                "onRefreshDatabasesKeyPress": [Function],
+                "onRefreshResourcesClick": [Function],
+                "phoenixClient": PhoenixClient {
+                  "armResourceId": undefined,
+                  "retryOptions": {
+                    "maxTimeout": 5000,
+                    "minTimeout": 5000,
+                    "retries": 3,
+                  },
+                },
+                "provideFeedbackEmail": [Function],
+                "queriesClient": QueriesClient {
+                  "container": [Circular],
+                },
+                "refreshNotebookList": [Function],
+                "resourceTree": ResourceTreeAdapter {
+                  "container": [Circular],
+                  "copyNotebook": [Function],
+                  "parameters": [Function],
+                },
               },
+              "dataMaskingPolicy": [Function],
+              "databaseId": "test",
+              "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
+              "geospatialConfig": [Function],
+              "getDatabase": [Function],
+              "id": [Function],
+              "indexingPolicy": [Function],
+              "materializedViewDefinition": [Function],
+              "materializedViews": [Function],
+              "offer": [Function],
+              "partitionKey": {
+                "kind": "hash",
+                "paths": [],
+                "version": 2,
+              },
+              "partitionKeyProperties": [
+                "partitionKey",
+              ],
+              "rawDataModel": {
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
+              "readSettings": [Function],
+              "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
             }
           }
-        >
+          isAutoPilotSelected={false}
-          <ScaleComponent
+          isFixedContainer={false}
-            collection={
+          isGlobalSecondaryIndex={true}
-              {
+          onAutoPilotSelected={[Function]}
-                "analyticalStorageTtl": [Function],
+          onMaxAutoPilotThroughputChange={[Function]}
-                "changeFeedPolicy": [Function],
+          onScaleDiscardableChange={[Function]}
-                "computedProperties": [Function],
+          onScaleSaveableChange={[Function]}
-                "conflictResolutionPolicy": [Function],
+          onThroughputChange={[Function]}
-                "container": Explorer {
+          throughput={10000}
-                  "_isInitializingNotebooks": false,
+          throughputBaseline={10000}
-                  "isFixedCollectionWithSharedThroughputSupported": [Function],
+          wasAutopilotOriginallySet={false}
-                  "isTabsContentExpanded": [Function],
+        />
-                  "onRefreshDatabasesKeyPress": [Function],
-                  "onRefreshResourcesClick": [Function],
-                  "phoenixClient": PhoenixClient {
-                    "armResourceId": undefined,
-                    "retryOptions": {
-                      "maxTimeout": 5000,
-                      "minTimeout": 5000,
-                      "retries": 3,
-                    },
-                  },
-                  "provideFeedbackEmail": [Function],
-                  "queriesClient": QueriesClient {
-                    "container": [Circular],
-                  },
-                  "refreshNotebookList": [Function],
-                  "resourceTree": ResourceTreeAdapter {
-                    "container": [Circular],
-                    "copyNotebook": [Function],
-                    "parameters": [Function],
-                  },
-                },
-                "dataMaskingPolicy": [Function],
-                "databaseId": "test",
-                "defaultTtl": [Function],
-                "fullTextPolicy": [Function],
-                "geospatialConfig": [Function],
-                "getDatabase": [Function],
-                "id": [Function],
-                "indexingPolicy": [Function],
-                "materializedViewDefinition": [Function],
-                "materializedViews": [Function],
-                "offer": [Function],
-                "partitionKey": {
-                  "kind": "hash",
-                  "paths": [],
-                  "version": 2,
-                },
-                "partitionKeyProperties": [
-                  "partitionKey",
-                ],
-                "rawDataModel": {
-                  "uniqueKeyPolicy": {
-                    "uniqueKeys": [
-                      {
-                        "paths": [
-                          "/id",
-                        ],
-                      },
-                    ],
-                  },
-                },
-                "readSettings": [Function],
-                "usageSizeInKB": [Function],
-                "vectorEmbeddingPolicy": [Function],
-              }
-            }
-            isAutoPilotSelected={false}
-            isFixedContainer={false}
-            isGlobalSecondaryIndex={true}
-            onAutoPilotSelected={[Function]}
-            onMaxAutoPilotThroughputChange={[Function]}
-            onScaleDiscardableChange={[Function]}
-            onScaleSaveableChange={[Function]}
-            onThroughputChange={[Function]}
-            throughput={10000}
-            throughputBaseline={10000}
-            wasAutopilotOriginallySet={false}
-          />
-        </Stack>
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -193,111 +117,98 @@ exports[`SettingsComponent renders 1`] = `
         key="SubSettingsTab"
         style={
           {
-            "backgroundColor": "var(--colorNeutralBackground1)",
-            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
       >
-        <Stack
+        <SubSettingsComponent
-          styles={
+          changeFeedPolicy="Off"
+          changeFeedPolicyBaseline="Off"
+          changeFeedPolicyVisible={false}
+          collection={
             {
-              "root": {
+              "analyticalStorageTtl": [Function],
-                "backgroundColor": "var(--colorNeutralBackground1)",
+              "changeFeedPolicy": [Function],
-                "color": "var(--colorNeutralForeground1)",
+              "computedProperties": [Function],
+              "conflictResolutionPolicy": [Function],
+              "container": Explorer {
+                "_isInitializingNotebooks": false,
+                "isFixedCollectionWithSharedThroughputSupported": [Function],
+                "isTabsContentExpanded": [Function],
+                "onRefreshDatabasesKeyPress": [Function],
+                "onRefreshResourcesClick": [Function],
+                "phoenixClient": PhoenixClient {
+                  "armResourceId": undefined,
+                  "retryOptions": {
+                    "maxTimeout": 5000,
+                    "minTimeout": 5000,
+                    "retries": 3,
+                  },
+                },
+                "provideFeedbackEmail": [Function],
+                "queriesClient": QueriesClient {
+                  "container": [Circular],
+                },
+                "refreshNotebookList": [Function],
+                "resourceTree": ResourceTreeAdapter {
+                  "container": [Circular],
+                  "copyNotebook": [Function],
+                  "parameters": [Function],
+                },
               },
+              "dataMaskingPolicy": [Function],
+              "databaseId": "test",
+              "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
+              "geospatialConfig": [Function],
+              "getDatabase": [Function],
+              "id": [Function],
+              "indexingPolicy": [Function],
+              "materializedViewDefinition": [Function],
+              "materializedViews": [Function],
+              "offer": [Function],
+              "partitionKey": {
+                "kind": "hash",
+                "paths": [],
+                "version": 2,
+              },
+              "partitionKeyProperties": [
+                "partitionKey",
+              ],
+              "rawDataModel": {
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
+              "readSettings": [Function],
+              "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
             }
           }
-        >
+          displayedTtlSeconds="5"
-          <SubSettingsComponent
+          geospatialConfigType="Geometry"
-            changeFeedPolicy="Off"
+          geospatialConfigTypeBaseline="Geometry"
-            changeFeedPolicyBaseline="Off"
+          isAnalyticalStorageEnabled={false}
-            changeFeedPolicyVisible={false}
+          onAnalyticalStorageTtlSecondsChange={[Function]}
-            collection={
+          onAnalyticalStorageTtlSelectionChange={[Function]}
-              {
+          onChangeFeedPolicyChange={[Function]}
-                "analyticalStorageTtl": [Function],
+          onDisplayedTtlSecondsChange={[Function]}
-                "changeFeedPolicy": [Function],
+          onGeoSpatialConfigTypeChange={[Function]}
-                "computedProperties": [Function],
+          onSubSettingsDiscardableChange={[Function]}
-                "conflictResolutionPolicy": [Function],
+          onSubSettingsSaveableChange={[Function]}
-                "container": Explorer {
+          onTimeToLiveSecondsChange={[Function]}
-                  "_isInitializingNotebooks": false,
+          onTtlChange={[Function]}
-                  "isFixedCollectionWithSharedThroughputSupported": [Function],
+          timeToLive="on"
-                  "isTabsContentExpanded": [Function],
+          timeToLiveBaseline="on"
-                  "onRefreshDatabasesKeyPress": [Function],
+          timeToLiveSeconds={5}
-                  "onRefreshResourcesClick": [Function],
+          timeToLiveSecondsBaseline={5}
-                  "phoenixClient": PhoenixClient {
+        />
-                    "armResourceId": undefined,
-                    "retryOptions": {
-                      "maxTimeout": 5000,
-                      "minTimeout": 5000,
-                      "retries": 3,
-                    },
-                  },
-                  "provideFeedbackEmail": [Function],
-                  "queriesClient": QueriesClient {
-                    "container": [Circular],
-                  },
-                  "refreshNotebookList": [Function],
-                  "resourceTree": ResourceTreeAdapter {
-                    "container": [Circular],
-                    "copyNotebook": [Function],
-                    "parameters": [Function],
-                  },
-                },
-                "dataMaskingPolicy": [Function],
-                "databaseId": "test",
-                "defaultTtl": [Function],
-                "fullTextPolicy": [Function],
-                "geospatialConfig": [Function],
-                "getDatabase": [Function],
-                "id": [Function],
-                "indexingPolicy": [Function],
-                "materializedViewDefinition": [Function],
-                "materializedViews": [Function],
-                "offer": [Function],
-                "partitionKey": {
-                  "kind": "hash",
-                  "paths": [],
-                  "version": 2,
-                },
-                "partitionKeyProperties": [
-                  "partitionKey",
-                ],
-                "rawDataModel": {
-                  "uniqueKeyPolicy": {
-                    "uniqueKeys": [
-                      {
-                        "paths": [
-                          "/id",
-                        ],
-                      },
-                    ],
-                  },
-                },
-                "readSettings": [Function],
-                "usageSizeInKB": [Function],
-                "vectorEmbeddingPolicy": [Function],
-              }
-            }
-            displayedTtlSeconds="5"
-            geospatialConfigType="Geometry"
-            geospatialConfigTypeBaseline="Geometry"
-            isAnalyticalStorageEnabled={false}
-            onAnalyticalStorageTtlSecondsChange={[Function]}
-            onAnalyticalStorageTtlSelectionChange={[Function]}
-            onChangeFeedPolicyChange={[Function]}
-            onDisplayedTtlSecondsChange={[Function]}
-            onGeoSpatialConfigTypeChange={[Function]}
-            onSubSettingsDiscardableChange={[Function]}
-            onSubSettingsSaveableChange={[Function]}
-            onTimeToLiveSecondsChange={[Function]}
-            onTtlChange={[Function]}
-            timeToLive="on"
-            timeToLiveBaseline="on"
-            timeToLiveSeconds={5}
-            timeToLiveSecondsBaseline={5}
-          />
-        </Stack>
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -310,38 +221,25 @@ exports[`SettingsComponent renders 1`] = `
         key="ContainerVectorPolicyTab"
         style={
           {
-            "backgroundColor": "var(--colorNeutralBackground1)",
-            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
       >
-        <Stack
+        <ContainerPolicyComponent
-          styles={
+          fullTextPolicy={{}}
-            {
+          fullTextPolicyBaseline={{}}
-              "root": {
+          isFullTextSearchEnabled={true}
-                "backgroundColor": "var(--colorNeutralBackground1)",
+          isGlobalSecondaryIndex={true}
-                "color": "var(--colorNeutralForeground1)",
+          isVectorSearchEnabled={false}
-              },
+          onFullTextPolicyChange={[Function]}
-            }
+          onFullTextPolicyDirtyChange={[Function]}
-          }
+          onVectorEmbeddingPolicyChange={[Function]}
-        >
+          onVectorEmbeddingPolicyDirtyChange={[Function]}
-          <ContainerPolicyComponent
+          resetShouldDiscardContainerPolicyChange={[Function]}
-            fullTextPolicy={{}}
+          shouldDiscardContainerPolicies={false}
-            fullTextPolicyBaseline={{}}
+          vectorEmbeddingPolicy={{}}
-            isFullTextSearchEnabled={true}
+          vectorEmbeddingPolicyBaseline={{}}
-            isGlobalSecondaryIndex={true}
+        />
-            isVectorSearchEnabled={false}
-            onFullTextPolicyChange={[Function]}
-            onFullTextPolicyDirtyChange={[Function]}
-            onVectorEmbeddingPolicyChange={[Function]}
-            onVectorEmbeddingPolicyDirtyChange={[Function]}
-            resetShouldDiscardContainerPolicyChange={[Function]}
-            shouldDiscardContainerPolicies={false}
-            vectorEmbeddingPolicy={{}}
-            vectorEmbeddingPolicyBaseline={{}}
-          />
-        </Stack>
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -354,48 +252,35 @@ exports[`SettingsComponent renders 1`] = `
         key="IndexingPolicyTab"
         style={
           {
-            "backgroundColor": "var(--colorNeutralBackground1)",
-            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
       >
-        <Stack
+        <IndexingPolicyComponent
-          styles={
+          indexingPolicyContent={
             {
-              "root": {
+              "automatic": true,
-                "backgroundColor": "var(--colorNeutralBackground1)",
+              "excludedPaths": [],
-                "color": "var(--colorNeutralForeground1)",
+              "includedPaths": [],
-              },
+              "indexingMode": "consistent",
             }
           }
-        >
+          indexingPolicyContentBaseline={
-          <IndexingPolicyComponent
+            {
-            indexingPolicyContent={
+              "automatic": true,
-              {
+              "excludedPaths": [],
-                "automatic": true,
+              "includedPaths": [],
-                "excludedPaths": [],
+              "indexingMode": "consistent",
-                "includedPaths": [],
-                "indexingMode": "consistent",
-              }
             }
-            indexingPolicyContentBaseline={
+          }
-              {
+          isVectorSearchEnabled={false}
-                "automatic": true,
+          logIndexingPolicySuccessMessage={[Function]}
-                "excludedPaths": [],
+          onIndexingPolicyContentChange={[Function]}
-                "includedPaths": [],
+          onIndexingPolicyDirtyChange={[Function]}
-                "indexingMode": "consistent",
+          refreshIndexTransformationProgress={[Function]}
-              }
+          resetShouldDiscardIndexingPolicy={[Function]}
-            }
+          shouldDiscardIndexingPolicy={false}
-            isVectorSearchEnabled={false}
+        />
-            logIndexingPolicySuccessMessage={[Function]}
-            onIndexingPolicyContentChange={[Function]}
-            onIndexingPolicyDirtyChange={[Function]}
-            refreshIndexTransformationProgress={[Function]}
-            resetShouldDiscardIndexingPolicy={[Function]}
-            shouldDiscardIndexingPolicy={false}
-          />
-        </Stack>
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -408,91 +293,18 @@ exports[`SettingsComponent renders 1`] = `
         key="PartitionKeyTab"
         style={
           {
-            "backgroundColor": "var(--colorNeutralBackground1)",
-            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
       >
-        <Stack
+        <PartitionKeyComponent
-          styles={
+          collection={
             {
-              "root": {
+              "analyticalStorageTtl": [Function],
-                "backgroundColor": "var(--colorNeutralBackground1)",
+              "changeFeedPolicy": [Function],
-                "color": "var(--colorNeutralForeground1)",
+              "computedProperties": [Function],
-              },
+              "conflictResolutionPolicy": [Function],
-            }
+              "container": Explorer {
-          }
-        >
-          <PartitionKeyComponent
-            collection={
-              {
-                "analyticalStorageTtl": [Function],
-                "changeFeedPolicy": [Function],
-                "computedProperties": [Function],
-                "conflictResolutionPolicy": [Function],
-                "container": Explorer {
-                  "_isInitializingNotebooks": false,
-                  "isFixedCollectionWithSharedThroughputSupported": [Function],
-                  "isTabsContentExpanded": [Function],
-                  "onRefreshDatabasesKeyPress": [Function],
-                  "onRefreshResourcesClick": [Function],
-                  "phoenixClient": PhoenixClient {
-                    "armResourceId": undefined,
-                    "retryOptions": {
-                      "maxTimeout": 5000,
-                      "minTimeout": 5000,
-                      "retries": 3,
-                    },
-                  },
-                  "provideFeedbackEmail": [Function],
-                  "queriesClient": QueriesClient {
-                    "container": [Circular],
-                  },
-                  "refreshNotebookList": [Function],
-                  "resourceTree": ResourceTreeAdapter {
-                    "container": [Circular],
-                    "copyNotebook": [Function],
-                    "parameters": [Function],
-                  },
-                },
-                "dataMaskingPolicy": [Function],
-                "databaseId": "test",
-                "defaultTtl": [Function],
-                "fullTextPolicy": [Function],
-                "geospatialConfig": [Function],
-                "getDatabase": [Function],
-                "id": [Function],
-                "indexingPolicy": [Function],
-                "materializedViewDefinition": [Function],
-                "materializedViews": [Function],
-                "offer": [Function],
-                "partitionKey": {
-                  "kind": "hash",
-                  "paths": [],
-                  "version": 2,
-                },
-                "partitionKeyProperties": [
-                  "partitionKey",
-                ],
-                "rawDataModel": {
-                  "uniqueKeyPolicy": {
-                    "uniqueKeys": [
-                      {
-                        "paths": [
-                          "/id",
-                        ],
-                      },
-                    ],
-                  },
-                },
-                "readSettings": [Function],
-                "usageSizeInKB": [Function],
-                "vectorEmbeddingPolicy": [Function],
-              }
-            }
-            explorer={
-              Explorer {
                 "_isInitializingNotebooks": false,
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
@@ -516,11 +328,71 @@ exports[`SettingsComponent renders 1`] = `
                   "copyNotebook": [Function],
                   "parameters": [Function],
                 },
-              }
+              },
+              "dataMaskingPolicy": [Function],
+              "databaseId": "test",
+              "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
+              "geospatialConfig": [Function],
+              "getDatabase": [Function],
+              "id": [Function],
+              "indexingPolicy": [Function],
+              "materializedViewDefinition": [Function],
+              "materializedViews": [Function],
+              "offer": [Function],
+              "partitionKey": {
+                "kind": "hash",
+                "paths": [],
+                "version": 2,
+              },
+              "partitionKeyProperties": [
+                "partitionKey",
+              ],
+              "rawDataModel": {
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
+              "readSettings": [Function],
+              "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
             }
-            isReadOnly={false}
+          }
-          />
+          explorer={
-        </Stack>
+            Explorer {
+              "_isInitializingNotebooks": false,
+              "isFixedCollectionWithSharedThroughputSupported": [Function],
+              "isTabsContentExpanded": [Function],
+              "onRefreshDatabasesKeyPress": [Function],
+              "onRefreshResourcesClick": [Function],
+              "phoenixClient": PhoenixClient {
+                "armResourceId": undefined,
+                "retryOptions": {
+                  "maxTimeout": 5000,
+                  "minTimeout": 5000,
+                  "retries": 3,
+                },
+              },
+              "provideFeedbackEmail": [Function],
+              "queriesClient": QueriesClient {
+                "container": [Circular],
+              },
+              "refreshNotebookList": [Function],
+              "resourceTree": ResourceTreeAdapter {
+                "container": [Circular],
+                "copyNotebook": [Function],
+                "parameters": [Function],
+              },
+            }
+          }
+          isReadOnly={false}
+        />
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -533,46 +405,33 @@ exports[`SettingsComponent renders 1`] = `
         key="ComputedPropertiesTab"
         style={
           {
-            "backgroundColor": "var(--colorNeutralBackground1)",
-            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
       >
-        <Stack
+        <ComputedPropertiesComponent
-          styles={
+          computedPropertiesContent={
-            {
+            [
-              "root": {
+              {
-                "backgroundColor": "var(--colorNeutralBackground1)",
+                "name": "queryName",
-                "color": "var(--colorNeutralForeground1)",
+                "query": "query",
               },
-            }
+            ]
           }
-        >
+          computedPropertiesContentBaseline={
-          <ComputedPropertiesComponent
+            [
-            computedPropertiesContent={
+              {
-              [
+                "name": "queryName",
-                {
+                "query": "query",
-                  "name": "queryName",
+              },
-                  "query": "query",
+            ]
-                },
+          }
-              ]
+          logComputedPropertiesSuccessMessage={[Function]}
-            }
+          onComputedPropertiesContentChange={[Function]}
-            computedPropertiesContentBaseline={
+          onComputedPropertiesDirtyChange={[Function]}
-              [
+          resetShouldDiscardComputedProperties={[Function]}
-                {
+          shouldDiscardComputedProperties={false}
-                  "name": "queryName",
+        />
-                  "query": "query",
-                },
-              ]
-            }
-            logComputedPropertiesSuccessMessage={[Function]}
-            onComputedPropertiesContentChange={[Function]}
-            onComputedPropertiesDirtyChange={[Function]}
-            resetShouldDiscardComputedProperties={[Function]}
-            shouldDiscardComputedProperties={false}
-          />
-        </Stack>
       </PivotItem>
       <PivotItem
         headerButtonProps={
@@ -585,91 +444,18 @@ exports[`SettingsComponent renders 1`] = `
         key="GlobalSecondaryIndexTab"
         style={
           {
-            "backgroundColor": "var(--colorNeutralBackground1)",
-            "color": "var(--colorNeutralForeground1)",
             "marginTop": 20,
           }
         }
       >
-        <Stack
+        <GlobalSecondaryIndexComponent
-          styles={
+          collection={
             {
-              "root": {
+              "analyticalStorageTtl": [Function],
-                "backgroundColor": "var(--colorNeutralBackground1)",
+              "changeFeedPolicy": [Function],
-                "color": "var(--colorNeutralForeground1)",
+              "computedProperties": [Function],
-              },
+              "conflictResolutionPolicy": [Function],
-            }
+              "container": Explorer {
-          }
-        >
-          <GlobalSecondaryIndexComponent
-            collection={
-              {
-                "analyticalStorageTtl": [Function],
-                "changeFeedPolicy": [Function],
-                "computedProperties": [Function],
-                "conflictResolutionPolicy": [Function],
-                "container": Explorer {
-                  "_isInitializingNotebooks": false,
-                  "isFixedCollectionWithSharedThroughputSupported": [Function],
-                  "isTabsContentExpanded": [Function],
-                  "onRefreshDatabasesKeyPress": [Function],
-                  "onRefreshResourcesClick": [Function],
-                  "phoenixClient": PhoenixClient {
-                    "armResourceId": undefined,
-                    "retryOptions": {
-                      "maxTimeout": 5000,
-                      "minTimeout": 5000,
-                      "retries": 3,
-                    },
-                  },
-                  "provideFeedbackEmail": [Function],
-                  "queriesClient": QueriesClient {
-                    "container": [Circular],
-                  },
-                  "refreshNotebookList": [Function],
-                  "resourceTree": ResourceTreeAdapter {
-                    "container": [Circular],
-                    "copyNotebook": [Function],
-                    "parameters": [Function],
-                  },
-                },
-                "dataMaskingPolicy": [Function],
-                "databaseId": "test",
-                "defaultTtl": [Function],
-                "fullTextPolicy": [Function],
-                "geospatialConfig": [Function],
-                "getDatabase": [Function],
-                "id": [Function],
-                "indexingPolicy": [Function],
-                "materializedViewDefinition": [Function],
-                "materializedViews": [Function],
-                "offer": [Function],
-                "partitionKey": {
-                  "kind": "hash",
-                  "paths": [],
-                  "version": 2,
-                },
-                "partitionKeyProperties": [
-                  "partitionKey",
-                ],
-                "rawDataModel": {
-                  "uniqueKeyPolicy": {
-                    "uniqueKeys": [
-                      {
-                        "paths": [
-                          "/id",
-                        ],
-                      },
-                    ],
-                  },
-                },
-                "readSettings": [Function],
-                "usageSizeInKB": [Function],
-                "vectorEmbeddingPolicy": [Function],
-              }
-            }
-            explorer={
-              Explorer {
                 "_isInitializingNotebooks": false,
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isTabsContentExpanded": [Function],
@@ -693,10 +479,70 @@ exports[`SettingsComponent renders 1`] = `
                   "copyNotebook": [Function],
                   "parameters": [Function],
                 },
-              }
+              },
+              "dataMaskingPolicy": [Function],
+              "databaseId": "test",
+              "defaultTtl": [Function],
+              "fullTextPolicy": [Function],
+              "geospatialConfig": [Function],
+              "getDatabase": [Function],
+              "id": [Function],
+              "indexingPolicy": [Function],
+              "materializedViewDefinition": [Function],
+              "materializedViews": [Function],
+              "offer": [Function],
+              "partitionKey": {
+                "kind": "hash",
+                "paths": [],
+                "version": 2,
+              },
+              "partitionKeyProperties": [
+                "partitionKey",
+              ],
+              "rawDataModel": {
+                "uniqueKeyPolicy": {
+                  "uniqueKeys": [
+                    {
+                      "paths": [
+                        "/id",
+                      ],
+                    },
+                  ],
+                },
+              },
+              "readSettings": [Function],
+              "usageSizeInKB": [Function],
+              "vectorEmbeddingPolicy": [Function],
             }
-          />
+          }
-        </Stack>
+          explorer={
+            Explorer {
+              "_isInitializingNotebooks": false,
+              "isFixedCollectionWithSharedThroughputSupported": [Function],
+              "isTabsContentExpanded": [Function],
+              "onRefreshDatabasesKeyPress": [Function],
+              "onRefreshResourcesClick": [Function],
+              "phoenixClient": PhoenixClient {
+                "armResourceId": undefined,
+                "retryOptions": {
+                  "maxTimeout": 5000,
+                  "minTimeout": 5000,
+                  "retries": 3,
+                },
+              },
+              "provideFeedbackEmail": [Function],
+              "queriesClient": QueriesClient {
+                "container": [Circular],
+              },
+              "refreshNotebookList": [Function],
+              "resourceTree": ResourceTreeAdapter {
+                "container": [Circular],
+                "copyNotebook": [Function],
+                "parameters": [Function],
+              },
+            }
+          }
+        />
       </PivotItem>
     </StyledPivot>
   </div>

src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap

@@ -6,7 +6,6 @@ exports[`SettingsUtils functions render 1`] = `
     <Text
       style={
         {
-          "color": "var(--colorNeutralForeground1)",
           "fontWeight": 600,
         }
       }
@@ -16,7 +15,6 @@ exports[`SettingsUtils functions render 1`] = `
     <Text
       style={
         {
-          "color": "var(--colorNeutralForeground1)",
           "fontWeight": 600,
           "marginTop": 15,
         }
@@ -52,7 +50,6 @@ exports[`SettingsUtils functions render 1`] = `
     <Text
       style={
         {
-          "color": "var(--colorNeutralForeground1)",
           "marginTop": 15,
         }
       }
@@ -68,7 +65,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -86,7 +83,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -107,7 +104,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -119,7 +116,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -139,7 +136,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -155,7 +152,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -170,7 +167,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -184,7 +181,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -196,7 +193,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -216,7 +213,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -224,21 +221,10 @@ exports[`SettingsUtils functions render 1`] = `
   >
     Enable change feed log retention policy to retain last 10 minutes of history for items in the container by default. To support this, the request unit (RU) charge for this container will be multiplied by a factor of two for writes. Reads are unaffected.
   </Text>
-  <Text
+  <Text>
-    style={
-      {
-        "color": "var(--colorNeutralForeground1)",
-      }
-    }
-  >
     For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
     <StyledLinkBase
       href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
-      style={
-        {
-          "color": "var(--colorBrandForeground1)",
-        }
-      }
       target="_blank"
     >
        Compound indexes 
@@ -270,7 +256,7 @@ exports[`SettingsUtils functions render 1`] = `
       styles={
         {
           "root": {
-            "color": "var(--colorNeutralForeground1)",
+            "color": "windowtext",
             "fontSize": 14,
           },
         }
@@ -286,7 +272,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -303,7 +289,7 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       {
         "root": {
-          "color": "var(--colorNeutralForeground1)",
+          "color": "windowtext",
           "fontSize": 14,
         },
       }

src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx

@@ -54,8 +54,8 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
 
   if (isAutoscale) {
     return (
-      <Stack style={{ marginBottom: 6, color: "var(--colorNeutralForeground1)" }}>
+      <Stack style={{ marginBottom: 6 }}>
-        <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
+        <Text variant="small">
           {estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
           <b>
             {currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
@@ -70,7 +70,7 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
 
   return (
     <Stack style={{ marginBottom: 8 }}>
-      <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
+      <Text variant="small">
         Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
         <b>
           {currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "}

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -10,13 +10,9 @@
   font-size: @mediumFontSize;
   padding: 0 @LargeSpace 0 @SmallSpace;
 }
-// .throughputInputSpacing{
-//   color: "var(--colorNeutralForeground1)";
-// }
 
 .throughputInputSpacing > :not(:last-child) {
   margin-bottom: @DefaultSpace;
-  color: "var(--colorNeutralForeground1)";
 }
 
 .capacitycalculator-link:focus {
@@ -32,16 +28,3 @@
 .deleteQuery:focus::after {
   outline: none !important;
 }
-
-// Override Fluent UI TextField focus styles
-.throughputInputContainer {
-  :global {
-    .ms-TextField {
-      .ms-TextField-fieldGroup {
-        &:focus-within {
-          border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
-        }
-      }
-    }
-  }
-}

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -193,11 +193,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
     <div className="throughputInputContainer throughputInputSpacing">
       <Stack horizontal>
         <span className="mandatoryStar">*&nbsp;</span>
-        <Text
+        <Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
-          aria-label="Throughput header"
-          variant="small"
-          style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
-        >
           {getThroughputLabelText()}
         </Text>
         <InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>
@@ -240,17 +236,14 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       {isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text style={{ marginTop: -2, fontSize: 12, color: "var(--colorNeutralForeground1)" }}>
+          <Text style={{ marginTop: -2, fontSize: 12 }}>
             Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10%
             of that value.
           </Text>
           <Stack horizontal verticalAlign="end" tokens={{ childrenGap: 8 }}>
             <Stack tokens={{ childrenGap: 4 }}>
               <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-                <Text
+                <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
-                  variant="small"
-                  style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
-                >
                   Minimum RU/s
                 </Text>
                 <InfoTooltip>The minimum RU/s your container will scale to</InfoTooltip>
@@ -267,7 +260,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  color: "var(--colorNeutralForeground1)",
                 }}
               >
                 {Math.round(throughput / 10).toString()}
@@ -280,7 +272,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                 fontSize: 12,
                 fontWeight: 400,
                 paddingBottom: 6,
-                color: "var(--colorNeutralForeground1)",
               }}
             >
               x 10 =
@@ -288,10 +279,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
             <Stack tokens={{ childrenGap: 4 }}>
               <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
-                <Text
+                <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
-                  variant="small"
-                  style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
-                >
                   Maximum RU/s
                 </Text>
                 <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
@@ -302,7 +290,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
                 type="number"
                 styles={{
                   fieldGroup: { width: 100, height: 27, flexShrink: 0 },
-                  field: { fontSize: 14, fontWeight: 400, color: "var(--colorNeutralForeground1)" },
+                  field: { fontSize: 14, fontWeight: 400 },
                 }}
                 onChange={(_event, newInput?: string) => onThroughputValueChange(newInput)}
                 step={AutoPilotUtils.autoPilotIncrementStep}
@@ -318,7 +306,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
           <CostEstimateText requestUnits={throughput} isAutoscale={isAutoscaleSelected} />
           <Stack className="throughputInputSpacing">
-            <Text variant="small" aria-label="ruDescription" style={{ color: "var(--colorNeutralForeground1)" }}>
+            <Text variant="small" aria-label="ruDescription">
               Estimate your required RU/s with&nbsp;
               <Link
                 className="underlinedLink"
@@ -337,7 +325,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       {!isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text variant="small" aria-label="ruDescription" style={{ color: "var(--colorNeutralForeground1)" }}>
+          <Text variant="small" aria-label="ruDescription">
             Estimate your required RU/s with&nbsp;
             <Link
               className="underlinedLink"
@@ -350,11 +338,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
             .
           </Text>
           <Stack horizontal>
-            <Text
+            <Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription">
-              variant="small"
-              style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}
-              aria-label="maxRUDescription"
-            >
               {isDatabase ? "Database" : getCollectionName()} Required RU/s
             </Text>
             <InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -31,7 +31,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           key=".0:$.$.1"
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "fontWeight": 600,
               "lineHeight": "20px",
             }
@@ -43,7 +42,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             className="css-110"
             style={
               {
-                "color": "var(--colorNeutralForeground1)",
                 "fontWeight": 600,
                 "lineHeight": "20px",
               }
@@ -726,7 +724,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           key=".0:$.$.0"
           style={
             {
-              "color": "var(--colorNeutralForeground1)",
               "fontSize": 12,
               "marginTop": -2,
             }
@@ -736,7 +733,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             className="css-117"
             style={
               {
-                "color": "var(--colorNeutralForeground1)",
                 "fontSize": 12,
                 "marginTop": -2,
               }
@@ -786,7 +782,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       key=".0:$.$.0"
                       style={
                         {
-                          "color": "var(--colorNeutralForeground1)",
                           "fontWeight": 600,
                           "lineHeight": "20px",
                         }
@@ -797,7 +792,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         className="css-110"
                         style={
                           {
-                            "color": "var(--colorNeutralForeground1)",
                             "fontWeight": 600,
                             "lineHeight": "20px",
                           }
@@ -1429,7 +1423,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       "alignItems": "center",
                       "backgroundColor": "transparent",
                       "border": "none",
-                      "color": "var(--colorNeutralForeground1)",
                       "display": "flex",
                       "fontFamily": "Segoe UI",
                       "fontSize": 14,
@@ -1447,7 +1440,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         "alignItems": "center",
                         "backgroundColor": "transparent",
                         "border": "none",
-                        "color": "var(--colorNeutralForeground1)",
                         "display": "flex",
                         "fontFamily": "Segoe UI",
                         "fontSize": 14,
@@ -1467,7 +1459,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               key=".0:$.$.1"
               style={
                 {
-                  "color": "var(--colorNeutralForeground1)",
                   "fontFamily": "Segoe UI",
                   "fontSize": 12,
                   "fontWeight": 400,
@@ -1479,7 +1470,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 className="css-117"
                 style={
                   {
-                    "color": "var(--colorNeutralForeground1)",
                     "fontFamily": "Segoe UI",
                     "fontSize": 12,
                     "fontWeight": 400,
@@ -1518,7 +1508,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                       key=".0:$.$.0"
                       style={
                         {
-                          "color": "var(--colorNeutralForeground1)",
                           "fontWeight": 600,
                           "lineHeight": "20px",
                         }
@@ -1529,7 +1518,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         className="css-110"
                         style={
                           {
-                            "color": "var(--colorNeutralForeground1)",
                             "fontWeight": 600,
                             "lineHeight": "20px",
                           }
@@ -2168,7 +2156,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                   styles={
                     {
                       "field": {
-                        "color": "var(--colorNeutralForeground1)",
                         "fontSize": 14,
                         "fontWeight": 400,
                       },
@@ -2522,21 +2509,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
             <Text
               aria-label="ruDescription"
               key=".0:$.$.0"
-              style={
-                {
-                  "color": "var(--colorNeutralForeground1)",
-                }
-              }
               variant="small"
             >
               <span
                 aria-label="ruDescription"
                 className="css-110"
-                style={
-                  {
-                    "color": "var(--colorNeutralForeground1)",
-                  }
-                }
               >
                 Estimate your required RU/s with 
                 <StyledLinkBase

src/Explorer/Controls/TreeComponent/Styles.ts

@@ -10,7 +10,6 @@ const actionButtonBackground = "--cosmos-Tree--actionButtonBackground" as const;
 export const useTreeStyles = makeStyles({
   treeContainer: {
     height: "100%",
-    maxHeight: "100vh",
     ...shorthands.overflow("auto"),
   },
   tree: {

src/Explorer/Controls/V9Components/Button/index.tsx

@@ -1,47 +0,0 @@
-import { Button as FluentButton, makeStyles, tokens } from "@fluentui/react-components";
-import * as React from "react";
-
-export type CustomButtonProps = {
-  primary?: boolean;
-  className?: string;
-  children?: React.ReactNode;
-  onClick?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
-  disabled?: boolean;
-  type?: "button" | "submit" | "reset";
-};
-
-const useStyles = makeStyles({
-  button: {
-    backgroundColor: tokens.colorNeutralBackground1,
-    color: tokens.colorNeutralForeground1,
-    "&:hover": {
-      backgroundColor: tokens.colorNeutralBackground1Hover,
-      color: tokens.colorNeutralForeground1Hover,
-    },
-    "&:active": {
-      backgroundColor: tokens.colorNeutralBackground1Pressed,
-      color: tokens.colorNeutralForeground1Pressed,
-    },
-  },
-  primary: {
-    backgroundColor: tokens.colorBrandBackground,
-    color: tokens.colorNeutralForegroundOnBrand,
-    "&:hover": {
-      backgroundColor: tokens.colorBrandBackgroundHover,
-    },
-    "&:active": {
-      backgroundColor: tokens.colorBrandBackgroundPressed,
-    },
-  },
-});
-
-export const Button = React.forwardRef<HTMLButtonElement, CustomButtonProps>(({ primary, ...props }, ref) => {
-  const baseStyles = useStyles();
-  const buttonClassName = primary ? baseStyles.primary : baseStyles.button;
-
-  return (
-    <FluentButton {...props} ref={ref} appearance={primary ? "primary" : "secondary"} className={buttonClassName} />
-  );
-});
-
-Button.displayName = "Button";

src/Explorer/DataExplorer.tsx

@@ -1,26 +0,0 @@
-import { makeStyles } from "@fluentui/react-components";
-import React from "react";
-import type { Explorer } from "../Contracts/ViewModels";
-
-interface DataExplorerProps {
-  dataExplorer?: Explorer;
-}
-
-const useStyles = makeStyles({
-  root: {
-    backgroundColor: "var(--colorNeutralBackground1)",
-    color: "var(--colorNeutralForeground1)",
-    height: "100%",
-    width: "100%",
-  },
-});
-
-export const DataExplorer: React.FC<DataExplorerProps> = () => {
-  const styles = useStyles();
-
-  return (
-    <div className={`dataExplorerContainer ${styles.root}`}>
-      <div>Data Explorer Content</div>
-    </div>
-  );
-};

src/Explorer/ErrorBoundary.tsx

@@ -1,38 +0,0 @@
-import React, { Component, ReactNode } from "react";
-
-interface Props {
-  children: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-  error: Error | null;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  public state: State = {
-    hasError: false,
-    error: null,
-  };
-
-  public static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
-  }
-
-  public componentDidCatch(error: Error): void {
-    console.error("Error caught in boundary:", error);
-  }
-
-  public render() {
-    if (this.state.hasError) {
-      return (
-        <div style={{ padding: "20px", color: "red" }}>
-          <h2>Something went wrong.</h2>
-          <details style={{ whiteSpace: "pre-wrap" }}>{this.state.error && this.state.error.toString()}</details>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}

src/Explorer/Explorer.tsx

@@ -38,9 +38,6 @@ import { ContainerConnectionInfo, IPhoenixServiceInfo, IProvisionData, IResponse
 import * as ViewModels from "../Contracts/ViewModels";
 import { UploadDetailsRecord } from "../Contracts/ViewModels";
 import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
-import MetricScenario from "../Metrics/MetricEvents";
-import { ApplicationMetricPhase } from "../Metrics/ScenarioConfig";
-import { scenarioMonitor } from "../Metrics/ScenarioMonitor";
 import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
@@ -405,9 +402,7 @@ export default class Explorer {
       updatedDatabases = [...updatedDatabases, ...deltaDatabases.toAdd].sort((db1, db2) =>
         db1.id().localeCompare(db2.id()),
       );
-      useDatabases.setState({ databases: updatedDatabases, databasesFetchedSuccessfully: true });
+      useDatabases.setState({ databases: updatedDatabases });
-      scenarioMonitor.completePhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabasesFetched);
-
       await this.refreshAndExpandNewDatabases(deltaDatabases.toAdd, updatedDatabases);
     } catch (error) {
       const errorMessage = getErrorMessage(error);
@@ -421,8 +416,6 @@ export default class Explorer {
         startKey,
       );
       logConsoleError(`Error while refreshing databases: ${errorMessage}`);
-      useDatabases.setState({ databasesFetchedSuccessfully: false });
-      scenarioMonitor.failPhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabasesFetched);
     }
   }
 
@@ -1190,11 +1183,6 @@ export default class Explorer {
   }
 
   public async refreshExplorer(): Promise<void> {
-    // Start DatabaseLoad scenario before fetching databases
-    if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
-      scenarioMonitor.start(MetricScenario.DatabaseLoad);
-    }
-
     if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
       userContext.authType === AuthType.ResourceToken
         ? this.refreshDatabaseForResourceToken()

src/Explorer/Menus/CommandBar/CommandBarComponent.less

@@ -4,10 +4,11 @@
   padding: @SmallSpace 0px @SmallSpace 0px;
   .flex-display();
   span {
+    border-left: @ButtonBorderWidth solid @BaseMediumHigh;
     margin: 0 10px 0 10px;
   }
 }
 
 .commandBarContainer {
-  border-bottom: 1px solid var(--colorNeutralStroke1);
+  border-bottom: 1px solid @BaseMedium;
 }

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -4,7 +4,6 @@
  * and update any knockout observables passed from the parent.
  */
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
-import { makeStyles, useFluent } from "@fluentui/react-components";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
@@ -13,6 +12,7 @@ import { userContext } from "UserContext";
 import * as React from "react";
 import create, { UseStore } from "zustand";
 import { ConnectionStatusType, PoolIdType } from "../../../Common/Constants";
+import { StyleConstants } from "../../../Common/StyleConstants";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useSelectedNode } from "../../useSelectedNode";
@@ -37,49 +37,12 @@ export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
   setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
 }));
 
-const useStyles = makeStyles({
-  commandBarContainer: {
-    borderBottom: "1px solid var(--colorNeutralStroke1)",
-    // backgroundColor: "var(--colorNeutralBackground1)",
-  },
-  toolbarButton: {
-    backgroundColor: "transparent",
-    "&:hover": {
-      backgroundColor: "var(--colorNeutralBackground2)",
-    },
-    "&:active": {
-      backgroundColor: "var(--colorNeutralBackground3)",
-    },
-  },
-  buttonIcon: {
-    width: "16px",
-    height: "16px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    "& img": {
-      width: "100%",
-      height: "100%",
-      objectFit: "contain",
-    },
-  },
-});
-
 export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const selectedNodeState = useSelectedNode();
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
-  // targetDocument is used by referenced components
+  const backgroundColor = StyleConstants.BaseLight;
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { targetDocument } = useFluent();
   const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
-  const styles = useStyles();
-
-  const { connectionInfo, isPhoenixNotebooks, isPhoenixFeatures } = useNotebook((state) => ({
-    connectionInfo: state.connectionInfo,
-    isPhoenixNotebooks: state.isPhoenixNotebooks,
-    isPhoenixFeatures: state.isPhoenixFeatures,
-  }));
 
   // Subscribe to the store changes that affect button creation
   const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
@@ -96,15 +59,12 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
         ? CommandBarComponentButtonFactory.createPostgreButtons(container)
         : CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
     return (
-      <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
+      <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
         <FluentCommandBar
           ariaLabel="Use left and right arrow keys to navigate between commands"
-          items={CommandBarUtil.convertButton(buttons, "var(--colorNeutralBackground1)")}
+          items={CommandBarUtil.convertButton(buttons, backgroundColor)}
           styles={{
-            root: {
+            root: { backgroundColor: backgroundColor },
-              backgroundColor: "var(--colorNeutralBackground1)",
-              color: "var(--colorNeutralForeground1)",
-            },
           }}
           overflowButtonProps={{ ariaLabel: "More commands" }}
         />
@@ -117,69 +77,50 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   );
   const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container);
 
-  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, "var(--colorNeutralBackground1)");
+  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
   if (buttons && buttons.length > 0) {
     uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
   }
 
-  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(
+  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
-    contextButtons,
-    "var(--colorNeutralBackground1)",
-  );
 
   if (uiFabricTabsButtons.length > 0) {
     uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
   }
 
-  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, "var(--colorNeutralBackground1)");
+  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
-  // Add connection status if needed (using the hook values we got at the top level)
+  const connectionInfo = useNotebook((state) => state.connectionInfo);
-  if ((isPhoenixNotebooks || isPhoenixFeatures) && connectionInfo?.status !== ConnectionStatusType.Connect) {
+
+  if (
+    (useNotebook.getState().isPhoenixNotebooks || useNotebook.getState().isPhoenixFeatures) &&
+    connectionInfo?.status !== ConnectionStatusType.Connect
+  ) {
     uiFabricControlButtons.unshift(
       CommandBarUtil.createConnectionStatus(container, PoolIdType.DefaultPoolId, "connectionStatus"),
     );
   }
 
-  const rootStyle = {
+  const rootStyle = isFabric()
-    root: {
+    ? {
-      backgroundColor: "var(--colorNeutralBackground1)",
+        root: {
-      color: "var(--colorNeutralForeground1)",
+          backgroundColor: "transparent",
-      padding: isFabric() ? "2px 8px 0px 8px" : undefined,
+          padding: "2px 8px 0px 8px",
-    },
-    button: {
-      backgroundColor: "var(--colorNeutralBackground1)",
-      color: "var(--colorNeutralForeground1)",
-      selectors: {
-        ":hover": {
-          backgroundColor: "var(--colorNeutralBackground2)",
-          color: "var(--colorNeutralForeground1)",
         },
-        ":active": {
+      }
-          backgroundColor: "var(--colorNeutralBackground3)",
+    : {
-          color: "var(--colorNeutralForeground1)",
+        root: {
+          backgroundColor: backgroundColor,
         },
-      },
+      };
-    },
-    menuIcon: {
-      color: "var(--colorNeutralForeground1)",
-    },
-    item: {
-      backgroundColor: "var(--colorNeutralBackground1)",
-      color: "var(--colorNeutralForeground1)",
-    },
-    link: {
-      backgroundColor: "var(--colorNeutralBackground1)",
-      color: "var(--colorNeutralForeground1)",
-    },
-  };
 
   const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
   const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
   setKeyboardHandlers(keyboardHandlers);
 
   return (
-    <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
+    <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,4 +1,3 @@
-import { OpenFullScreen } from "Explorer/OpenFullScreen";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import * as React from "react";
@@ -25,12 +24,12 @@ import { useSidePanel } from "../../../hooks/useSidePanel";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useNotebook } from "../../Notebook/useNotebook";
+import { OpenFullScreen } from "../../OpenFullScreen";
 import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPane";
 import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
 import { SettingsPane, useDataPlaneRbac } from "../../Panes/SettingsPane/SettingsPane";
 import { useDatabases } from "../../useDatabases";
 import { SelectedNodeState, useSelectedNode } from "../../useSelectedNode";
-import { ThemeToggleButton } from "./ThemeToggleButton";
 
 let counter = 0;
 
@@ -167,7 +166,6 @@ export function createContextCommandBarButtons(
 
 export function createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
   const buttons: CommandButtonComponentProps[] = [
-    ThemeToggleButton(),
     {
       iconSrc: SettingsIcon,
       iconAlt: "Settings",
@@ -363,22 +361,6 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
       disabled:
         useSelectedNode.getState().isQueryCopilotCollectionSelected() ||
         selectedNodeState.isDatabaseNodeOrNoneSelected(),
-      styles: {
-        root: {
-          backgroundColor: "var(--colorNeutralBackground1)",
-          color: "var(--colorNeutralForeground1)",
-          selectors: {
-            ":hover": {
-              backgroundColor: "var(--colorNeutralBackground1Hover)",
-              color: "var(--colorNeutralForeground1Hover)",
-            },
-            ":active": {
-              backgroundColor: "var(--colorNeutralBackground1Pressed)",
-              color: "var(--colorNeutralForeground1Pressed)",
-            },
-          },
-        },
-      },
     };
     buttons.push(newStoredProcedureBtn);
   }
@@ -399,22 +381,6 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
       disabled:
         useSelectedNode.getState().isQueryCopilotCollectionSelected() ||
         selectedNodeState.isDatabaseNodeOrNoneSelected(),
-      styles: {
-        root: {
-          backgroundColor: "var(--colorNeutralBackground1)",
-          color: "var(--colorNeutralForeground1)",
-          selectors: {
-            ":hover": {
-              backgroundColor: "var(--colorNeutralBackground1Hover)",
-              color: "var(--colorNeutralForeground1Hover)",
-            },
-            ":active": {
-              backgroundColor: "var(--colorNeutralBackground1Pressed)",
-              color: "var(--colorNeutralForeground1Pressed)",
-            },
-          },
-        },
-      },
     };
     buttons.push(newUserDefinedFunctionBtn);
   }
@@ -435,22 +401,6 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
       disabled:
         useSelectedNode.getState().isQueryCopilotCollectionSelected() ||
         selectedNodeState.isDatabaseNodeOrNoneSelected(),
-      styles: {
-        root: {
-          backgroundColor: "var(--colorNeutralBackground1)",
-          color: "var(--colorNeutralForeground1)",
-          selectors: {
-            ":hover": {
-              backgroundColor: "var(--colorNeutralBackground1Hover)",
-              color: "var(--colorNeutralForeground1Hover)",
-            },
-            ":active": {
-              backgroundColor: "var(--colorNeutralBackground1Pressed)",
-              color: "var(--colorNeutralForeground1Pressed)",
-            },
-          },
-        },
-      },
     };
     buttons.push(newTriggerBtn);
   }

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -53,7 +53,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
       const result: ICommandBarItemProps = {
         iconProps: {
           style: {
-            width: StyleConstants.CommandBarIconWidth,
+            width: StyleConstants.CommandBarIconWidth, // 16
             alignSelf: btn.iconName ? "baseline" : undefined,
             filter: getFilter(btn.disabled),
           },
@@ -79,7 +79,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
         "data-test": `CommandBar/Button:${label}`,
         buttonStyles: {
           root: {
-            backgroundColor: "var(--colorNeutralBackground1)",
+            backgroundColor: backgroundColor,
             height: buttonHeightPx,
             paddingRight: 0,
             paddingLeft: 0,
@@ -87,29 +87,15 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
             minWidth: 24,
             marginLeft: isSplit ? 0 : 5,
             marginRight: isSplit ? 0 : 5,
-            color: "var(--colorNeutralForeground1)",
-            selectors: {
-              "&:hover": {
-                backgroundColor: "var(--colorNeutralBackground1Hover)",
-                color: "var(--colorNeutralForeground1)",
-              },
-              "&:active": {
-                backgroundColor: "var(--colorNeutralBackground1Pressed)",
-                color: "var(--colorNeutralForeground1)",
-              },
-            },
           },
           rootDisabled: {
-            backgroundColor: "var(--colorNeutralBackground1)",
+            backgroundColor: backgroundColor,
             pointerEvents: "auto",
-            color: "var(--colorNeutralForegroundDisabled)",
           },
           splitButtonMenuButton: {
-            backgroundColor: "var(--colorNeutralBackground1)",
+            backgroundColor: backgroundColor,
             selectors: {
-              ":hover": {
+              ":hover": { backgroundColor: hoverColor },
-                backgroundColor: "var(--colorNeutralBackground1Hover)",
-              },
             },
             width: 16,
           },
@@ -118,22 +104,13 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
               configContext.platform == Platform.Fabric
                 ? StyleConstants.DefaultFontSize
                 : StyleConstants.mediumFontSize,
-            color: "var(--colorNeutralForeground1)",
-          },
-          rootHovered: {
-            backgroundColor: "var(--colorNeutralBackground1Hover)",
-            color: "var(--colorNeutralForeground1)",
-          },
-          rootPressed: {
-            backgroundColor: "var(--colorNeutralBackground1Pressed)",
-            color: "var(--colorNeutralForeground1)",
           },
+          rootHovered: { backgroundColor: hoverColor },
+          rootPressed: { backgroundColor: hoverColor },
           splitButtonMenuButtonExpanded: {
-            backgroundColor: "var(--colorNeutralBackground1Pressed)",
+            backgroundColor: StyleConstants.AccentExtra,
             selectors: {
-              ":hover": {
+              ":hover": { backgroundColor: hoverColor },
-                backgroundColor: "var(--colorNeutralBackground1Hover)",
-              },
             },
           },
           splitButtonDivider: {
@@ -142,7 +119,6 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           icon: {
             paddingLeft: 0,
             paddingRight: 0,
-            color: "var(--colorNeutralForeground1)",
           },
           splitButtonContainer: {
             marginLeft: 5,

src/Explorer/Menus/CommandBar/ThemeToggleButton.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-import MoonIcon from "../../../../images/MoonIcon.svg";
-import SunIcon from "../../../../images/SunIcon.svg";
-import { useThemeStore } from "../../../hooks/useTheme";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-
-export const ThemeToggleButton = (): CommandButtonComponentProps => {
-  const [darkMode, setDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
-
-  React.useEffect(() => {
-    const unsubscribe = useThemeStore.subscribe((state) => {
-      setDarkMode(state.isDarkMode);
-    });
-    return unsubscribe;
-  }, []);
-
-  const tooltipText = darkMode ? "Switch to Light Theme" : "Switch to Dark Theme";
-
-  return {
-    iconSrc: darkMode ? SunIcon : MoonIcon,
-    iconAlt: "Theme Toggle",
-    onCommandClick: useThemeStore.getState().toggleTheme,
-    commandButtonLabel: undefined,
-    ariaLabel: tooltipText,
-    tooltipText: tooltipText,
-    hasPopup: false,
-    disabled: false,
-  };
-};

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

@@ -30,11 +30,11 @@
         flex-shrink:0;
 
         &:hover {
-                background-color: @NotificationHigh;
+                background-color:@NotificationHigh;
         }
 
         &:active {
-                background-color: @NotificationHigh;
+                background-color:@NotificationHigh;
         }
         
         &:focus {
@@ -189,44 +189,4 @@
       }
     }
   }
-}
-
-// Dark theme specific overrides
-body.isDarkMode {
-  .notificationConsoleContainer {
-    .notificationConsoleHeader {
-      background-color: var(--colorNeutralBackground2);
-      color: var(--colorNeutralForeground1);
-      
-      &:hover {
-        background-color: var(--colorNeutralBackground3);
-        color: var(--colorNeutralForeground1);
-      }
-
-      &:active {
-        background-color: var(--colorNeutralBackground4);
-        color: var(--colorNeutralForeground1);
-      }
-    }
-
-    .notificationConsoleContents {
-      background-color: var(--colorNeutralBackground1);
-      color: var(--colorNeutralForeground1);
-
-      .clearNotificationsButton {
-        border: @ButtonBorderWidth solid var(--colorNeutralStroke1);
-
-        &:hover {
-          background-color: var(--colorNeutralBackground3);
-          color: var(--colorNeutralForeground1);
-        }
-
-        &:active {
-          border: @ButtonBorderWidth dashed var(--colorBrandForeground1);
-          background-color: var(--colorBrandBackground);
-          color: var(--colorNeutralForegroundOnBrand);
-        }
-      }
-    }
-  }
 }

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -152,82 +152,6 @@ export class NotificationConsoleComponent extends React.Component<
                 selectedKey={this.state.selectedFilter}
                 options={NotificationConsoleComponent.FilterOptions}
                 onChange={this.onFilterSelected.bind(this)}
-                styles={{
-                  root: {
-                    color: "var(--colorNeutralForeground1)",
-                  },
-                  label: {
-                    color: "var(--colorNeutralForeground1)",
-                  },
-                  dropdown: {
-                    backgroundColor: "var(--colorNeutralBackground2)",
-                    borderColor: "var(--colorNeutralStroke1)",
-                    color: "var(--colorNeutralForeground1)",
-                  },
-                  title: {
-                    backgroundColor: "var(--colorNeutralBackground2)",
-                    color: "var(--colorNeutralForeground1)",
-                    borderColor: "var(--colorNeutralStroke1)",
-                    fontSize: "14px",
-                    selectors: {
-                      "&:hover": {
-                        backgroundColor: "var(--colorNeutralBackground3)",
-                        color: "var(--colorNeutralForeground1)",
-                        borderColor: "var(--colorNeutralStroke1)",
-                      },
-                      "&:focus": {
-                        backgroundColor: "var(--colorNeutralBackground2)",
-                        color: "var(--colorNeutralForeground1)",
-                        borderColor: "var(--colorBrandStroke1)",
-                      },
-                      "&:after": {
-                        borderColor: "var(--colorNeutralStroke1)",
-                      },
-                      span: {
-                        color: "var(--colorNeutralForeground1)",
-                      },
-                    },
-                  },
-                  caretDown: {
-                    color: "var(--colorNeutralForeground1)",
-                  },
-                  callout: {
-                    backgroundColor: "var(--colorNeutralBackground2)",
-                    border: "1px solid var(--colorNeutralStroke1)",
-                  },
-                  dropdownItems: {
-                    backgroundColor: "var(--colorNeutralBackground2)",
-                  },
-                  dropdownItem: {
-                    backgroundColor: "transparent",
-                    color: "var(--colorNeutralForeground1)",
-                    selectors: {
-                      "&:hover": {
-                        backgroundColor: "var(--colorNeutralBackground4)",
-                        color: "var(--colorNeutralForeground1)",
-                      },
-                      "&:focus": {
-                        backgroundColor: "var(--colorNeutralBackground4)",
-                        color: "var(--colorNeutralForeground1)",
-                      },
-                      ".ms-Dropdown-optionText": {
-                        color: "var(--colorNeutralForeground1)",
-                      },
-                    },
-                  },
-                  dropdownItemSelected: {
-                    backgroundColor: "var(--colorBrandBackground)",
-                    color: "var(--colorNeutralForegroundOnBrand)",
-                    selectors: {
-                      ".ms-Dropdown-optionText": {
-                        color: "var(--colorNeutralForegroundOnBrand)",
-                      },
-                    },
-                  },
-                  dropdownOptionText: {
-                    color: "var(--colorNeutralForeground1)",
-                  },
-                }}
               />
               <span className="consoleSplitter" />
               <span

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -152,84 +152,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
             ]
           }
           selectedKey="All"
-          styles={
-            {
-              "callout": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-                "border": "1px solid var(--colorNeutralStroke1)",
-              },
-              "caretDown": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "dropdown": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-                "borderColor": "var(--colorNeutralStroke1)",
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "dropdownItem": {
-                "backgroundColor": "transparent",
-                "color": "var(--colorNeutralForeground1)",
-                "selectors": {
-                  "&:focus": {
-                    "backgroundColor": "var(--colorNeutralBackground4)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  "&:hover": {
-                    "backgroundColor": "var(--colorNeutralBackground4)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  ".ms-Dropdown-optionText": {
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                },
-              },
-              "dropdownItemSelected": {
-                "backgroundColor": "var(--colorBrandBackground)",
-                "color": "var(--colorNeutralForegroundOnBrand)",
-                "selectors": {
-                  ".ms-Dropdown-optionText": {
-                    "color": "var(--colorNeutralForegroundOnBrand)",
-                  },
-                },
-              },
-              "dropdownItems": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-              },
-              "dropdownOptionText": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "label": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "root": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "title": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-                "borderColor": "var(--colorNeutralStroke1)",
-                "color": "var(--colorNeutralForeground1)",
-                "fontSize": "14px",
-                "selectors": {
-                  "&:after": {
-                    "borderColor": "var(--colorNeutralStroke1)",
-                  },
-                  "&:focus": {
-                    "backgroundColor": "var(--colorNeutralBackground2)",
-                    "borderColor": "var(--colorBrandStroke1)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  "&:hover": {
-                    "backgroundColor": "var(--colorNeutralBackground3)",
-                    "borderColor": "var(--colorNeutralStroke1)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  "span": {
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                },
-              },
-            }
-          }
         />
         <span
           className="consoleSplitter"
@@ -416,84 +338,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
             ]
           }
           selectedKey="All"
-          styles={
-            {
-              "callout": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-                "border": "1px solid var(--colorNeutralStroke1)",
-              },
-              "caretDown": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "dropdown": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-                "borderColor": "var(--colorNeutralStroke1)",
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "dropdownItem": {
-                "backgroundColor": "transparent",
-                "color": "var(--colorNeutralForeground1)",
-                "selectors": {
-                  "&:focus": {
-                    "backgroundColor": "var(--colorNeutralBackground4)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  "&:hover": {
-                    "backgroundColor": "var(--colorNeutralBackground4)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  ".ms-Dropdown-optionText": {
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                },
-              },
-              "dropdownItemSelected": {
-                "backgroundColor": "var(--colorBrandBackground)",
-                "color": "var(--colorNeutralForegroundOnBrand)",
-                "selectors": {
-                  ".ms-Dropdown-optionText": {
-                    "color": "var(--colorNeutralForegroundOnBrand)",
-                  },
-                },
-              },
-              "dropdownItems": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-              },
-              "dropdownOptionText": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "label": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "root": {
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "title": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-                "borderColor": "var(--colorNeutralStroke1)",
-                "color": "var(--colorNeutralForeground1)",
-                "fontSize": "14px",
-                "selectors": {
-                  "&:after": {
-                    "borderColor": "var(--colorNeutralStroke1)",
-                  },
-                  "&:focus": {
-                    "backgroundColor": "var(--colorNeutralBackground2)",
-                    "borderColor": "var(--colorBrandStroke1)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  "&:hover": {
-                    "backgroundColor": "var(--colorNeutralBackground3)",
-                    "borderColor": "var(--colorNeutralStroke1)",
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                  "span": {
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                },
-              },
-            }
-          }
         />
         <span
           className="consoleSplitter"

src/Explorer/OpenFullScreen.tsx

@@ -6,7 +6,7 @@ export const OpenFullScreen: React.FunctionComponent = () => {
     <>
       <div style={{ padding: "34px" }}>
         <Stack tokens={{ childrenGap: 10 }}>
-          <Text style={{ color: "var(--colorNeutralForeground1)" }}>
+          <Text>
             Open this database account in a new browser tab with Cosmos DB Explorer. You can connect using your
             Microsoft account or a connection string.
           </Text>

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -7,6 +7,7 @@ import {
   Icon,
   IconButton,
   IDropdownOption,
+  IRenderFunction,
   Link,
   ProgressIndicator,
   Separator,
@@ -350,14 +351,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
                         checked={this.state.isSharedThroughputChecked}
                         styles={{
-                          text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
+                          text: { fontSize: 12 },
                           checkbox: { width: 12, height: 12 },
                           label: { padding: 0, alignItems: "center" },
-                          root: {
-                            selectors: {
-                              ":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
-                            },
-                          },
                         }}
                         onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
                           this.setState({ isSharedThroughputChecked: isChecked })
@@ -410,6 +406,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   }
                   defaultSelectedKey={this.props.databaseId}
                   responsiveMode={999}
+                  onRenderOption={this.onRenderDatabaseOption}
                 />
               )}
               <Separator className="panelSeparator" style={{ marginTop: -4, marginBottom: -4 }} />
@@ -654,27 +651,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               {userContext.apiType === "SQL" && (
                 <Stack className="panelGroupSpacing">
                   <DefaultButton
-                    styles={{
+                    styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
-                      root: {
-                        padding: 0,
-                        width: 200,
-                        height: 30,
-                        backgroundColor: "var(--colorNeutralBackground2)",
-                        color: "var(--colorNeutralForeground1)",
-                        borderColor: "var(--colorNeutralStroke1)",
-                      },
-                      rootHovered: {
-                        backgroundColor: "var(--colorNeutralBackground3)",
-                        color: "var(--colorNeutralForeground1)",
-                      },
-                      rootPressed: {
-                        backgroundColor: "var(--colorBrandBackgroundPressed)",
-                        color: "var(--colorNeutralForegroundOnBrand)",
-                      },
-                      label: {
-                        fontSize: 12,
-                      },
-                    }}
                     hidden={this.state.useHashV1}
                     disabled={this.state.subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
                     onClick={() => this.setState({ subPartitionKeys: [...this.state.subPartitionKeys, ""] })}
@@ -682,7 +659,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     Add hierarchical partition key
                   </DefaultButton>
                   {this.state.subPartitionKeys.length > 0 && (
-                    <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
+                    <Text variant="small">
                       <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
                       partition your data with up to three levels of keys for better data distribution. Requires .NET
                       V3, Java V4 SDK, or preview JavaScript V3 SDK.{" "}
@@ -703,14 +680,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 label={`Provision dedicated throughput for this ${getCollectionName().toLocaleLowerCase()}`}
                 checked={this.state.enableDedicatedThroughput}
                 styles={{
-                  text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
+                  text: { fontSize: 12 },
                   checkbox: { width: 12, height: 12 },
                   label: { padding: 0, alignItems: "center" },
-                  root: {
-                    selectors: {
-                      ":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
-                    },
-                  },
                 }}
                 onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
                   this.setState({ enableDedicatedThroughput: isChecked })
@@ -720,8 +692,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 directionalHint={DirectionalHint.bottomLeftEdge}
                 content={`You can optionally provision dedicated throughput for a ${getCollectionName().toLocaleLowerCase()} within a database that has throughput
                   provisioned. This dedicated throughput amount will not be shared with other ${getCollectionName(
-                    true,
+                  true,
-                  ).toLocaleLowerCase()} in the database and
+                ).toLocaleLowerCase()} in the database and
                   does not count towards the throughput you provisioned for the database. This throughput amount will be
                   billed in addition to the throughput amount you provisioned at the database level.`}
               >
@@ -731,8 +703,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   tabIndex={0}
                   ariaLabel={`You can optionally provision dedicated throughput for a ${getCollectionName().toLocaleLowerCase()} within a database that has throughput
                 provisioned. This dedicated throughput amount will not be shared with other ${getCollectionName(
-                  true,
+                    true,
-                ).toLocaleLowerCase()} in the database and
+                  ).toLocaleLowerCase()} in the database and
                 does not count towards the throughput you provisioned for the database. This throughput amount will be
                 billed in addition to the throughput amount you provisioned at the database level.`}
                 />
@@ -799,7 +771,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
               <ActionButton
                 iconProps={{ iconName: "Add" }}
-                styles={{ root: { padding: 0 }, label: { fontSize: 12, color: "var(--colorNeutralForeground1)" } }}
+                styles={{ root: { padding: 0 }, label: { fontSize: 12 } }}
                 onClick={() => this.setState({ uniqueKeys: [...this.state.uniqueKeys, ""] })}
               >
                 Add unique key
@@ -911,8 +883,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 onExpand={() => {
                   scrollToSection("collapsibleFullTextPolicySectionContent");
                 }}
-                //TODO: uncomment when learn more text becomes available
+              //TODO: uncomment when learn more text becomes available
-                // tooltipContent={this.getContainerFullTextPolicyTooltipContent()}
+              // tooltipContent={this.getContainerFullTextPolicyTooltipContent()}
               >
                 <Stack id="collapsibleFullTextPolicySectionContent" styles={{ root: { position: "relative" } }}>
                   <Stack styles={{ root: { paddingLeft: 40 } }}>
@@ -967,14 +939,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       label="Create a Wildcard Index on all fields"
                       checked={this.state.createMongoWildCardIndex}
                       styles={{
-                        text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
+                        text: { fontSize: 12 },
                         checkbox: { width: 12, height: 12 },
                         label: { padding: 0, alignItems: "center" },
-                        root: {
-                          selectors: {
-                            ":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
-                          },
-                        },
                       }}
                       onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
                         this.setState({ createMongoWildCardIndex: isChecked })
@@ -989,20 +956,15 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
                       checked={this.state.useHashV1}
                       styles={{
-                        text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
+                        text: { fontSize: 12 },
                         checkbox: { width: 12, height: 12 },
                         label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
-                        root: {
-                          selectors: {
-                            ":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
-                          },
-                        },
                       }}
                       onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
                         this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
                       }
                     />
-                    <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
+                    <Text variant="small">
                       <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the
                       created container will use a legacy partitioning scheme that supports partition key values of size
                       only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}
@@ -1340,15 +1302,15 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     const partitionKeyVersion = this.state.useHashV1 ? undefined : 2;
     const partitionKey: DataModels.PartitionKey = partitionKeyString
       ? {
-          paths: [
+        paths: [
-            partitionKeyString,
+          partitionKeyString,
-            ...(userContext.apiType === "SQL" && this.state.subPartitionKeys.length > 0
+          ...(userContext.apiType === "SQL" && this.state.subPartitionKeys.length > 0
-              ? this.state.subPartitionKeys
+            ? this.state.subPartitionKeys
-              : []),
+            : []),
-          ],
+        ],
-          kind: userContext.apiType === "SQL" && this.state.subPartitionKeys.length > 0 ? "MultiHash" : "Hash",
+        kind: userContext.apiType === "SQL" && this.state.subPartitionKeys.length > 0 ? "MultiHash" : "Hash",
-          version: partitionKeyVersion,
+        version: partitionKeyVersion,
-        }
+      }
       : undefined;
 
     const indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing
@@ -1473,4 +1435,19 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       TelemetryProcessor.traceFailure(Action.CreateCollection, failureTelemetryData, startKey);
     }
   }
+
+  private onRenderDatabaseOption = (
+    option?: IDropdownOption,
+    defaultRender?: (props?: IDropdownOption) => JSX.Element,
+  ): JSX.Element | null => {
+    if (!option) {
+      return null;
+    }
+
+    return (
+      <div data-testid={`database-option-${option.key}`}>
+        {defaultRender ? defaultRender(option) : <span>{option.text}</span>}
+      </div>
+    );
+  };
 }

src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap

@@ -123,15 +123,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
                   "alignItems": "center",
                   "padding": 0,
                 },
-                "root": {
-                  "selectors": {
-                    ":hover .ms-Checkbox-text": {
-                      "color": "var(--colorNeutralForeground1)",
-                    },
-                  },
-                },
                 "text": {
-                  "color": "var(--colorNeutralForeground1)",
                   "fontSize": 12,
                 },
               }
@@ -283,21 +275,10 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
                 "fontSize": 12,
               },
               "root": {
-                "backgroundColor": "var(--colorNeutralBackground2)",
-                "borderColor": "var(--colorNeutralStroke1)",
-                "color": "var(--colorNeutralForeground1)",
                 "height": 30,
                 "padding": 0,
                 "width": 200,
               },
-              "rootHovered": {
-                "backgroundColor": "var(--colorNeutralBackground3)",
-                "color": "var(--colorNeutralForeground1)",
-              },
-              "rootPressed": {
-                "backgroundColor": "var(--colorBrandBackgroundPressed)",
-                "color": "var(--colorNeutralForegroundOnBrand)",
-              },
             }
           }
         >
@@ -366,7 +347,6 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         styles={
           {
             "label": {
-              "color": "var(--colorNeutralForeground1)",
               "fontSize": 12,
             },
             "root": {
@@ -577,26 +557,13 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
                   "whiteSpace": "break-spaces",
                   "wordWrap": "break-word",
                 },
-                "root": {
-                  "selectors": {
-                    ":hover .ms-Checkbox-text": {
-                      "color": "var(--colorNeutralForeground1)",
-                    },
-                  },
-                },
                 "text": {
-                  "color": "var(--colorNeutralForeground1)",
                   "fontSize": 12,
                 },
               }
             }
           />
           <Text
-            style={
-              {
-                "color": "var(--colorNeutralForeground1)",
-              }
-            }
             variant="small"
           >
             <Icon

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -224,14 +224,9 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
               <Checkbox
                 title="Provision shared throughput"
                 styles={{
-                  text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
+                  text: { fontSize: 12 },
                   checkbox: { width: 12, height: 12 },
                   label: { padding: 0, alignItems: "center" },
-                  root: {
-                    selectors: {
-                      ":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
-                    },
-                  },
                 }}
                 label="Provision throughput"
                 checked={databaseCreateNewShared}

src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap

@@ -78,15 +78,7 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
                 "alignItems": "center",
                 "padding": 0,
               },
-              "root": {
-                "selectors": {
-                  ":hover .ms-Checkbox-text": {
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                },
-              },
               "text": {
-                "color": "var(--colorNeutralForeground1)",
                 "fontSize": 12,
               },
             }

src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent.tsx

@@ -32,20 +32,15 @@ export const AdvancedComponent = (props: AdvancedComponentProps): JSX.Element =>
           label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
           checked={useHashV1}
           styles={{
-            text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
+            text: { fontSize: 12 },
             checkbox: { width: 12, height: 12 },
             label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
-            root: {
-              selectors: {
-                ":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
-              },
-            },
           }}
           onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
             useHashV1CheckboxOnChange(isChecked);
           }}
         />
-        <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
+        <Text variant="small">
           <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the created
           container will use a legacy partitioning scheme that supports partition key values of size only up to 101
           bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}

src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent.tsx

@@ -117,7 +117,7 @@ export const PartitionKeyComponent = (props: PartitionKeyComponentProps): JSX.El
           Add hierarchical partition key
         </DefaultButton>
         {subPartitionKeys.length > 0 && (
-          <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
+          <Text variant="small">
             <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to partition your
             data with up to three levels of keys for better data distribution. Requires .NET V3, Java V4 SDK, or preview
             JavaScript V3 SDK.{" "}

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -135,7 +135,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
   return (
     <RightPaneForm formError={formError} isExecuting={isExecuting} onSubmit={submit} submitButtonText="OK">
       <Stack tokens={{ childrenGap: 10 }} className="panelMainContent">
-        <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
+        <Text variant="small">
           When changing a container’s partition key, you will need to create a destination container with the correct
           partition key. You may also select an existing destination container.&nbsp;
           <Link
@@ -346,7 +346,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                   Add hierarchical partition key
                 </DefaultButton>
                 {subPartitionKeys.length > 0 && (
-                  <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
+                  <Text variant="small">
                     <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
                     partition your data with up to three levels of keys for better data distribution. Requires .NET V3,
                     Java V4 SDK, or preview JavaScript V3 SDK.{" "}

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx

@@ -94,14 +94,7 @@ export const LoadQueryPane: FunctionComponent = (): JSX.Element => {
               value={selectedFileName}
               autoFocus
               readOnly
-              styles={{
+              styles={{ fieldGroup: { width: 300 } }}
-                fieldGroup: { width: 300, color: "var(--colorNeutralForeground1)" },
-                subComponentStyles: {
-                  label: {
-                    root: { color: "var(--colorNeutralForeground1)" },
-                  },
-                },
-              }}
             />
             <label htmlFor="importQueryInputId" className="customFileUpload">
               <Image {...imageProps} src={folderIcon} alt="upload files" />

src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap

@@ -24,16 +24,8 @@ exports[`Load Query Pane should render Default properly 1`] = `
           styles={
             {
               "fieldGroup": {
-                "color": "var(--colorNeutralForeground1)",
                 "width": 300,
               },
-              "subComponentStyles": {
-                "label": {
-                  "root": {
-                    "color": "var(--colorNeutralForeground1)",
-                  },
-                },
-              },
             }
           }
           value=""

src/Explorer/Panes/PanelComponent.less

@@ -4,8 +4,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100%;
-  color: var(--colorNeutralForeground2);
+
-  background-color: var(--colorNeutralBackground1);
   .panelMainContent {
     flex-grow: 1;
     padding: 0 34px;
@@ -26,31 +25,19 @@
       margin: auto 0 auto @SmallSpace;
       cursor: default;
       vertical-align: middle;
-      color: var(--colorNeutralForeground1);
     }
 
     .panelTextBold {
       font-weight: 600;
       line-height: 20px;
-      color: var(--colorNeutralForeground1);
     }
 
     .panelTextField {
       font-size: @mediumFontSize;
-      border: 1px solid var(--colorNeutralStroke1);
+      border: 1px solid #605e5c;
-      color: var(--colorNeutralForeground1);
+      color: #000;
-      background-color: var(--colorNeutralBackground2);
       padding: 4px 10px;
       width: @newCollectionPaneInputWidth;
-
-      &::placeholder {
-        color: var(--colorNeutralForeground3);
-      }
-
-      &:focus {
-        border-color: var(--colorCompoundBrandStroke1);
-        outline: none;
-      }
     }
 
     .panelRadioBtn {
@@ -60,7 +47,6 @@
     .panelRadioBtnLabel {
       font-size: @mediumFontSize;
       padding: 0 @LargeSpace 0 @SmallSpace;
-      color: var(--colorNeutralForeground1);
     }
 
     .panelSectionSpinner {
@@ -69,44 +55,6 @@
       left: 50%;
       transform: translate(-50%, -50%);
     }
-
-    .ms-Dropdown {
-      .ms-Dropdown-title {
-        background-color: var(--colorNeutralBackground2);
-        border-color: var(--colorNeutralStroke1);
-        color: var(--colorNeutralForeground1);
-      }
-
-      .ms-Dropdown-caretDownWrapper {
-        color: var(--colorNeutralForeground1);
-      }
-    }
-
-    .ms-Checkbox {
-      .ms-Checkbox-label {
-        color: var(--colorNeutralForeground1);
-      }
-    }
-
-    .ms-TextField {
-      .ms-TextField-fieldGroup {
-        background-color: var(--colorNeutralBackground2);
-        border-color: var(--colorNeutralStroke1);
-      }
-
-      .ms-TextField-field {
-        background-color: var(--colorNeutralBackground2);
-        color: var(--colorNeutralForeground1);
-
-        &::placeholder {
-          color: var(--colorNeutralForeground3);
-        }
-      }
-    }
-
-    .ms-Text {
-      color: var(--colorNeutralForeground1);
-    }
   }
 
   @media (max-width: 768px) {
@@ -119,14 +67,13 @@
 }
 
 .panelHeader {
-  color: var(--colorNeutralForeground1);
+  color: @BaseDark;
   font-size: @largeFontSize;
   font-weight: 400;
 }
 
 .panelInfoErrorContainer {
-  background-color: var(--colorNeutralBackground3);
+  background-color: @BaseLow;
-  color: var(--colorNeutralForeground1);
   padding: @DefaultSpace;
   display: inline-flex;
   margin: 20px 34px 0 34px;
@@ -138,15 +85,15 @@
   }
 
   .panelWarningIcon {
-    color: var(--colorPaletteYellowForeground1);
+    color: @WarningIconColor;
   }
 
   .panelErrorIcon {
-    color: var(--colorPaletteRedForeground1);
+    color: @ErrorIconColor;
   }
 
   .panelLargeInfoIcon {
-    color: var(--colorBrandForeground1);
+    color: @InfoIconColor;
   }
 
   .panelWarningErrorDetailsLinkContainer {
@@ -155,22 +102,16 @@
     padding-left: @MediumSpace;
 
     .paneErrorLink {
-      color: var(--colorBrandForeground1);
+      color: @LinkColor;
       cursor: pointer;
       font-size: @mediumFontSize;
     }
-
-    .panelWarningErrorMessage {
-      color: var(--colorNeutralForeground1);
-    }
   }
 }
 
 .panelFooter {
   padding: 16px 34px;
-  border-top: solid 1px var(--colorNeutralStroke1);
+  border-top: solid 1px #bbbbbb;
-  background-color: var(--colorNeutralBackground1);
-  color: var(--colorNeutralForeground1);
 
   & button {
     height: 30px;
@@ -192,8 +133,7 @@
 
 .addRemoveIcon [alt="editEntity"]:focus,
 .addRemoveIconLabel [alt="editEntity"]:focus {
-  border: 1px dashed var(--colorNeutralStroke1);
+  border: 1px dashed #605e5c;
-  outline: none;
 }
 
 .addNewParamStyle {
@@ -235,7 +175,7 @@
 }
 
 .removeIcon {
-  color: "var(--colorNeutralForeground1)";
+  color: @InfoIconColor;
 }
 
 .backImageIcon {
@@ -243,8 +183,7 @@
 }
 
 [alt="back"]:focus {
-  border: 1px solid var(--colorCompoundBrandStroke1);
+  border: 1px solid #605e5c;
-  outline: none;
 }
 
 .addEntityDatePicker {
@@ -264,32 +203,5 @@
 }
 
 .panelSeparator::before {
-  background-color: var(--colorNeutralStroke1);
+  background-color: #edebe9;
-}
+}
-
-.themed-panel {
-  &.ms-Panel {
-    .ms-Panel-main {
-      background-color: var(--colorNeutralBackground1);
-    }
-    
-    .ms-Panel-overlay {
-      background-color: var(--overlayBackground);
-    }
-    
-    .ms-Panel-content {
-      background-color: var(--colorNeutralBackground1);
-    }
-  }
-}
-
-:global {
-  .ms-Panel-root {
-    background-color: transparent;
-  }
-
-  .ms-Panel-overlay {
-    background-color: var(--overlayBackground);
-  }
-}
-

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -63,47 +63,13 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
         closeButtonAriaLabel={`Close ${this.props.headerText}`}
         customWidth={this.props.panelWidth ? this.props.panelWidth : "440px"}
         headerClassName="panelHeader"
-        className="themed-panel"
         onRenderNavigationContent={this.props.onRenderNavigationContent}
         isFooterAtBottom={true}
         styles={{
-          navigation: {
+          navigation: { borderBottom: "1px solid #cccccc" },
-            borderBottom: "1px solid var(--colorNeutralStroke1)",
+          content: { padding: 0 },
-            backgroundColor: "var(--colorNeutralBackground1)",
+          header: { padding: "0 0 8px 34px" },
-            color: "var(--colorNeutralForeground1)",
+          commands: { marginTop: 8, paddingTop: 0 },
-          },
-          content: {
-            padding: 0,
-            backgroundColor: "var(--colorNeutralBackground1)",
-            color: "var(--colorNeutralForeground1)",
-          },
-          header: {
-            padding: "0 0 8px 34px",
-            backgroundColor: "var(--colorNeutralBackground1)",
-            color: "var(--colorNeutralForeground1)",
-          },
-          commands: {
-            marginTop: 8,
-            paddingTop: 0,
-            backgroundColor: "var(--colorNeutralBackground1)",
-          },
-          root: {},
-          overlay: {
-            backgroundColor: "var(--overlayBackground)",
-          },
-          main: {
-            backgroundColor: "var(--colorNeutralBackground1)",
-          },
-          scrollableContent: {
-            backgroundColor: "var(--colorNeutralBackground1)",
-          },
-          footerInner: {
-            backgroundColor: "var(--colorNeutralBackground1)",
-            color: "var(--colorNeutralForeground1)",
-          },
-          closeButton: {
-            color: "var(--colorNeutralForeground1)",
-          },
         }}
         style={{ height: this.state.height }}
       >

src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx

@@ -147,16 +147,7 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
       <div className="panelFormWrapper" style={{ flexGrow: 1 }}>
         <div className="panelMainContent">
           {!isSaveQueryEnabled() ? (
-            <Text
+            <Text variant="small">{setupSaveQueriesText}</Text>
-              variant="small"
-              styles={{
-                root: {
-                  color: "var(--colorNeutralForeground1)",
-                },
-              }}
-            >
-              {setupSaveQueriesText}
-            </Text>
           ) : (
             <TextField
               id="saveQueryInput"

src/Explorer/Panes/SaveQueryPane/__snapshots__/SaveQueryPane.test.tsx.snap

@@ -20,13 +20,6 @@ exports[`Save Query Pane should render Default properly 1`] = `
       className="panelMainContent"
     >
       <Text
-        styles={
-          {
-            "root": {
-              "color": "var(--colorNeutralForeground1)",
-            },
-          }
-        }
         variant="small"
       >
         For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.