Fix styling (#1289)

Author: fcollonval

src/components/CommitBox.tsx

@@ -223,9 +223,8 @@ export class CommitBox extends React.Component<
           </Button>
           <Button
             classes={{
-              root: commitButtonClass
+              root: classes(commitButtonClass, commitVariantSelector)
             }}
-            className={commitVariantSelector}
             size="small"
             aria-controls={this.state.open ? 'split-button-menu' : undefined}
             aria-expanded={this.state.open ? 'true' : undefined}
@@ -245,10 +244,7 @@ export class CommitBox extends React.Component<
         >
           {({ TransitionProps }) => (
             <Grow {...TransitionProps}>
-              <Paper
-                classes={{ root: commitRoot }}
-                className={commitPaperClass}
-              >
+              <Paper classes={{ root: classes(commitRoot, commitPaperClass) }}>
                 <ClickAwayListener onClickAway={this._handleClose}>
                   <MenuList id="split-button-menu">
                     {this._options.map((option, index) => (

src/components/CommitMessage.tsx

@@ -1,6 +1,7 @@
 import { TranslationBundle } from '@jupyterlab/translation';
 import Input from '@mui/material/Input';
 import * as React from 'react';
+import { classes } from 'typestyle';
 import {
   activeStyle,
   commitDescriptionClass,
@@ -106,9 +107,8 @@ export function CommitMessage(props: ICommitMessageProps): JSX.Element {
   return (
     <React.Fragment>
       <Input
-        className={commitSummaryClass}
         classes={{
-          root: commitRoot,
+          root: classes(commitRoot, commitSummaryClass),
           focused: activeStyle,
           disabled: disabledStyle
         }}
@@ -132,9 +132,8 @@ export function CommitMessage(props: ICommitMessageProps): JSX.Element {
         fullWidth={true}
       />
       <Input
-        className={commitDescriptionClass}
         classes={{
-          root: commitRoot,
+          root: classes(commitRoot, commitDescriptionClass),
           focused: activeStyle,
           disabled: disabledStyle
         }}

src/components/RebaseAction.tsx

@@ -10,6 +10,7 @@ import MenuList from '@mui/material/MenuList';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import React from 'react';
+import { classes } from 'typestyle';
 import {
   commitButtonClass,
   commitPaperClass,
@@ -100,9 +101,8 @@ export function RebaseAction(props: IRebaseActionProps): JSX.Element {
         <Button
           title={props.trans.__('Pick another rebase action.')}
           classes={{
-            root: commitButtonClass
+            root: classes(commitButtonClass, commitVariantSelector)
           }}
-          className={commitVariantSelector}
           onClick={onToggle}
           size="small"
           aria-controls={open ? 'rebase-split-button-menu' : undefined}
@@ -114,7 +114,7 @@ export function RebaseAction(props: IRebaseActionProps): JSX.Element {
       <Popper open={open} anchorEl={anchor.current} transition disablePortal>
         {({ TransitionProps }) => (
           <Grow {...TransitionProps}>
-            <Paper classes={{ root: commitRoot }} className={commitPaperClass}>
+            <Paper classes={{ root: classes(commitRoot, commitPaperClass) }}>
               <ClickAwayListener onClickAway={onClose}>
                 <MenuList id="rebase-split-button-menu">
                   <MenuItem

src/components/WarningBox.tsx

@@ -2,6 +2,7 @@ import { CardContent } from '@mui/material';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import * as React from 'react';
+import { classes } from 'typestyle';
 import {
   commitRoot,
   dirtyStagedFilesWarningBoxClass,
@@ -34,9 +35,8 @@ export function WarningBox(props: IWarningBoxProps): JSX.Element {
   return (
     <Card
       classes={{
-        root: commitRoot
+        root: classes(commitRoot, dirtyStagedFilesWarningBoxClass)
       }}
-      className={dirtyStagedFilesWarningBoxClass}
       variant="outlined"
     >
       <CardHeader

src/style/CommitBox.ts

@@ -101,9 +101,12 @@ export const commitButtonClass = style({
 
 export const commitVariantSelector = style({
   flex: '0 0 20px',
-  lineHeight: 'initial',
+  lineHeight: 'initial !important',
 
   $nest: {
+    '& span': {
+      lineHeight: '0'
+    },
     '& .jp-icon3[fill]': {
       fill: 'var(--jp-ui-inverse-font-color1)'
     }
@@ -131,7 +134,7 @@ export const commitRoot = style({
   color: 'var(--jp-ui-font-color1) !important',
   fontSize: 'var(--jp-ui-font-size1) !important',
   fontFamily: 'var(--jp-ui-font-family) !important',
-  backgroundColor: 'var(--jp-layout-color1)'
+  backgroundColor: 'var(--jp-layout-color1) !important'
 });
 
 export const activeStyle = style({

src/style/GitPanel.ts

@@ -54,6 +54,7 @@ export const tabClass = style({
   maxWidth: '50%!important',
   minHeight: '36px!important',
 
+  color: 'var(--jp-ui-font-color1)!important',
   backgroundColor: 'var(--jp-layout-color2)!important',
 
   borderBottom: