Added first UI changes

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

@@ -1,14 +1,22 @@
 //@flow
 import React from "react";
+import injectSheet from "react-jss";
 import classNames from "classnames";
 
 type Props = {
 };
 
+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 class="columns">
+              <div class="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 class="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,9 @@ class BaseUrlSettings extends React.Component<Props> {
     return (
       <div>
         <Subtitle subtitle={t("base-url-settings.name")} />
+        <div class="columns">
+            <div class="column is-half">
+               
                 <Checkbox
                   checked={forceBaseUrl}
                   label={t("base-url-settings.force-base-url")}
@@ -25,6 +28,8 @@ class BaseUrlSettings extends React.Component<Props> {
                   disabled={!hasUpdatePermission}
                   helpText={t("help.forceBaseUrlHelpText")}
                 />
+            </div>
+            <div class="column is-half">
                 <InputField
                   label={t("base-url-settings.base-url")}
                   onChange={this.handleBaseUrlChange}
@@ -33,6 +38,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 class="columns">
+            <div class="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 class="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 class="columns">
+                <div class="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 class="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 class="columns">
+                <div class="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 class="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 class="columns">
+                <div class="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 class="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 class="columns">
+                <div class="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 class="columns">
+                <div class="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 class="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 class="columns">
+                <div class="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 class="columns">
+                <div class="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 class="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 class="columns">
+                <div class="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 class="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 class="columns">                    
+                <div class="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/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/list/RepositoryGroupEntry.js

@@ -7,7 +7,8 @@ import RepositoryEntry from "./RepositoryEntry";
 
 const styles = {
   pointer: {
-    cursor: "pointer"
+    cursor: "pointer",
+    fontSize: "1.5rem"
   },
   repoGroup: {
     marginBottom: "1em"

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

@@ -3,6 +3,9 @@
 
 
 $blue: #33B2E8;
+$mint: #11dfd0;
+
+
 
 // $footer-background-color
 
@@ -55,3 +58,184 @@ $fa-font-path: "webfonts";
 @import "@fortawesome/fontawesome-free/scss/solid.scss";
 
 @import "diff2html/dist/diff2html";
+
+// NEW STYLES
+
+// 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 colors
+.footer {
+    background-color: whitesmoke;
+}
+//typography
+.subtitle {
+    color: #666;
+}
+// buttons
+.button{
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    height:2.5rem;
+    
+    &.is-primary {
+    background-color: $mint;
+}
+}
+// 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;
+}
+// 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: .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: #33B2E8;
+    background-color: #fff;
+    
+        &:before{
+            position: relative;
+            content: " ";
+            background: #33B2E8;
+            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;
+        }
+}
+// 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: #efefef;  
+    box-shadow: none;
+}
+.input[disabled], .textarea[disabled] {
+
+    background-color: #ddd;
+    border-color: #ccc;
+    box-shadow: none;
+    color: #aaa;
+
+}