replaced self-hacked™ solution with bulma panels for changesets

scm-ui-components/packages/ui-components/src/BranchSelector.js

@@ -2,7 +2,6 @@
 
 import React from "react";
 import type { Branch } from "@scm-manager/ui-types";
-import TableHeader from "./TableHeader";
 import injectSheet from "react-jss";
 import classNames from "classnames";
 import DropDown from "./forms/DropDown";
@@ -13,6 +12,12 @@ const styles = {
   },
   minWidthOfLabel: {
     minWidth: "4.5rem"
+  },
+  labelSizing: {
+    fontSize: "1rem !important"
+  },
+  noBottomMargin: {
+    marginBottom: "0 !important"
   }
 };
 
@@ -35,7 +40,9 @@ class BranchSelector extends React.Component<Props, State> {
   }
 
   componentDidMount() {
-    const selectedBranch = this.props.branches.find(branch => branch.name === this.props.selectedBranch);
+    const selectedBranch = this.props.branches.find(
+      branch => branch.name === this.props.selectedBranch
+    );
     this.setState({ selectedBranch });
   }
 
@@ -44,7 +51,13 @@ class BranchSelector extends React.Component<Props, State> {
 
     if (branches) {
       return (
-        <TableHeader>
+        <div
+          className={classNames(
+            "field",
+            "is-horizontal",
+            classes.noBottomMargin
+          )}
+        >
           <div
             className={classNames(
               "field-label",
@@ -53,10 +66,14 @@ class BranchSelector extends React.Component<Props, State> {
               classes.minWidthOfLabel
             )}
           >
-            <label className="label">{label}</label>
+            <label className={classNames("label", classes.labelSizing)}>
+              {label}
+            </label>
           </div>
           <div className="field-body">
-            <div className="field is-narrow">
+            <div
+              className={classNames("field is-narrow", classes.noBottomMargin)}
+            >
               <div className="control">
                 <DropDown
                   className="is-fullwidth"
@@ -71,7 +88,7 @@ class BranchSelector extends React.Component<Props, State> {
               </div>
             </div>
           </div>
-        </TableHeader>
+        </div>
       );
     } else {
       return null;

scm-ui-components/packages/ui-components/src/TableHeader.js

@@ -1,35 +0,0 @@
-//@flow
-import * as React from "react";
-import classNames from "classnames";
-import injectSheet from "react-jss";
-
-type Props = {
-  children?: React.Node,
-  classes: Object
-};
-
-const styles = {
-  wrapper: {
-    padding: "1rem 1.5rem 0.25rem 1.5rem",
-    borderBottom: "1px solid #dbdbdb"
-  }
-};
-
-class TableHeader extends React.Component<Props> {
-  render() {
-    const { classes, children } = this.props;
-    return (
-      <div
-        className={classNames(
-          "has-background-light field",
-          "is-horizontal",
-          classes.wrapper
-        )}
-      >
-        {children}
-      </div>
-    );
-  }
-}
-
-export default injectSheet(styles)(TableHeader);

scm-ui-components/packages/ui-components/src/index.js

@@ -25,7 +25,6 @@ export { default as Tooltip } from "./Tooltip";
 export { getPageFromMatch } from "./urls";
 export { default as Autocomplete} from "./Autocomplete";
 export { default as BranchSelector } from "./BranchSelector";
-export { default as TableHeader } from "./TableHeader";
 
 export { apiClient, NOT_FOUND_ERROR, UNAUTHORIZED_ERROR, CONFLICT_ERROR } from "./apiclient.js";
 

scm-ui/src/repos/containers/ChangesetsRoot.js

@@ -89,10 +89,12 @@ class BranchRoot extends React.Component<Props> {
     const changesets = <Changesets repository={repository} branch={branch} />;
 
     return (
-      <div className="has-border-around is-round">
+      <nav className="panel">
+        <article className="panel-heading">
         {this.renderBranchSelector()}
+        </article>
         <Route path={`${url}/:page?`} component={() => changesets} />
-      </div>
+      </nav>
     );
   }