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/CreateButton.js

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

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

@@ -20,6 +20,8 @@ class AdminSettings extends React.Component<Props> {
     return (
       <div>
         <Subtitle subtitle={t("admin-settings.name")} />
+            <div className="columns">
+              <div className="column is-half">
                 <AdminGroupTable
                   adminGroups={adminGroups}
                   onChange={(isValid, changedValue, name) =>
@@ -27,6 +29,7 @@ class AdminSettings extends React.Component<Props> {
                   }
                   disabled={!hasUpdatePermission}
                 />
+                    
                 <AddEntryToTableField
                   addEntry={this.addGroup}
                   disabled={!hasUpdatePermission}
@@ -34,6 +37,8 @@ class AdminSettings extends React.Component<Props> {
                   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) =>
@@ -49,6 +54,8 @@ class AdminSettings extends React.Component<Props> {
                   errorMessage={t("admin-settings.add-user-error")}
                 />
             </div> 
+        </div> 
+      </div>
     );
   }
 

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

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

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

@@ -36,6 +36,8 @@ class GeneralSettings extends React.Component<Props> {
 
     return (
       <div>
+          <div className="columns">
+            <div className="column is-half">
                 <InputField
                   label={t("general-settings.realm-description")}
                   onChange={this.handleRealmDescriptionChange}
@@ -43,6 +45,8 @@ class GeneralSettings extends React.Component<Props> {
                   disabled={!hasUpdatePermission}
                   helpText={t("help.realmDescriptionHelpText")}
                 />
+                </div>
+                <div className="column is-half">
                 <InputField
                   label={t("general-settings.date-format")}
                   onChange={this.handleDateFormatChange}
@@ -50,6 +54,10 @@ class GeneralSettings extends React.Component<Props> {
                   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}
@@ -57,6 +65,8 @@ class GeneralSettings extends React.Component<Props> {
                   disabled={!hasUpdatePermission}
                   helpText={t("help.pluginRepositoryHelpText")}
                 />
+                </div>
+                <div className="column is-half">
                 <InputField
                   label={t("general-settings.default-namespace-strategy")}
                   onChange={this.handleDefaultNamespaceStrategyChange}
@@ -64,6 +74,10 @@ class GeneralSettings extends React.Component<Props> {
                   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")}
@@ -71,6 +85,8 @@ class GeneralSettings extends React.Component<Props> {
                       disabled={!hasUpdatePermission}
                       helpText={t("help.enableXsrfProtectionHelpText")}
                     />
+                </div>
+                <div className="column is-half">
                     <Checkbox
                       checked={enableRepositoryArchive}
                       label={t("general-settings.enable-repository-archive")}
@@ -78,6 +94,10 @@ class GeneralSettings extends React.Component<Props> {
                       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")}
@@ -85,6 +105,8 @@ class GeneralSettings extends React.Component<Props> {
                       disabled={!hasUpdatePermission}
                       helpText={t("help.disableGroupingGridHelpText")}
                     />
+                </div>
+                <div className="column is-half">
                     <Checkbox
                       checked={anonymousAccessEnabled}
                       label={t("general-settings.anonymous-access-enabled")}
@@ -92,6 +114,10 @@ class GeneralSettings extends React.Component<Props> {
                       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")}
@@ -100,6 +126,8 @@ class GeneralSettings extends React.Component<Props> {
                       helpText={t("help.skipFailedAuthenticatorsHelpText")}
                     />
                 </div>
+            </div>
+          </div>
     );
   }
 

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

@@ -40,6 +40,8 @@ class LoginAttempt extends React.Component<Props, State> {
     return (
       <div>
         <Subtitle subtitle={t("login-attempt.name")} />
+        <div className="columns">
+          <div className="column is-half">
             <InputField
               label={t("login-attempt.login-attempt-limit")}
               onChange={this.handleLoginAttemptLimitChange}
@@ -49,6 +51,8 @@ class LoginAttempt extends React.Component<Props, State> {
               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}
@@ -59,6 +63,8 @@ class LoginAttempt extends React.Component<Props, State> {
               helpText={t("help.loginAttemptLimitTimeoutHelpText")}
             />
           </div>
+        </div>
+      </div>
     );
   }
 

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

@@ -37,6 +37,8 @@ class ProxySettings extends React.Component<Props> {
     return (
       <div>
         <Subtitle subtitle={t("proxy-settings.name")} />
+        <div className="columns">
+                <div className="column is-full">
                     <Checkbox
                       checked={enableProxy}
                       label={t("proxy-settings.enable-proxy")}
@@ -44,6 +46,10 @@ class ProxySettings extends React.Component<Props> {
                       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}
@@ -52,6 +58,8 @@ class ProxySettings extends React.Component<Props> {
                       disabled={!enableProxy || !hasUpdatePermission}
                       helpText={t("help.proxyPasswordHelpText")}
                     />
+                </div>
+                <div className="column is-half">
                     <InputField
                       label={t("proxy-settings.proxy-port")}
                       value={proxyPort}
@@ -59,6 +67,10 @@ class ProxySettings extends React.Component<Props> {
                       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}
@@ -66,6 +78,8 @@ class ProxySettings extends React.Component<Props> {
                       disabled={!enableProxy || !hasUpdatePermission}
                       helpText={t("help.proxyServerHelpText")}
                     />
+                </div>
+                <div className="column is-half">
                     <InputField
                       label={t("proxy-settings.proxy-user")}
                       value={proxyUser}
@@ -73,6 +87,10 @@ class ProxySettings extends React.Component<Props> {
                       disabled={!enableProxy || !hasUpdatePermission}
                       helpText={t("help.proxyUserHelpText")}
                     />
+                </div>
+            </div>
+            <div className="columns">
+                <div className="column is-full">
                     <ProxyExcludesTable
                       proxyExcludes={proxyExcludes}
                       onChange={(isValid, changedValue, name) =>
@@ -88,6 +106,8 @@ class ProxySettings extends React.Component<Props> {
                   errorMessage={t("proxy-settings.add-proxy-exclude-error")}
                 />
                 </div>
+            </div>
+      </div>
     );
   }
 

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

@@ -52,7 +52,7 @@ class Config extends React.Component<Props> {
                             renderAll={true}
             />
           </div>
-          <div className="column">
+          <div className="column is-one-quarter">
             <Navigation>
               <Section label={t("config.navigation-title")}>
                 <NavLink

scm-ui/src/containers/ProfileInfo.js

@@ -29,15 +29,15 @@ class ProfileInfo extends React.Component<Props, State> {
           <table className="table">
             <tbody>
               <tr>
-                <td>{t("profile.username")}</td>
+                <td className="has-text-weight-semibold">{t("profile.username")}</td>
                 <td>{me.name}</td>
               </tr>
               <tr>
-                <td>{t("profile.displayName")}</td>
+                <td className="has-text-weight-semibold">{t("profile.displayName")}</td>
                 <td>{me.displayName}</td>
               </tr>
               <tr>
-                <td>{t("profile.mail")}</td>
+                <td className="has-text-weight-semibold">{t("profile.mail")}</td>
                 <td>
                   <MailLink address={me.mail} />
                 </td>

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

@@ -17,25 +17,25 @@ class Details extends React.Component<Props> {
       <table className="table content">
         <tbody>
           <tr>
-            <td>{t("group.name")}</td>
+            <td className="has-text-weight-semibold">{t("group.name")}</td>
             <td>{group.name}</td>
           </tr>
           <tr>
-            <td>{t("group.description")}</td>
+            <td className="has-text-weight-semibold">{t("group.description")}</td>
             <td>{group.description}</td>
           </tr>
           <tr>
-            <td>{t("group.type")}</td>
+            <td className="has-text-weight-semibold">{t("group.type")}</td>
             <td>{group.type}</td>
           </tr>
           <tr>
-            <td>{t("group.creationDate")}</td>
+            <td className="has-text-weight-semibold">{t("group.creationDate")}</td>
             <td>
               <DateFromNow date={group.creationDate} />
             </td>
           </tr>
           <tr>
-            <td>{t("group.lastModified")}</td>
+            <td className="has-text-weight-semibold">{t("group.lastModified")}</td>
             <td>
               <DateFromNow date={group.lastModified} />
             </td>

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

@@ -13,7 +13,7 @@ class GroupTable extends React.Component<Props> {
   render() {
     const { groups, t } = this.props;
     return (
-      <table className="table is-hoverable is-fullwidth">
+      <table className="card-table table is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th>{t("group.name")}</th>

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

@@ -17,31 +17,31 @@ class RepositoryDetailTable extends React.Component<Props> {
       <table className="table">
         <tbody>
           <tr>
-            <td>{t("repository.name")}</td>
+            <td className="has-text-weight-semibold">{t("repository.name")}</td>
             <td>{repository.name}</td>
           </tr>
           <tr>
-            <td>{t("repository.type")}</td>
+            <td className="has-text-weight-semibold">{t("repository.type")}</td>
             <td>{repository.type}</td>
           </tr>
           <tr>
-            <td>{t("repository.contact")}</td>
+            <td className="has-text-weight-semibold">{t("repository.contact")}</td>
             <td>
               <MailLink address={repository.contact} />
             </td>
           </tr>
           <tr>
-            <td>{t("repository.description")}</td>
+            <td className="has-text-weight-semibold">{t("repository.description")}</td>
             <td>{repository.description}</td>
           </tr>
           <tr>
-            <td>{t("repository.creationDate")}</td>
+            <td className="has-text-weight-semibold">{t("repository.creationDate")}</td>
             <td>
               <DateFromNow date={repository.creationDate} />
             </td>
           </tr>
           <tr>
-            <td>{t("repository.lastModified")}</td>
+            <td className="has-text-weight-semibold">{t("repository.lastModified")}</td>
             <td>
               <DateFromNow date={repository.lastModified} />
             </td>

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

@@ -14,6 +14,7 @@ class RepositoryDetails extends React.Component<Props> {
     return (
       <div>
         <RepositoryDetailTable repository={repository} />
+          <hr />
         <div className="content">
           <ExtensionPoint
             name="repos.repository-details.information"

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,
+    height: "calc(120px - 1.5rem)",
-    top: 0,
+    width: "calc(50% - 3rem)"
-    bottom: 0,
-    right: 0
   },
   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)}>
+      <div
-        <Link className={classes.overlay} to={repositoryLink} />
+        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

@@ -6,7 +6,8 @@ import classNames from "classnames";
 
 const styles = {
   link: {
-    pointerEvents: "all"
+    pointerEvents: "all",
+    marginRight: "1.25rem !important"
   }
 };
 

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,8 +80,11 @@ class RepositoryGroupEntry extends React.Component<Props, State> {
           </span>
         </h2>
         <hr />
+        <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()}
 
+        <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/containers/Permissions.js

@@ -128,7 +128,7 @@ class Permissions extends React.Component<Props> {
 
     return (
       <div>
-        <table className="table is-hoverable is-fullwidth">
+        <table  className="has-background-light table is-hoverable is-fullwidth">
           <thead>
             <tr>
               <th>{t("permission.name")}</th>

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)}>
+        <div
-          <table className="table">
+          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,6 +105,8 @@ class UserForm extends React.Component<Props, State> {
     }
     return (
       <form onSubmit={this.submit}>
+        <div className="columns">
+          <div className="column is-half">
             {nameField}
             <InputField
               label={t("user.displayName")}
@@ -114,6 +116,8 @@ class UserForm extends React.Component<Props, State> {
               errorMessage={t("validation.displayname-invalid")}
               helpText={t("help.displayNameHelpText")}
             />
+          </div>
+          <div className="column is-half">
             <InputField
               label={t("user.mail")}
               onChange={this.handleEmailChange}
@@ -122,6 +126,10 @@ class UserForm extends React.Component<Props, State> {
               errorMessage={t("validation.mail-invalid")}
               helpText={t("help.mailHelpText")}
             />
+          </div>
+        </div>
+        <div className="columns">
+          <div className="column">
             {passwordChangeField}
             <Checkbox
               label={t("user.admin")}
@@ -135,11 +143,17 @@ class UserForm extends React.Component<Props, State> {
               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

@@ -16,43 +16,43 @@ class Details extends React.Component<Props> {
       <table className="table">
         <tbody>
           <tr>
-            <td>{t("user.name")}</td>
+            <td className="has-text-weight-semibold">{t("user.name")}</td>
             <td>{user.name}</td>
           </tr>
           <tr>
-            <td>{t("user.displayName")}</td>
+            <td className="has-text-weight-semibold">{t("user.displayName")}</td>
             <td>{user.displayName}</td>
           </tr>
           <tr>
-            <td>{t("user.mail")}</td>
+            <td className="has-text-weight-semibold">{t("user.mail")}</td>
             <td>
               <MailLink address={user.mail} />
             </td>
           </tr>
           <tr>
-            <td>{t("user.admin")}</td>
+            <td className="has-text-weight-semibold">{t("user.admin")}</td>
             <td>
               <Checkbox checked={user.admin} />
             </td>
           </tr>
           <tr>
-            <td>{t("user.active")}</td>
+            <td className="has-text-weight-semibold">{t("user.active")}</td>
             <td>
               <Checkbox checked={user.active} />
             </td>
           </tr>
           <tr>
-            <td>{t("user.type")}</td>
+            <td className="has-text-weight-semibold">{t("user.type")}</td>
             <td>{user.type}</td>
           </tr>
           <tr>
-            <td>{t("user.creationDate")}</td>
+            <td className="has-text-weight-semibold">{t("user.creationDate")}</td>
             <td>
               <DateFromNow date={user.creationDate} />
             </td>
           </tr>
           <tr>
-            <td>{t("user.lastModified")}</td>
+            <td className="has-text-weight-semibold">{t("user.lastModified")}</td>
             <td>
               <DateFromNow date={user.lastModified} />
             </td>

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

@@ -9,11 +9,13 @@ type Props = {
   users: User[]
 };
 
+;
+
 class UserTable extends React.Component<Props> {
   render() {
     const { users, t } = this.props;
     return (
-      <table className="table is-hoverable is-fullwidth">
+      <table className="card-table table is-hoverable is-fullwidth">
         <thead>
           <tr>
             <th className="is-hidden-mobile">{t("user.name")}</th>

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
 
@@ -57,9 +57,233 @@ $blue: #33B2E8;
   }
 }
 
-
 @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;
+  }
+}