Reduce extra spacing in the new tree and items tab (#1951)

* reduce layout row size and default font size

* icons for the tree

* refmt and update snapshots

* remove commented out code

less/documentDB.less

@@ -1906,8 +1906,14 @@ input::-webkit-calendar-picker-indicator::after {
 }
 
 .nav-tabs-margin {
-  padding-top: 5px;
+  height: 32px;
   background-color: #f2f2f2;
+
+  .nav-tabs {
+    display: flex;
+    align-items: flex-end;
+    height: 100%;
+  }
 }
 
 .navTabHeight {

src/Explorer/Controls/TreeComponent/Styles.ts

@@ -17,7 +17,7 @@ export const useTreeStyles = makeStyles({
     minWidth: "100%",
     rowGap: "0px",
     paddingTop: "0px",
-    [treeIconWidth]: "20px",
+    [treeIconWidth]: "16px",
     [leafNodeSpacing]: "24px",
   },
   nodeIcon: {
@@ -32,7 +32,6 @@ export const useTreeStyles = makeStyles({
     fontSize: tokens.fontSizeBase300,
     height: tokens.layoutRowHeight,
     ...cosmosShorthands.borderBottom(),
-    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,
 
     // Some sneaky CSS variables stuff to change the background color of the action button on hover.
     [actionButtonBackground]: tokens.colorNeutralBackground1,

src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx

@@ -149,15 +149,16 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
 
   // We use the expandIcon slot to hold the node icon too.
   // We only show a node icon for leaf nodes, even if a branch node has an iconSrc.
-  const expandIcon = isLoading ? (
+  const treeIcon =
-    <Spinner size="extra-tiny" />
+    node.iconSrc === undefined ? undefined : typeof node.iconSrc === "string" ? (
-  ) : !isBranch ? (
-    typeof node.iconSrc === "string" ? (
       <img src={node.iconSrc} className={treeStyles.nodeIcon} alt="" />
     ) : (
       node.iconSrc
-    )
+    );
-  ) : openItems.includes(treeNodeId) ? (
+
+  const expandIcon = isLoading ? (
+    <Spinner size="extra-tiny" />
+  ) : !isBranch ? undefined : openItems.includes(treeNodeId) ? (
     <ChevronDown20Regular data-test="TreeNode/CollapseIcon" />
   ) : (
     <ChevronRight20Regular data-text="TreeNode/ExpandIcon" />
@@ -174,7 +175,6 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
       <TreeItemLayout
         className={mergeClasses(
           treeStyles.treeItemLayout,
-          expandIcon ? undefined : treeStyles.treeItemLayoutNoIcon,
           shouldShowAsSelected && treeStyles.selectedItem,
           node.className && treeStyles[node.className],
         )}
@@ -200,6 +200,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
             ),
           }
         }
+        iconBefore={treeIcon}
         expandIcon={expandIcon}
       >
         <span className={treeStyles.nodeLabel}>{node.label}</span>

src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap

@@ -10,13 +10,20 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
 >
   <TreeItemLayout
     actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
     expandIcon={
       <ChevronRight20Regular
         data-text="TreeNode/ExpandIcon"
       />
     }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
   >
     <span
       className="___1h29e9h_0000000 fz5stix"
@@ -156,7 +163,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
             "itemType": "branch",
             "layoutRef": {
               "current": <div
-                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                 data-test="TreeNode:root"
               >
                 <div
@@ -179,6 +186,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     />
                   </svg>
                 </div>
+                <div
+                  aria-hidden="true"
+                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                >
+                  <img
+                    alt=""
+                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                    src="rootIcon"
+                  />
+                </div>
                 <div
                   class="fui-TreeItemLayout__main rklbe47"
                 >
@@ -208,7 +225,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                 tabindex="-1"
               >
                 <div
-                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                   data-test="TreeNode:root"
                 >
                   <div
@@ -231,6 +248,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       />
                     </svg>
                   </div>
+                  <div
+                    aria-hidden="true"
+                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                  >
+                    <img
+                      alt=""
+                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                      src="rootIcon"
+                    />
+                  </div>
                   <div
                     class="fui-TreeItemLayout__main rklbe47"
                   >
@@ -242,7 +269,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                   </div>
                 </div>
                 <div
-                  class="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+                  class="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
                   data-test="Tree:root"
                   role="tree"
                 >
@@ -256,7 +283,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     tabindex="0"
                   >
                     <div
-                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                       data-test="TreeNode:root/child1Label"
                     >
                       <div
@@ -279,6 +306,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           />
                         </svg>
                       </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                          src="child1Icon"
+                        />
+                      </div>
                       <div
                         class="fui-TreeItemLayout__main rklbe47"
                       >
@@ -300,7 +337,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                       data-test="TreeNode:root/child2LoadingLabel"
                     >
                       <div
@@ -323,6 +360,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           />
                         </svg>
                       </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                          src="child2LoadingIcon"
+                        />
+                      </div>
                       <div
                         class="fui-TreeItemLayout__main rklbe47"
                       >
@@ -343,7 +390,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                     tabindex="-1"
                   >
                     <div
-                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                       data-test="TreeNode:root/child3ExpandingLabel"
                     >
                       <div
@@ -363,6 +410,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           </span>
                         </div>
                       </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                          src="child3ExpandingIcon"
+                        />
+                      </div>
                       <div
                         class="fui-TreeItemLayout__main rklbe47"
                       >
@@ -383,16 +440,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
       >
         <TreeItemLayout
           actions={false}
-          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
           data-test="TreeNode:root"
           expandIcon={
             <ChevronRight20Regular
               data-text="TreeNode/ExpandIcon"
             />
           }
+          iconBefore={
+            <img
+              alt=""
+              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+              src="rootIcon"
+            />
+          }
         >
           <div
-            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
             data-test="TreeNode:root"
           >
             <div
@@ -419,6 +483,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                 </svg>
               </ChevronRight20Regular>
             </div>
+            <div
+              aria-hidden={true}
+              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+            >
+              <img
+                alt=""
+                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                src="rootIcon"
+              />
+            </div>
             <div
               className="fui-TreeItemLayout__main rklbe47"
             >
@@ -431,7 +505,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
           </div>
         </TreeItemLayout>
         <Tree
-          className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+          className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
           data-test="Tree:root"
         >
           <TreeProvider
@@ -499,7 +573,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
               }
             >
               <div
-                className="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+                className="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
                 data-test="Tree:root"
                 role="tree"
               >
@@ -587,7 +661,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                             "itemType": "branch",
                             "layoutRef": {
                               "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                 data-test="TreeNode:root/child1Label"
                               >
                                 <div
@@ -610,6 +684,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     />
                                   </svg>
                                 </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                    src="child1Icon"
+                                  />
+                                </div>
                                 <div
                                   class="fui-TreeItemLayout__main rklbe47"
                                 >
@@ -639,7 +723,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 tabindex="0"
                               >
                                 <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                   data-test="TreeNode:root/child1Label"
                                 >
                                   <div
@@ -662,6 +746,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                       />
                                     </svg>
                                   </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                      src="child1Icon"
+                                    />
+                                  </div>
                                   <div
                                     class="fui-TreeItemLayout__main rklbe47"
                                   >
@@ -680,16 +774,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       >
                         <TreeItemLayout
                           actions={false}
-                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                           data-test="TreeNode:root/child1Label"
                           expandIcon={
                             <ChevronRight20Regular
                               data-text="TreeNode/ExpandIcon"
                             />
                           }
+                          iconBefore={
+                            <img
+                              alt=""
+                              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                              src="child1Icon"
+                            />
+                          }
                         >
                           <div
-                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                             data-test="TreeNode:root/child1Label"
                           >
                             <div
@@ -716,6 +817,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 </svg>
                               </ChevronRight20Regular>
                             </div>
+                            <div
+                              aria-hidden={true}
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                            >
+                              <img
+                                alt=""
+                                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                src="child1Icon"
+                              />
+                            </div>
                             <div
                               className="fui-TreeItemLayout__main rklbe47"
                             >
@@ -728,7 +839,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           </div>
                         </TreeItemLayout>
                         <Tree
-                          className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+                          className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
                           data-test="Tree:root/child1Label"
                         >
                           <TreeProvider
@@ -821,7 +932,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                             "itemType": "branch",
                             "layoutRef": {
                               "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                 data-test="TreeNode:root/child2LoadingLabel"
                               >
                                 <div
@@ -844,6 +955,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     />
                                   </svg>
                                 </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                    src="child2LoadingIcon"
+                                  />
+                                </div>
                                 <div
                                   class="fui-TreeItemLayout__main rklbe47"
                                 >
@@ -873,7 +994,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 tabindex="-1"
                               >
                                 <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                   data-test="TreeNode:root/child2LoadingLabel"
                                 >
                                   <div
@@ -896,6 +1017,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                       />
                                     </svg>
                                   </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                      src="child2LoadingIcon"
+                                    />
+                                  </div>
                                   <div
                                     class="fui-TreeItemLayout__main rklbe47"
                                   >
@@ -914,16 +1045,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       >
                         <TreeItemLayout
                           actions={false}
-                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                           data-test="TreeNode:root/child2LoadingLabel"
                           expandIcon={
                             <ChevronRight20Regular
                               data-text="TreeNode/ExpandIcon"
                             />
                           }
+                          iconBefore={
+                            <img
+                              alt=""
+                              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                              src="child2LoadingIcon"
+                            />
+                          }
                         >
                           <div
-                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                             data-test="TreeNode:root/child2LoadingLabel"
                           >
                             <div
@@ -950,6 +1088,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 </svg>
                               </ChevronRight20Regular>
                             </div>
+                            <div
+                              aria-hidden={true}
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                            >
+                              <img
+                                alt=""
+                                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                src="child2LoadingIcon"
+                              />
+                            </div>
                             <div
                               className="fui-TreeItemLayout__main rklbe47"
                             >
@@ -1039,7 +1187,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                             "itemType": "leaf",
                             "layoutRef": {
                               "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                 data-test="TreeNode:root/child3ExpandingLabel"
                               >
                                 <div
@@ -1059,6 +1207,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                     </span>
                                   </div>
                                 </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                    src="child3ExpandingIcon"
+                                  />
+                                </div>
                                 <div
                                   class="fui-TreeItemLayout__main rklbe47"
                                 >
@@ -1087,7 +1245,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                 tabindex="-1"
                               >
                                 <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                   data-test="TreeNode:root/child3ExpandingLabel"
                                 >
                                   <div
@@ -1107,6 +1265,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                       </span>
                                     </div>
                                   </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                      src="child3ExpandingIcon"
+                                    />
+                                  </div>
                                   <div
                                     class="fui-TreeItemLayout__main rklbe47"
                                   >
@@ -1125,9 +1293,9 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                       >
                         <TreeItemLayout
                           actions={false}
-                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                           data-test="TreeNode:root/child3ExpandingLabel"
-                          expandIcon={
+                          iconBefore={
                             <img
                               alt=""
                               className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1136,12 +1304,12 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                           }
                         >
                           <div
-                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                             data-test="TreeNode:root/child3ExpandingLabel"
                           >
                             <div
                               aria-hidden={true}
-                              className="fui-TreeItemLayout__expandIcon rh4pu5o"
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
                             >
                               <img
                                 alt=""
@@ -1184,9 +1352,9 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
 >
   <TreeItemLayout
     actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
       <img
         alt=""
         className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1213,13 +1381,20 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
 >
   <TreeItemLayout
     actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
     expandIcon={
       <Spinner
         size="extra-tiny"
       />
     }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
   >
     <span
       className="___1h29e9h_0000000 fz5stix"
@@ -1240,13 +1415,20 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
 >
   <TreeItemLayout
     actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
     expandIcon={
       <ChevronRight20Regular
         data-text="TreeNode/ExpandIcon"
       />
     }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
   >
     <span
       className="___1h29e9h_0000000 fz5stix"
@@ -1313,9 +1495,9 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
             "className": "___1r8p62d_0000000 f1xg1ack f1e31b4d",
           }
         }
-        className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+        className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
         data-test="TreeNode:root"
-        expandIcon={
+        iconBefore={
           <img
             alt=""
             className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1363,9 +1545,9 @@ exports[`TreeNodeComponent renders a single node 1`] = `
 >
   <TreeItemLayout
     actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
       <img
         alt=""
         className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1392,9 +1574,9 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
 >
   <TreeItemLayout
     actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
       <img
         alt=""
         className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1421,13 +1603,20 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
 >
   <TreeItemLayout
     actions={false}
-    className="___kqkdor0_ihxn0o0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
+    className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
     data-test="TreeNode:root"
     expandIcon={
       <ChevronRight20Regular
         data-text="TreeNode/ExpandIcon"
       />
     }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
   >
     <span
       className="___1h29e9h_0000000 fz5stix"
@@ -1436,7 +1625,7 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
     </span>
   </TreeItemLayout>
   <Tree
-    className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+    className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
     data-test="Tree:root"
   >
     <TreeNodeComponent
@@ -1497,13 +1686,20 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
 >
   <TreeItemLayout
     actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
     data-test="TreeNode:root"
     expandIcon={
       <ChevronRight20Regular
         data-text="TreeNode/ExpandIcon"
       />
     }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
   >
     <span
       className="___1h29e9h_0000000 fz5stix"
@@ -1512,7 +1708,7 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
     </span>
   </TreeItemLayout>
   <Tree
-    className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+    className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
     data-test="Tree:root"
   >
     <TreeNodeComponent
@@ -1574,9 +1770,9 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
 >
   <TreeItemLayout
     actions={false}
-    className="___kqkdor0_ihxn0o0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
+    className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
     data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
       <img
         alt=""
         className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"

src/Explorer/Sidebar.tsx

@@ -86,7 +86,7 @@ const useSidebarStyles = makeStyles({
     },
   },
   globalCommandsMenuButton: {
-    display: "initial",
+    display: "inline-flex",
     "@container (min-width: 250px)": {
       display: "none",
     },
@@ -280,7 +280,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
       {/* Collections Tree - Start */}
       {hasSidebar && (
         // When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
-        <Allotment.Pane minSize={24} preferredSize={300}>
+        <Allotment.Pane minSize={24} preferredSize={250}>
           <CosmosFluentProvider className={mergeClasses(styles.sidebar)}>
             <div className={styles.sidebarContainer}>
               {loading && (

src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap

@@ -348,7 +348,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
         >
           <List
             direction="ltr"
-            height={-36}
+            height={-32}
             itemCount={3}
             itemData={
               [
@@ -387,7 +387,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                 },
               ]
             }
-            itemSize={36}
+            itemSize={32}
             layout="vertical"
             overscanCount={2}
             style={
@@ -404,7 +404,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                 {
                   "WebkitOverflowScrolling": "touch",
                   "direction": "ltr",
-                  "height": -36,
+                  "height": -32,
                   "overflow": "auto",
                   "overflowY": "scroll",
                   "position": "relative",
@@ -416,7 +416,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
               <div
                 style={
                   {
-                    "height": 108,
+                    "height": 96,
                     "pointerEvents": undefined,
                     "width": "100%",
                   }
@@ -464,7 +464,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                   key="0"
                   style={
                     {
-                      "height": 36,
+                      "height": 32,
                       "left": 0,
                       "position": "absolute",
                       "right": undefined,
@@ -482,7 +482,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                     style={
                       {
                         "cursor": "pointer",
-                        "height": 36,
+                        "height": 32,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
@@ -500,7 +500,7 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                       style={
                         {
                           "cursor": "pointer",
-                          "height": 36,
+                          "height": 32,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
@@ -653,11 +653,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                   key="1"
                   style={
                     {
-                      "height": 36,
+                      "height": 32,
                       "left": 0,
                       "position": "absolute",
                       "right": undefined,
-                      "top": 36,
+                      "top": 32,
                       "width": "100%",
                     }
                   }
@@ -671,11 +671,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                     style={
                       {
                         "cursor": "pointer",
-                        "height": 36,
+                        "height": 32,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
-                        "top": 36,
+                        "top": 32,
                         "userSelect": "none",
                         "width": "100%",
                       }
@@ -689,11 +689,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                       style={
                         {
                           "cursor": "pointer",
-                          "height": 36,
+                          "height": 32,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
-                          "top": 36,
+                          "top": 32,
                           "userSelect": "none",
                           "width": "100%",
                         }
@@ -842,11 +842,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                   key="2"
                   style={
                     {
-                      "height": 36,
+                      "height": 32,
                       "left": 0,
                       "position": "absolute",
                       "right": undefined,
-                      "top": 72,
+                      "top": 64,
                       "width": "100%",
                     }
                   }
@@ -860,11 +860,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                     style={
                       {
                         "cursor": "pointer",
-                        "height": 36,
+                        "height": 32,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
-                        "top": 72,
+                        "top": 64,
                         "userSelect": "none",
                         "width": "100%",
                       }
@@ -878,11 +878,11 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
                       style={
                         {
                           "cursor": "pointer",
-                          "height": 36,
+                          "height": 32,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
-                          "top": 72,
+                          "top": 64,
                           "userSelect": "none",
                           "width": "100%",
                         }
@@ -1387,7 +1387,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
         >
           <List
             direction="ltr"
-            height={-36}
+            height={-32}
             itemCount={3}
             itemData={
               [
@@ -1426,7 +1426,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                 },
               ]
             }
-            itemSize={36}
+            itemSize={32}
             layout="vertical"
             overscanCount={2}
             style={
@@ -1443,7 +1443,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                 {
                   "WebkitOverflowScrolling": "touch",
                   "direction": "ltr",
-                  "height": -36,
+                  "height": -32,
                   "overflow": "auto",
                   "overflowY": "scroll",
                   "position": "relative",
@@ -1455,7 +1455,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
               <div
                 style={
                   {
-                    "height": 108,
+                    "height": 96,
                     "pointerEvents": undefined,
                     "width": "100%",
                   }
@@ -1503,7 +1503,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                   key="0"
                   style={
                     {
-                      "height": 36,
+                      "height": 32,
                       "left": 0,
                       "position": "absolute",
                       "right": undefined,
@@ -1521,7 +1521,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                     style={
                       {
                         "cursor": "pointer",
-                        "height": 36,
+                        "height": 32,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
@@ -1539,7 +1539,7 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                       style={
                         {
                           "cursor": "pointer",
-                          "height": 36,
+                          "height": 32,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
@@ -1732,11 +1732,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                   key="1"
                   style={
                     {
-                      "height": 36,
+                      "height": 32,
                       "left": 0,
                       "position": "absolute",
                       "right": undefined,
-                      "top": 36,
+                      "top": 32,
                       "width": "100%",
                     }
                   }
@@ -1750,11 +1750,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                     style={
                       {
                         "cursor": "pointer",
-                        "height": 36,
+                        "height": 32,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
-                        "top": 36,
+                        "top": 32,
                         "userSelect": "none",
                         "width": "100%",
                       }
@@ -1768,11 +1768,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                       style={
                         {
                           "cursor": "pointer",
-                          "height": 36,
+                          "height": 32,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
-                          "top": 36,
+                          "top": 32,
                           "userSelect": "none",
                           "width": "100%",
                         }
@@ -1961,11 +1961,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                   key="2"
                   style={
                     {
-                      "height": 36,
+                      "height": 32,
                       "left": 0,
                       "position": "absolute",
                       "right": undefined,
-                      "top": 72,
+                      "top": 64,
                       "width": "100%",
                     }
                   }
@@ -1979,11 +1979,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                     style={
                       {
                         "cursor": "pointer",
-                        "height": 36,
+                        "height": 32,
                         "left": 0,
                         "position": "absolute",
                         "right": undefined,
-                        "top": 72,
+                        "top": 64,
                         "userSelect": "none",
                         "width": "100%",
                       }
@@ -1997,11 +1997,11 @@ exports[`DocumentsTableComponent should render documents and partition keys in h
                       style={
                         {
                           "cursor": "pointer",
-                          "height": 36,
+                          "height": 32,
                           "left": 0,
                           "position": "absolute",
                           "right": undefined,
-                          "top": 72,
+                          "top": 64,
                           "userSelect": "none",
                           "width": "100%",
                         }

src/Explorer/Tabs/Tabs.tsx

@@ -100,8 +100,7 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
             },
           }}
         >
-          {`To prevent queries from using excessive RUs, Data Explorer has a 5,000 RU default limit. To modify or remove
+          {`Data Explorer has a 5,000 RU default limit. To adjust the limit, go to the Settings page and find "RU Threshold".`}
-          the limit, go to the Settings cog on the right and find "RU Threshold".`}
           <Link
             className="underlinedLink"
             href="https://review.learn.microsoft.com/en-us/azure/cosmos-db/data-explorer?branch=main#configure-request-unit-threshold"

src/Explorer/Theme/ThemeUtil.tsx

@@ -16,7 +16,7 @@ import React from "react";
 import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme";
 
 export const LayoutConstants = {
-  rowHeight: 36,
+  rowHeight: 32,
 };
 
 // Our CosmosFluentProvider has the same props as a FluentProvider.
@@ -91,15 +91,30 @@ const appThemePortalBrandRamp: BrandVariants = {
   160: "#CDD8EF",
 };
 
-const cosmosThemeElements = {
+export enum LayoutSize {
-  layoutRowHeight: `${LayoutConstants.rowHeight}px`,
+  Compact,
+  // TODO: Cozy and Roomy layouts.
+}
+
+interface CosmosThemeElements {
+  layoutRowHeight: string;
+}
+
+export type CosmosTheme = Theme & CosmosThemeElements;
+
+const sizeMappings: Record<LayoutSize, Partial<Theme> & CosmosThemeElements> = {
+  [LayoutSize.Compact]: {
+    layoutRowHeight: "32px",
+    fontSizeBase300: "13px",
+  },
+};
+
+const cosmosTheme = {
   sidebarMinimumWidth: "200px",
   sidebarInitialWidth: "300px",
 };
 
-export type CosmosTheme = Theme & typeof cosmosThemeElements;
+export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosTheme, ...sizeMappings[LayoutSize.Compact] });
-
-export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosThemeElements });
 
 export const cosmosShorthands = {
   border: () => shorthands.border("1px", "solid", tokens.colorNeutralStroke2),
@@ -117,6 +132,7 @@ export function getPlatformTheme(platform: Platform): CosmosTheme {
 
   return {
     ...baseTheme,
-    ...cosmosThemeElements,
+    ...cosmosTheme,
+    ...sizeMappings[LayoutSize.Compact], // TODO: Allow for different layout sizes.
   };
 }

src/Explorer/Tree/__snapshots__/treeNodeUtil.test.ts.snap

@@ -30,6 +30,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "standardCollection",
@@ -69,6 +72,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "conflictsCollection",
@@ -92,6 +98,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "standardDb",
@@ -102,6 +111,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
   {
     "children": [
       {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
         "id": "",
         "isSelected": [Function],
         "label": "Scale",
@@ -133,6 +145,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "sampleItemsCollection",
@@ -156,6 +171,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "sharedDatabase",
@@ -246,6 +264,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "schemaCollection",
@@ -274,6 +295,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "giganticDatabase",
@@ -345,6 +369,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "standardCollection",
@@ -415,6 +442,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "conflictsCollection",
@@ -438,6 +468,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "standardDb",
@@ -448,6 +481,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
   {
     "children": [
       {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
         "id": "",
         "isSelected": [Function],
         "label": "Scale",
@@ -510,6 +546,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "sampleItemsCollection",
@@ -533,6 +572,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "sharedDatabase",
@@ -654,6 +696,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "schemaCollection",
@@ -682,6 +727,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "giganticDatabase",
@@ -706,6 +754,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "onClick": [Function],
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "standardCollection",
@@ -724,6 +775,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "onClick": [Function],
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "conflictsCollection",
@@ -747,6 +801,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "standardDb",
@@ -766,6 +823,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "onClick": [Function],
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "sampleItemsCollection",
@@ -789,6 +849,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "sharedDatabase",
@@ -808,6 +871,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "onClick": [Function],
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "schemaCollection",
@@ -836,6 +902,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "giganticDatabase",
@@ -976,6 +1045,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "standardCollection",
@@ -1076,6 +1148,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "conflictsCollection",
@@ -1099,6 +1174,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "standardDb",
@@ -1109,6 +1187,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
   {
     "children": [
       {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
         "id": "",
         "isSelected": [Function],
         "label": "Scale",
@@ -1201,6 +1282,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "sampleItemsCollection",
@@ -1224,6 +1308,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "sharedDatabase",
@@ -1375,6 +1462,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "schemaCollection",
@@ -1403,6 +1493,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "giganticDatabase",
@@ -1543,6 +1636,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "standardCollection",
@@ -1638,6 +1734,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "conflictsCollection",
@@ -1661,6 +1760,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "standardDb",
@@ -1671,6 +1773,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
   {
     "children": [
       {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
         "id": "",
         "isSelected": [Function],
         "label": "Scale",
@@ -1763,6 +1868,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "sampleItemsCollection",
@@ -1786,6 +1894,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "sharedDatabase",
@@ -1937,6 +2048,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
             "styleClass": "deleteCollectionMenuItem",
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": true,
         "isSelected": [Function],
         "label": "schemaCollection",
@@ -1965,6 +2079,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
         "styleClass": "deleteDatabaseMenuItem",
       },
     ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "giganticDatabase",
@@ -1986,6 +2103,9 @@ exports[`createResourceTokenTreeNodes creates the expected tree nodes 1`] = `
       },
     ],
     "className": "collectionNode",
+    "iconSrc": <DocumentMultipleRegular
+      fontSize={16}
+    />,
     "isExpanded": true,
     "isSelected": [Function],
     "label": "testCollection",
@@ -2021,6 +2141,9 @@ exports[`createSampleDataTreeNodes creates the expected tree nodes 1`] = `
             "onClick": [Function],
           },
         ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
         "isExpanded": false,
         "isSelected": [Function],
         "label": "testCollection",

src/Explorer/Tree/treeNodeUtil.tsx

@@ -1,3 +1,4 @@
+import { DatabaseRegular, DocumentMultipleRegular, SettingsRegular } from "@fluentui/react-icons";
 import { TreeNode } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import TabsBase from "Explorer/Tabs/TabsBase";
 import StoredProcedure from "Explorer/Tree/StoredProcedure";
@@ -7,6 +8,7 @@ import { useDatabases } from "Explorer/useDatabases";
 import { getItemName } from "Utils/APITypeUtils";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
 import { useTabs } from "hooks/useTabs";
+import React from "react";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import { Platform, configContext } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
@@ -25,6 +27,10 @@ export const shouldShowScriptNodes = (): boolean => {
   );
 };
 
+const TreeDatabaseIcon = <DatabaseRegular fontSize={16} />;
+const TreeSettingsIcon = <SettingsRegular fontSize={16} />;
+const TreeCollectionIcon = <DocumentMultipleRegular fontSize={16} />;
+
 export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: ViewModels.CollectionBase): TreeNode[] => {
   const updatedSampleTree: TreeNode = {
     label: sampleDataResourceTokenCollection.databaseId,
@@ -36,6 +42,7 @@ export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: Vie
         isExpanded: false,
         className: "collectionNode",
         contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
+        iconSrc: TreeCollectionIcon,
         onClick: () => {
           useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection);
           useCommandBar.getState().setContextButtons([]);
@@ -104,6 +111,7 @@ export const createResourceTokenTreeNodes = (collection: ViewModels.CollectionBa
     isExpanded: true,
     children,
     className: "collectionNode",
+    iconSrc: TreeCollectionIcon,
     onClick: () => {
       // Rewritten version of expandCollapseCollection
       useSelectedNode.getState().setSelectedNode(collection);
@@ -133,6 +141,7 @@ export const createDatabaseTreeNodes = (
         databaseNode.children.push({
           id: database.isSampleDB ? "sampleScaleSettings" : "",
           label: "Scale",
+          iconSrc: TreeSettingsIcon,
           isSelected: () =>
             useSelectedNode
               .getState()
@@ -169,6 +178,7 @@ export const createDatabaseTreeNodes = (
       children: [],
       isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
       contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
+      iconSrc: TreeDatabaseIcon,
       onExpanded: async () => {
         useSelectedNode.getState().setSelectedNode(database);
         if (!databaseNode.children || databaseNode.children?.length === 0) {
@@ -219,6 +229,7 @@ export const buildCollectionNode = (
     children: children,
     className: "collectionNode",
     contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
+    iconSrc: TreeCollectionIcon,
     onClick: () => {
       useSelectedNode.getState().setSelectedNode(collection);
       collection.openTab();