change header class to jp-stack-panel-header for the extension manager

packages/extensionmanager/src/widget.tsx

@@ -581,7 +581,7 @@ export class CollapsibleSection extends React.Component<
     }
     return (
       <>
-        <div className="header">
+        <div className="jp-stack-panel-header">
           <ToolbarButtonComponent
             icon={icon}
             onClick={() => {

packages/extensionmanager/style/base.css

@@ -49,7 +49,7 @@
   Section headers
 */
 
-.jp-extensionmanager-view .header {
+.jp-extensionmanager-view .jp-stack-panel-header {
   display: flex;
   justify-content: space-between;
   flex: 0 0 auto;
@@ -65,28 +65,34 @@
   padding: 4px;
 }
 
-.jp-extensionmanager-view .header > .jp-ToolbarButtonComponent {
+.jp-extensionmanager-view .jp-stack-panel-header > .jp-ToolbarButtonComponent {
   padding: 0px 2px;
 }
 
-.jp-extensionmanager-view .header .jp-extensionmanager-headerText {
+.jp-extensionmanager-view
+  .jp-stack-panel-header
+  .jp-extensionmanager-headerText {
   flex: 1 0 auto;
   margin: 0px 4px;
 }
 
-.jp-extensionmanager-view .header .jp-extensionmanager-headerTextDisabled {
+.jp-extensionmanager-view
+  .jp-stack-panel-header
+  .jp-extensionmanager-headerTextDisabled {
   flex: 1 0 auto;
   margin: 0px 4px;
   color: var(--jp-layout-color3);
 }
 
-.jp-extensionmanager-view .header > .jp-ToolbarButtonComponent {
+.jp-extensionmanager-view .jp-stack-panel-header > .jp-ToolbarButtonComponent {
   border: 1px solid transparent;
   background-color: var(--jp-layout-color1);
   color: var(--jp-ui-font-color1);
 }
 
-.jp-extensionmanager-view .header > .jp-ToolbarButtonComponent:hover {
+.jp-extensionmanager-view
+  .jp-stack-panel-header
+  > .jp-ToolbarButtonComponent:hover {
   /* border: 1px solid var(--jp-brand-color1); */
 }