Merged in feature/ux (pull request #139)

Feature/ux

scm-ui-components/packages/ui-components/src/BranchSelector.js

@@ -12,6 +12,11 @@ const styles = {
   },
   minWidthOfLabel: {
     minWidth: "4.5rem"
+  },
+  wrapper: {
+    padding: "1rem 1.5rem 0.25rem 1.5rem",
+    border: "1px solid #eee",
+    borderRadius: "5px 5px 0 0"
   }
 };
 
@@ -43,7 +48,13 @@ class BranchSelector extends React.Component<Props, State> {
 
     if (branches) {
       return (
-        <div className="box field is-horizontal">
+        <div
+          className={classNames(
+            "has-background-light field",
+            "is-horizontal",
+            classes.wrapper
+          )}
+        >
           <div
             className={classNames(
               "field-label",

scm-ui-components/packages/ui-components/src/HelpIcon.js

@@ -1,14 +1,23 @@
 //@flow
 import React from "react";
+import injectSheet from "react-jss";
 import classNames from "classnames";
 
 type Props = {
+  classes: any
+};
+
+const styles = {
+    textinfo: {
+      color: "#98d8f3 !important" 
+    }
 };
 
 class HelpIcon extends React.Component<Props> {
   render() {
-    return <i className={classNames("fa fa-question has-text-info")} />
+    const { classes } = this.props;
+    return <i className={classNames("fa fa-question-circle has-text-info", classes.textinfo)}></i>;
   }
 }
 
-export default HelpIcon;
+export default injectSheet(styles)(HelpIcon);

scm-ui-components/packages/ui-components/src/buttons/AddButton.js

@@ -1,11 +1,11 @@
-//@flow
-import React from "react";
-import Button, { type ButtonProps } from "./Button";
-
-class AddButton extends React.Component<ButtonProps> {
-  render() {
-    return <Button color="default" {...this.props} />;
-  }
-}
-
-export default AddButton;
+//@flow
+import React from "react";
+import Button, { type ButtonProps } from "./Button";
+
+class AddButton extends React.Component<ButtonProps> {
+  render() {
+    return <Button color="default" {...this.props} />;
+  }
+}
+
+export default AddButton;

scm-ui-components/packages/ui-components/src/buttons/CreateButton.js

@@ -1,24 +1,27 @@
-//@flow
-import React from "react";
-import injectSheet from "react-jss";
-import AddButton, { type ButtonProps } from "./Button";
-import classNames from "classnames";
-
-const styles = {
-  spacing: {
-    margin: "1em 0 0 1em"
-  }
-};
-
-class CreateButton extends React.Component<ButtonProps> {
-  render() {
-    const { classes } = this.props;
-    return (
-      <div className={classNames("is-pulled-right", classes.spacing)}>
-        <AddButton {...this.props} />
-      </div>
-    );
-  }
-}
-
-export default injectSheet(styles)(CreateButton);
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import SubmitButton, { type ButtonProps } from "./SubmitButton";
+import classNames from "classnames";
+
+const styles = {
+  spacing: {
+    marginTop: "2em",
+    border: "2px solid #e9f7fd",
+    padding: "1em 1em"
+  }
+  
+};
+
+class CreateButton extends React.Component<ButtonProps> {
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classNames("has-text-centered", classes.spacing)}>
+        <SubmitButton {...this.props} />
+      </div>
+    );
+  }
+}
+
+export default injectSheet(styles)(CreateButton);

scm-ui-components/packages/ui-components/src/layout/Header.js

@@ -1,31 +1,31 @@
-//@flow
-import * as React from "react";
-import Logo from "./../Logo";
-
-type Props = {
-  children?: React.Node
-};
-
-class Header extends React.Component<Props> {
-  render() {
-    const { children } = this.props;
-    return (
-      <section className="hero is-dark is-small">
-        <div className="hero-body">
-          <div className="container">
-            <div className="columns is-vcentered">
-              <div className="column">
-                <Logo />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="hero-foot">
-          <div className="container">{children}</div>
-        </div>
-      </section>
-    );
-  }
-}
-
-export default Header;
+//@flow
+import * as React from "react";
+import Logo from "./../Logo";
+
+type Props = {
+  children?: React.Node
+};
+
+class Header extends React.Component<Props> {
+  render() {
+    const { children } = this.props;
+    return (
+      <section className="hero is-dark is-small">
+        <div className="hero-body">
+          <div className="container">
+            <div className="columns is-vcentered">
+              <div className="column">
+                <Logo />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="hero-foot">
+          <div className="container">{children}</div>
+        </div>
+      </section>
+    );
+  }
+}
+
+export default Header;

scm-ui/src/config/components/form/AdminSettings.js

@@ -20,34 +20,41 @@ class AdminSettings extends React.Component<Props> {
     return (
       <div>
         <Subtitle subtitle={t("admin-settings.name")} />
-        <AdminGroupTable
-          adminGroups={adminGroups}
-          onChange={(isValid, changedValue, name) =>
-            this.props.onChange(isValid, changedValue, name)
-          }
-          disabled={!hasUpdatePermission}
-        />
-        <AddEntryToTableField
-          addEntry={this.addGroup}
-          disabled={!hasUpdatePermission}
-          buttonLabel={t("admin-settings.add-group-button")}
-          fieldLabel={t("admin-settings.add-group-textfield")}
-          errorMessage={t("admin-settings.add-group-error")}
-        />
-        <AdminUserTable
-          adminUsers={adminUsers}
-          onChange={(isValid, changedValue, name) =>
-            this.props.onChange(isValid, changedValue, name)
-          }
-          disabled={!hasUpdatePermission}
-        />
-        <AddEntryToTableField
-          addEntry={this.addUser}
-          disabled={!hasUpdatePermission}
-          buttonLabel={t("admin-settings.add-user-button")}
-          fieldLabel={t("admin-settings.add-user-textfield")}
-          errorMessage={t("admin-settings.add-user-error")}
-        />
+            <div className="columns">
+              <div className="column is-half">
+                <AdminGroupTable
+                  adminGroups={adminGroups}
+                  onChange={(isValid, changedValue, name) =>
+                    this.props.onChange(isValid, changedValue, name)
+                  }
+                  disabled={!hasUpdatePermission}
+                />
+                    
+                <AddEntryToTableField
+                  addEntry={this.addGroup}
+                  disabled={!hasUpdatePermission}
+                  buttonLabel={t("admin-settings.add-group-button")}
+                  fieldLabel={t("admin-settings.add-group-textfield")}
+                  errorMessage={t("admin-settings.add-group-error")}
+                />
+            </div>
+            <div className="column is-half">
+                <AdminUserTable
+                  adminUsers={adminUsers}
+                  onChange={(isValid, changedValue, name) =>
+                    this.props.onChange(isValid, changedValue, name)
+                  }
+                  disabled={!hasUpdatePermission}
+                />
+                <AddEntryToTableField
+                  addEntry={this.addUser}
+                  disabled={!hasUpdatePermission}
+                  buttonLabel={t("admin-settings.add-user-button")}
+                  fieldLabel={t("admin-settings.add-user-textfield")}
+                  errorMessage={t("admin-settings.add-user-error")}
+                />
+            </div> 
+        </div> 
       </div>
     );
   }

scm-ui/src/config/components/form/BaseUrlSettings.js

@@ -18,20 +18,26 @@ class BaseUrlSettings extends React.Component<Props> {
     return (
       <div>
         <Subtitle subtitle={t("base-url-settings.name")} />
-        <Checkbox
-          checked={forceBaseUrl}
-          label={t("base-url-settings.force-base-url")}
-          onChange={this.handleForceBaseUrlChange}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.forceBaseUrlHelpText")}
-        />
-        <InputField
-          label={t("base-url-settings.base-url")}
-          onChange={this.handleBaseUrlChange}
-          value={baseUrl}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.baseUrlHelpText")}
-        />
+        <div className="columns">
+          <div className="column is-half">
+            <Checkbox
+              checked={forceBaseUrl}
+              label={t("base-url-settings.force-base-url")}
+              onChange={this.handleForceBaseUrlChange}
+              disabled={!hasUpdatePermission}
+              helpText={t("help.forceBaseUrlHelpText")}
+            />
+          </div>
+          <div className="column is-half">
+            <InputField
+              label={t("base-url-settings.base-url")}
+              onChange={this.handleBaseUrlChange}
+              value={baseUrl}
+              disabled={!hasUpdatePermission}
+              helpText={t("help.baseUrlHelpText")}
+            />
+          </div>
+        </div>
       </div>
     );
   }

scm-ui/src/config/components/form/GeneralSettings.js

@@ -36,70 +36,98 @@ class GeneralSettings extends React.Component<Props> {
 
     return (
       <div>
-        <InputField
-          label={t("general-settings.realm-description")}
-          onChange={this.handleRealmDescriptionChange}
-          value={realmDescription}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.realmDescriptionHelpText")}
-        />
-        <InputField
-          label={t("general-settings.date-format")}
-          onChange={this.handleDateFormatChange}
-          value={dateFormat}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.dateFormatHelpText")}
-        />
-        <InputField
-          label={t("general-settings.plugin-url")}
-          onChange={this.handlePluginUrlChange}
-          value={pluginUrl}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.pluginRepositoryHelpText")}
-        />
-        <InputField
-          label={t("general-settings.default-namespace-strategy")}
-          onChange={this.handleDefaultNamespaceStrategyChange}
-          value={defaultNamespaceStrategy}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.defaultNameSpaceStrategyHelpText")}
-        />
-        <Checkbox
-          checked={enabledXsrfProtection}
-          label={t("general-settings.enabled-xsrf-protection")}
-          onChange={this.handleEnabledXsrfProtectionChange}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.enableXsrfProtectionHelpText")}
-        />
-        <Checkbox
-          checked={enableRepositoryArchive}
-          label={t("general-settings.enable-repository-archive")}
-          onChange={this.handleEnableRepositoryArchiveChange}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.enableRepositoryArchiveHelpText")}
-        />
-        <Checkbox
-          checked={disableGroupingGrid}
-          label={t("general-settings.disable-grouping-grid")}
-          onChange={this.handleDisableGroupingGridChange}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.disableGroupingGridHelpText")}
-        />
-        <Checkbox
-          checked={anonymousAccessEnabled}
-          label={t("general-settings.anonymous-access-enabled")}
-          onChange={this.handleAnonymousAccessEnabledChange}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.allowAnonymousAccessHelpText")}
-        />
-        <Checkbox
-          checked={skipFailedAuthenticators}
-          label={t("general-settings.skip-failed-authenticators")}
-          onChange={this.handleSkipFailedAuthenticatorsChange}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.skipFailedAuthenticatorsHelpText")}
-        />
-      </div>
+          <div className="columns">
+            <div className="column is-half">
+                <InputField
+                  label={t("general-settings.realm-description")}
+                  onChange={this.handleRealmDescriptionChange}
+                  value={realmDescription}
+                  disabled={!hasUpdatePermission}
+                  helpText={t("help.realmDescriptionHelpText")}
+                />
+                </div>
+                <div className="column is-half">
+                <InputField
+                  label={t("general-settings.date-format")}
+                  onChange={this.handleDateFormatChange}
+                  value={dateFormat}
+                  disabled={!hasUpdatePermission}
+                  helpText={t("help.dateFormatHelpText")}
+                />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                <InputField
+                  label={t("general-settings.plugin-url")}
+                  onChange={this.handlePluginUrlChange}
+                  value={pluginUrl}
+                  disabled={!hasUpdatePermission}
+                  helpText={t("help.pluginRepositoryHelpText")}
+                />
+                </div>
+                <div className="column is-half">
+                <InputField
+                  label={t("general-settings.default-namespace-strategy")}
+                  onChange={this.handleDefaultNamespaceStrategyChange}
+                  value={defaultNamespaceStrategy}
+                  disabled={!hasUpdatePermission}
+                  helpText={t("help.defaultNameSpaceStrategyHelpText")}
+                />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                    <Checkbox
+                      checked={enabledXsrfProtection}
+                      label={t("general-settings.enabled-xsrf-protection")}
+                      onChange={this.handleEnabledXsrfProtectionChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.enableXsrfProtectionHelpText")}
+                    />
+                </div>
+                <div className="column is-half">
+                    <Checkbox
+                      checked={enableRepositoryArchive}
+                      label={t("general-settings.enable-repository-archive")}
+                      onChange={this.handleEnableRepositoryArchiveChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.enableRepositoryArchiveHelpText")}
+                    />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                    <Checkbox
+                      checked={disableGroupingGrid}
+                      label={t("general-settings.disable-grouping-grid")}
+                      onChange={this.handleDisableGroupingGridChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.disableGroupingGridHelpText")}
+                    />
+                </div>
+                <div className="column is-half">
+                    <Checkbox
+                      checked={anonymousAccessEnabled}
+                      label={t("general-settings.anonymous-access-enabled")}
+                      onChange={this.handleAnonymousAccessEnabledChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.allowAnonymousAccessHelpText")}
+                    />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                    <Checkbox
+                      checked={skipFailedAuthenticators}
+                      label={t("general-settings.skip-failed-authenticators")}
+                      onChange={this.handleSkipFailedAuthenticatorsChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.skipFailedAuthenticatorsHelpText")}
+                    />
+                </div>
+            </div>
+          </div>
     );
   }
 

scm-ui/src/config/components/form/LoginAttempt.js

@@ -40,24 +40,30 @@ class LoginAttempt extends React.Component<Props, State> {
     return (
       <div>
         <Subtitle subtitle={t("login-attempt.name")} />
-        <InputField
-          label={t("login-attempt.login-attempt-limit")}
-          onChange={this.handleLoginAttemptLimitChange}
-          value={loginAttemptLimit}
-          disabled={!hasUpdatePermission}
-          validationError={this.state.loginAttemptLimitError}
-          errorMessage={t("validation.login-attempt-limit-invalid")}
-          helpText={t("help.loginAttemptLimitHelpText")}
-        />
-        <InputField
-          label={t("login-attempt.login-attempt-limit-timeout")}
-          onChange={this.handleLoginAttemptLimitTimeoutChange}
-          value={loginAttemptLimitTimeout}
-          disabled={!hasUpdatePermission}
-          validationError={this.state.loginAttemptLimitTimeoutError}
-          errorMessage={t("validation.login-attempt-limit-timeout-invalid")}
-          helpText={t("help.loginAttemptLimitTimeoutHelpText")}
-        />
+        <div className="columns">
+          <div className="column is-half">
+            <InputField
+              label={t("login-attempt.login-attempt-limit")}
+              onChange={this.handleLoginAttemptLimitChange}
+              value={loginAttemptLimit}
+              disabled={!hasUpdatePermission}
+              validationError={this.state.loginAttemptLimitError}
+              errorMessage={t("validation.login-attempt-limit-invalid")}
+              helpText={t("help.loginAttemptLimitHelpText")}
+            />
+          </div>
+          <div className="column is-half">
+            <InputField
+              label={t("login-attempt.login-attempt-limit-timeout")}
+              onChange={this.handleLoginAttemptLimitTimeoutChange}
+              value={loginAttemptLimitTimeout}
+              disabled={!hasUpdatePermission}
+              validationError={this.state.loginAttemptLimitTimeoutError}
+              errorMessage={t("validation.login-attempt-limit-timeout-invalid")}
+              helpText={t("help.loginAttemptLimitTimeoutHelpText")}
+            />
+          </div>
+        </div>
       </div>
     );
   }

scm-ui/src/config/components/form/ProxySettings.js

@@ -37,56 +37,76 @@ class ProxySettings extends React.Component<Props> {
     return (
       <div>
         <Subtitle subtitle={t("proxy-settings.name")} />
-        <Checkbox
-          checked={enableProxy}
-          label={t("proxy-settings.enable-proxy")}
-          onChange={this.handleEnableProxyChange}
-          disabled={!hasUpdatePermission}
-          helpText={t("help.enableProxyHelpText")}
-        />
-        <InputField
-          label={t("proxy-settings.proxy-password")}
-          onChange={this.handleProxyPasswordChange}
-          value={proxyPassword}
-          type="password"
-          disabled={!enableProxy || !hasUpdatePermission}
-          helpText={t("help.proxyPasswordHelpText")}
-        />
-        <InputField
-          label={t("proxy-settings.proxy-port")}
-          value={proxyPort}
-          onChange={this.handleProxyPortChange}
-          disabled={!enableProxy || !hasUpdatePermission}
-          helpText={t("help.proxyPortHelpText")}
-        />
-        <InputField
-          label={t("proxy-settings.proxy-server")}
-          value={proxyServer}
-          onChange={this.handleProxyServerChange}
-          disabled={!enableProxy || !hasUpdatePermission}
-          helpText={t("help.proxyServerHelpText")}
-        />
-        <InputField
-          label={t("proxy-settings.proxy-user")}
-          value={proxyUser}
-          onChange={this.handleProxyUserChange}
-          disabled={!enableProxy || !hasUpdatePermission}
-          helpText={t("help.proxyUserHelpText")}
-        />
-        <ProxyExcludesTable
-          proxyExcludes={proxyExcludes}
-          onChange={(isValid, changedValue, name) =>
-            this.props.onChange(isValid, changedValue, name)
-          }
-          disabled={!enableProxy || !hasUpdatePermission}
-        />
-        <AddEntryToTableField
-          addEntry={this.addProxyExclude}
-          disabled={!enableProxy || !hasUpdatePermission}
-          buttonLabel={t("proxy-settings.add-proxy-exclude-button")}
-          fieldLabel={t("proxy-settings.add-proxy-exclude-textfield")}
-          errorMessage={t("proxy-settings.add-proxy-exclude-error")}
-        />
+        <div className="columns">
+                <div className="column is-full">
+                    <Checkbox
+                      checked={enableProxy}
+                      label={t("proxy-settings.enable-proxy")}
+                      onChange={this.handleEnableProxyChange}
+                      disabled={!hasUpdatePermission}
+                      helpText={t("help.enableProxyHelpText")}
+                    />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                    <InputField
+                      label={t("proxy-settings.proxy-password")}
+                      onChange={this.handleProxyPasswordChange}
+                      value={proxyPassword}
+                      type="password"
+                      disabled={!enableProxy || !hasUpdatePermission}
+                      helpText={t("help.proxyPasswordHelpText")}
+                    />
+                </div>
+                <div className="column is-half">
+                    <InputField
+                      label={t("proxy-settings.proxy-port")}
+                      value={proxyPort}
+                      onChange={this.handleProxyPortChange}
+                      disabled={!enableProxy || !hasUpdatePermission}
+                      helpText={t("help.proxyPortHelpText")}
+                    />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-half">
+                    <InputField
+                      label={t("proxy-settings.proxy-server")}
+                      value={proxyServer}
+                      onChange={this.handleProxyServerChange}
+                      disabled={!enableProxy || !hasUpdatePermission}
+                      helpText={t("help.proxyServerHelpText")}
+                    />
+                </div>
+                <div className="column is-half">
+                    <InputField
+                      label={t("proxy-settings.proxy-user")}
+                      value={proxyUser}
+                      onChange={this.handleProxyUserChange}
+                      disabled={!enableProxy || !hasUpdatePermission}
+                      helpText={t("help.proxyUserHelpText")}
+                    />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-full">
+                    <ProxyExcludesTable
+                      proxyExcludes={proxyExcludes}
+                      onChange={(isValid, changedValue, name) =>
+                        this.props.onChange(isValid, changedValue, name)
+                      }
+                      disabled={!enableProxy || !hasUpdatePermission}
+                    />
+                <AddEntryToTableField
+                  addEntry={this.addProxyExclude}
+                  disabled={!enableProxy || !hasUpdatePermission}
+                  buttonLabel={t("proxy-settings.add-proxy-exclude-button")}
+                  fieldLabel={t("proxy-settings.add-proxy-exclude-textfield")}
+                  errorMessage={t("proxy-settings.add-proxy-exclude-error")}
+                />
+                </div>
+            </div>
       </div>
     );
   }

scm-ui/src/config/containers/Config.js

@@ -1,86 +1,86 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { Route } from "react-router";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-
-import type { Links } from "@scm-manager/ui-types";
-import { Page, Navigation, NavLink, Section } from "@scm-manager/ui-components";
-import GlobalConfig from "./GlobalConfig";
-import type { History } from "history";
-import {connect} from "react-redux";
-import {compose} from "redux";
-import { getLinks } from "../../modules/indexResource";
-
-type Props = {
-  links: Links,
-
-  // context objects
-  t: string => string,
-  match: any,
-  history: History
-};
-
-class Config extends React.Component<Props> {
-  stripEndingSlash = (url: string) => {
-    if (url.endsWith("/")) {
-      return url.substring(0, url.length - 2);
-    }
-    return url;
-  };
-
-  matchedUrl = () => {
-    return this.stripEndingSlash(this.props.match.url);
-  };
-
-  render() {
-    const { links, t } = this.props;
-
-    const url = this.matchedUrl();
-    const extensionProps = {
-      links,
-      url
-    };
-
-    return (
-      <Page>
-        <div className="columns">
-          <div className="column is-three-quarters">
-            <Route path={url} exact component={GlobalConfig} />
-            <ExtensionPoint name="config.route"
-                            props={extensionProps}
-                            renderAll={true}
-            />
-          </div>
-          <div className="column">
-            <Navigation>
-              <Section label={t("config.navigation-title")}>
-                <NavLink
-                  to={`${url}`}
-                  label={t("global-config.navigation-label")}
-                />
-                <ExtensionPoint name="config.navigation"
-                                props={extensionProps}
-                                renderAll={true}
-                />
-              </Section>
-            </Navigation>
-          </div>
-        </div>
-      </Page>
-    );
-  }
-}
-
-const mapStateToProps = (state: any) => {
-  const links = getLinks(state);
-  return {
-    links
-  };
-};
-
-export default compose(
-  connect(mapStateToProps),
-  translate("config")
-)(Config);
-
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Route } from "react-router";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+
+import type { Links } from "@scm-manager/ui-types";
+import { Page, Navigation, NavLink, Section } from "@scm-manager/ui-components";
+import GlobalConfig from "./GlobalConfig";
+import type { History } from "history";
+import {connect} from "react-redux";
+import {compose} from "redux";
+import { getLinks } from "../../modules/indexResource";
+
+type Props = {
+  links: Links,
+
+  // context objects
+  t: string => string,
+  match: any,
+  history: History
+};
+
+class Config extends React.Component<Props> {
+  stripEndingSlash = (url: string) => {
+    if (url.endsWith("/")) {
+      return url.substring(0, url.length - 2);
+    }
+    return url;
+  };
+
+  matchedUrl = () => {
+    return this.stripEndingSlash(this.props.match.url);
+  };
+
+  render() {
+    const { links, t } = this.props;
+
+    const url = this.matchedUrl();
+    const extensionProps = {
+      links,
+      url
+    };
+
+    return (
+      <Page>
+        <div className="columns">
+          <div className="column is-three-quarters">
+            <Route path={url} exact component={GlobalConfig} />
+            <ExtensionPoint name="config.route"
+                            props={extensionProps}
+                            renderAll={true}
+            />
+          </div>
+          <div className="column is-one-quarter">
+            <Navigation>
+              <Section label={t("config.navigation-title")}>
+                <NavLink
+                  to={`${url}`}
+                  label={t("global-config.navigation-label")}
+                />
+                <ExtensionPoint name="config.navigation"
+                                props={extensionProps}
+                                renderAll={true}
+                />
+              </Section>
+            </Navigation>
+          </div>
+        </div>
+      </Page>
+    );
+  }
+}
+
+const mapStateToProps = (state: any) => {
+  const links = getLinks(state);
+  return {
+    links
+  };
+};
+
+export default compose(
+  connect(mapStateToProps),
+  translate("config")
+)(Config);
+

scm-ui/src/containers/ProfileInfo.js

@@ -1,53 +1,53 @@
-// @flow
-import React from "react";
-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";
-
-type Props = {
-  me: Me,
-
-  // Context props
-  t: string => string
-};
-type State = {};
-
-class ProfileInfo extends React.Component<Props, State> {
-  render() {
-    const { me, t } = this.props;
-    return (
-      <div className="media">
-        <AvatarWrapper>
-          <figure className="media-left">
-            <p className="image is-64x64">
-              <AvatarImage person={ me }/>
-            </p>
-          </figure>
-        </AvatarWrapper>
-        <div className="media-content">
-          <table className="table">
-            <tbody>
-              <tr>
-                <td>{t("profile.username")}</td>
-                <td>{me.name}</td>
-              </tr>
-              <tr>
-                <td>{t("profile.displayName")}</td>
-                <td>{me.displayName}</td>
-              </tr>
-              <tr>
-                <td>{t("profile.mail")}</td>
-                <td>
-                  <MailLink address={me.mail} />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default compose(translate("commons"))(ProfileInfo);
+// @flow
+import React from "react";
+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";
+
+type Props = {
+  me: Me,
+
+  // Context props
+  t: string => string
+};
+type State = {};
+
+class ProfileInfo extends React.Component<Props, State> {
+  render() {
+    const { me, t } = this.props;
+    return (
+      <div className="media">
+        <AvatarWrapper>
+          <figure className="media-left">
+            <p className="image is-64x64">
+              <AvatarImage person={ me }/>
+            </p>
+          </figure>
+        </AvatarWrapper>
+        <div className="media-content">
+          <table className="table">
+            <tbody>
+              <tr>
+                <td className="has-text-weight-semibold">{t("profile.username")}</td>
+                <td>{me.name}</td>
+              </tr>
+              <tr>
+                <td className="has-text-weight-semibold">{t("profile.displayName")}</td>
+                <td>{me.displayName}</td>
+              </tr>
+              <tr>
+                <td className="has-text-weight-semibold">{t("profile.mail")}</td>
+                <td>
+                  <MailLink address={me.mail} />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(translate("commons"))(ProfileInfo);

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

@@ -1,69 +1,69 @@
-//@flow
-import React from "react";
-import type { Group } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
-import GroupMember from "./GroupMember";
-import { DateFromNow } from "@scm-manager/ui-components";
-
-type Props = {
-  group: Group,
-  t: string => string
-};
-
-class Details extends React.Component<Props> {
-  render() {
-    const { group, t } = this.props;
-    return (
-      <table className="table content">
-        <tbody>
-          <tr>
-            <td>{t("group.name")}</td>
-            <td>{group.name}</td>
-          </tr>
-          <tr>
-            <td>{t("group.description")}</td>
-            <td>{group.description}</td>
-          </tr>
-          <tr>
-            <td>{t("group.type")}</td>
-            <td>{group.type}</td>
-          </tr>
-          <tr>
-            <td>{t("group.creationDate")}</td>
-            <td>
-              <DateFromNow date={group.creationDate} />
-            </td>
-          </tr>
-          <tr>
-            <td>{t("group.lastModified")}</td>
-            <td>
-              <DateFromNow date={group.lastModified} />
-            </td>
-          </tr>
-          {this.renderMembers()}
-        </tbody>
-      </table>
-    );
-  }
-
-  renderMembers() {
-    if (this.props.group.members.length > 0) {
-      return (
-        <tr>
-          <td>
-            {this.props.t("group.members")}
-            <ul>
-              {this.props.group._embedded.members.map((member, index) => {
-                return <GroupMember key={index} member={member} />;
-              })}
-            </ul>
-          </td>
-        </tr>
-      );
-    } else {
-      return;
-    }
-  }
-}
-
-export default translate("groups")(Details);
+//@flow
+import React from "react";
+import type { Group } from "@scm-manager/ui-types";
+import { translate } from "react-i18next";
+import GroupMember from "./GroupMember";
+import { DateFromNow } from "@scm-manager/ui-components";
+
+type Props = {
+  group: Group,
+  t: string => string
+};
+
+class Details extends React.Component<Props> {
+  render() {
+    const { group, t } = this.props;
+    return (
+      <table className="table content">
+        <tbody>
+          <tr>
+            <td className="has-text-weight-semibold">{t("group.name")}</td>
+            <td>{group.name}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("group.description")}</td>
+            <td>{group.description}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("group.type")}</td>
+            <td>{group.type}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("group.creationDate")}</td>
+            <td>
+              <DateFromNow date={group.creationDate} />
+            </td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("group.lastModified")}</td>
+            <td>
+              <DateFromNow date={group.lastModified} />
+            </td>
+          </tr>
+          {this.renderMembers()}
+        </tbody>
+      </table>
+    );
+  }
+
+  renderMembers() {
+    if (this.props.group.members.length > 0) {
+      return (
+        <tr>
+          <td>
+            {this.props.t("group.members")}
+            <ul>
+               {this.props.group._embedded.members.map((member, index) => {
+                return <GroupMember key={index} member={member} />;
+              })}
+            </ul>
+          </td>
+        </tr>
+      );
+    } else {
+      return;
+    }
+  }
+}
+
+export default translate("groups")(Details);

scm-ui/src/groups/components/table/GroupRow.js

@@ -1,25 +1,25 @@
-// @flow
-import React from "react";
-import { Link } from "react-router-dom";
-import type { Group } from "@scm-manager/ui-types";
-
-type Props = {
-  group: Group
-};
-
-export default class GroupRow extends React.Component<Props> {
-  renderLink(to: string, label: string) {
-    return <Link to={to}>{label}</Link>;
-  }
-
-  render() {
-    const { group } = this.props;
-    const to = `/group/${group.name}`;
-    return (
-      <tr>
-        <td>{this.renderLink(to, group.name)}</td>
-        <td className="is-hidden-mobile">{group.description}</td>
-      </tr>
-    );
-  }
-}
+// @flow
+import React from "react";
+import { Link } from "react-router-dom";
+import type { Group } from "@scm-manager/ui-types";
+
+type Props = {
+  group: Group
+};
+
+export default class GroupRow extends React.Component<Props> {
+  renderLink(to: string, label: string) {
+    return <Link to={to}>{label}</Link>;
+  }
+
+  render() {
+    const { group } = this.props;
+    const to = `/group/${group.name}`;
+    return (
+      <tr>
+        <td>{this.renderLink(to, group.name)}</td>
+        <td className="is-hidden-mobile">{group.description}</td>
+      </tr>
+    );
+  }
+}

scm-ui/src/groups/components/table/GroupTable.js

@@ -1,33 +1,33 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import GroupRow from "./GroupRow";
-import type { Group } from "@scm-manager/ui-types";
-
-type Props = {
-  t: string => string,
-  groups: Group[]
-};
-
-class GroupTable extends React.Component<Props> {
-  render() {
-    const { groups, t } = this.props;
-    return (
-      <table className="table is-hoverable is-fullwidth">
-        <thead>
-          <tr>
-            <th>{t("group.name")}</th>
-            <th className="is-hidden-mobile">{t("group.description")}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {groups.map((group, index) => {
-            return <GroupRow key={index} group={group} />;
-          })}
-        </tbody>
-      </table>
-    );
-  }
-}
-
-export default translate("groups")(GroupTable);
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import GroupRow from "./GroupRow";
+import type { Group } from "@scm-manager/ui-types";
+
+type Props = {
+  t: string => string,
+  groups: Group[]
+};
+
+class GroupTable extends React.Component<Props> {
+  render() {
+    const { groups, t } = this.props;
+    return (
+      <table className="card-table table is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th>{t("group.name")}</th>
+            <th className="is-hidden-mobile">{t("group.description")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {groups.map((group, index) => {
+            return <GroupRow key={index} group={group} />;
+          })}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default translate("groups")(GroupTable);

scm-ui/src/repos/components/RepositoryDetailTable.js

@@ -1,55 +1,55 @@
-//@flow
-import React from "react";
-import type { Repository } from "@scm-manager/ui-types";
-import { MailLink, DateFromNow } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
-
-type Props = {
-  repository: Repository,
-  // context props
-  t: string => string
-};
-
-class RepositoryDetailTable extends React.Component<Props> {
-  render() {
-    const { repository, t } = this.props;
-    return (
-      <table className="table">
-        <tbody>
-          <tr>
-            <td>{t("repository.name")}</td>
-            <td>{repository.name}</td>
-          </tr>
-          <tr>
-            <td>{t("repository.type")}</td>
-            <td>{repository.type}</td>
-          </tr>
-          <tr>
-            <td>{t("repository.contact")}</td>
-            <td>
-              <MailLink address={repository.contact} />
-            </td>
-          </tr>
-          <tr>
-            <td>{t("repository.description")}</td>
-            <td>{repository.description}</td>
-          </tr>
-          <tr>
-            <td>{t("repository.creationDate")}</td>
-            <td>
-              <DateFromNow date={repository.creationDate} />
-            </td>
-          </tr>
-          <tr>
-            <td>{t("repository.lastModified")}</td>
-            <td>
-              <DateFromNow date={repository.lastModified} />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    );
-  }
-}
-
-export default translate("repos")(RepositoryDetailTable);
+//@flow
+import React from "react";
+import type { Repository } from "@scm-manager/ui-types";
+import { MailLink, DateFromNow } from "@scm-manager/ui-components";
+import { translate } from "react-i18next";
+
+type Props = {
+  repository: Repository,
+  // context props
+  t: string => string
+};
+
+class RepositoryDetailTable extends React.Component<Props> {
+  render() {
+    const { repository, t } = this.props;
+    return (
+      <table className="table">
+        <tbody>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.name")}</td>
+            <td>{repository.name}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.type")}</td>
+            <td>{repository.type}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.contact")}</td>
+            <td>
+              <MailLink address={repository.contact} />
+            </td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.description")}</td>
+            <td>{repository.description}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.creationDate")}</td>
+            <td>
+              <DateFromNow date={repository.creationDate} />
+            </td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("repository.lastModified")}</td>
+            <td>
+              <DateFromNow date={repository.lastModified} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default translate("repos")(RepositoryDetailTable);

scm-ui/src/repos/components/RepositoryDetails.js

@@ -1,29 +1,30 @@
-//@flow
-import React from "react";
-import type { Repository } from "@scm-manager/ui-types";
-import RepositoryDetailTable from "./RepositoryDetailTable";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-
-type Props = {
-  repository: Repository
-};
-
-class RepositoryDetails extends React.Component<Props> {
-  render() {
-    const { repository } = this.props;
-    return (
-      <div>
-        <RepositoryDetailTable repository={repository} />
-        <div className="content">
-          <ExtensionPoint
-            name="repos.repository-details.information"
-            renderAll={true}
-            props={{ repository }}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-export default RepositoryDetails;
+//@flow
+import React from "react";
+import type { Repository } from "@scm-manager/ui-types";
+import RepositoryDetailTable from "./RepositoryDetailTable";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+
+type Props = {
+  repository: Repository
+};
+
+class RepositoryDetails extends React.Component<Props> {
+  render() {
+    const { repository } = this.props;
+    return (
+      <div>
+        <RepositoryDetailTable repository={repository} />
+          <hr />
+        <div className="content">
+          <ExtensionPoint
+            name="repos.repository-details.information"
+            renderAll={true}
+            props={{ repository }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RepositoryDetails;

scm-ui/src/repos/components/list/RepositoryEntry.js

@@ -9,15 +9,10 @@ import classNames from "classnames";
 import RepositoryAvatar from "./RepositoryAvatar";
 
 const styles = {
-  outer: {
-    position: "relative"
-  },
   overlay: {
     position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    right: 0
+    height: "calc(120px - 1.5rem)",
+    width: "calc(50% - 3rem)"
   },
   inner: {
     position: "relative",
@@ -26,11 +21,16 @@ const styles = {
   },
   innerLink: {
     pointerEvents: "all"
+  },
+  centerImage: {
+    marginTop: "0.8em",
+    marginLeft: "1em !important"
   }
 };
 
 type Props = {
   repository: Repository,
+  fullColumnWidth?: boolean,
   // context props
   classes: any
 };
@@ -44,7 +44,7 @@ class RepositoryEntry extends React.Component<Props> {
     if (repository._links["changesets"]) {
       return (
         <RepositoryEntryLink
-          iconClass="fa-code-branch"
+          iconClass="fa-code-branch fa-lg"
           to={repositoryLink + "/changesets"}
         />
       );
@@ -56,7 +56,7 @@ class RepositoryEntry extends React.Component<Props> {
     if (repository._links["sources"]) {
       return (
         <RepositoryEntryLink
-          iconClass="fa-code"
+          iconClass="fa-code fa-lg"
           to={repositoryLink + "/sources"}
         />
       );
@@ -67,29 +67,40 @@ class RepositoryEntry extends React.Component<Props> {
   renderModifyLink = (repository: Repository, repositoryLink: string) => {
     if (repository._links["update"]) {
       return (
-        <RepositoryEntryLink iconClass="fa-cog" to={repositoryLink + "/edit"} />
+        <RepositoryEntryLink
+          iconClass="fa-cog fa-lg"
+          to={repositoryLink + "/edit"}
+        />
       );
     }
     return null;
   };
 
   render() {
-    const { repository, classes } = this.props;
+    const { repository, classes, fullColumnWidth } = this.props;
     const repositoryLink = this.createLink(repository);
+    const halfColumn = fullColumnWidth ? "is-full" : "is-half";
     return (
-      <div className={classNames("box", "box-link-shadow", classes.outer)}>
-        <Link className={classes.overlay} to={repositoryLink} />
+      <div
+        className={classNames(
+          "box",
+          "box-link-shadow",
+          "column",
+          "is-clipped",
+          halfColumn
+        )}
+      >
+        <Link className={classNames(classes.overlay)} to={repositoryLink} />
         <article className={classNames("media", classes.inner)}>
-          <figure className="media-left">
+          <figure className={classNames(classes.centerImage, "media-left")}>
             <RepositoryAvatar repository={repository} />
           </figure>
           <div className="media-content">
             <div className="content">
-              <p>
+              <p className="is-marginless">
                 <strong>{repository.name}</strong>
-                <br />
-                {repository.description}
               </p>
+              <p className={"shorten-text"}>{repository.description}</p>
             </div>
             <nav className="level is-mobile">
               <div className="level-left">

scm-ui/src/repos/components/list/RepositoryEntryLink.js

@@ -1,34 +1,35 @@
-//@flow
-import React from "react";
-import { Link } from "react-router-dom";
-import injectSheet from "react-jss";
-import classNames from "classnames";
-
-const styles = {
-  link: {
-    pointerEvents: "all"
-  }
-};
-
-type Props = {
-  to: string,
-  iconClass: string,
-
-  // context props
-  classes: any
-};
-
-class RepositoryEntryLink extends React.Component<Props> {
-  render() {
-    const { to, iconClass, classes } = this.props;
-    return (
-      <Link className={classNames("level-item", classes.link)} to={to}>
-        <span className="icon is-small">
-          <i className={classNames("fa", iconClass)} />
-        </span>
-      </Link>
-    );
-  }
-}
-
-export default injectSheet(styles)(RepositoryEntryLink);
+//@flow
+import React from "react";
+import { Link } from "react-router-dom";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+
+const styles = {
+  link: {
+    pointerEvents: "all",
+    marginRight: "1.25rem !important"
+  }
+};
+
+type Props = {
+  to: string,
+  iconClass: string,
+
+  // context props
+  classes: any
+};
+
+class RepositoryEntryLink extends React.Component<Props> {
+  render() {
+    const { to, iconClass, classes } = this.props;
+    return (
+      <Link className={classNames("level-item", classes.link)} to={to}>
+        <span className="icon is-small">
+          <i className={classNames("fa", iconClass)} />
+        </span>
+      </Link>
+    );
+  }
+}
+
+export default injectSheet(styles)(RepositoryEntryLink);

scm-ui/src/repos/components/list/RepositoryGroupEntry.js

@@ -1,16 +1,23 @@
 //@flow
 import React from "react";
-import type { RepositoryGroup } from "@scm-manager/ui-types";
+import type { RepositoryGroup, Repository } from "@scm-manager/ui-types";
 import injectSheet from "react-jss";
 import classNames from "classnames";
 import RepositoryEntry from "./RepositoryEntry";
 
 const styles = {
   pointer: {
-    cursor: "pointer"
+    cursor: "pointer",
+    fontSize: "1.5rem"
   },
   repoGroup: {
     marginBottom: "1em"
+  },
+  wrapper: {
+    padding: "0 0.75rem"
+  },
+  clearfix: {
+    clear: "both"
   }
 };
 
@@ -39,6 +46,18 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
     }));
   };
 
+  isLastEntry = (array: Repository[], index: number) => {
+    return index === array.length - 1;
+  };
+
+  isLengthOdd = (array: Repository[]) => {
+    return array.length % 2 !== 0;
+  };
+
+  isFullSize = (array: Repository[], index: number) => {
+    return this.isLastEntry(array, index) && this.isLengthOdd(array);
+  };
+
   render() {
     const { group, classes } = this.props;
     const { collapsed } = this.state;
@@ -47,7 +66,10 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
     let content = null;
     if (!collapsed) {
       content = group.repositories.map((repository, index) => {
-        return <RepositoryEntry repository={repository} key={index} />;
+        const fullColumnWidth = this.isFullSize(group.repositories, index);
+        return (
+          <RepositoryEntry repository={repository} fullColumnWidth={fullColumnWidth} key={index} />
+        );
       });
     }
     return (
@@ -58,7 +80,10 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
           </span>
         </h2>
         <hr />
-        {content}
+        <div className={classNames("columns", "is-multiline", classes.wrapper)}>
+          {content}
+        </div>
+        <div className={classes.clearfix} />
       </div>
     );
   }

scm-ui/src/repos/permissions/components/CreatePermissionForm.js

@@ -127,6 +127,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
 
     return (
       <div>
+        <hr />
         <h2 className="subtitle">
           {t("permission.add-permission.add-permission-heading")}
         </h2>
@@ -153,19 +154,29 @@ class CreatePermissionForm extends React.Component<Props, State> {
               {t("permission.group-permission")}
             </label>
           </div>
-          {this.renderAutocompletionField()}
 
-          <TypeSelector
-            label={t("permission.type")}
-            helpText={t("permission.help.typeHelpText")}
-            handleTypeChange={this.handleTypeChange}
-            type={type ? type : "READ"}
-          />
-          <SubmitButton
-            label={t("permission.add-permission.submit-button")}
-            loading={loading}
-            disabled={!this.state.valid || this.state.name === ""}
-          />
+        <div className="columns">
+            <div className="column is-three-quarters">
+                {this.renderAutocompletionField()}
+            </div>
+            <div className="column is-one-quarter">
+                  <TypeSelector
+                    label={t("permission.type")}
+                    helpText={t("permission.help.typeHelpText")}
+                    handleTypeChange={this.handleTypeChange}
+                    type={type ? type : "READ"}
+                  />
+            </div>
+            </div>
+        <div className="columns">
+            <div className="column">
+              <SubmitButton
+                label={t("permission.add-permission.submit-button")}
+                loading={loading}
+                disabled={!this.state.valid || this.state.name === ""}
+              />
+            </div>
+        </div>
         </form>
       </div>
     );

scm-ui/src/repos/permissions/components/TypeSelector.js

@@ -1,42 +1,42 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import { Select } from "@scm-manager/ui-components";
-
-type Props = {
-  t: string => string,
-  handleTypeChange: string => void,
-  type: string,
-  label?: string,
-  helpText?: string,
-  loading?: boolean
-};
-
-class TypeSelector extends React.Component<Props> {
-  render() {
-    const { type, handleTypeChange, loading, label, helpText } = this.props;
-    const types = ["READ", "OWNER", "WRITE"];
-
-    return (
-      <Select
-        onChange={handleTypeChange}
-        value={type ? type : "READ"}
-        options={this.createSelectOptions(types)}
-        loading={loading}
-        label={label}
-        helpText={helpText}
-      />
-    );
-  }
-
-  createSelectOptions(types: string[]) {
-    return types.map(type => {
-      return {
-        label: type,
-        value: type
-      };
-    });
-  }
-}
-
-export default translate("repos")(TypeSelector);
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Select } from "@scm-manager/ui-components";
+
+type Props = {
+  t: string => string,
+  handleTypeChange: string => void,
+  type: string,
+  label?: string,
+  helpText?: string,
+  loading?: boolean
+};
+
+class TypeSelector extends React.Component<Props> {
+  render() {
+    const { type, handleTypeChange, loading, label, helpText } = this.props;
+    const types = ["READ", "OWNER", "WRITE"];
+
+    return (
+      <Select
+        onChange={handleTypeChange}
+        value={type ? type : "READ"}
+        options={this.createSelectOptions(types)}
+        loading={loading}
+        label={label}
+        helpText={helpText}
+      />
+    );
+  }
+
+  createSelectOptions(types: string[]) {
+    return types.map(type => {
+      return {
+        label: type,
+        value: type
+      };
+    });
+  }
+}
+
+export default translate("repos")(TypeSelector);

scm-ui/src/repos/permissions/containers/Permissions.js

@@ -1,225 +1,225 @@
-//@flow
-import React from "react";
-import { connect } from "react-redux";
-import { translate } from "react-i18next";
-import {
-  fetchPermissions,
-  getFetchPermissionsFailure,
-  isFetchPermissionsPending,
-  getPermissionsOfRepo,
-  hasCreatePermission,
-  createPermission,
-  isCreatePermissionPending,
-  getCreatePermissionFailure,
-  createPermissionReset,
-  getDeletePermissionsFailure,
-  getModifyPermissionsFailure,
-  modifyPermissionReset,
-  deletePermissionReset
-} from "../modules/permissions";
-import { Loading, ErrorPage } from "@scm-manager/ui-components";
-import type {
-  Permission,
-  PermissionCollection,
-  PermissionCreateEntry
-} from "@scm-manager/ui-types";
-import SinglePermission from "./SinglePermission";
-import CreatePermissionForm from "../components/CreatePermissionForm";
-import type { History } from "history";
-import { getPermissionsLink } from "../../modules/repos";
-import {
-  getGroupAutoCompleteLink,
-  getUserAutoCompleteLink
-} from "../../../modules/indexResource";
-
-type Props = {
-  namespace: string,
-  repoName: string,
-  loading: boolean,
-  error: Error,
-  permissions: PermissionCollection,
-  hasPermissionToCreate: boolean,
-  loadingCreatePermission: boolean,
-  permissionsLink: string,
-  groupAutoCompleteLink: string,
-  userAutoCompleteLink: string,
-
-  //dispatch functions
-  fetchPermissions: (link: string, namespace: string, repoName: string) => void,
-  createPermission: (
-    link: string,
-    permission: PermissionCreateEntry,
-    namespace: string,
-    repoName: string,
-    callback?: () => void
-  ) => void,
-  createPermissionReset: (string, string) => void,
-  modifyPermissionReset: (string, string) => void,
-  deletePermissionReset: (string, string) => void,
-  // context props
-  t: string => string,
-  match: any,
-  history: History
-};
-
-class Permissions extends React.Component<Props> {
-  componentDidMount() {
-    const {
-      fetchPermissions,
-      namespace,
-      repoName,
-      modifyPermissionReset,
-      createPermissionReset,
-      deletePermissionReset,
-      permissionsLink
-    } = this.props;
-
-    createPermissionReset(namespace, repoName);
-    modifyPermissionReset(namespace, repoName);
-    deletePermissionReset(namespace, repoName);
-    fetchPermissions(permissionsLink, namespace, repoName);
-  }
-
-  createPermission = (permission: Permission) => {
-    this.props.createPermission(
-      this.props.permissionsLink,
-      permission,
-      this.props.namespace,
-      this.props.repoName
-    );
-  };
-
-  render() {
-    const {
-      loading,
-      error,
-      permissions,
-      t,
-      namespace,
-      repoName,
-      loadingCreatePermission,
-      hasPermissionToCreate,
-      userAutoCompleteLink,
-      groupAutoCompleteLink
-    } = this.props;
-    if (error) {
-      return (
-        <ErrorPage
-          title={t("permission.error-title")}
-          subtitle={t("permission.error-subtitle")}
-          error={error}
-        />
-      );
-    }
-
-    if (loading || !permissions) {
-      return <Loading />;
-    }
-
-    const createPermissionForm = hasPermissionToCreate ? (
-      <CreatePermissionForm
-        createPermission={permission => this.createPermission(permission)}
-        loading={loadingCreatePermission}
-        currentPermissions={permissions}
-        userAutoCompleteLink={userAutoCompleteLink}
-        groupAutoCompleteLink={groupAutoCompleteLink}
-      />
-    ) : null;
-
-    return (
-      <div>
-        <table className="table is-hoverable is-fullwidth">
-          <thead>
-            <tr>
-              <th>{t("permission.name")}</th>
-              <th className="is-hidden-mobile">
-                {t("permission.group-permission")}
-              </th>
-              <th>{t("permission.type")}</th>
-              <th />
-            </tr>
-          </thead>
-          <tbody>
-            {permissions.map(permission => {
-              return (
-                <SinglePermission
-                  key={permission.name + permission.groupPermission.toString()}
-                  namespace={namespace}
-                  repoName={repoName}
-                  permission={permission}
-                />
-              );
-            })}
-          </tbody>
-        </table>
-        {createPermissionForm}
-      </div>
-    );
-  }
-}
-
-const mapStateToProps = (state, ownProps) => {
-  const namespace = ownProps.namespace;
-  const repoName = ownProps.repoName;
-  const error =
-    getFetchPermissionsFailure(state, namespace, repoName) ||
-    getCreatePermissionFailure(state, namespace, repoName) ||
-    getDeletePermissionsFailure(state, namespace, repoName) ||
-    getModifyPermissionsFailure(state, namespace, repoName);
-  const loading = isFetchPermissionsPending(state, namespace, repoName);
-  const permissions = getPermissionsOfRepo(state, namespace, repoName);
-  const loadingCreatePermission = isCreatePermissionPending(
-    state,
-    namespace,
-    repoName
-  );
-  const hasPermissionToCreate = hasCreatePermission(state, namespace, repoName);
-  const permissionsLink = getPermissionsLink(state, namespace, repoName);
-  const groupAutoCompleteLink = getGroupAutoCompleteLink(state);
-  const userAutoCompleteLink = getUserAutoCompleteLink(state);
-  return {
-    namespace,
-    repoName,
-    error,
-    loading,
-    permissions,
-    hasPermissionToCreate,
-    loadingCreatePermission,
-    permissionsLink,
-    groupAutoCompleteLink,
-    userAutoCompleteLink
-  };
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    fetchPermissions: (link: string, namespace: string, repoName: string) => {
-      dispatch(fetchPermissions(link, namespace, repoName));
-    },
-    createPermission: (
-      link: string,
-      permission: PermissionCreateEntry,
-      namespace: string,
-      repoName: string,
-      callback?: () => void
-    ) => {
-      dispatch(
-        createPermission(link, permission, namespace, repoName, callback)
-      );
-    },
-    createPermissionReset: (namespace: string, repoName: string) => {
-      dispatch(createPermissionReset(namespace, repoName));
-    },
-    modifyPermissionReset: (namespace: string, repoName: string) => {
-      dispatch(modifyPermissionReset(namespace, repoName));
-    },
-    deletePermissionReset: (namespace: string, repoName: string) => {
-      dispatch(deletePermissionReset(namespace, repoName));
-    }
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(translate("repos")(Permissions));
+//@flow
+import React from "react";
+import { connect } from "react-redux";
+import { translate } from "react-i18next";
+import {
+  fetchPermissions,
+  getFetchPermissionsFailure,
+  isFetchPermissionsPending,
+  getPermissionsOfRepo,
+  hasCreatePermission,
+  createPermission,
+  isCreatePermissionPending,
+  getCreatePermissionFailure,
+  createPermissionReset,
+  getDeletePermissionsFailure,
+  getModifyPermissionsFailure,
+  modifyPermissionReset,
+  deletePermissionReset
+} from "../modules/permissions";
+import { Loading, ErrorPage } from "@scm-manager/ui-components";
+import type {
+  Permission,
+  PermissionCollection,
+  PermissionCreateEntry
+} from "@scm-manager/ui-types";
+import SinglePermission from "./SinglePermission";
+import CreatePermissionForm from "../components/CreatePermissionForm";
+import type { History } from "history";
+import { getPermissionsLink } from "../../modules/repos";
+import {
+  getGroupAutoCompleteLink,
+  getUserAutoCompleteLink
+} from "../../../modules/indexResource";
+
+type Props = {
+  namespace: string,
+  repoName: string,
+  loading: boolean,
+  error: Error,
+  permissions: PermissionCollection,
+  hasPermissionToCreate: boolean,
+  loadingCreatePermission: boolean,
+  permissionsLink: string,
+  groupAutoCompleteLink: string,
+  userAutoCompleteLink: string,
+
+  //dispatch functions
+  fetchPermissions: (link: string, namespace: string, repoName: string) => void,
+  createPermission: (
+    link: string,
+    permission: PermissionCreateEntry,
+    namespace: string,
+    repoName: string,
+    callback?: () => void
+  ) => void,
+  createPermissionReset: (string, string) => void,
+  modifyPermissionReset: (string, string) => void,
+  deletePermissionReset: (string, string) => void,
+  // context props
+  t: string => string,
+  match: any,
+  history: History
+};
+
+class Permissions extends React.Component<Props> {
+  componentDidMount() {
+    const {
+      fetchPermissions,
+      namespace,
+      repoName,
+      modifyPermissionReset,
+      createPermissionReset,
+      deletePermissionReset,
+      permissionsLink
+    } = this.props;
+
+    createPermissionReset(namespace, repoName);
+    modifyPermissionReset(namespace, repoName);
+    deletePermissionReset(namespace, repoName);
+    fetchPermissions(permissionsLink, namespace, repoName);
+  }
+
+  createPermission = (permission: Permission) => {
+    this.props.createPermission(
+      this.props.permissionsLink,
+      permission,
+      this.props.namespace,
+      this.props.repoName
+    );
+  };
+
+  render() {
+    const {
+      loading,
+      error,
+      permissions,
+      t,
+      namespace,
+      repoName,
+      loadingCreatePermission,
+      hasPermissionToCreate,
+      userAutoCompleteLink,
+      groupAutoCompleteLink
+    } = this.props;
+    if (error) {
+      return (
+        <ErrorPage
+          title={t("permission.error-title")}
+          subtitle={t("permission.error-subtitle")}
+          error={error}
+        />
+      );
+    }
+
+    if (loading || !permissions) {
+      return <Loading />;
+    }
+
+    const createPermissionForm = hasPermissionToCreate ? (
+      <CreatePermissionForm
+        createPermission={permission => this.createPermission(permission)}
+        loading={loadingCreatePermission}
+        currentPermissions={permissions}
+        userAutoCompleteLink={userAutoCompleteLink}
+        groupAutoCompleteLink={groupAutoCompleteLink}
+      />
+    ) : null;
+
+    return (
+      <div>
+        <table  className="has-background-light table is-hoverable is-fullwidth">
+          <thead>
+            <tr>
+              <th>{t("permission.name")}</th>
+              <th className="is-hidden-mobile">
+                {t("permission.group-permission")}
+              </th>
+              <th>{t("permission.type")}</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {permissions.map(permission => {
+              return (
+                <SinglePermission
+                  key={permission.name + permission.groupPermission.toString()}
+                  namespace={namespace}
+                  repoName={repoName}
+                  permission={permission}
+                />
+              );
+            })}
+          </tbody>
+        </table>
+        {createPermissionForm}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  const namespace = ownProps.namespace;
+  const repoName = ownProps.repoName;
+  const error =
+    getFetchPermissionsFailure(state, namespace, repoName) ||
+    getCreatePermissionFailure(state, namespace, repoName) ||
+    getDeletePermissionsFailure(state, namespace, repoName) ||
+    getModifyPermissionsFailure(state, namespace, repoName);
+  const loading = isFetchPermissionsPending(state, namespace, repoName);
+  const permissions = getPermissionsOfRepo(state, namespace, repoName);
+  const loadingCreatePermission = isCreatePermissionPending(
+    state,
+    namespace,
+    repoName
+  );
+  const hasPermissionToCreate = hasCreatePermission(state, namespace, repoName);
+  const permissionsLink = getPermissionsLink(state, namespace, repoName);
+  const groupAutoCompleteLink = getGroupAutoCompleteLink(state);
+  const userAutoCompleteLink = getUserAutoCompleteLink(state);
+  return {
+    namespace,
+    repoName,
+    error,
+    loading,
+    permissions,
+    hasPermissionToCreate,
+    loadingCreatePermission,
+    permissionsLink,
+    groupAutoCompleteLink,
+    userAutoCompleteLink
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchPermissions: (link: string, namespace: string, repoName: string) => {
+      dispatch(fetchPermissions(link, namespace, repoName));
+    },
+    createPermission: (
+      link: string,
+      permission: PermissionCreateEntry,
+      namespace: string,
+      repoName: string,
+      callback?: () => void
+    ) => {
+      dispatch(
+        createPermission(link, permission, namespace, repoName, callback)
+      );
+    },
+    createPermissionReset: (namespace: string, repoName: string) => {
+      dispatch(createPermissionReset(namespace, repoName));
+    },
+    modifyPermissionReset: (namespace: string, repoName: string) => {
+      dispatch(modifyPermissionReset(namespace, repoName));
+    },
+    deletePermissionReset: (namespace: string, repoName: string) => {
+      dispatch(deletePermissionReset(namespace, repoName));
+    }
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(translate("repos")(Permissions));

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

@@ -1,176 +1,176 @@
-// @flow
-import React from "react";
-import type { Permission } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
-import {
-  modifyPermission,
-  isModifyPermissionPending,
-  deletePermission,
-  isDeletePermissionPending
-} from "../modules/permissions";
-import { connect } from "react-redux";
-import type { History } from "history";
-import { Checkbox } from "@scm-manager/ui-components";
-import DeletePermissionButton from "../components/buttons/DeletePermissionButton";
-import TypeSelector from "../components/TypeSelector";
-
-type Props = {
-  submitForm: Permission => void,
-  modifyPermission: (Permission, string, string) => void,
-  permission: Permission,
-  t: string => string,
-  namespace: string,
-  repoName: string,
-  match: any,
-  history: History,
-  loading: boolean,
-  deletePermission: (Permission, string, string) => void,
-  deleteLoading: boolean
-};
-
-type State = {
-  permission: Permission
-};
-
-class SinglePermission extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      permission: {
-        name: "",
-        type: "READ",
-        groupPermission: false,
-        _links: {}
-      }
-    };
-  }
-
-  componentDidMount() {
-    const { permission } = this.props;
-    if (permission) {
-      this.setState({
-        permission: {
-          name: permission.name,
-          type: permission.type,
-          groupPermission: permission.groupPermission,
-          _links: permission._links
-        }
-      });
-    }
-  }
-
-  deletePermission = () => {
-    this.props.deletePermission(
-      this.props.permission,
-      this.props.namespace,
-      this.props.repoName
-    );
-  };
-
-  render() {
-    const { permission } = this.state;
-    const { loading, namespace, repoName } = this.props;
-    const typeSelector =
-      this.props.permission._links && this.props.permission._links.update ? (
-        <td>
-          <TypeSelector
-            handleTypeChange={this.handleTypeChange}
-            type={permission.type ? permission.type : "READ"}
-            loading={loading}
-          />
-        </td>
-      ) : (
-        <td>{permission.type}</td>
-      );
-
-    return (
-      <tr>
-        <td>{permission.name}</td>
-        <td>
-          <Checkbox checked={permission ? permission.groupPermission : false} />
-        </td>
-        {typeSelector}
-        <td>
-          <DeletePermissionButton
-            permission={permission}
-            namespace={namespace}
-            repoName={repoName}
-            deletePermission={this.deletePermission}
-            loading={this.props.deleteLoading}
-          />
-        </td>
-      </tr>
-    );
-  }
-
-  handleTypeChange = (type: string) => {
-    this.setState({
-      permission: {
-        ...this.state.permission,
-        type: type
-      }
-    });
-    this.modifyPermission(type);
-  };
-
-  modifyPermission = (type: string) => {
-    let permission = this.state.permission;
-    permission.type = type;
-    this.props.modifyPermission(
-      permission,
-      this.props.namespace,
-      this.props.repoName
-    );
-  };
-
-  createSelectOptions(types: string[]) {
-    return types.map(type => {
-      return {
-        label: type,
-        value: type
-      };
-    });
-  }
-}
-
-const mapStateToProps = (state, ownProps) => {
-  const permission = ownProps.permission;
-  const loading = isModifyPermissionPending(
-    state,
-    ownProps.namespace,
-    ownProps.repoName,
-    permission
-  );
-  const deleteLoading = isDeletePermissionPending(
-    state,
-    ownProps.namespace,
-    ownProps.repoName,
-    permission
-  );
-
-  return { loading, deleteLoading };
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    modifyPermission: (
-      permission: Permission,
-      namespace: string,
-      repoName: string
-    ) => {
-      dispatch(modifyPermission(permission, namespace, repoName));
-    },
-    deletePermission: (
-      permission: Permission,
-      namespace: string,
-      repoName: string
-    ) => {
-      dispatch(deletePermission(permission, namespace, repoName));
-    }
-  };
-};
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(translate("repos")(SinglePermission));
+// @flow
+import React from "react";
+import type { Permission } from "@scm-manager/ui-types";
+import { translate } from "react-i18next";
+import {
+  modifyPermission,
+  isModifyPermissionPending,
+  deletePermission,
+  isDeletePermissionPending
+} from "../modules/permissions";
+import { connect } from "react-redux";
+import type { History } from "history";
+import { Checkbox } from "@scm-manager/ui-components";
+import DeletePermissionButton from "../components/buttons/DeletePermissionButton";
+import TypeSelector from "../components/TypeSelector";
+
+type Props = {
+  submitForm: Permission => void,
+  modifyPermission: (Permission, string, string) => void,
+  permission: Permission,
+  t: string => string,
+  namespace: string,
+  repoName: string,
+  match: any,
+  history: History,
+  loading: boolean,
+  deletePermission: (Permission, string, string) => void,
+  deleteLoading: boolean
+};
+
+type State = {
+  permission: Permission
+};
+
+class SinglePermission extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      permission: {
+        name: "",
+        type: "READ",
+        groupPermission: false,
+        _links: {}
+      }
+    };
+  }
+
+  componentDidMount() {
+    const { permission } = this.props;
+    if (permission) {
+      this.setState({
+        permission: {
+          name: permission.name,
+          type: permission.type,
+          groupPermission: permission.groupPermission,
+          _links: permission._links
+        }
+      });
+    }
+  }
+
+  deletePermission = () => {
+    this.props.deletePermission(
+      this.props.permission,
+      this.props.namespace,
+      this.props.repoName
+    );
+  };
+
+  render() {
+    const { permission } = this.state;
+    const { loading, namespace, repoName } = this.props;
+    const typeSelector =
+      this.props.permission._links && this.props.permission._links.update ? (
+        <td>
+          <TypeSelector
+            handleTypeChange={this.handleTypeChange}
+            type={permission.type ? permission.type : "READ"}
+            loading={loading}
+          />
+        </td>
+      ) : (
+        <td>{permission.type}</td>
+      );
+
+    return (
+      <tr>
+        <td>{permission.name}</td>
+        <td>
+          <Checkbox checked={permission ? permission.groupPermission : false} />
+        </td>
+        {typeSelector}
+        <td>
+          <DeletePermissionButton
+            permission={permission}
+            namespace={namespace}
+            repoName={repoName}
+            deletePermission={this.deletePermission}
+            loading={this.props.deleteLoading}
+          />
+        </td>
+      </tr>
+    );
+  }
+
+  handleTypeChange = (type: string) => {
+    this.setState({
+      permission: {
+        ...this.state.permission,
+        type: type
+      }
+    });
+    this.modifyPermission(type);
+  };
+
+  modifyPermission = (type: string) => {
+    let permission = this.state.permission;
+    permission.type = type;
+    this.props.modifyPermission(
+      permission,
+      this.props.namespace,
+      this.props.repoName
+    );
+  };
+
+  createSelectOptions(types: string[]) {
+    return types.map(type => {
+      return {
+        label: type,
+        value: type
+      };
+    });
+  }
+}
+
+const mapStateToProps = (state, ownProps) => {
+  const permission = ownProps.permission;
+  const loading = isModifyPermissionPending(
+    state,
+    ownProps.namespace,
+    ownProps.repoName,
+    permission
+  );
+  const deleteLoading = isDeletePermissionPending(
+    state,
+    ownProps.namespace,
+    ownProps.repoName,
+    permission
+  );
+
+  return { loading, deleteLoading };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    modifyPermission: (
+      permission: Permission,
+      namespace: string,
+      repoName: string
+    ) => {
+      dispatch(modifyPermission(permission, namespace, repoName));
+    },
+    deletePermission: (
+      permission: Permission,
+      namespace: string,
+      repoName: string
+    ) => {
+      dispatch(deletePermission(permission, namespace, repoName));
+    }
+  };
+};
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(translate("repos")(SinglePermission));

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

@@ -41,6 +41,9 @@ const styles = {
   isVerticalCenter: {
     display: "flex",
     alignItems: "center"
+  },
+  hasBackground: {
+    backgroundColor: "#FBFBFB"
   }
 };
 
@@ -120,8 +123,14 @@ class Content extends React.Component<Props, State> {
     const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
     if (!collapsed) {
       return (
-        <div className={classNames("panel-block", classes.toCenterContent)}>
-          <table className="table">
+        <div
+          className={classNames(
+            "panel-block",
+            classes.toCenterContent,
+            classes.hasBackground
+          )}
+        >
+          <table className={classNames("table", classes.hasBackground)}>
             <tbody>
               <tr>
                 <td>{t("sources.content.path")}</td>

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

@@ -93,7 +93,7 @@ class Sources extends React.Component<Props> {
 
     if (currentFileIsDirectory) {
       return (
-        <>
+        <div className={"has-border-around"}>
           {this.renderBranchSelector()}
           <FileTree
             repository={repository}
@@ -101,7 +101,7 @@ class Sources extends React.Component<Props> {
             path={path}
             baseUrl={baseUrl}
           />
-        </>
+        </div>
       );
     } else {
       return (

scm-ui/src/users/components/UserForm.js

@@ -105,41 +105,55 @@ class UserForm extends React.Component<Props, State> {
     }
     return (
       <form onSubmit={this.submit}>
-        {nameField}
-        <InputField
-          label={t("user.displayName")}
-          onChange={this.handleDisplayNameChange}
-          value={user ? user.displayName : ""}
-          validationError={this.state.displayNameValidationError}
-          errorMessage={t("validation.displayname-invalid")}
-          helpText={t("help.displayNameHelpText")}
-        />
-        <InputField
-          label={t("user.mail")}
-          onChange={this.handleEmailChange}
-          value={user ? user.mail : ""}
-          validationError={this.state.mailValidationError}
-          errorMessage={t("validation.mail-invalid")}
-          helpText={t("help.mailHelpText")}
-        />
-        {passwordChangeField}
-        <Checkbox
-          label={t("user.admin")}
-          onChange={this.handleAdminChange}
-          checked={user ? user.admin : false}
-          helpText={t("help.adminHelpText")}
-        />
-        <Checkbox
-          label={t("user.active")}
-          onChange={this.handleActiveChange}
-          checked={user ? user.active : false}
-          helpText={t("help.activeHelpText")}
-        />
-        <SubmitButton
-          disabled={!this.isValid()}
-          loading={loading}
-          label={t("user-form.submit")}
-        />
+        <div className="columns">
+          <div className="column is-half">
+            {nameField}
+            <InputField
+              label={t("user.displayName")}
+              onChange={this.handleDisplayNameChange}
+              value={user ? user.displayName : ""}
+              validationError={this.state.displayNameValidationError}
+              errorMessage={t("validation.displayname-invalid")}
+              helpText={t("help.displayNameHelpText")}
+            />
+          </div>
+          <div className="column is-half">
+            <InputField
+              label={t("user.mail")}
+              onChange={this.handleEmailChange}
+              value={user ? user.mail : ""}
+              validationError={this.state.mailValidationError}
+              errorMessage={t("validation.mail-invalid")}
+              helpText={t("help.mailHelpText")}
+            />
+          </div>
+        </div>
+        <div className="columns">
+          <div className="column">
+            {passwordChangeField}
+            <Checkbox
+              label={t("user.admin")}
+              onChange={this.handleAdminChange}
+              checked={user ? user.admin : false}
+              helpText={t("help.adminHelpText")}
+            />
+            <Checkbox
+              label={t("user.active")}
+              onChange={this.handleActiveChange}
+              checked={user ? user.active : false}
+              helpText={t("help.activeHelpText")}
+            />
+          </div>
+        </div>
+        <div className="columns">
+          <div className="column">
+            <SubmitButton
+              disabled={!this.isValid()}
+              loading={loading}
+              label={t("user-form.submit")}
+            />
+          </div>
+        </div>
       </form>
     );
   }

scm-ui/src/users/components/table/Details.js

@@ -1,66 +1,66 @@
-//@flow
-import React from "react";
-import type { User } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
-import { Checkbox, MailLink, DateFromNow } from "@scm-manager/ui-components";
-
-type Props = {
-  user: User,
-  t: string => string
-};
-
-class Details extends React.Component<Props> {
-  render() {
-    const { user, t } = this.props;
-    return (
-      <table className="table">
-        <tbody>
-          <tr>
-            <td>{t("user.name")}</td>
-            <td>{user.name}</td>
-          </tr>
-          <tr>
-            <td>{t("user.displayName")}</td>
-            <td>{user.displayName}</td>
-          </tr>
-          <tr>
-            <td>{t("user.mail")}</td>
-            <td>
-              <MailLink address={user.mail} />
-            </td>
-          </tr>
-          <tr>
-            <td>{t("user.admin")}</td>
-            <td>
-              <Checkbox checked={user.admin} />
-            </td>
-          </tr>
-          <tr>
-            <td>{t("user.active")}</td>
-            <td>
-              <Checkbox checked={user.active} />
-            </td>
-          </tr>
-          <tr>
-            <td>{t("user.type")}</td>
-            <td>{user.type}</td>
-          </tr>
-          <tr>
-            <td>{t("user.creationDate")}</td>
-            <td>
-              <DateFromNow date={user.creationDate} />
-            </td>
-          </tr>
-          <tr>
-            <td>{t("user.lastModified")}</td>
-            <td>
-              <DateFromNow date={user.lastModified} />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    );
-  }
-}
-
-export default translate("users")(Details);
+//@flow
+import React from "react";
+import type { User } from "@scm-manager/ui-types";
+import { translate } from "react-i18next";
+import { Checkbox, MailLink, DateFromNow } from "@scm-manager/ui-components";
+
+type Props = {
+  user: User,
+  t: string => string
+};
+
+class Details extends React.Component<Props> {
+  render() {
+    const { user, t } = this.props;
+    return (
+      <table className="table">
+        <tbody>
+          <tr>
+            <td className="has-text-weight-semibold">{t("user.name")}</td>
+            <td>{user.name}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("user.displayName")}</td>
+            <td>{user.displayName}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("user.mail")}</td>
+            <td>
+              <MailLink address={user.mail} />
+            </td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("user.admin")}</td>
+            <td>
+              <Checkbox checked={user.admin} />
+            </td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("user.active")}</td>
+            <td>
+              <Checkbox checked={user.active} />
+            </td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("user.type")}</td>
+            <td>{user.type}</td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("user.creationDate")}</td>
+            <td>
+              <DateFromNow date={user.creationDate} />
+            </td>
+          </tr>
+          <tr>
+            <td className="has-text-weight-semibold">{t("user.lastModified")}</td>
+            <td>
+              <DateFromNow date={user.lastModified} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default translate("users")(Details);

scm-ui/src/users/components/table/UserRow.js

@@ -1,31 +1,31 @@
-// @flow
-import React from "react";
-import { Link } from "react-router-dom";
-import type { User } from "@scm-manager/ui-types";
-
-type Props = {
-  user: User
-};
-
-export default class UserRow extends React.Component<Props> {
-  renderLink(to: string, label: string) {
-    return <Link to={to}>{label}</Link>;
-  }
-
-  render() {
-    const { user } = this.props;
-    const to = `/user/${user.name}`;
-    return (
-      <tr>
-        <td className="is-hidden-mobile">{this.renderLink(to, user.name)}</td>
-        <td>{this.renderLink(to, user.displayName)}</td>
-        <td>
-          <a href={`mailto: ${user.mail}`}>{user.mail}</a>
-        </td>
-        <td className="is-hidden-mobile">
-          <input type="checkbox" id="admin" checked={user.admin} readOnly />
-        </td>
-      </tr>
-    );
-  }
-}
+// @flow
+import React from "react";
+import { Link } from "react-router-dom";
+import type { User } from "@scm-manager/ui-types";
+
+type Props = {
+  user: User
+};
+
+export default class UserRow extends React.Component<Props> {
+  renderLink(to: string, label: string) {
+    return <Link to={to}>{label}</Link>;
+  }
+
+  render() {
+    const { user } = this.props;
+    const to = `/user/${user.name}`;
+    return (
+      <tr>
+        <td className="is-hidden-mobile">{this.renderLink(to, user.name)}</td>
+        <td>{this.renderLink(to, user.displayName)}</td>
+        <td>
+          <a href={`mailto: ${user.mail}`}>{user.mail}</a>
+        </td>
+        <td className="is-hidden-mobile">
+          <input type="checkbox" id="admin" checked={user.admin} readOnly />
+        </td>
+      </tr>
+    );
+  }
+}

scm-ui/src/users/components/table/UserTable.js

@@ -1,35 +1,37 @@
-// @flow
-import React from "react";
-import { translate } from "react-i18next";
-import UserRow from "./UserRow";
-import type { User } from "@scm-manager/ui-types";
-
-type Props = {
-  t: string => string,
-  users: User[]
-};
-
-class UserTable extends React.Component<Props> {
-  render() {
-    const { users, t } = this.props;
-    return (
-      <table className="table is-hoverable is-fullwidth">
-        <thead>
-          <tr>
-            <th className="is-hidden-mobile">{t("user.name")}</th>
-            <th>{t("user.displayName")}</th>
-            <th>{t("user.mail")}</th>
-            <th className="is-hidden-mobile">{t("user.admin")}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {users.map((user, index) => {
-            return <UserRow key={index} user={user} />;
-          })}
-        </tbody>
-      </table>
-    );
-  }
-}
-
-export default translate("users")(UserTable);
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import UserRow from "./UserRow";
+import type { User } from "@scm-manager/ui-types";
+
+type Props = {
+  t: string => string,
+  users: User[]
+};
+
+;
+
+class UserTable extends React.Component<Props> {
+  render() {
+    const { users, t } = this.props;
+    return (
+      <table className="card-table table is-hoverable is-fullwidth">
+        <thead>
+          <tr>
+            <th className="is-hidden-mobile">{t("user.name")}</th>
+            <th>{t("user.displayName")}</th>
+            <th>{t("user.mail")}</th>
+            <th className="is-hidden-mobile">{t("user.admin")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map((user, index) => {
+            return <UserRow key={index} user={user} />;
+          })}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default translate("users")(UserTable);

scm-ui/src/users/containers/Users.js

@@ -1,143 +1,143 @@
-// @flow
-import React from "react";
-import type { History } from "history";
-import { connect } from "react-redux";
-import { translate } from "react-i18next";
-
-import {
-  fetchUsersByPage,
-  fetchUsersByLink,
-  getUsersFromState,
-  selectListAsCollection,
-  isPermittedToCreateUsers,
-  isFetchUsersPending,
-  getFetchUsersFailure
-} from "../modules/users";
-
-import { Page, Paginator } from "@scm-manager/ui-components";
-import { UserTable } from "./../components/table";
-import type { User, PagedCollection } from "@scm-manager/ui-types";
-import CreateUserButton from "../components/buttons/CreateUserButton";
-import { getUsersLink } from "../../modules/indexResource";
-
-type Props = {
-  users: User[],
-  loading: boolean,
-  error: Error,
-  canAddUsers: boolean,
-  list: PagedCollection,
-  page: number,
-  usersLink: string,
-
-  // context objects
-  t: string => string,
-  history: History,
-
-  // dispatch functions
-  fetchUsersByPage: (link: string, page: number) => void,
-  fetchUsersByLink: (link: string) => void
-};
-
-class Users extends React.Component<Props> {
-  componentDidMount() {
-    this.props.fetchUsersByPage(this.props.usersLink, this.props.page);
-  }
-
-  onPageChange = (link: string) => {
-    this.props.fetchUsersByLink(link);
-  };
-
-  /**
-   * reflect page transitions in the uri
-   */
-  componentDidUpdate() {
-    const { page, list } = this.props;
-    if (list && (list.page || list.page === 0)) {
-      // backend starts paging by 0
-      const statePage: number = list.page + 1;
-      if (page !== statePage) {
-        this.props.history.push(`/users/${statePage}`);
-      }
-    }
-  }
-
-  render() {
-    const { users, loading, error, t } = this.props;
-    return (
-      <Page
-        title={t("users.title")}
-        subtitle={t("users.subtitle")}
-        loading={loading || !users}
-        error={error}
-      >
-        <UserTable users={users} />
-        {this.renderPaginator()}
-        {this.renderCreateButton()}
-      </Page>
-    );
-  }
-
-  renderPaginator() {
-    const { list } = this.props;
-    if (list) {
-      return <Paginator collection={list} onPageChange={this.onPageChange} />;
-    }
-    return null;
-  }
-
-  renderCreateButton() {
-    if (this.props.canAddUsers) {
-      return <CreateUserButton />;
-    } else {
-      return;
-    }
-  }
-}
-
-const getPageFromProps = props => {
-  let page = props.match.params.page;
-  if (page) {
-    page = parseInt(page, 10);
-  } else {
-    page = 1;
-  }
-  return page;
-};
-
-const mapStateToProps = (state, ownProps) => {
-  const users = getUsersFromState(state);
-  const loading = isFetchUsersPending(state);
-  const error = getFetchUsersFailure(state);
-
-  const usersLink = getUsersLink(state);
-
-  const page = getPageFromProps(ownProps);
-  const canAddUsers = isPermittedToCreateUsers(state);
-  const list = selectListAsCollection(state);
-
-  return {
-    users,
-    loading,
-    error,
-    canAddUsers,
-    list,
-    page,
-    usersLink
-  };
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    fetchUsersByPage: (link: string, page: number) => {
-      dispatch(fetchUsersByPage(link, page));
-    },
-    fetchUsersByLink: (link: string) => {
-      dispatch(fetchUsersByLink(link));
-    }
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(translate("users")(Users));
+// @flow
+import React from "react";
+import type { History } from "history";
+import { connect } from "react-redux";
+import { translate } from "react-i18next";
+
+import {
+  fetchUsersByPage,
+  fetchUsersByLink,
+  getUsersFromState,
+  selectListAsCollection,
+  isPermittedToCreateUsers,
+  isFetchUsersPending,
+  getFetchUsersFailure
+} from "../modules/users";
+
+import { Page, Paginator } from "@scm-manager/ui-components";
+import { UserTable } from "./../components/table";
+import type { User, PagedCollection } from "@scm-manager/ui-types";
+import CreateUserButton from "../components/buttons/CreateUserButton";
+import { getUsersLink } from "../../modules/indexResource";
+
+type Props = {
+  users: User[],
+  loading: boolean,
+  error: Error,
+  canAddUsers: boolean,
+  list: PagedCollection,
+  page: number,
+  usersLink: string,
+
+  // context objects
+  t: string => string,
+  history: History,
+
+  // dispatch functions
+  fetchUsersByPage: (link: string, page: number) => void,
+  fetchUsersByLink: (link: string) => void
+};
+
+class Users extends React.Component<Props> {
+  componentDidMount() {
+    this.props.fetchUsersByPage(this.props.usersLink, this.props.page);
+  }
+
+  onPageChange = (link: string) => {
+    this.props.fetchUsersByLink(link);
+  };
+
+  /**
+   * reflect page transitions in the uri
+   */
+  componentDidUpdate() {
+    const { page, list } = this.props;
+    if (list && (list.page || list.page === 0)) {
+      // backend starts paging by 0
+      const statePage: number = list.page + 1;
+      if (page !== statePage) {
+        this.props.history.push(`/users/${statePage}`);
+      }
+    }
+  }
+
+  render() {
+    const { users, loading, error, t } = this.props;
+    return (
+      <Page
+        title={t("users.title")}
+        subtitle={t("users.subtitle")}
+        loading={loading || !users}
+        error={error}
+      >
+        <UserTable users={users} />
+        {this.renderPaginator()}
+        {this.renderCreateButton()}
+      </Page>
+    );
+  }
+
+  renderPaginator() {
+    const { list } = this.props;
+    if (list) {
+      return <Paginator collection={list} onPageChange={this.onPageChange} />;
+    }
+    return null;
+  }
+
+  renderCreateButton() {
+    if (this.props.canAddUsers) {
+      return <CreateUserButton />;
+    } else {
+      return;
+    }
+  }
+}
+
+const getPageFromProps = props => {
+  let page = props.match.params.page;
+  if (page) {
+    page = parseInt(page, 10);
+  } else {
+    page = 1;
+  }
+  return page;
+};
+
+const mapStateToProps = (state, ownProps) => {
+  const users = getUsersFromState(state);
+  const loading = isFetchUsersPending(state);
+  const error = getFetchUsersFailure(state);
+
+  const usersLink = getUsersLink(state);
+
+  const page = getPageFromProps(ownProps);
+  const canAddUsers = isPermittedToCreateUsers(state);
+  const list = selectListAsCollection(state);
+
+  return {
+    users,
+    loading,
+    error,
+    canAddUsers,
+    list,
+    page,
+    usersLink
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchUsersByPage: (link: string, page: number) => {
+      dispatch(fetchUsersByPage(link, page));
+    },
+    fetchUsersByLink: (link: string) => {
+      dispatch(fetchUsersByLink(link));
+    }
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(translate("users")(Users));

scm-ui/styles/scm.scss

@@ -1,8 +1,8 @@
 @import "bulma/sass/utilities/initial-variables";
 @import "bulma/sass/utilities/functions";
 
-
-$blue: #33B2E8;
+$blue: #33b2e8;
+$mint: #11dfd0;
 
 // $footer-background-color
 
@@ -51,15 +51,239 @@ $blue: #33B2E8;
   &:hover,
   &:focus {
     box-shadow: $box-link-hover-shadow;
-  } 
+  }
   &:active {
     box-shadow: $box-link-active-shadow;
   }
 }
 
-
 @import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
 $fa-font-path: "webfonts";
 @import "@fortawesome/fontawesome-free/scss/solid.scss";
 
 @import "diff2html/dist/diff2html";
+
+// NEW STYLES
+
+//typography
+.subtitle {
+  color: #666;
+}
+.has-border-white {
+  border-color: #fff !important;
+}
+// buttons
+.button {
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+  height: 2.5rem;
+
+  &.is-primary {
+    background-color: $mint;
+  }
+}
+
+//border around options
+.has-border-around {
+  border-top: 1px solid #eee;
+  border-left: 1px solid #eee;
+  border-right: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+// multiline Columns
+.columns.is-multiline {
+  .column.is-half {
+    width: calc(50% - 0.75rem);
+    max-height: 120px;
+
+    &:nth-child(odd) {
+      margin-right: 1.5rem;
+    }
+  }
+  @media screen and (max-width: 768px) {
+    .column.is-half {
+      width: 100%;
+
+      &:nth-child(odd) {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.media {
+  .media-content {
+    width: calc(50% - 0.75rem);
+    max-height: 120px;
+    .shorten-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+// tables
+.table {
+  width: 100%;
+  td {
+    border-color: #eee;
+    padding: 1rem;
+  }
+}
+
+// card tables
+.card-table {
+  border-collapse: separate;
+  border-spacing: 0px 5px;
+
+  tr {
+    a {
+      color: #363636;
+    }
+    &:hover {
+      td {
+        background-color: whitesmoke;
+        &:nth-child(4) {
+          background-color: #e1e1e1;
+        }
+      }
+      a {
+        color: $blue;
+      }
+    }
+  }
+  td {
+    border-bottom: 1px solid whitesmoke;
+    background-color: #fafafa;
+    padding: 1em 1.25em;
+    &:first-child {
+      border-left: 3px solid $mint;
+    }
+    &:nth-child(4) {
+      background-color: whitesmoke;
+    }
+  }
+  &.is-hoverable tbody tr:not(.is-selected):hover {
+    background-color: whitesmoke;
+  }
+  thead th {
+    background-color: transparent;
+    border: none;
+  }
+}
+
+// forms
+.field:not(.is-grouped) {
+  margin-bottom: 1rem;
+}
+.input,
+.textarea {
+  /*background-color: whitesmoke;*/
+  border-color: #98d8f3;
+  box-shadow: none;
+}
+
+// pagination
+.pagination-next,
+.pagination-link,
+.pagination-ellipsis {
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+  height: 2.5rem;
+}
+.pagination-previous,
+.pagination-next {
+  min-width: 6.75em;
+}
+
+// dark hero colors
+.hero.is-dark {
+  background-color: #002e4b;
+  background-image: url(../images/scmManagerHero.jpg);
+  background-size: cover;
+  background-position: top center;
+
+  .tabs.is-boxed li.is-active a,
+  .tabs.is-boxed li.is-active a:hover,
+  .tabs.is-toggle li.is-active a,
+  .tabs.is-toggle li.is-active a:hover {
+    background-color: #28b1e8;
+    border-color: #28b1e8;
+    color: #fff;
+  }
+}
+
+// footer
+.footer {
+  background-color: whitesmoke;
+}
+
+// sidebar menu
+.aside-background {
+  bottom: 0;
+  left: 50%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: whitesmoke;
+}
+.menu {
+  div {
+    height: 100%;
+    /*border: 1px solid #eee;*/
+    margin-bottom: 1rem;
+  }
+}
+
+.menu-label {
+  color: #fff;
+  font-size: 1em;
+  font-weight: 600;
+  background-color: #bbb;
+  border-radius: 5px 5px 0 0;
+  padding: 0.5rem 1rem;
+  text-transform: none;
+
+  &:last-child,
+  &:not(:last-child) {
+    margin-bottom: 0;
+  }
+}
+.menu div:first-child .menu-label {
+  background-color: $blue;
+}
+.menu-list {
+  a {
+    border-radius: 0;
+    color: #333;
+    padding: 1rem;
+    border-top: 1px solid #eee;
+    border-left: 1px solid #eee;
+    border-right: 1px solid #eee;
+
+    &.is-active {
+      color: $blue;
+      background-color: #fff;
+
+      &:before {
+        position: relative;
+        content: " ";
+        background: $blue;
+        height: 53px;
+        width: 2px;
+        display: block;
+        left: -17px;
+        float: left;
+        top: -16px;
+      }
+    }
+  }
+  > li:first-child > a {
+    border-top: none;
+  }
+  li:last-child > a {
+    border-bottom: 1px solid #eee;
+  }
+}