Switch from ReactJSS to styled-components in ui-webapp

scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.js

@@ -1,9 +1,10 @@
 //@flow
 import React from "react";
-import type { Changeset, Repository } from "@scm-manager/ui-types";
 import { Interpolate, translate } from "react-i18next";
-import injectSheet from "react-jss";
-
+import classNames from "classnames";
+import styled from "styled-components";
+import type { Changeset, Repository, Tag } from "@scm-manager/ui-types";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import {
   DateFromNow,
   ChangesetId,
@@ -15,31 +16,27 @@ import {
   changesets
 } from "@scm-manager/ui-components";
 
-import classNames from "classnames";
-import type { Tag } from "@scm-manager/ui-types";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-
-const styles = {
-  spacing: {
-    marginRight: "1em"
-  },
-  tags: {
-    "& .tag": {
-      marginLeft: ".25rem"
-    }
-  }
-};
-
 type Props = {
   changeset: Changeset,
   repository: Repository,
-  t: string => string,
-  classes: any
+
+  // context props
+  t: string => string
 };
 
+const RightMarginP = styled.p`
+  margin-right: 1em;
+`;
+
+const TagsWrapper = styled.div`
+  & .tag {
+    margin-left: 0.25rem;
+  }
+`;
+
 class ChangesetDetails extends React.Component<Props> {
   render() {
-    const { changeset, repository, classes } = this.props;
+    const { changeset, repository } = this.props;
 
     const description = changesets.parseDescription(changeset.description);
 
@@ -62,20 +59,16 @@ class ChangesetDetails extends React.Component<Props> {
           </h4>
           <article className="media">
             <AvatarWrapper>
-              <p className={classNames("image", "is-64x64", classes.spacing)}>
+              <RightMarginP className={classNames("image", "is-64x64")}>
                 <AvatarImage person={changeset.author} />
-              </p>
+              </RightMarginP>
             </AvatarWrapper>
             <div className="media-content">
               <p>
                 <ChangesetAuthor changeset={changeset} />
               </p>
               <p>
-                <Interpolate
-                  i18nKey="changeset.summary"
-                  id={id}
-                  time={date}
-                />
+                <Interpolate i18nKey="changeset.summary" id={id} time={date} />
               </p>
             </div>
             <div className="media-right">{this.renderTags()}</div>
@@ -106,24 +99,22 @@ class ChangesetDetails extends React.Component<Props> {
   }
 
   getTags = () => {
-    const { changeset } = this.props;
-    return changeset._embedded.tags || [];
+    return this.props.changeset._embedded.tags || [];
   };
 
   renderTags = () => {
-    const { classes } = this.props;
     const tags = this.getTags();
     if (tags.length > 0) {
       return (
-        <div className={classNames("level-item", classes.tags)}>
+        <TagsWrapper className="level-item">
           {tags.map((tag: Tag) => {
             return <ChangesetTag key={tag.name} tag={tag} />;
           })}
-        </div>
+        </TagsWrapper>
       );
     }
     return null;
   };
 }
 
-export default injectSheet(styles)(translate("repos")(ChangesetDetails));
+export default translate("repos")(ChangesetDetails);

scm-ui/ui-webapp/src/repos/components/list/RepositoryEntry.js

@@ -18,7 +18,7 @@ class RepositoryEntry extends React.Component<Props> {
     if (repository._links["branches"]) {
       return (
         <RepositoryEntryLink
-          iconClass="fas fa-code-branch fa-lg"
+          icon="code-branch"
           to={repositoryLink + "/branches"}
         />
       );
@@ -30,7 +30,7 @@ class RepositoryEntry extends React.Component<Props> {
     if (repository._links["changesets"]) {
       return (
         <RepositoryEntryLink
-          iconClass="fas fa-exchange-alt fa-lg"
+          icon="exchange-alt"
           to={repositoryLink + "/changesets"}
         />
       );
@@ -41,10 +41,7 @@ class RepositoryEntry extends React.Component<Props> {
   renderSourcesLink = (repository: Repository, repositoryLink: string) => {
     if (repository._links["sources"]) {
       return (
-        <RepositoryEntryLink
-          iconClass="fa-code fa-lg"
-          to={repositoryLink + "/sources"}
-        />
+        <RepositoryEntryLink icon="code" to={repositoryLink + "/sources"} />
       );
     }
     return null;
@@ -54,7 +51,7 @@ class RepositoryEntry extends React.Component<Props> {
     if (repository._links["update"]) {
       return (
         <RepositoryEntryLink
-          iconClass="fa-cog fa-lg"
+          icon="cog"
           to={repositoryLink + "/settings/general"}
         />
       );

scm-ui/ui-webapp/src/repos/components/list/RepositoryEntryLink.js

@@ -1,35 +1,27 @@
-//@flow
-import React from "react";
-import { Link } from "react-router-dom";
-import injectSheet from "react-jss";
-import classNames from "classnames";
-
-const styles = {
-  link: {
-    pointerEvents: "all",
-    marginRight: "1.25rem !important"
-  }
-};
-
-type Props = {
-  to: string,
-  iconClass: string,
-
-  // context props
-  classes: any
-};
-
-class RepositoryEntryLink extends React.Component<Props> {
-  render() {
-    const { to, iconClass, classes } = this.props;
-    return (
-      <Link className={classNames("level-item", classes.link)} to={to}>
-        <span className="icon is-small">
-          <i className={classNames("fa", iconClass)} />
-        </span>
-      </Link>
-    );
-  }
-}
-
-export default injectSheet(styles)(RepositoryEntryLink);
+//@flow
+import React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import { Icon } from "@scm-manager/ui-components";
+
+type Props = {
+  to: string,
+  icon: string
+};
+
+const PointerEventsLink = styled(Link)`
+  pointer-events: all;
+`;
+
+class RepositoryEntryLink extends React.Component<Props> {
+  render() {
+    const { to, icon } = this.props;
+    return (
+      <PointerEventsLink className="level-item" to={to}>
+        <Icon className="fa-lg" name={icon} color="inherit" />
+      </PointerEventsLink>
+    );
+  }
+}
+
+export default RepositoryEntryLink;