use Tag component instead

scm-ui-components/packages/ui-components/src/repos/DiffFile.js

@@ -1,10 +1,18 @@
 //@flow
 import React from "react";
-import {Change, Diff as DiffComponent, DiffObjectProps, File, getChangeKey, Hunk} from "react-diff-view";
+import {
+  Change,
+  Diff as DiffComponent,
+  DiffObjectProps,
+  File,
+  getChangeKey,
+  Hunk
+} from "react-diff-view";
 import injectSheets from "react-jss";
 import classNames from "classnames";
-import {translate} from "react-i18next";
-import {Button, ButtonGroup} from "../buttons";
+import { translate } from "react-i18next";
+import { Button, ButtonGroup } from "../buttons";
+import Tag from "../Tag";
 
 const styles = {
   panel: {
@@ -183,24 +191,18 @@ class DiffFile extends React.Component<Props, State> {
       value = file.type;
     }
     const color =
-      value === "added"
-        ? "is-success"
-        : value === "deleted"
-          ? "is-danger"
-          : "is-info";
+      value === "added" ? "success" : value === "deleted" ? "danger" : "info";
 
     return (
-      <span
+      <Tag
         className={classNames(
-          "tag",
           "is-rounded",
           "has-text-weight-normal",
-          color,
           classes.changeType
         )}
-      >
-        {value}
-      </span>
+        color={color}
+        label={value}
+      />
     );
   };
 
@@ -232,7 +234,7 @@ class DiffFile extends React.Component<Props, State> {
         </div>
       );
     }
-    const collapseIcon = collapsible? <i className={icon} />: null;
+    const collapseIcon = collapsible ? <i className={icon} /> : null;
 
     const fileControls = fileControlFactory
       ? fileControlFactory(file, this.setCollapse)

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTag.js

@@ -10,7 +10,7 @@ type Props = {
 class ChangesetTag extends React.Component<Props> {
   render() {
     const { tag } = this.props;
-    return <ChangesetTagBase icon={"fa-tag"} label={tag.name} />;
+    return <ChangesetTagBase icon="tag" label={tag.name} />;
   }
 }
 

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTagBase.js

@@ -1,31 +1,19 @@
 //@flow
 import React from "react";
-import injectSheet from "react-jss";
-import classNames from "classnames";
-
-const styles = {
-  spacing: {
-    marginRight: ".25rem"
-  }
-};
+import Tag from "../../Tag";
 
 type Props = {
   icon: string,
-  label: string,
-
-  // context props
-  classes: Object
+  label: string
 };
 
 class ChangesetTagBase extends React.Component<Props> {
   render() {
-    const { icon, label, classes } = this.props;
+    const { icon, label } = this.props;
     return (
-      <span className={classNames("tag", "is-info")}>
-        <span className={classNames("fa", icon, classes.spacing)} /> {label}
-      </span>
+      <Tag color="info" icon={icon} label={label} />
     );
   }
 }
 
-export default injectSheet(styles)(ChangesetTagBase);
+export default ChangesetTagBase;

scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetTagsCollapsed.js

@@ -1,24 +1,27 @@
 //@flow
 import React from "react";
-import type { Tag } from "@scm-manager/ui-types";
-import ChangesetTagBase from "./ChangesetTagBase";
 import { translate } from "react-i18next";
+import type { Tag } from "@scm-manager/ui-types";
 import Tooltip from "../../Tooltip";
+import ChangesetTagBase from "./ChangesetTagBase";
 
 type Props = {
   tags: Tag[],
 
   // context props
-  t: (string) => string
+  t: string => string
 };
 
 class ChangesetTagsCollapsed extends React.Component<Props> {
   render() {
     const { tags, t } = this.props;
-    const message = tags.map((tag) => tag.name).join(", ");
+    const message = tags.map(tag => tag.name).join(", ");
     return (
       <Tooltip location="top" message={message}>
-        <ChangesetTagBase icon={"fa-tags"} label={ tags.length + " " + t("changeset.tags") } />
+        <ChangesetTagBase
+          icon="tags"
+          label={tags.length + " " + t("changeset.tags")}
+        />
       </Tooltip>
     );
   }