Add header and style

src/components/SubModuleMenu.tsx

@@ -8,6 +8,7 @@ import {
   nameClass,
   wrapperClass
 } from '../style/BranchMenu';
+import { subModuleHeaderStyle } from '../style/SubModuleMenuStyle';
 import { desktopIcon } from '../style/icons';
 import { Git, IGitExtension } from '../tokens';
 
@@ -75,24 +76,27 @@ export class SubModuleMenu extends React.Component<
     const subModules = this.props.subModules;
 
     return (
-      <FixedSizeList
-        height={Math.min(
-          Math.max(MIN_HEIGHT, subModules.length * ITEM_HEIGHT),
-          MAX_HEIGHT
-        )}
-        itemCount={subModules.length}
-        itemData={subModules}
-        itemKey={(index, data) => data[index].name}
-        itemSize={ITEM_HEIGHT}
-        style={{
-          overflowX: 'hidden',
-          paddingTop: 0,
-          paddingBottom: 0
-        }}
-        width={'auto'}
-      >
-        {this._renderItem}
-      </FixedSizeList>
+      <>
+        <div className={subModuleHeaderStyle}>SubModules</div>
+        <FixedSizeList
+          height={Math.min(
+            Math.max(MIN_HEIGHT, subModules.length * ITEM_HEIGHT),
+            MAX_HEIGHT
+          )}
+          itemCount={subModules.length}
+          itemData={subModules}
+          itemKey={(index, data) => data[index].name}
+          itemSize={ITEM_HEIGHT}
+          style={{
+            overflowX: 'hidden',
+            paddingTop: 0,
+            paddingBottom: 0
+          }}
+          width={'auto'}
+        >
+          {this._renderItem}
+        </FixedSizeList>
+      </>
     );
   }
 

src/components/Toolbar.tsx

@@ -100,7 +100,6 @@ export interface IToolbarProps {
   /**
    * Current list of submodules
    */
-
   subModules: Git.ISubModule[];
 }
 

src/style/SubModuleMenuStyle.ts

@@ -0,0 +1,12 @@
+import { style } from 'typestyle';
+
+export const subModuleHeaderStyle = style({
+  padding: '4px 4px 1px',
+  margin: '0 6px',
+  fontWeight: 600,
+  letterSpacing: '1px',
+  fontSize: '12px',
+  overflowY: 'hidden',
+  borderBottom: '3px solid var(--jp-brand-color1)',
+  height: '16px'
+});