WIP

camunda · Dec 11, 2018 · 98e471d · 98e471d
1 parent 3f699b2
commit 98e471d
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 48 deletions.
diff --git a/client/src/app/modals/deploy-diagram/View.js b/client/src/app/modals/deploy-diagram/View.js
@@ -56,44 +56,59 @@ const View = (props) => {
 
             <Form className={ css.Form }>
 
-              <Field
-                name="endpointUrl"
-                validate={ validators.endpointUrl }
-                component={ FormControl }
-                label="Endpoint URL"
-                hint="Should point to a running Camunda Engine REST API endpoint."
-                validated
-              />
-
-              <Field
-                name="deploymentName"
-                validate={ validators.deploymentName }
-                component={ FormControl }
-                label="Deployment name"
-                validated
-              />
-
-              <Field
-                name="tenantId"
-                component={ FormControl }
-                label="Tenant id (optional)"
-              />
-
-              <div>
-                <label htmlFor="authType">Auth type</label>
-              </div>
-
-              <div>
-                <Field name="authType" component="select">
-                  <option value={ AuthTypes.none } defaultValue>None</option>
-                  <option value={ AuthTypes.basic }>HTTP Basic</option>
-                  <option value={ AuthTypes.bearer }>Bearer token</option>
-                </Field>
-              </div>
-
-              { values.authType === AuthTypes.basic && <AuthBasic validators={ validators } /> }
-
-              { values.authType === AuthTypes.bearer && <AuthBearer validators={ validators } /> }
+              <fieldset label="Foo">
+
+                <legend>Endpoint Configuration</legend>
+
+                <div className="fields">
+                  <Field
+                    name="endpointUrl"
+                    validate={ validators.endpointUrl }
+                    component={ FormControl }
+                    label="URL"
+                    hint="Should point to a running Camunda Engine REST API endpoint."
+                    validated
+                  />
+
+                  <div>
+                    <label htmlFor="authType">Authentication</label>
+                  </div>
+
+                  <div>
+                    <Field name="authType" component="select">
+                      <option value={ AuthTypes.none } defaultValue>None</option>
+                      <option value={ AuthTypes.basic }>HTTP Basic</option>
+                      <option value={ AuthTypes.bearer }>Bearer token</option>
+                    </Field>
+                  </div>
+
+                  { values.authType === AuthTypes.basic && <AuthBasic validators={ validators } /> }
+
+                  { values.authType === AuthTypes.bearer && <AuthBearer validators={ validators } /> }
+                </div>
+              </fieldset>
+
+              <fieldset>
+
+                <legend>Deployment Details</legend>
+
+                <div className="fields">
+                  <Field
+                    name="deploymentName"
+                    validate={ validators.deploymentName }
+                    component={ FormControl }
+                    label="Name"
+                    validated
+                  />
+
+                  <Field
+                    name="tenantId"
+                    component={ FormControl }
+                    label="Tenant ID"
+                  />
+                </div>
+
+              </fieldset>
 
               <div className="form-submit">
                 <button

diff --git a/client/src/app/modals/deploy-diagram/View.less b/client/src/app/modals/deploy-diagram/View.less
@@ -51,24 +51,35 @@
   }
 
   form {
-    font-size: 13.3333px;
-    margin: 15px 0;
+    font-size: 1.1em;
 
-    display: grid;
-    grid-template-columns: max-content auto;
+    fieldset {
+      border: solid 1px #E3E3E3;
+      border-radius: 5px;
+      margin: 20px auto;
+      padding: 15px;
 
-    grid-column-gap: 10px;
-    grid-row-gap: 15px;
+      legend {
+        font-weight: bolder;
+      }
+    }
+
+    .fields {
+
+      display: grid;
+      grid-template-columns: 85px auto;
 
-    align-items: baseline;
+      grid-column-gap: 10px;
+      grid-row-gap: 15px;
+
+      align-items: baseline;
+    }
 
     .form-submit {
-      grid-column-start: 2;
+      text-align: right;
     }
 
     label {
-      font-weight: bolder;
-      line-height: 30px;
       text-align: right;
       width: 100%;
       display: inline-block;