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);

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

@@ -1,27 +1,14 @@
 //@flow
 import React from "react";
 import { translate } from "react-i18next";
-import { Image, ErrorNotification, InputField, SubmitButton, UnauthorizedError } from "@scm-manager/ui-components";
-import classNames from "classnames";
-import injectSheet from "react-jss";
-
-const styles = {
-  avatar: {
-    marginTop: "-70px",
-    paddingBottom: "20px"
-  },
-  avatarImage: {
-    border: "1px solid lightgray",
-    padding: "5px",
-    background: "#fff",
-    borderRadius: "50%",
-    width: "128px",
-    height: "128px"
-  },
-  avatarSpacing: {
-    marginTop: "5rem"
-  }
-};
+import styled from "styled-components";
+import {
+  Image,
+  ErrorNotification,
+  InputField,
+  SubmitButton,
+  UnauthorizedError
+} from "@scm-manager/ui-components";
 
 type Props = {
   error?: Error,
@@ -29,8 +16,7 @@ type Props = {
   loginHandler: (username: string, password: string) => void,
 
   // context props
-  t: string => string,
-  classes: any
+  t: string => string
 };
 
 type State = {
@@ -38,8 +24,25 @@ type State = {
   password: string
 };
 
-class LoginForm extends React.Component<Props, State> {
+const TopMarginBox = styled.div`
+  margin-top: 5rem;
+`;
 
+const AvatarWrapper = styled.figure`
+  margin-top: -70px;
+  padding-bottom: 20px;
+`;
+
+const AvatarImage = styled(Image)`
+  width: 128px;
+  height: 128px;
+  padding: 5px;
+  background: #fff;
+  border: 1px solid lightgray;
+  border-radius: 50%;
+`;
+
+class LoginForm extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = { username: "", password: "" };
@@ -48,10 +51,7 @@ class LoginForm extends React.Component<Props, State> {
   handleSubmit = (event: Event) => {
     event.preventDefault();
     if (this.isValid()) {
-      this.props.loginHandler(
-        this.state.username,
-        this.state.password
-      );
+      this.props.loginHandler(this.state.username, this.state.password);
     }
   };
 
@@ -77,20 +77,16 @@ class LoginForm extends React.Component<Props, State> {
   }
 
   render() {
-    const { loading, classes, t } = this.props;
+    const { loading, t } = this.props;
     return (
       <div className="column is-4 box has-text-centered has-background-white-ter">
         <h3 className="title">{t("login.title")}</h3>
         <p className="subtitle">{t("login.subtitle")}</p>
-        <div className={classNames("box", classes.avatarSpacing)}>
-          <figure className={classes.avatar}>
-            <Image
-              className={classes.avatarImage}
-              src="/images/blib.jpg"
-              alt={t("login.logo-alt")}
-            />
-          </figure>
-          <ErrorNotification error={this.areCredentialsInvalid()}/>
+        <TopMarginBox className="box">
+          <AvatarWrapper>
+            <AvatarImage src="/images/blib.jpg" alt={t("login.logo-alt")} />
+          </AvatarWrapper>
+          <ErrorNotification error={this.areCredentialsInvalid()} />
           <form onSubmit={this.handleSubmit}>
             <InputField
               placeholder={t("login.username-placeholder")}
@@ -108,13 +104,10 @@ class LoginForm extends React.Component<Props, State> {
               loading={loading}
             />
           </form>
-        </div>
+        </TopMarginBox>
       </div>
     );
   }
-
 }
 
-export default injectSheet(styles)(translate("commons")(LoginForm));
-
-
+export default translate("commons")(LoginForm);