Initial

core/src/main/resources/jenkins/model/Jenkins/newView.jelly

@@ -31,6 +31,7 @@ THE SOFTWARE.
     <st:include page="sidepanel.jelly" />
 
     <l:main-panel>
+      <h1>${%New View}</h1>
       <j:invokeStatic var="views" className="hudson.model.View" method="allInstantiable" />
       <n:form nameTitle="${%View name}" action="createView" copyTitle="${%Copy Existing View}"
               descriptors="${views}" checkUrl="checkViewName" xmlns:n="/lib/hudson/newFromList" />

core/src/main/resources/lib/form/entry.jelly

@@ -72,7 +72,7 @@ THE SOFTWARE.
   <div class='tr form-group'>
     <j:choose>
       <j:when test="${possiblyEscapedTitle!=null}">
-        <div class="setting-name help-sibling">
+        <div class="jenkins-form-label help-sibling">
           <j:out value="${possiblyEscapedTitle}" />
           <f:helpLink url="${attrs.help}" featureName="${title}"/>
         </div>

core/src/main/resources/lib/form/textbox.jelly

@@ -88,7 +88,7 @@ THE SOFTWARE.
 
   <f:possibleReadOnlyField>
       <m:input xmlns:m="jelly:hudson.util.jelly.MorphTagLibrary"
-               class="setting-input ${attrs.checkUrl!=null?'validated':''} ${attrs.autoCompleteUrl!=null?'auto-complete':null} ${attrs.clazz}"
+               class="jenkins-input ${attrs.checkUrl!=null?'validated':''} ${attrs.autoCompleteUrl!=null?'auto-complete':null} ${attrs.clazz}"
                name="${name}"
                value="${value}"
                type="text"

core/src/main/resources/lib/hudson/newFromList/form.jelly

@@ -49,26 +49,37 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
 
-
   <j:set var="descriptors" value="${h.filterDescriptors(it,attrs.descriptors)}" />
 
-  <s:form method="post" action="${attrs.action?:'createItem'}" name="createItem">
-    <s:entry title="${attrs.nameTitle}">
+  <s:form class="jenkins-form" method="post" action="${attrs.action?:'createItem'}" name="createItem">
+    <!-- View name field -->
+    <div class="jenkins-form-item">
+      <label for="name" class="jenkins-form-label">${attrs.nameTitle}</label>
       <s:textbox id="name" name="name" checkUrl="'${h.jsStringEscape(attrs.checkUrl)}?value='+encodeURIComponent(this.value)"
                  onchange="updateOk(this.form)" onkeyup="updateOk(this.form)" />
       <script>$('name').focus();</script>
-    </s:entry>
+    </div>
+
+    <!-- View name field -->
+    <div class="jenkins-form-item">
+      <fieldset class="jenkins-fieldset">
+        <legend class="jenkins-form-label">
+          View type
+        </legend>
+        <j:forEach var="descriptor" items="${descriptors}">
+          <div class="jenkins-radio">
+            <input class="jenkins-radio__input" type="radio" name="mode" id="${descriptor.id}" value="${descriptor.id}" onchange="updateOk(this.form)" onclick="updateOk(this.form)" />
+            <label for="${descriptor.id}" class="jenkins-radio__label">
+              ${descriptor.displayName}
+            </label>
+            <p class="jenkins-radio__description">
+              ${descriptor}
+            </p>
+          </div>
+        </j:forEach>
+      </fieldset>
+    </div>
 
-    <j:forEach var="descriptor" items="${descriptors}">
-      <s:block>
-        <input type="radio" name="mode" value="${descriptor.id}" onchange="updateOk(this.form)" onclick="updateOk(this.form)" />
-        <label class="attach-previous"><b>${descriptor.displayName}</b></label>
-      </s:block>
-      <s:entry>
-        <st:set var="instance" value="${descriptor}" />
-        <st:include page="newInstanceDetail.jelly" it="${descriptor}" />
-      </s:entry>
-    </j:forEach>
     <j:if test="${!empty(attrs.copyNames) or attrs.showCopyOption}">
       <s:block>
         <input type="radio" id="copy" name="mode" value="copy" onchange="updateOk(this.form)" onclick="updateOk(this.form)" />

war/src/main/less/base-styles-v2.less

@@ -21,6 +21,7 @@ html {
 @import './base/typography.less';
 @import './base/layout-commons.less';
 @import './base/style.less';
+@import './modules/form.less';
 @import './base/visibility-utils.less';
 @import './base/yui-compatibility.less';
 @import './modules/icons.less';

war/src/main/less/modules/form.less

@@ -0,0 +1,102 @@
+h1 {
+  margin-bottom: 30px;
+}
+
+#main-panel {
+  padding: 30px;
+}
+
+.jenkins-form-item {
+  margin-bottom: 30px;
+}
+
+.jenkins-fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.jenkins-form-label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.jenkins-input {
+  display: block;
+  border: 3px solid rgba(0,0,0,0.2);
+  padding: 8px;
+  border-radius: 6px;
+  width: 300px;
+  transition: 0.2s ease;
+
+  &:hover {
+    border-color: rgba(0,0,0,0.5);
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+    border-color: rgba(0,0,0,1);
+  }
+}
+
+.jenkins-radio {
+  &:not(:last-of-type) {
+    margin-bottom: 20px;
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+  }
+
+  &__label {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 0;
+    padding: 1px 34px 5px;
+    cursor: pointer;
+    font-weight: bold;
+    // remove 300ms pause on mobile
+    touch-action: manipulation;
+
+    &::before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      width: 24px;
+      height: 24px;
+
+      border: 3px solid currentColor;
+      border-radius: 50%;
+      background: transparent;
+      opacity: 0.2;
+
+      transition: 0.2s ease;
+    }
+
+    &:hover::before {
+      border-width: 5px;
+      opacity: .5;
+    }
+  }
+
+  &__input:focus + &__label:before {
+    border-width: 8px;
+    opacity: 0.5;
+  }
+
+  &__input:checked + &__label:before {
+    border-width: 8px;
+    opacity: 1;
+  }
+
+  &__description {
+    margin: 0 0 0 34px;
+    opacity: 0.5;
+  }
+}