From 4fe066c437785e65e5097a9899740aea8f8fbaa5 Mon Sep 17 00:00:00 2001
From: jagansivam28 <jagansivam71@gmail.com>
Date: Mon, 15 Jun 2020 11:08:56 +0530
Subject: [PATCH] user avatar: Remove `image-block` id.

Now we can remove `user-avatar-block` id and add common class `image_block`.
we can access this class using `#user-avatar-upload-widget .image_block`
so that we can have only one id at top-level and 'image_upload_widget.hbs`
can be more dynamic so we can use for other similar widgets also.
---
 static/js/user_events.js                      |  2 +-
 static/styles/settings.scss                   | 26 +++++++++++--------
 .../settings/image_upload_widget.hbs          |  2 +-
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/static/js/user_events.js b/static/js/user_events.js
index fa92a9af72..44fdf4d9db 100644
--- a/static/js/user_events.js
+++ b/static/js/user_events.js
@@ -78,7 +78,7 @@ exports.update_person = function update(person) {
             page_params.avatar_source = person.avatar_source;
             page_params.avatar_url = url;
             page_params.avatar_url_medium = person.avatar_url_medium;
-            $("#user-avatar-block").attr("src", person.avatar_url_medium);
+            $("#user-avatar-upload-widget .image-block").attr("src", person.avatar_url_medium);
         }
 
         message_live_update.update_avatar(person_obj.user_id, person.avatar_url);
diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index 245baf1f50..4b96324fcf 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -1207,12 +1207,20 @@ input[type=checkbox] {
         right: 20px;
     }
 
-     .image_upload_spinner {
+    .image_upload_spinner {
         top: 40%;
         right: 40%;
         width: 50px;
         height: 50px;
     }
+
+    .image-block {
+        border-radius: 5px;
+        box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
+        width: 200px;
+        height: 200px;
+        top: 0px;
+    }
 }
 
 .avatar-icon-logo-settings {
@@ -1223,8 +1231,12 @@ input[type=checkbox] {
 
     transition: all 0.3s ease;
 
-    #realm-icon-block,
-    #user-avatar-block {
+    #realm-icon-block {
+        background-size: 100%;
+        height: 100%;
+    }
+
+    .image-block {
         background-size: 100%;
         height: 100%;
     }
@@ -1241,14 +1253,6 @@ input[type=checkbox] {
         cursor: pointer;
     }
 
-    #user-avatar-block {
-        border-radius: 5px;
-        box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
-        width: 200px;
-        height: 200px;
-        top: 0px;
-    }
-
     .settings-page-delete-button {
         cursor: pointer;
         color: hsl(0, 0%, 75%);
diff --git a/static/templates/settings/image_upload_widget.hbs b/static/templates/settings/image_upload_widget.hbs
index 6f79de8c7c..995e2658c4 100644
--- a/static/templates/settings/image_upload_widget.hbs
+++ b/static/templates/settings/image_upload_widget.hbs
@@ -16,7 +16,7 @@
         </span>
     </div>
     {{/if}}
-    <img id="user-avatar-block" src="{{ image }}"/>
+    <img class="image-block" src="{{ image }}"/>
     <input type="file" name="user_avatar_file_input" class="notvisible" id="user_avatar_file_input" value="{{t 'Upload profile picture' }}" />
     <div id="user_avatar_file_input_error" class="text-error"></div>
 </div>