Switch from ReactJSS to styled-components in ui-webapp

scm-ui/ui-webapp/src/components/InfoBox.js

@@ -1,84 +1,83 @@
 //@flow
 import * as React from "react";
-import injectSheet from "react-jss";
-import classNames from "classnames";
 import { translate } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
 import type { InfoItem } from "./InfoItem";
-
-const styles = {
-  image: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    width: 160,
-    height: 160
-  },
-  icon: {
-    color: "#bff1e6"
-  },
-  label: {
-    marginTop: "0.5em"
-  },
-  content: {
-    marginLeft: "1.5em",
-    minHeight: "10.5rem"
-  },
-  link: {
-    display: "block",
-    marginBottom: "1.5rem"
-  }
-};
+import { Icon } from "@scm-manager/ui-components";
 
 type Props = {
   type: "plugin" | "feature",
   item: InfoItem,
 
   // context props
-  classes: any,
   t: string => string
 };
 
-class InfoBox extends React.Component<Props> {
+const BottomMarginA = styled.a`
+  display: blocK;
+  margin-bottom: 1.5rem;
+`;
 
+const FixedSizedIconWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 160px;
+  height: 160px;
+`;
+
+const LightBlueIcon = styled(Icon)`
+  margin-bottom: 0.5em;
+  color: #bff1e6;
+`;
+
+const ContentWrapper = styled.div`
+  min-height: 1.5rem;
+  margin-left: 1.5em;
+`;
+
+class InfoBox extends React.Component<Props> {
   renderBody = () => {
     const { item, t } = this.props;
-
-    const bodyClasses = classNames("media-content", "content", this.props.classes.content);
     const title = item ? item.title : t("login.loading");
     const summary = item ? item.summary : t("login.loading");
 
     return (
-      <div className={bodyClasses}>
+      <ContentWrapper className={classNames("media-content", "content")}>
         <h4 className="has-text-link">{title}</h4>
         <p>{summary}</p>
-      </div>
+      </ContentWrapper>
     );
-
   };
 
   render() {
-    const { item, type, classes, t } = this.props;
+    const { item, type, t } = this.props;
     const icon = type === "plugin" ? "puzzle-piece" : "star";
     return (
-      <a href={item._links.self.href} className={classes.link}>
+      <BottomMarginA href={item._links.self.href}>
         <div className="box media">
           <figure className="media-left">
-            <div
-              className={classNames("image", "box", "has-background-info", "has-text-white", "has-text-weight-bold", classes.image)}>
-              <i className={classNames("fas", "fa-" + icon, "fa-2x", classes.icon)}/>
-              <div className={classNames("is-size-4", classes.label)}>{t("login." + type)}</div>
-              <div className={classNames("is-size-4")}>{t("login.tip")}</div>
-            </div>
+            <FixedSizedIconWrapper
+              className={classNames(
+                "image",
+                "box",
+                "has-text-weight-bold",
+                "has-text-white",
+                "has-background-info"
+              )}
+            >
+              <LightBlueIcon className="fa-2x" name={icon} color="inherit" />
+              <div className="is-size-4">{t("login." + type)}</div>
+              <div className="is-size-4">{t("login.tip")}</div>
+            </FixedSizedIconWrapper>
           </figure>
           {this.renderBody()}
         </div>
-      </a>
+      </BottomMarginA>
     );
   }
-
 }
 
-export default injectSheet(styles)(translate("commons")(InfoBox));
-
-
+export default translate("commons")(InfoBox);