Merged in feature/btn_spacing (pull request #168)

Feature/btn spacing

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

@@ -39,7 +39,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 });
   }
 

scm-ui-components/packages/ui-components/src/buttons/ButtonGroup.js

@@ -0,0 +1,44 @@
+// @flow
+import React from "react";
+import Button from "./Button";
+
+type Props = {
+  firstlabel: string,
+  secondlabel: string,
+  firstAction?: (event: Event) => void,
+  secondAction?: (event: Event) => void,
+  firstIsSelected: boolean
+};
+
+class ButtonGroup extends React.Component<Props> {
+
+  render() {
+    const { firstlabel, secondlabel, firstAction, secondAction, firstIsSelected } = this.props;
+
+    let showFirstColor = "";
+    let showSecondColor = "";
+
+    if (firstIsSelected) {
+      showFirstColor += "link is-selected";
+    } else {
+      showSecondColor += "link is-selected";
+    }
+
+    return (
+      <div className="buttons has-addons">
+        <Button
+          label={firstlabel}
+          color={showFirstColor}
+          action={firstAction}
+        />
+        <Button
+          label={secondlabel}
+          color={showSecondColor}
+          action={secondAction}
+        />
+      </div>
+    );
+  }
+}
+
+export default ButtonGroup;

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

@@ -5,6 +5,9 @@ export { default as Button } from "./Button.js";
 export { default as CreateButton } from "./CreateButton.js";
 export { default as DeleteButton } from "./DeleteButton.js";
 export { default as EditButton } from "./EditButton.js";
-export { default as RemoveEntryOfTableButton } from "./RemoveEntryOfTableButton.js";
 export { default as SubmitButton } from "./SubmitButton.js";
 export { default as DownloadButton } from "./DownloadButton.js";
+export { default as ButtonGroup } from "./ButtonGroup.js";
+export {
+  default as RemoveEntryOfTableButton
+} from "./RemoveEntryOfTableButton.js";

scm-ui/src/repos/sources/components/content/FileButtonGroup.js

@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
-import { Button } from "@scm-manager/ui-components";
+import { ButtonGroup } from "@scm-manager/ui-components";
 
 type Props = {
   t: string => string,
@@ -9,7 +9,7 @@ type Props = {
   showHistory: boolean => void
 };
 
-class ButtonGroup extends React.Component<Props> {
+class FileButtonGroup extends React.Component<Props> {
   showHistory = () => {
     this.props.showHistory(true);
   };
@@ -21,15 +21,6 @@ class ButtonGroup extends React.Component<Props> {
   render() {
     const { t, historyIsSelected } = this.props;
 
-    let sourcesColor = "";
-    let historyColor = "";
-
-    if (historyIsSelected) {
-      historyColor = "link is-selected";
-    } else {
-      sourcesColor = "link is-selected";
-    }
-
     const sourcesLabel = (
       <>
         <span className="icon">
@@ -53,20 +44,15 @@ class ButtonGroup extends React.Component<Props> {
     );
 
     return (
-      <div className="buttons has-addons">
-        <Button
-          label={sourcesLabel}
-          color={sourcesColor}
-          action={this.showSources}
+      <ButtonGroup
+        firstlabel={sourcesLabel}
+        secondlabel={historyLabel}
+        firstAction={this.showSources}
+        secondAction={this.showHistory}
+        firstIsSelected={!historyIsSelected}
       />
-        <Button
-          label={historyLabel}
-          color={historyColor}
-          action={this.showHistory}
-        />
-      </div>
     );
   }
 }
 
-export default translate("repos")(ButtonGroup);
+export default translate("repos")(FileButtonGroup);

scm-ui/src/repos/sources/containers/Content.js

@@ -6,7 +6,7 @@ import { DateFromNow } from "@scm-manager/ui-components";
 import FileSize from "../components/FileSize";
 import injectSheet from "react-jss";
 import classNames from "classnames";
-import ButtonGroup from "../components/content/ButtonGroup";
+import FileButtonGroup from "../components/content/FileButtonGroup";
 import SourcesView from "./SourcesView";
 import HistoryView from "./HistoryView";
 import { getSources } from "../modules/sources";
@@ -76,7 +76,7 @@ class Content extends React.Component<Props, State> {
     const icon = collapsed ? "fa-angle-right" : "fa-angle-down";
 
     const selector = file._links.history ? (
-      <ButtonGroup
+      <FileButtonGroup
         file={file}
         historyIsSelected={showHistory}
         showHistory={(changeShowHistory: boolean) =>