used new Component

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

@@ -21,9 +21,9 @@ class ButtonGroup extends React.Component<Props> {
     let showSecondColor = secondColor;
 
     if (firstIsSelected) {
-      showFirstColor += " is-selected";
+      showFirstColor += "link is-selected";
     } else {
-      showSecondColor += " is-selected";
+      showSecondColor += "link is-selected";
     }
 
     return (

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 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,17 @@ class ButtonGroup extends React.Component<Props> {
     );
 
     return (
-      <div className="buttons has-addons">
+      <ButtonGroup
-        <Button
+        firstlabel={sourcesLabel}
-          label={sourcesLabel}
+        secondlabel={historyLabel}
-          color={sourcesColor}
+        firstColor=""
-          action={this.showSources}
+        secondColor=""
+        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) =>