Apply the nice settings page CSS to the Administration page.

static/styles/zulip.css

@@ -3074,11 +3074,6 @@ li.expanded_subject {
     margin-top: 8px;
 }
 
-#word-alert-settings {
-    margin-top: 15px;
-    margin-bottom: 15px;
-}
-
 .remove-alert-word,
 .add-alert-word {
     float: right;
@@ -3290,6 +3285,7 @@ div.edit_bot {
     margin-left: 15px;
 }
 
+#administration .settings-section,
 #settings .settings-section {
     background-color: #f1f1f1;
     border: 1px solid #e3e3e3;
@@ -3297,6 +3293,8 @@ div.edit_bot {
     padding: 45px 0px 15px 0px;
     margin-right: 5px;
     position: relative;
+    margin-top: 15px;
+    margin-bottom: 15px;
 }
 
 #settings #notify-settings-status,#ui-settings-status,#display-settings-status {
@@ -3307,6 +3305,7 @@ div.edit_bot {
     margin-bottom: 10px;
 }
 
+#administration .settings-section .admin-realm-form,
 #settings .settings-section .account-settings-form,
 #settings .settings-section .new-bot-form,
 #settings .settings-section .edit-bot-form-box {
@@ -3314,6 +3313,7 @@ div.edit_bot {
     margin: auto;
 }
 
+#administration .settings-section .admin-realm-form,
 #settings .settings-section .new-bot-form,
 #settings .settings-section .edit-bot-form-box {
     margin-top: 35px;
@@ -3385,6 +3385,7 @@ div.edit_bot {
 }
 
 #settings .settings-section .notification-settings-form .notification-submission,
+#administration .settings-section .organization-submission,
 #settings .settings-section .ui-settings-form .ui-submission {
     margin-left: 140px;
 }
@@ -3395,10 +3396,9 @@ div.edit_bot {
     width: 250px;
     font-size: 13px;
     line-height: 14px;
-    margin-top: 15px;
-    margin-bottom: 20px;
 }
 
+#administration .admin-streams-note,
 #settings .bot-settings-note {
     margin-left: 38px;
     font-size: 13px;
@@ -3485,6 +3485,7 @@ div.edit_bot {
     margin: auto;
 }
 
+#administration .settings-section .organization-settings .admin-realm-form,
 #settings .settings-section .account-settings-form,
 #settings .settings-section .new-bot-form,
 #settings .settings-section .notification-settings-form,
@@ -3493,6 +3494,7 @@ div.edit_bot {
     width: 100%;
 }
 
+#administration .settings-section .admin-realm-form .control-label,
 #settings .settings-section .account-settings-form .control-label,
 #settings .settings-section .new-bot-form .control-label,
 #settings .settings-section .edit-bot-form-box .control-label {
@@ -3505,6 +3507,7 @@ div.edit_bot {
     float: none;
 }
 
+#administration .settings-section .admin-realm-form .controls,
 #settings .settings-section .account-settings-form .controls,
 #settings .settings-section .new-bot-form .controls,
 #settings .settings-section .edit-bot-form-box .controls {
@@ -3512,6 +3515,8 @@ div.edit_bot {
     text-align: center;
 }
 
+#administration .settings-section .admin-realm-form .controls button,
+#administration .settings-section .admin-realm-form .controls input,
 #settings .settings-section .account-settings-form .controls button,
 #settings .settings-section .account-settings-form .controls input,
 #settings .settings-section .new-bot-form .controls button,
@@ -3532,6 +3537,7 @@ div.edit_bot {
     margin-left: 80px;
 }
 
+#administration .settings-section .organization-submission,
 #settings .settings-section .notification-settings-form .notification-submission {
     margin: 0px;
     width: 100%;
@@ -3540,6 +3546,7 @@ div.edit_bot {
 
 }
 
+#administration .settings-section .settings-section-title,
 #settings .settings-section .settings-section-title {
     font-size: 18px;
     font-weight: 300;
@@ -3548,26 +3555,25 @@ div.edit_bot {
     top: 15px;
 }
 
+#administration .settings-section .settings-section-icon,
 #settings .settings-section .settings-section-icon {
     margin-right: 8px;
 }
 
+#administration h1,
 #settings h1,
 #subscriptions h1 {
     font-size: 25px;
     font-weight: 300;
 }
 
+#administration .administration-icon,
 #settings .settings-icon,
 #subscriptions .streams-icon {
     margin-right: 10px;
     font-size: 20px;
 }
 
-#settings #notification-settings {
-    margin-top: 15px;
-}
-
 #notification-settings .notification-reminder {
     text-align: center;
 }

static/templates/admin_tab.handlebars

@@ -2,9 +2,12 @@
   <div class="span12">
     <div class="administration">
       <div class="alert" id="administration-status"></div>
-      <h1>Administration</h1>
+      <h1><i class="icon-vector-bolt administration-icon"></i>Administration</h1>
+      <div id="organization-settings" class="settings-section">
+      <div class="settings-section-title"><i class="icon-vector-gear settings-section-icon"></i>
+      Organization settings</div>
 
-      <form class="form-horizontal admin-realm">
+      <form class="form-horizontal admin-realm-form">
         <div class="control-group admin-realm">
           <div class="alert" id="admin-realm-name-status"></div>
 	  <div class="alert" id="admin-realm-restricted-to-domain-status"></div>
@@ -34,10 +37,15 @@
 	    <input type="checkbox" id="id_realm_invite_by_admins_only" name="realm_invite_by_admins_only" {{#unless realm_invite_required}}disabled="disabled"{{/unless}} {{#if realm_invite_by_admins_only}}checked="checked"{{/if}} />
           </div>
         </div>
-        <input type="submit" class="btn btn-default" value="Save" />
+        <div class="controls organization-submission">
+        <input type="submit" class="btn btn-big btn-primary" value="Save changes" />
+        </div>
       </form>
+      </div>
 
-      <h2>Users</h2>
+      <div id="admin-user-list" class="settings-section">
+      <div class="settings-section-title"><i class="icon-vector-user settings-section-icon"></i>
+      Users</div>
       <table class="table table-condensed table-striped">
         <tbody id="admin_users_table" class="admin_user_table">
           <th>Name</th>
@@ -46,7 +54,11 @@
         </tbody>
       </table>
       <div id="admin_page_users_loading_indicator"></div>
-      <h2>Bots</h2>
+      </div>
+
+      <div id="admin-user-list" class="settings-section">
+      <div class="settings-section-title"><i class="icon-vector-github settings-section-icon"></i>
+      Bots</div>
       <table class="table table-condensed table-striped">
         <tbody id="admin_bots_table" class="admin_bot_table">
           <th>Name</th>
@@ -56,7 +68,13 @@
         </tbody>
       </table>
       <div id="admin_page_bots_loading_indicator"></div>
-      <h2>Streams</h2>
+      </div>
+
+      <div id="admin-streams-list" class="settings-section">
+      <div class="settings-section-title"><i class="icon-vector-exchange settings-section-icon"></i>
+      Streams Deletion</div>
+      <p class="admin-streams-note">Most stream administration is done on the <a href="/#subscriptions">subscriptions page</a>.</p>
+
       <table class="table table-condensed table-striped">
         <tbody id="admin_streams_table" class="admin_stream_table">
           <th>Name</th>
@@ -64,7 +82,11 @@
         </tbody>
       </table>
       <div id="admin_page_streams_loading_indicator"></div>
-      <h2>Deactivated Users</h2>
+      </div>
+
+      <div id="admin-deactivated-users-list" class="settings-section">
+      <div class="settings-section-title"><i class="icon-vector-trash settings-section-icon"></i>
+      Deactivated Users</div>
       <table class="table table-condensed table-striped">
         <tbody id="admin_deactivated_users_table" class="admin_user_table">
           <th>Name</th>
@@ -73,6 +95,8 @@
         </tbody>
       </table>
       <div id="admin_page_deactivated_users_loading_indicator"></div>
+      </div>
+
       <div id="deactivation_user_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="deactivation_user_modal_label" aria-hidden="true">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>