From 89733670fde44494a5166b420ff64837cea2a54f Mon Sep 17 00:00:00 2001
From: Sahil Singh <lcs2021033@iiitl.ac.in>
Date: Fri, 3 Mar 2023 23:17:38 +0530
Subject: [PATCH] image_upload_widget: Refactor style of upload_widget's
 preview_image.

Forms using upload widget were using the
same css for image preview.

We fix this by assigning a class to the
widget and applying specific styles to it.
---
 web/src/upload_widget.ts           | 1 +
 web/styles/image_upload_widget.css | 5 +++++
 web/styles/settings.css            | 5 -----
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/src/upload_widget.ts b/web/src/upload_widget.ts
index f416173d4f..9e881a9e17 100644
--- a/web/src/upload_widget.ts
+++ b/web/src/upload_widget.ts
@@ -35,6 +35,7 @@ export function build_widget(
         if ($preview_text !== undefined && $preview_image !== undefined) {
             const image_blob = URL.createObjectURL(file);
             $preview_image.attr("src", image_blob);
+            $preview_image.addClass("upload_widget_image_preview");
             $preview_text.show();
         }
     }
diff --git a/web/styles/image_upload_widget.css b/web/styles/image_upload_widget.css
index 2628bdfbed..3a75d37826 100644
--- a/web/styles/image_upload_widget.css
+++ b/web/styles/image_upload_widget.css
@@ -206,3 +206,8 @@
     justify-content: space-around;
     flex-wrap: wrap;
 }
+
+/* CSS  related to upload widget's preview image */
+.upload_widget_image_preview {
+    object-fit: cover;
+}
diff --git a/web/styles/settings.css b/web/styles/settings.css
index 233577c54a..7103285f7a 100644
--- a/web/styles/settings.css
+++ b/web/styles/settings.css
@@ -671,10 +671,6 @@ input[type="checkbox"] {
     #emoji_preview_text {
         margin-top: 6px;
     }
-
-    #emoji_preview_image {
-        object-fit: cover;
-    }
 }
 
 #emoji_file_input_error {
@@ -889,7 +885,6 @@ input[type="checkbox"] {
 .edit_bot_avatar_preview_image,
 #add_bot_preview_image {
     height: 100px;
-    object-fit: cover;
     width: 100px;
     margin: 2px 0 8px;
 }