Switch from ReactJSS to styled-components in ui-webapp

scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.js

@@ -1,30 +1,21 @@
 // @flow
 import * as React from "react";
-import classNames from "classnames";
-import injectSheet from "react-jss";
-
-const styles = {
-  container: {
-    border: "2px solid #e9f7fd",
-    padding: "1em 1em",
-    marginTop: "2em",
-    display: "flex",
-    justifyContent: "center"
-  }
-};
+import styled from "styled-components";
 
 type Props = {
-  children?: React.Node,
-
-  // context props
-  classes: any
+  children?: React.Node
 };
 
-class PluginBottomActions extends React.Component<Props> {
+const ActionWrapper = styled.div`
+  justify-content: center;
+  margin-top: 2em;
+  padding: 1em 1em;
+  border: 2px solid #e9f7df;
+`;
+
+export default class PluginBottomActions extends React.Component<Props> {
   render() {
-    const { children, classes } = this.props;
-    return <div className={classNames(classes.container)}>{children}</div>;
+    const { children } = this.props;
+    return <ActionWrapper className="is-flex">{children}</ActionWrapper>;
   }
 }
-
-export default injectSheet(styles)(PluginBottomActions);

scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.js

@@ -1,11 +1,11 @@
 //@flow
 import React from "react";
-import injectSheet from "react-jss";
 import { translate } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
 import type { Plugin } from "@scm-manager/ui-types";
 import { CardColumn, Icon } from "@scm-manager/ui-components";
 import PluginAvatar from "./PluginAvatar";
-import classNames from "classnames";
 import PluginModal from "./PluginModal";
 
 export const PluginAction = {
@@ -19,7 +19,6 @@ type Props = {
   refresh: () => void,
 
   // context props
-  classes: any,
   t: string => string
 };
 
@@ -29,25 +28,24 @@ type State = {
   showUninstallModal: boolean
 };
 
-const styles = {
-  link: {
-    cursor: "pointer",
-    pointerEvents: "all",
-    marginBottom: "0 !important",
-    padding: "0.5rem",
-    border: "solid 1px #cdcdcd", // $dark-25
-    borderRadius: "4px",
-    "&:hover": {
-      borderColor: "#9a9a9a" // $dark-50
-    }
-  },
-  actionbar: {
-    display: "flex",
-    "& span + span": {
-      marginLeft: "0.5rem"
-    }
+const ActionbarWrapper = styled.div`
+  & span + span {
+    margin-left: 0.5rem;
   }
-};
+`;
+
+const IconWrapper = styled.span`
+  margin-bottom: 0 !important;
+  padding: 0.5rem;
+  border: 1px solid #cdcdcd; // $dark-25
+  border-radius: 4px;
+  cursor: pointer;
+  pointer-events: all;
+
+  &:hover {
+    border-color: #9a9a9a; // $dark-50
+  }
+`;
 
 class PluginEntry extends React.Component<Props, State> {
   constructor(props: Props) {
@@ -91,34 +89,46 @@ class PluginEntry extends React.Component<Props, State> {
   };
 
   createActionbar = () => {
-    const { classes, t } = this.props;
+    const { t } = this.props;
     return (
-      <div className={classes.actionbar}>
+      <ActionbarWrapper className="is-flex">
         {this.isInstallable() && (
-          <span
-            className={classNames(classes.link, "level-item")}
+          <IconWrapper
+            className="level-item"
             onClick={() => this.toggleModal("showInstallModal")}
           >
-            <Icon title={t("plugins.modal.install")} name="download" color="info" />
-          </span>
+            <Icon
+              title={t("plugins.modal.install")}
+              name="download"
+              color="info"
+            />
+          </IconWrapper>
         )}
         {this.isUninstallable() && (
-          <span
-            className={classNames(classes.link, "level-item")}
+          <IconWrapper
+            className="level-item"
             onClick={() => this.toggleModal("showUninstallModal")}
           >
-            <Icon title={t("plugins.modal.uninstall")} name="trash" color="info" />
-          </span>
+            <Icon
+              title={t("plugins.modal.uninstall")}
+              name="trash"
+              color="info"
+            />
+          </IconWrapper>
         )}
         {this.isUpdatable() && (
-          <span
-            className={classNames(classes.link, "level-item")}
+          <IconWrapper
+            className="level-item"
             onClick={() => this.toggleModal("showUpdateModal")}
           >
-            <Icon title={t("plugins.modal.update")} name="sync-alt" color="info" />
-          </span>
+            <Icon
+              title={t("plugins.modal.update")}
+              name="sync-alt"
+              color="info"
+            />
+          </IconWrapper>
         )}
-      </div>
+      </ActionbarWrapper>
     );
   };
 
@@ -157,16 +167,13 @@ class PluginEntry extends React.Component<Props, State> {
   };
 
   createPendingSpinner = () => {
-    const { plugin, classes } = this.props;
+    const { plugin } = this.props;
     return (
-      <span className={classes.topRight}>
-        <i
-          className={classNames(
-            "fas fa-spinner fa-lg fa-spin",
-            plugin.markedForUninstall ? "has-text-danger" : "has-text-info"
-          )}
-        />
-      </span>
+      <Icon
+        className="fa-spin fa-lg"
+        name="spinner"
+        color={plugin.markedForUninstall ? "danger" : "info"}
+      />
     );
   };
 
@@ -202,4 +209,4 @@ class PluginEntry extends React.Component<Props, State> {
   }
 }
 
-export default injectSheet(styles)(translate("admin")(PluginEntry));
+export default translate("admin")(PluginEntry);

scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.js

@@ -1,8 +1,8 @@
 //@flow
 import React from "react";
-import { compose } from "redux";
 import { translate } from "react-i18next";
-import injectSheet from "react-jss";
+import classNames from "classnames";
+import styled from "styled-components";
 import type { Plugin } from "@scm-manager/ui-types";
 import {
   apiClient,
@@ -13,7 +13,6 @@ import {
   Modal,
   Notification
 } from "@scm-manager/ui-components";
-import classNames from "classnames";
 import waitForRestart from "./waitForRestart";
 import SuccessNotification from "./SuccessNotification";
 import { PluginAction } from "./PluginEntry";
@@ -25,7 +24,6 @@ type Props = {
   onClose: () => void,
 
   // context props
-  classes: any,
   t: (key: string, params?: Object) => string
 };
 
@@ -36,21 +34,16 @@ type State = {
   error?: Error
 };
 
-const styles = {
-  userLabelAlignment: {
-    textAlign: "left",
-    marginRight: 0
-  },
-  userLabelMarginSmall: {
-    minWidth: "5.5em"
-  },
-  userLabelMarginLarge: {
-    minWidth: "10em"
-  },
-  userFieldFlex: {
-    flexGrow: 4
-  }
-};
+const ListParent = styled.div`
+  margin-right: 0;
+  min-width: ${props =>
+    props.pluginAction === PluginAction.INSTALL ? "5.5em" : "10em"};
+  text-align: left;
+`;
+
+const ListChild = styled.div`
+  flex-grow: 4;
+`;
 
 class PluginModal extends React.Component<Props, State> {
   constructor(props: Props) {
@@ -151,7 +144,7 @@ class PluginModal extends React.Component<Props, State> {
   };
 
   renderDependencies() {
-    const { plugin, classes, t } = this.props;
+    const { plugin, t } = this.props;
 
     let dependencies = null;
     if (plugin.dependencies && plugin.dependencies.length > 0) {
@@ -159,7 +152,7 @@ class PluginModal extends React.Component<Props, State> {
         <div className="media">
           <Notification type="warning">
             <strong>{t("plugins.modal.dependencyNotification")}</strong>
-            <ul className={classes.listSpacing}>
+            <ul>
               {plugin.dependencies.map((dependency, index) => {
                 return <li key={index}>{dependency}</li>;
               })}
@@ -206,7 +199,7 @@ class PluginModal extends React.Component<Props, State> {
 
   render() {
     const { restart } = this.state;
-    const { plugin, pluginAction, onClose, classes, t } = this.props;
+    const { plugin, pluginAction, onClose, t } = this.props;
 
     const body = (
       <>
@@ -218,88 +211,58 @@ class PluginModal extends React.Component<Props, State> {
         <div className="media">
           <div className="media-content">
             <div className="field is-horizontal">
-              <div
-                className={classNames(
-                  classes.userLabelAlignment,
-                  pluginAction === PluginAction.INSTALL
-                    ? classes.userLabelMarginSmall
-                    : classes.userLabelMarginLarge,
-                  "field-label is-inline-flex"
-                )}
+              <ListParent
+                className={classNames("field-label", "is-inline-flex")}
+                pluginAction={pluginAction}
               >
                 {t("plugins.modal.author")}:
-              </div>
-              <div
-                className={classNames(
-                  classes.userFieldFlex,
-                  "field-body is-inline-flex"
-                )}
-              >
+              </ListParent>
+              <ListChild className={classNames("field-body", "is-inline-flex")}>
                 {plugin.author}
-              </div>
+              </ListChild>
             </div>
             {pluginAction === PluginAction.INSTALL && (
               <div className="field is-horizontal">
-                <div
-                  className={classNames(
-                    classes.userLabelAlignment,
-                    classes.userLabelMarginSmall,
-                    "field-label is-inline-flex"
-                  )}
+                <ListParent
+                  className={classNames("field-label", "is-inline-flex")}
+                  pluginAction={pluginAction}
                 >
                   {t("plugins.modal.version")}:
-                </div>
-                <div
-                  className={classNames(
-                    classes.userFieldFlex,
-                    "field-body is-inline-flex"
-                  )}
+                </ListParent>
+                <ListChild
+                  className={classNames("field-body", "is-inline-flex")}
                 >
                   {plugin.version}
-                </div>
+                </ListChild>
               </div>
             )}
             {(pluginAction === PluginAction.UPDATE ||
               pluginAction === PluginAction.UNINSTALL) && (
               <div className="field is-horizontal">
-                <div
-                  className={classNames(
-                    classes.userLabelAlignment,
-                    classes.userLabelMarginLarge,
-                    "field-label is-inline-flex"
-                  )}
+                <ListParent
+                  className={classNames("field-label", "is-inline-flex")}
                 >
                   {t("plugins.modal.currentVersion")}:
-                </div>
-                <div
-                  className={classNames(
-                    classes.userFieldFlex,
-                    "field-body is-inline-flex"
-                  )}
+                </ListParent>
+                <ListChild
+                  className={classNames("field-body", "is-inline-flex")}
                 >
                   {plugin.version}
-                </div>
+                </ListChild>
               </div>
             )}
             {pluginAction === PluginAction.UPDATE && (
               <div className="field is-horizontal">
-                <div
-                  className={classNames(
-                    classes.userLabelAlignment,
-                    classes.userLabelMarginLarge,
-                    "field-label is-inline-flex"
-                  )}
+                <ListParent
+                  className={classNames("field-label", "is-inline-flex")}
                 >
                   {t("plugins.modal.newVersion")}:
-                </div>
-                <div
-                  className={classNames(
-                    classes.userFieldFlex,
-                    "field-body is-inline-flex"
-                  )}
+                </ListParent>
+                <ListChild
+                  className={classNames("field-body", "is-inline-flex")}
                 >
                   {plugin.newVersion}
-                </div>
+                </ListChild>
               </div>
             )}
             {this.renderDependencies()}
@@ -333,7 +296,4 @@ class PluginModal extends React.Component<Props, State> {
   }
 }
 
-export default compose(
-  injectSheet(styles),
-  translate("admin")
-)(PluginModal);
+export default translate("admin")(PluginModal);

scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.js

@@ -1,32 +1,31 @@
 // @flow
 import * as React from "react";
 import classNames from "classnames";
-import injectSheet from "react-jss";
-
-const styles = {
-  container: {
-    display: "flex",
-    justifyContent: "flex-end",
-    alignItems: "center"
-  }
-};
+import styled from "styled-components";
 
 type Props = {
-  children?: React.Node,
-
-  // context props
-  classes: any
+  children?: React.Node
 };
 
-class PluginTopActions extends React.Component<Props> {
+const ChildWrapper = styled.div`
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+export default class PluginTopActions extends React.Component<Props> {
   render() {
-    const { children, classes } = this.props;
+    const { children } = this.props;
     return (
-      <div className={classNames(classes.container, "column", "is-one-fifths", "is-mobile-action-spacing")}>
+      <ChildWrapper
+        className={classNames(
+          "column",
+          "is-flex",
+          "is-one-fifths",
+          "is-mobile-action-spacing"
+        )}
+      >
         {children}
-      </div>
+      </ChildWrapper>
     );
   }
 }
-
-export default injectSheet(styles)(PluginTopActions);