Switch from ReactJSS to styled-components in ui-webapp

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