split out enabled style for branch select button

Author: telamonian

src/components/Toolbar.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classes } from 'typestyle';
 import { Dialog, showDialog } from '@jupyterlab/apputils';
 import { PathExt } from '@jupyterlab/coreutils';
+
 import {
   // NOTE: keep in alphabetical order
   branchIconClass,
@@ -14,6 +15,7 @@ import {
   toolbarButtonClass,
   toolbarClass,
   toolbarMenuButtonClass,
+  toolbarMenuButtonEnabledClass,
   toolbarMenuButtonIconClass,
   toolbarMenuButtonSubtitleClass,
   toolbarMenuButtonTitleClass,
@@ -248,7 +250,10 @@ export class Toolbar extends React.Component<IToolbarProps, IToolbarState> {
     return (
       <div className={toolbarMenuWrapperClass}>
         <button
-          className={toolbarMenuButtonClass}
+          className={classes(
+            toolbarMenuButtonClass,
+            toolbarMenuButtonEnabledClass
+          )}
           title={`Change the current branch: ${this.state.branch}`}
           onClick={this._onBranchClick}
         >

src/style/Toolbar.ts

@@ -50,8 +50,10 @@ export const toolbarMenuButtonClass = style({
   border: 'none',
   borderRadius: 0,
 
-  background: 'var(--jp-layout-color1)',
+  background: 'var(--jp-layout-color1)'
+});
 
+export const toolbarMenuButtonEnabledClass = style({
   $nest: {
     '&:hover': {
       backgroundColor: 'var(--jp-layout-color2)'