Switch from ReactJSS to styled-components in ui-webapp

scm-ui/ui-webapp/src/admin/containers/AdminDetails.js

@@ -1,83 +1,95 @@
 // @flow
 import React from "react";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
-import injectSheet from "react-jss";
+import { translate } from "react-i18next";
-import {translate} from "react-i18next";
+import styled from "styled-components";
-import classNames from "classnames";
+import { Image, Loading, Subtitle, Title } from "@scm-manager/ui-components";
-import {Image, Loading, Subtitle, Title} from "@scm-manager/ui-components";
+import { getAppVersion } from "../../modules/indexResource";
-import {getAppVersion} from "../../modules/indexResource";
 
 type Props = {
   loading: boolean,
   error: Error,
-
   version: string,
 
   // context props
-  classes: any,
   t: string => string
 };
 
-const styles = {
+const BoxShadowBox = styled.div`
-  boxShadow: {
+  box-shadow: 0 2px 3px rgba(40, 177, 232, 0.1),
-    boxShadow: "0 2px 3px rgba(40, 177, 232, 0.1), 0 0 0 2px rgb(40, 177, 232, 0.2)"
+    0 0 0 2px rgba(40, 177, 232, 0.2);
-  },
+`;
-  boxTitle: {
+
-    fontWeight: "500 !important"
+const ImageWrapper = styled.div`
-  },
+  padding: 0.2rem 0.4rem;
-  imagePadding: {
+`;
-    padding: "0.2rem 0.4rem"
-  }
-};
 
 class AdminDetails extends React.Component<Props> {
   render() {
-    const {loading, classes, t} = this.props;
+    const { loading, t } = this.props;
 
     if (loading) {
-      return <Loading/>;
+      return <Loading />;
     }
 
     return (
       <>
-        <Title title={t("admin.info.currentAppVersion")}/>
+        <Title title={t("admin.info.currentAppVersion")} />
-        <Subtitle subtitle={this.props.version}/>
+        <Subtitle subtitle={this.props.version} />
-        <div className={classNames("box", classes.boxShadow)}>
+        <BoxShadowBox className="box">
           <article className="media">
-            <div className={classNames("media-left", classes.imagePadding)}>
+            <ImageWrapper className="media-left">
               <Image
                 src="/images/iconCommunitySupport.png"
                 alt={t("admin.info.communityIconAlt")}
               />
-            </div>
+            </ImageWrapper>
             <div className="media-content">
               <div className="content">
-                <h3 className={classes.boxTitle}>{t("admin.info.communityTitle")}</h3>
+                <h3 className="has-text-weight-medium">
+                  {t("admin.info.communityTitle")}
+                </h3>
                 <p>{t("admin.info.communityInfo")}</p>
-                <a className="button is-info is-pulled-right" target="_blank"
+                <a
-                   href="https://scm-manager.org/support/">{t("admin.info.communityButton")}</a>
+                  className="button is-info is-pulled-right"
+                  target="_blank"
+                  href="https://scm-manager.org/support/"
+                >
+                  {t("admin.info.communityButton")}
+                </a>
               </div>
             </div>
           </article>
-        </div>
+        </BoxShadowBox>
-        <div className={classNames("box", classes.boxShadow)}>
+        <BoxShadowBox className="box">
           <article className="media">
-            <div className={classNames("media-left", classes.imagePadding)}>
+            <ImageWrapper className="media-left">
               <Image
                 src="/images/iconEnterpriseSupport.png"
                 alt={t("admin.info.enterpriseIconAlt")}
               />
-            </div>
+            </ImageWrapper>
             <div className="media-content">
               <div className="content">
-                <h3 className={classes.boxTitle}>{t("admin.info.enterpriseTitle")}</h3>
+                <h3 className="has-text-weight-medium">
-                <p>{t("admin.info.enterpriseInfo")}<br/><strong>{t("admin.info.enterprisePartner")}</strong></p>
+                  {t("admin.info.enterpriseTitle")}
-                <a className="button is-info is-pulled-right is-normal" target="_blank"
+                </h3>
-                   href={t("admin.info.enterpriseLink")}>{t("admin.info.enterpriseButton")}</a>
+                <p>
+                  {t("admin.info.enterpriseInfo")}
+                  <br />
+                  <strong>{t("admin.info.enterprisePartner")}</strong>
+                </p>
+                <a
+                  className="button is-info is-pulled-right is-normal"
+                  target="_blank"
+                  href={t("admin.info.enterpriseLink")}
+                >
+                  {t("admin.info.enterpriseButton")}
+                </a>
               </div>
             </div>
           </article>
-        </div>
+        </BoxShadowBox>
       </>
     );
   }
@@ -90,4 +102,4 @@ const mapStateToProps = (state: any) => {
   };
 };
 
-export default connect(mapStateToProps)(injectSheet(styles)(translate("admin")(AdminDetails)));
+export default connect(mapStateToProps)(translate("admin")(AdminDetails));

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 styled from "styled-components";
-import injectSheet from "react-jss";
-
-const styles = {
-  container: {
-    border: "2px solid #e9f7fd",
-    padding: "1em 1em",
-    marginTop: "2em",
-    display: "flex",
-    justifyContent: "center"
-  }
-};
 
 type Props = {
-  children?: React.Node,
+  children?: React.Node
-
-  // context props
-  classes: any
 };
 
-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;
+    const { children } = this.props;
-    return <div className={classNames(classes.container)}>{children}</div>;
+    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 = {
+const ActionbarWrapper = styled.div`
-  link: {
+  & span + span {
-    cursor: "pointer",
+    margin-left: 0.5rem;
-    pointerEvents: "all",
-    marginBottom: "0 !important",
-    padding: "0.5rem",
-    border: "solid 1px #cdcdcd", // $dark-25
-    borderRadius: "4px",
-    "&:hover": {
-      borderColor: "#9a9a9a" // $dark-50
   }
-  },
+`;
-  actionbar: {
+
-    display: "flex",
+const IconWrapper = styled.span`
-    "& span + span": {
+  margin-bottom: 0 !important;
-      marginLeft: "0.5rem"
+  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
+          <IconWrapper
-            className={classNames(classes.link, "level-item")}
+            className="level-item"
             onClick={() => this.toggleModal("showInstallModal")}
           >
-            <Icon title={t("plugins.modal.install")} name="download" color="info" />
+            <Icon
-          </span>
+              title={t("plugins.modal.install")}
+              name="download"
+              color="info"
+            />
+          </IconWrapper>
         )}
         {this.isUninstallable() && (
-          <span
+          <IconWrapper
-            className={classNames(classes.link, "level-item")}
+            className="level-item"
             onClick={() => this.toggleModal("showUninstallModal")}
           >
-            <Icon title={t("plugins.modal.uninstall")} name="trash" color="info" />
+            <Icon
-          </span>
+              title={t("plugins.modal.uninstall")}
+              name="trash"
+              color="info"
+            />
+          </IconWrapper>
         )}
         {this.isUpdatable() && (
-          <span
+          <IconWrapper
-            className={classNames(classes.link, "level-item")}
+            className="level-item"
             onClick={() => this.toggleModal("showUpdateModal")}
           >
-            <Icon title={t("plugins.modal.update")} name="sync-alt" color="info" />
+            <Icon
-          </span>
+              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}>
+      <Icon
-        <i
+        className="fa-spin fa-lg"
-          className={classNames(
+        name="spinner"
-            "fas fa-spinner fa-lg fa-spin",
+        color={plugin.markedForUninstall ? "danger" : "info"}
-            plugin.markedForUninstall ? "has-text-danger" : "has-text-info"
-          )}
       />
-      </span>
     );
   };
 
@@ -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 = {
+const ListParent = styled.div`
-  userLabelAlignment: {
+  margin-right: 0;
-    textAlign: "left",
+  min-width: ${props =>
-    marginRight: 0
+    props.pluginAction === PluginAction.INSTALL ? "5.5em" : "10em"};
-  },
+  text-align: left;
-  userLabelMarginSmall: {
+`;
-    minWidth: "5.5em"
+
-  },
+const ListChild = styled.div`
-  userLabelMarginLarge: {
+  flex-grow: 4;
-    minWidth: "10em"
+`;
-  },
-  userFieldFlex: {
-    flexGrow: 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
+              <ListParent
-                className={classNames(
+                className={classNames("field-label", "is-inline-flex")}
-                  classes.userLabelAlignment,
+                pluginAction={pluginAction}
-                  pluginAction === PluginAction.INSTALL
-                    ? classes.userLabelMarginSmall
-                    : classes.userLabelMarginLarge,
-                  "field-label is-inline-flex"
-                )}
               >
                 {t("plugins.modal.author")}:
-              </div>
+              </ListParent>
-              <div
+              <ListChild className={classNames("field-body", "is-inline-flex")}>
-                className={classNames(
-                  classes.userFieldFlex,
-                  "field-body is-inline-flex"
-                )}
-              >
                 {plugin.author}
-              </div>
+              </ListChild>
             </div>
             {pluginAction === PluginAction.INSTALL && (
               <div className="field is-horizontal">
-                <div
+                <ListParent
-                  className={classNames(
+                  className={classNames("field-label", "is-inline-flex")}
-                    classes.userLabelAlignment,
+                  pluginAction={pluginAction}
-                    classes.userLabelMarginSmall,
-                    "field-label is-inline-flex"
-                  )}
                 >
                   {t("plugins.modal.version")}:
-                </div>
+                </ListParent>
-                <div
+                <ListChild
-                  className={classNames(
+                  className={classNames("field-body", "is-inline-flex")}
-                    classes.userFieldFlex,
-                    "field-body is-inline-flex"
-                  )}
                 >
                   {plugin.version}
-                </div>
+                </ListChild>
               </div>
             )}
             {(pluginAction === PluginAction.UPDATE ||
               pluginAction === PluginAction.UNINSTALL) && (
               <div className="field is-horizontal">
-                <div
+                <ListParent
-                  className={classNames(
+                  className={classNames("field-label", "is-inline-flex")}
-                    classes.userLabelAlignment,
-                    classes.userLabelMarginLarge,
-                    "field-label is-inline-flex"
-                  )}
                 >
                   {t("plugins.modal.currentVersion")}:
-                </div>
+                </ListParent>
-                <div
+                <ListChild
-                  className={classNames(
+                  className={classNames("field-body", "is-inline-flex")}
-                    classes.userFieldFlex,
-                    "field-body is-inline-flex"
-                  )}
                 >
                   {plugin.version}
-                </div>
+                </ListChild>
               </div>
             )}
             {pluginAction === PluginAction.UPDATE && (
               <div className="field is-horizontal">
-                <div
+                <ListParent
-                  className={classNames(
+                  className={classNames("field-label", "is-inline-flex")}
-                    classes.userLabelAlignment,
-                    classes.userLabelMarginLarge,
-                    "field-label is-inline-flex"
-                  )}
                 >
                   {t("plugins.modal.newVersion")}:
-                </div>
+                </ListParent>
-                <div
+                <ListChild
-                  className={classNames(
+                  className={classNames("field-body", "is-inline-flex")}
-                    classes.userFieldFlex,
-                    "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(
+export default translate("admin")(PluginModal);
-  injectSheet(styles),
-  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";
+import styled from "styled-components";
-
-const styles = {
-  container: {
-    display: "flex",
-    justifyContent: "flex-end",
-    alignItems: "center"
-  }
-};
 
 type Props = {
-  children?: React.Node,
+  children?: React.Node
-
-  // context props
-  classes: any
 };
 
-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);

scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.js

@@ -1,7 +1,5 @@
 //@flow
 import React from "react";
-import { compose } from "redux";
-import injectSheet from "react-jss";
 import { translate } from "react-i18next";
 import type { RepositoryRole } from "@scm-manager/ui-types";
 
@@ -9,25 +7,18 @@ type Props = {
   role: RepositoryRole,
 
   // context props
-  classes: any,
   t: string => string
 };
 
-const styles = {
-  spacing: {
-    padding: "0 !important"
-  }
-};
-
 class AvailableVerbs extends React.Component<Props> {
   render() {
-    const { role, t, classes } = this.props;
+    const { role, t } = this.props;
 
     let verbs = null;
     if (role.verbs.length > 0) {
       verbs = (
         <tr>
-          <td className={classes.spacing}>
+          <td className="is-paddingless">
             <ul>
               {role.verbs.map(verb => {
                 return (
@@ -43,7 +34,4 @@ class AvailableVerbs extends React.Component<Props> {
   }
 }
 
-export default compose(
+export default translate("plugins")(AvailableVerbs);
-  injectSheet(styles),
-  translate("plugins")
-)(AvailableVerbs);

scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.js

@@ -1,39 +1,30 @@
 //@flow
 import React from "react";
-import injectSheet from "react-jss";
 import { translate } from "react-i18next";
+import styled from "styled-components";
 import { Tag } from "@scm-manager/ui-components";
 
 type Props = {
   system?: boolean,
 
   // context props
-  classes: any,
   t: string => string
 };
 
-const styles = {
+const LeftMarginTag = styled(Tag)`
-  tag: {
+  margin-left: 0.75rem;
-    marginLeft: "0.75rem",
+  vertical-align: inherit;
-    verticalAlign: "inherit"
+`;
-  }
-};
 
 class SystemRoleTag extends React.Component<Props> {
   render() {
-    const { system, classes, t } = this.props;
+    const { system, t } = this.props;
 
     if (system) {
-      return (
+      return <LeftMarginTag color="dark" label={t("repositoryRole.system")} />;
-        <Tag
-          className={classes.tag}
-          color="dark"
-          label={t("repositoryRole.system")}
-        />
-      );
     }
     return null;
   }
 }
 
-export default injectSheet(styles)(translate("admin")(SystemRoleTag));
+export default translate("admin")(SystemRoleTag);

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";
-
+import { Icon } from "@scm-manager/ui-components";
-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"
-  }
-};
 
 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
+            <FixedSizedIconWrapper
-              className={classNames("image", "box", "has-background-info", "has-text-white", "has-text-weight-bold", classes.image)}>
+              className={classNames(
-              <i className={classNames("fas", "fa-" + icon, "fa-2x", classes.icon)}/>
+                "image",
-              <div className={classNames("is-size-4", classes.label)}>{t("login." + type)}</div>
+                "box",
-              <div className={classNames("is-size-4")}>{t("login.tip")}</div>
+                "has-text-weight-bold",
-            </div>
+                "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 styled from "styled-components";
-import classNames from "classnames";
+import {
-import injectSheet from "react-jss";
+  Image,
-
+  ErrorNotification,
-const styles = {
+  InputField,
-  avatar: {
+  SubmitButton,
-    marginTop: "-70px",
+  UnauthorizedError
-    paddingBottom: "20px"
+} from "@scm-manager/ui-components";
-  },
-  avatarImage: {
-    border: "1px solid lightgray",
-    padding: "5px",
-    background: "#fff",
-    borderRadius: "50%",
-    width: "128px",
-    height: "128px"
-  },
-  avatarSpacing: {
-    marginTop: "5rem"
-  }
-};
 
 type Props = {
   error?: Error,
@@ -29,8 +16,7 @@ type Props = {
   loginHandler: (username: string, password: string) => void,
 
   // context props
-  t: string => string,
+  t: string => string
-  classes: any
 };
 
 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.props.loginHandler(this.state.username, this.state.password);
-        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)}>
+        <TopMarginBox className="box">
-          <figure className={classes.avatar}>
+          <AvatarWrapper>
-            <Image
+            <AvatarImage src="/images/blib.jpg" alt={t("login.logo-alt")} />
-              className={classes.avatarImage}
+          </AvatarWrapper>
-              src="/images/blib.jpg"
+          <ErrorNotification error={this.areCredentialsInvalid()} />
-              alt={t("login.logo-alt")}
-            />
-          </figure>
-          <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);
-
-

scm-ui/ui-webapp/src/containers/Login.js

@@ -1,23 +1,18 @@
 //@flow
 import React from "react";
+import { connect } from "react-redux";
 import { Redirect, withRouter } from "react-router-dom";
+import { compose } from "redux";
+import { translate } from "react-i18next";
+import styled from "styled-components";
 import {
   login,
   isAuthenticated,
   isLoginPending,
   getLoginFailure
 } from "../modules/auth";
-import { connect } from "react-redux";
 import { getLoginLink, getLoginInfoLink } from "../modules/indexResource";
 import LoginInfo from "../components/LoginInfo";
-import classNames from "classnames";
-import injectSheet from "react-jss";
-
-const styles = {
-  section: {
-    paddingTop: "2em"
-  }
-};
 
 type Props = {
   authenticated: boolean,
@@ -30,14 +25,16 @@ type Props = {
   login: (link: string, username: string, password: string) => void,
 
   // context props
-  classes: any,
   t: string => string,
   from: any,
   location: any
 };
 
-class Login extends React.Component<Props> {
+const HeroSection = styled.section`
+  padding-top: 2em;
+`;
 
+class Login extends React.Component<Props> {
   handleLogin = (username: string, password: string): void => {
     const { link, login } = this.props;
     login(link, username, password);
@@ -45,18 +42,18 @@ class Login extends React.Component<Props> {
 
   renderRedirect = () => {
     const { from } = this.props.location.state || { from: { pathname: "/" } };
-    return <Redirect to={from}/>;
+    return <Redirect to={from} />;
   };
 
   render() {
-    const { authenticated, classes, ...restProps } = this.props;
+    const { authenticated, ...restProps } = this.props;
 
     if (authenticated) {
       return this.renderRedirect();
     }
 
     return (
-      <section className={classNames("hero", classes.section )}>
+      <HeroSection className="hero">
         <div className="hero-body">
           <div className="container">
             <div className="columns is-centered">
@@ -64,7 +61,7 @@ class Login extends React.Component<Props> {
             </div>
           </div>
         </div>
-      </section>
+      </HeroSection>
     );
   }
 }
@@ -91,10 +88,10 @@ const mapDispatchToProps = dispatch => {
   };
 };
 
-const StyledLogin = injectSheet(styles)(
+export default compose(
+  withRouter,
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(Login)
+  )
-);
+)(Login);
-export default withRouter(StyledLogin);

scm-ui/ui-webapp/src/containers/ProfileInfo.js

@@ -1,29 +1,20 @@
 // @flow
 import React from "react";
+import { translate } from "react-i18next";
 import type { Me } from "@scm-manager/ui-types";
 import {
   MailLink,
   AvatarWrapper,
   AvatarImage
 } from "@scm-manager/ui-components";
-import { compose } from "redux";
-import { translate } from "react-i18next";
-import injectSheet from "react-jss";
 
 type Props = {
   me: Me,
 
   // Context props
-  classes: any,
   t: string => string
 };
 
-const styles = {
-  spacing: {
-    padding: "0 !important"
-  }
-};
-
 class ProfileInfo extends React.Component<Props> {
   render() {
     const { me, t } = this.props;
@@ -62,14 +53,14 @@ class ProfileInfo extends React.Component<Props> {
   }
 
   renderGroups() {
-    const { me, t, classes } = this.props;
+    const { me, t } = this.props;
 
     let groups = null;
     if (me.groups.length > 0) {
       groups = (
         <tr>
           <th>{t("profile.groups")}</th>
-          <td className={classes.spacing}>
+          <td className="is-paddingless">
             <ul>
               {me.groups.map(group => {
                 return <li>{group}</li>;
@@ -83,7 +74,4 @@ class ProfileInfo extends React.Component<Props> {
   }
 }
 
-export default compose(
+export default translate("commons")(ProfileInfo);
-  injectSheet(styles),
-  translate("commons")
-)(ProfileInfo);

scm-ui/ui-webapp/src/groups/components/table/Details.js

@@ -1,25 +1,17 @@
 //@flow
 import React from "react";
-import type { Group } from "@scm-manager/ui-types";
-import GroupMember from "./GroupMember";
-import { DateFromNow, Checkbox } from "@scm-manager/ui-components";
 import { translate } from "react-i18next";
-import injectSheet from "react-jss";
+import type { Group } from "@scm-manager/ui-types";
+import { DateFromNow, Checkbox } from "@scm-manager/ui-components";
+import GroupMember from "./GroupMember";
 
 type Props = {
   group: Group,
 
   // Context props
-  classes: any,
   t: string => string
 };
 
-const styles = {
-  spacing: {
-    padding: "0 !important"
-  }
-};
-
 class Details extends React.Component<Props> {
   render() {
     const { group, t } = this.props;
@@ -63,17 +55,17 @@ class Details extends React.Component<Props> {
   }
 
   renderMembers() {
-    const { group, t, classes } = this.props;
+    const { group, t } = this.props;
 
     let member = null;
     if (group.members.length > 0) {
       member = (
         <tr>
           <th>{t("group.members")}</th>
-          <td className={classes.spacing}>
+          <td className="is-paddingless">
             <ul>
               {group._embedded.members.map((member, index) => {
-                return <GroupMember key={index} member={member}/>;
+                return <GroupMember key={index} member={member} />;
               })}
             </ul>
           </td>
@@ -84,4 +76,4 @@ class Details extends React.Component<Props> {
   }
 }
 
-export default injectSheet(styles)(translate("groups")(Details));
+export default translate("groups")(Details);

scm-ui/ui-webapp/src/permissions/components/SetPermissions.js

@@ -2,8 +2,8 @@
 import React from "react";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
-import injectSheet from "react-jss";
 import classNames from "classnames";
+import styled from "styled-components";
 import type { Link } from "@scm-manager/ui-types";
 import {
   Notification,
@@ -11,10 +11,7 @@ import {
   SubmitButton
 } from "@scm-manager/ui-components";
 import { getLink } from "../../modules/indexResource";
-import {
+import { loadPermissionsForEntity, setPermissions } from "./handlePermissions";
-  loadPermissionsForEntity,
-  setPermissions
-} from "./handlePermissions";
 import PermissionCheckbox from "./PermissionCheckbox";
 
 type Props = {
@@ -22,7 +19,6 @@ type Props = {
   selectedPermissionsLink: Link,
 
   // context props
-  classes: any,
   t: string => string
 };
 
@@ -35,16 +31,14 @@ type State = {
   overwritePermissionsLink?: Link
 };
 
-const styles = {
+const PermissionsWrapper = styled.div`
-  permissionsWrapper: {
+  padding-bottom: 0;
-    paddingBottom: "0",
 
-    "& .field .control": {
+  & .field .control {
-      width: "100%",
+    width: 100%;
-      wordWrap: "break-word"
+    word-wrap: break-word;
   }
-  }
+`;
-};
 
 class SetPermissions extends React.Component<Props, State> {
   constructor(props: Props) {
@@ -151,13 +145,12 @@ class SetPermissions extends React.Component<Props, State> {
   }
 
   renderPermissions = () => {
-    const { classes } = this.props;
     const { overwritePermissionsLink, permissions } = this.state;
     const permissionArray = Object.keys(permissions);
     return (
       <div className="columns">
-        <div className={classNames("column", "is-half", classes.permissionsWrapper)}>
+        <PermissionsWrapper className={classNames("column", "is-half")}>
-          {permissionArray.slice(0, (permissionArray.length/2)+1).map(p => (
+          {permissionArray.slice(0, permissionArray.length / 2 + 1).map(p => (
             <PermissionCheckbox
               key={p}
               permission={p}
@@ -166,9 +159,11 @@ class SetPermissions extends React.Component<Props, State> {
               disabled={!overwritePermissionsLink}
             />
           ))}
-        </div>
+        </PermissionsWrapper>
-        <div className={classNames("column", "is-half", classes.permissionsWrapper)}>
+        <PermissionsWrapper className={classNames("column", "is-half")}>
-          {permissionArray.slice((permissionArray.length/2)+1, permissionArray.length).map(p => (
+          {permissionArray
+            .slice(permissionArray.length / 2 + 1, permissionArray.length)
+            .map(p => (
               <PermissionCheckbox
                 key={p}
                 permission={p}
@@ -177,7 +172,7 @@ class SetPermissions extends React.Component<Props, State> {
                 disabled={!overwritePermissionsLink}
               />
             ))}
-        </div>
+        </PermissionsWrapper>
       </div>
     );
   };
@@ -208,4 +203,5 @@ const mapStateToProps = state => {
 };
 
 export default connect(mapStateToProps)(
-  injectSheet(styles)(translate("permissions")(SetPermissions)));
+  translate("permissions")(SetPermissions)
+);

scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.js

@@ -1,39 +1,30 @@
 //@flow
 import React from "react";
-import injectSheet from "react-jss";
 import { translate } from "react-i18next";
+import styled from "styled-components";
 import { Tag } from "@scm-manager/ui-components";
 
 type Props = {
   defaultBranch?: boolean,
 
   // context props
-  classes: any,
   t: string => string
 };
 
-const styles = {
+const LeftMarginTag = styled(Tag)`
-  tag: {
+  vertical-align: inherit;
-    marginLeft: "0.75rem",
+  margin-left: 0.75rem;
-    verticalAlign: "inherit"
+`;
-  }
-};
 
 class DefaultBranchTag extends React.Component<Props> {
   render() {
-    const { defaultBranch, classes, t } = this.props;
+    const { defaultBranch, t } = this.props;
 
     if (defaultBranch) {
-      return (
+      return <LeftMarginTag color="dark" label={t("branch.defaultTag")} />;
-        <Tag
-          className={classes.tag}
-          color="dark"
-          label={t("branch.defaultTag")}
-        />
-      );
     }
     return null;
   }
 }
 
-export default injectSheet(styles)(translate("repos")(DefaultBranchTag));
+export default translate("repos")(DefaultBranchTag);

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
+                <Interpolate i18nKey="changeset.summary" id={id} time={date} />
-                  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 this.props.changeset._embedded.tags || [];
-    return 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
+        <RepositoryEntryLink icon="code" to={repositoryLink + "/sources"} />
-          iconClass="fa-code fa-lg"
-          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 styled from "styled-components";
-import classNames from "classnames";
+import { Icon } from "@scm-manager/ui-components";
-
-const styles = {
-  link: {
-    pointerEvents: "all",
-    marginRight: "1.25rem !important"
-  }
-};
 
 type Props = {
   to: string,
-  iconClass: string,
+  icon: string
-
-  // context props
-  classes: any
 };
 
+const PointerEventsLink = styled(Link)`
+  pointer-events: all;
+`;
+
 class RepositoryEntryLink extends React.Component<Props> {
   render() {
-    const { to, iconClass, classes } = this.props;
+    const { to, icon } = this.props;
     return (
-      <Link className={classNames("level-item", classes.link)} to={to}>
+      <PointerEventsLink className="level-item" to={to}>
-        <span className="icon is-small">
+        <Icon className="fa-lg" name={icon} color="inherit" />
-          <i className={classNames("fa", iconClass)} />
+      </PointerEventsLink>
-        </span>
-      </Link>
     );
   }
 }
 
-export default injectSheet(styles)(RepositoryEntryLink);
+export default RepositoryEntryLink;

scm-ui/ui-webapp/src/repos/permissions/containers/SinglePermission.js

@@ -1,7 +1,11 @@
 // @flow
 import React from "react";
-import type { RepositoryRole, Permission } from "@scm-manager/ui-types";
+import { connect } from "react-redux";
+import type { History } from "history";
 import { translate } from "react-i18next";
+import styled from "styled-components";
+import type { RepositoryRole, Permission } from "@scm-manager/ui-types";
+import { Button, Icon } from "@scm-manager/ui-components";
 import {
   modifyPermission,
   isModifyPermissionPending,
@@ -9,14 +13,9 @@ import {
   isDeletePermissionPending,
   findVerbsForRole
 } from "../modules/permissions";
-import { connect } from "react-redux";
-import type { History } from "history";
-import { Button, Icon } from "@scm-manager/ui-components";
 import DeletePermissionButton from "../components/buttons/DeletePermissionButton";
 import RoleSelector from "../components/RoleSelector";
 import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
-import classNames from "classnames";
-import injectSheet from "react-jss";
 
 type Props = {
   availableRepositoryRoles: RepositoryRole[],
@@ -39,8 +38,7 @@ type Props = {
     namespace: string,
     name: string
   ) => void,
-  deleteLoading: boolean,
+  deleteLoading: boolean
-  classes: any
 };
 
 type State = {
@@ -48,15 +46,14 @@ type State = {
   showAdvancedDialog: boolean
 };
 
-const styles = {
+const FullWidthTr = styled.tr`
-  centerMiddle: {
+  width: 100%;
-    display: "table-cell",
+`;
-    verticalAlign: "middle !important"
+
-  },
+const VCenteredTd = styled.td`
-  columnWidth: {
+  display: table-cell;
-    width: "100%"
+  vertical-align: middle !important;
-  }
+`;
-};
 
 class SinglePermission extends React.Component<Props, State> {
   constructor(props: Props) {
@@ -103,16 +100,15 @@ class SinglePermission extends React.Component<Props, State> {
   };
 
   render() {
-    const { permission, showAdvancedDialog } = this.state;
     const {
-      t,
       availableRepositoryRoles,
       availableRepositoryVerbs,
       loading,
       namespace,
       repoName,
-      classes
+      t
     } = this.props;
+    const { permission, showAdvancedDialog } = this.state;
     const availableRoleNames =
       !!availableRepositoryRoles && availableRepositoryRoles.map(r => r.name);
     const readOnly = !this.mayChangePermissions();
@@ -151,18 +147,18 @@ class SinglePermission extends React.Component<Props, State> {
       );
 
     return (
-      <tr className={classes.columnWidth}>
+      <FullWidthTr>
-        <td className={classes.centerMiddle}>
+        <VCenteredTd>
           {iconType} {permission.name}
-        </td>
+        </VCenteredTd>
         {roleSelector}
-        <td className={classes.centerMiddle}>
+        <VCenteredTd>
           <Button
             label={t("permission.advanced-button.label")}
             action={this.handleDetailedPermissionsPressed}
           />
-        </td>
+        </VCenteredTd>
-        <td className={classNames("is-darker", classes.centerMiddle)}>
+        <VCenteredTd className="is-darker">
           <DeletePermissionButton
             permission={permission}
             namespace={namespace}
@@ -171,8 +167,8 @@ class SinglePermission extends React.Component<Props, State> {
             loading={this.props.deleteLoading}
           />
           {advancedDialog}
-        </td>
+        </VCenteredTd>
-      </tr>
+      </FullWidthTr>
     );
   }
 
@@ -274,4 +270,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(injectSheet(styles)(SinglePermission)));
+)(translate("repos")(SinglePermission));

scm-ui/ui-webapp/src/repos/sources/components/FileTree.js

@@ -1,9 +1,11 @@
 //@flow
 import React from "react";
-import { translate } from "react-i18next";
+import { compose } from "redux";
 import { connect } from "react-redux";
-import injectSheet from "react-jss";
+import { withRouter } from "react-router-dom";
-import FileTreeLeaf from "./FileTreeLeaf";
+import { translate } from "react-i18next";
+import styled from "styled-components";
+import { binder } from "@scm-manager/ui-extensions";
 import type { Repository, File } from "@scm-manager/ui-types";
 import {
   ErrorNotification,
@@ -15,15 +17,7 @@ import {
   isFetchSourcesPending,
   getSources
 } from "../modules/sources";
-import { withRouter } from "react-router-dom";
+import FileTreeLeaf from "./FileTreeLeaf";
-import { compose } from "redux";
-import { binder } from "@scm-manager/ui-extensions";
-
-const styles = {
-  iconColumn: {
-    width: "16px"
-  }
-};
 
 type Props = {
   loading: boolean,
@@ -33,12 +27,16 @@ type Props = {
   revision: string,
   path: string,
   baseUrl: string,
+
   // context props
-  classes: any,
   t: string => string,
   match: any
 };
 
+const FixedWidthTh = styled.th`
+  width: 16px;
+`;
+
 export function findParent(path: string) {
   if (path.endsWith("/")) {
     path = path.substring(0, path.length - 1);
@@ -70,7 +68,7 @@ class FileTree extends React.Component<Props> {
   }
 
   renderSourcesTable() {
-    const { tree, revision, path, baseUrl, classes, t } = this.props;
+    const { tree, revision, path, baseUrl, t } = this.props;
 
     const files = [];
 
@@ -114,7 +112,7 @@ class FileTree extends React.Component<Props> {
         <table className="table table-hover table-sm is-fullwidth">
           <thead>
             <tr>
-              <th className={classes.iconColumn} />
+              <FixedWidthTh />
               <th>{t("sources.file-tree.name")}</th>
               <th className="is-hidden-mobile">
                 {t("sources.file-tree.length")}
@@ -165,4 +163,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
 export default compose(
   withRouter,
   connect(mapStateToProps)
-)(injectSheet(styles)(translate("repos")(FileTree)));
+)(translate("repos")(FileTree));

scm-ui/ui-webapp/src/repos/sources/components/FileTreeLeaf.js

@@ -1,30 +1,22 @@
 //@flow
 import * as React from "react";
-import injectSheet from "react-jss";
+import { Link } from "react-router-dom";
+import classNames from "classnames";
+import styled from "styled-components";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
+import type { File } from "@scm-manager/ui-types";
 import { DateFromNow, FileSize } from "@scm-manager/ui-components";
 import FileIcon from "./FileIcon";
-import { Link } from "react-router-dom";
-import type { File } from "@scm-manager/ui-types";
-import classNames from "classnames";
-import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
-
-const styles = {
-  iconColumn: {
-    width: "16px"
-  },
-  wordBreakMinWidth: {
-    minWidth: "10em"
-  }
-};
 
 type Props = {
   file: File,
-  baseUrl: string,
+  baseUrl: string
-
-  // context props
-  classes: any
 };
 
+const MinWidthTd = styled.td`
+  min-width: 10em;
+`;
+
 export function createLink(base: string, file: File) {
   let link = base;
   if (file.path) {
@@ -40,7 +32,7 @@ export function createLink(base: string, file: File) {
   return link;
 }
 
-class FileTreeLeaf extends React.Component<Props> {
+export default class FileTreeLeaf extends React.Component<Props> {
   createLink = (file: File) => {
     return createLink(this.props.baseUrl, file);
   };
@@ -68,29 +60,23 @@ class FileTreeLeaf extends React.Component<Props> {
   };
 
   render() {
-    const { file, classes } = this.props;
+    const { file } = this.props;
 
     const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
 
     return (
       <tr>
-        <td className={classes.iconColumn}>{this.createFileIcon(file)}</td>
+        <td>{this.createFileIcon(file)}</td>
-        <td className={classNames(classes.wordBreakMinWidth, "is-word-break")}>
+        <MinWidthTd className="is-word-break">
           {this.createFileName(file)}
-        </td>
+        </MinWidthTd>
         <td className="is-hidden-mobile">{fileSize}</td>
         <td className="is-hidden-mobile">
           <DateFromNow date={file.lastModified} />
         </td>
-        <td
+        <MinWidthTd className={classNames("is-word-break", "is-hidden-mobile")}>
-          className={classNames(
-            classes.wordBreakMinWidth,
-            "is-word-break",
-            "is-hidden-mobile"
-          )}
-        >
           {file.description}
-        </td>
+        </MinWidthTd>
         {binder.hasExtension("repos.sources.tree.row.right") && (
           <td className="is-hidden-mobile">
             {!file.directory && (
@@ -106,5 +92,3 @@ class FileTreeLeaf extends React.Component<Props> {
     );
   }
 }
-
-export default injectSheet(styles)(FileTreeLeaf);

scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.js

@@ -4,12 +4,13 @@ import { translate } from "react-i18next";
 import { ButtonAddons, Button } from "@scm-manager/ui-components";
 
 type Props = {
+  className?: string,
   t: string => string,
   historyIsSelected: boolean,
   showHistory: boolean => void
 };
 
-class FileButtonGroup extends React.Component<Props> {
+class FileButtonAddons extends React.Component<Props> {
   showHistory = () => {
     this.props.showHistory(true);
   };
@@ -23,10 +24,10 @@ class FileButtonGroup extends React.Component<Props> {
   };
 
   render() {
-    const { t, historyIsSelected } = this.props;
+    const { className, t, historyIsSelected } = this.props;
 
     return (
-      <ButtonAddons>
+      <ButtonAddons className={className}>
         <div title={t("sources.content.sourcesButton")}>
           <Button
             action={this.showSources}
@@ -54,4 +55,4 @@ class FileButtonGroup extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(FileButtonGroup);
+export default translate("repos")(FileButtonAddons);

scm-ui/ui-webapp/src/repos/sources/containers/Content.js

@@ -1,21 +1,21 @@
 // @flow
 import React from "react";
+import { connect } from "react-redux";
 import { translate } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import type { File, Repository } from "@scm-manager/ui-types";
 import {
   DateFromNow,
-  ButtonGroup,
   FileSize,
-  ErrorNotification
+  ErrorNotification,
+  Icon
 } from "@scm-manager/ui-components";
-import injectSheet from "react-jss";
+import { getSources } from "../modules/sources";
-import classNames from "classnames";
+import FileButtonAddons from "../components/content/FileButtonAddons";
-import FileButtonGroup from "../components/content/FileButtonGroup";
 import SourcesView from "./SourcesView";
 import HistoryView from "./HistoryView";
-import { getSources } from "../modules/sources";
-import { connect } from "react-redux";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
 
 type Props = {
   loading: boolean,
@@ -23,7 +23,8 @@ type Props = {
   repository: Repository,
   revision: string,
   path: string,
-  classes: any,
+
+  // context props
   t: string => string
 };
 
@@ -33,21 +34,25 @@ type State = {
   errorFromExtension?: Error
 };
 
-const styles = {
+const VCenteredChild = styled.article`
-  pointer: {
+  align-items: center;
-    cursor: "pointer"
+`;
-  },
+
-  marginInHeader: {
+const RightMarginIcon = styled(Icon)`
-    marginRight: "0.5em"
+  margin-right: 0.5em;
-  },
+`;
-  isVerticalCenter: {
+
-    display: "flex",
+const RightMarginFileButtonAddons = styled(FileButtonAddons)`
-    alignItems: "center"
+  margin-right: 0.5em;
-  },
+`;
-  hasBackground: {
+
-    backgroundColor: "#FBFBFB"
+const LighterGreyBackgroundPanelBlock = styled.div`
-  }
+  background-color: #fbfbfb;
-};
+`;
+
+const LighterGreyBackgroundTable = styled.table`
+  background-color: #fbfbfb;
+`;
 
 class Content extends React.Component<Props, State> {
   constructor(props: Props) {
@@ -77,12 +82,12 @@ class Content extends React.Component<Props, State> {
   };
 
   showHeader() {
-    const { file, revision, classes } = this.props;
+    const { file, revision } = this.props;
     const { showHistory, collapsed } = this.state;
-    const icon = collapsed ? "fa-angle-right" : "fa-angle-down";
+    const icon = collapsed ? "angle-right" : "angle-down";
 
     const selector = file._links.history ? (
-      <FileButtonGroup
+      <RightMarginFileButtonAddons
         file={file}
         historyIsSelected={showHistory}
         showHistory={(changeShowHistory: boolean) =>
@@ -92,20 +97,14 @@ class Content extends React.Component<Props, State> {
     ) : null;
 
     return (
-      <span className={classes.pointer}>
+      <span className="has-cursor-pointer">
-        <article className={classNames("media", classes.isVerticalCenter)}>
+        <VCenteredChild className={classNames("media", "is-flex")}>
           <div className="media-content" onClick={this.toggleCollapse}>
-            <i
+            <RightMarginIcon name={icon} color="inherit" />
-              className={classNames(
-                "fa is-medium",
-                icon,
-                classes.marginInHeader
-              )}
-            />
             <span className="is-word-break">{file.name}</span>
           </div>
           <div className="buttons is-grouped">
-            <div className={classes.marginInHeader}>{selector}</div>
+            {selector}
             <ExtensionPoint
               name="repos.sources.content.actionbar"
               props={{
@@ -116,14 +115,14 @@ class Content extends React.Component<Props, State> {
               renderAll={true}
             />
           </div>
-        </article>
+        </VCenteredChild>
       </span>
     );
   }
 
   showMoreInformation() {
     const collapsed = this.state.collapsed;
-    const { classes, file, revision, t, repository } = this.props;
+    const { file, revision, t, repository } = this.props;
     const date = <DateFromNow date={file.lastModified} />;
     const description = file.description ? (
       <p>
@@ -140,8 +139,8 @@ class Content extends React.Component<Props, State> {
     const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
     if (!collapsed) {
       return (
-        <div className={classNames("panel-block", classes.hasBackground)}>
+        <LighterGreyBackgroundPanelBlock className="panel-block">
-          <table className={classNames("table", classes.hasBackground)}>
+          <LighterGreyBackgroundTable className="table">
             <tbody>
               <tr>
                 <td>{t("sources.content.path")}</td>
@@ -169,8 +168,8 @@ class Content extends React.Component<Props, State> {
                 props={{ file, repository, revision }}
               />
             </tbody>
-          </table>
+          </LighterGreyBackgroundTable>
-        </div>
+        </LighterGreyBackgroundPanelBlock>
       );
     }
     return null;
@@ -217,6 +216,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
   };
 };
 
-export default injectSheet(styles)(
+export default connect(mapStateToProps)(translate("repos")(Content));
-  connect(mapStateToProps)(translate("repos")(Content))
-);

scm-ui/ui-webapp/src/repos/sources/containers/Sources.js

@@ -116,7 +116,6 @@ class Sources extends React.Component<Props, State> {
     const {
       repository,
       baseUrl,
-      branches,
       loading,
       error,
       revision,
@@ -124,8 +123,6 @@ class Sources extends React.Component<Props, State> {
       currentFileIsDirectory
     } = this.props;
 
-    const { selectedBranch } = this.state;
-
     if (error) {
       return <ErrorNotification error={error} />;
     }
@@ -138,17 +135,7 @@ class Sources extends React.Component<Props, State> {
       return (
         <div className="panel">
           {this.renderBranchSelector()}
-          <Breadcrumb
+          {this.renderBreadcrumb()}
-            revision={encodeURIComponent(revision)}
-            path={path}
-            baseUrl={baseUrl}
-            branch={selectedBranch}
-            defaultBranch={
-              branches && branches.filter(b => b.defaultBranch === true)[0]
-            }
-            branches={branches && branches}
-            repository={repository}
-          />
           <FileTree
             repository={repository}
             revision={revision}
@@ -183,6 +170,28 @@ class Sources extends React.Component<Props, State> {
     }
     return null;
   };
+
+  renderBreadcrumb = () => {
+    const { revision, path, baseUrl, branches, repository } = this.props;
+    const { selectedBranch } = this.state;
+
+    if (revision) {
+      return (
+        <Breadcrumb
+          revision={encodeURIComponent(revision)}
+          path={path}
+          baseUrl={baseUrl}
+          branch={selectedBranch}
+          defaultBranch={
+            branches && branches.filter(b => b.defaultBranch === true)[0]
+          }
+          branches={branches && branches}
+          repository={repository}
+        />
+      );
+    }
+    return null;
+  };
 }
 
 const mapStateToProps = (state, ownProps) => {