user avatar: Rename and convert "#user-settings-avatar".

Renaming "user-settings-avatar" to "image_upload_button" since the
`user-settings-avatar` name is irrelevant/confusing for the upload
button, and converting the id into a class so that we could just have
only one outer id.

static/js/avatar.js

@@ -72,7 +72,7 @@ exports.build_user_avatar_widget = function (upload_function) {
         return upload_widget.build_direct_upload_widget(
             get_file_input,
             $("#user_avatar_file_input_error").expectOne(),
-            $("#user-settings-avatar").expectOne(),
+            $("#user-avatar-upload-widget .image_upload_button").expectOne(),
             upload_function,
             page_params.max_avatar_file_size_mib
         );

static/styles/settings.scss

@@ -657,7 +657,6 @@ input[type=checkbox] {
     margin-left: 20px;
 }
 
-#user-settings-avatar,
 #realm-icon-section {
     border-radius: 5px;
     box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
@@ -1186,6 +1185,16 @@ input[type=checkbox] {
     font-size: 1.2em;
 }
 
+#user-avatar-upload-widget {
+
+    .image_upload_button {
+        border-radius: 5px;
+        box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
+        z-index: 99;
+    }
+
+}
+
 .avatar-icon-logo-settings {
     position: relative;
     border-radius: 5px;
@@ -2086,13 +2095,6 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
     }
 }
 
-@media (max-width: 786px) {
-    #user-settings-avatar {
-        width: 220px;
-        height: 220px;
-    }
-}
-
 @media (max-width: 700px) {
     #settings_page {
         .settings-header.mobile {

static/templates/settings/image_upload_widget.hbs

@@ -1,6 +1,6 @@
 <div id ="{{widget}}-upload-widget" class="inline-block avatar-icon-logo-settings">
     {{#if is_editable_by_current_user}}
-    <div id="user-settings-avatar">
+    <div class="image_upload_button">
         <div class="settings-page-image-background"></div>
         <span id="user_avatar_delete_button" class="settings-page-delete-button"  aria-label="{{t 'Delete profile picture'}}" role="button" tabindex="0">
             &times;