settings: Clean up organization and user settings pieces.

This cleans up the styling of the organization and the user settings
components to be more responsive and have more consistent styling with
the rest of the overlays.

static/styles/settings.css

@@ -74,10 +74,16 @@ label {
 
 .user-avatar-section,
 .realm-icon-section {
-    float: right;
+    position: relative;
+
+    overflow: hidden;
+}
+
+.user-avatar-section .avatar-controls,
+.realm-icon-section .avatar-controls {
     background-color: #fff;
-    margin: 20px 0px;
-    padding: 20px;
+    padding: 10px;
+    margin-left: 10px;
 }
 
 .realm-icon-section {
@@ -87,7 +93,11 @@ label {
 
 .user-avatar-section .inline-block,
 .realm-icon-section .inline-block {
-    display: block;
+    margin: 10px 20px 0px 0px;
+    vertical-align: top;
+
+    border-radius: 4px;
+    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
 }
 
 .admin-realm-description {
@@ -264,6 +274,14 @@ input[type=checkbox] + .inline-block {
     margin-left: 10px;
 }
 
+.admin-realm-form h3 {
+    margin-bottom: 0px;
+}
+
+.organization-settings-parent div:first-of-type {
+    margin-top: 10px;
+}
+
 #user-settings-avatar,
 #realm-icon-section {
     border-radius: 5px;
@@ -754,6 +772,12 @@ input[type=checkbox].inline-block {
     box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
     width: 200px;
     height: 200px;
+
+    transition: all 0.3s ease;
+}
+
+#user-settings-avatar:hover {
+    -webkit-filter: brightness(0.5);
 }
 
 #realm-settings-icon {
@@ -761,7 +785,6 @@ input[type=checkbox].inline-block {
     box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
     width: 100px;
     height: 100px;
-    margin-left: 25%;
 }
 /* -- new settings overlay -- */
 #settings_page {
@@ -1070,27 +1093,12 @@ input[type=text]#settings_search {
         float: none;
         display: inline-block;
     }
-
-    .user-avatar-section .inline-block,
-    .realm-icon-section .inline-block {
-        display: inline-block;
-        vertical-align: top;
-    }
-
-    .user-avatar-section .inline-block {
-        margin: 0px 10px;
-    }
-
-    .realm-icon-section .inline-block {
-        margin: 0px 25px;
-    }
 }
 
-@media (max-width: 856px) {
-    .user-avatar-section .inline-block,
-    .realm-icon-section .inline-block {
-        display: block;
-        margin: 0;
+@media (max-width: 786px) {
+    #user-settings-avatar {
+        width: 220px;
+        height: 220px;
     }
 }
 

static/styles/zulip.css

@@ -340,7 +340,6 @@ li,
 #user-settings-avatar {
     width: 100px;
     height: 100px;
-    margin-top: 10px;
 }
 
 /* Classes for hiding and showing controls */

static/templates/settings/account-settings.handlebars

@@ -2,6 +2,7 @@
     <div class="alert" id="account-settings-status"></div>
     <div class="account-settings-form">
         <form class="email-change-form">
+            <h3 class="light">{{t "User settings" }}</h3>
             <p for="change_email" class="inline-block title">
                 {{t "Email" }}: <span id='email_value'>{{page_params.email}}</span>
                 <a id="change_email" href="#change_email" {{#if page_params.realm_email_changes_disabled}}style="display:none" {{/if}}title="{{t 'Change email' }}">[{{t "Change" }}]</a>
@@ -93,15 +94,17 @@
                 </div>
             </div>
 
-            <div class="user-avatar-section box-shadow border-radius">
+            <h3 class="light">{{t "User avatar" }}</h3>
+
+            <div class="user-avatar-section">
                 <div class="inline-block">
                     <img id="user-settings-avatar" src="{{ page_params.avatar_url_medium }}" />
                     <div id="user_avatar_file_input_error" class="text-error"></div>
                     <input type="file" name="user_avatar_file_input" class="notvisible" id="user_avatar_file_input" value="{{t 'Upload avatar' }}" />
                     <div id="upload_avatar_spinner"></div>
                 </div>
-                <div class="inline-block">
-                    <button class="button white rounded sea-green w-200 m-t-20 block" id="user_avatar_upload_button">
+                <div class="inline-block avatar-controls">
+                    <button class="button white rounded sea-green w-200 block" id="user_avatar_upload_button">
                         {{t 'Upload new avatar' }}
                     </button>
                     <button class="button white rounded btn-danger w-200 m-t-20 block" id="user_avatar_delete_button">

static/templates/settings/organization-settings-admin.handlebars

@@ -1,5 +1,7 @@
 <div id="organization-settings" data-name="organization-settings" class="settings-section">
     <form class="form-horizontal admin-realm-form">
+        <h3 class="light">{{t "Organization settings" }}</h3>
+
         <div class="alert" id="admin-realm-name-status"></div>
         <div class="alert" id="admin-realm-description-status"></div>
         <div class="alert" id="admin-realm-restricted-to-domain-status"></div>
@@ -192,7 +194,10 @@
             </div>
             {{/if}}
         </div>
-        <div class="realm-icon-section box-shadow border-radius">
+
+        <h3 class="light">{{t "Organization avatar" }}</h3>
+
+        <div class="realm-icon-section">
             <div class="inline-block">
                 <img id="realm-settings-icon" src="{{ realm_icon_url }}"/>
                 <div id="realm_icon_file_input_error" class="text-error"></div>
@@ -200,8 +205,8 @@
                        id="realm_icon_file_input" value="{{t 'Upload icon' }}"/>
                 <div id="upload_icon_spinner"></div>
             </div>
-            <div class="inline-block">
-                <button class="button white rounded sea-green w-200 m-t-10 block input-size"
+            <div class="inline-block avatar-controls">
+                <button class="button white rounded sea-green w-200 block input-size"
                         id="realm_icon_upload_button">{{t 'Upload new icon' }}</button>
                 <button class="button white rounded btn-danger w-200 m-t-10 block input-size"
                         id="realm_icon_delete_button">{{t 'Delete icon' }}</button>