Enhance the display name modal

templates/default/join.html.ep

@@ -133,19 +133,28 @@
             </h4>
           </div>
           <div class="modal-body">
-            <form role="form" class="well" id="displayNamePreForm">
-              <label for="displayNamePre">
+            <form role="form" class="form-horizontal" id="displayNamePreForm">
+              <p class="text-center">
                 <%=l 'SET_A_DISPLAY_NAME' %>
-              </label>
+              </p>
               <div class="form-group">
-                <input type="text" class="form-control" id="displayNamePre" name="displayNamePre" placeholder="<%=l 'YOUR_NAME' %>">
+                <label for="displayNamePre" class="col-sm-4 control-label">
+                  <%=l 'DISPLAY_NAME' %>
+                </label>
+                <div class="col-sm-8">
+                  <input type="text" class="form-control" autocomplete="off" id="displayNamePre" name="displayNamePre" placeholder="<%=l 'YOUR_NAME' %>">
+                </div>
+              </div>
+              <div class="form-group">
+                <div class="col-sm-offset-4 col-sm-8">
+                  <button id="displayNamePreButton" class="btn btn-primary disabled" type="submit">
+                    <%=l 'SUBMIT' %>
+                  </button>
+                  <a class="btn btn-default" href="<%= $self->get_url('/') %>">
+                    <%=l 'CANCEL' %>
+                  </a>
+                </div>
               </div>
-              <button id="displayNamePreButton" class="btn btn-primary disabled" type="submit">
-                <%=l 'SUBMIT' %>
-              </button>
-              <a class="btn btn-default" href="<%= $self->get_url('/') %>">
-                <%=l 'CANCEL' %>
-              </a>
             </form>
           </div>
         </div>