From ca74c95c60e9615f4868d727733ec3215d49ffb0 Mon Sep 17 00:00:00 2001
From: sanchi-t <ssharmas10662@gmail.com>
Date: Thu, 7 Mar 2024 16:16:02 +0530
Subject: [PATCH] user_profile: Display `Saved` feedback.

Visually confirms successful profile changes with a clear
`Saved` message.

Fixes part of #26692.

Co-authored-by: Kunal Sharma <v.shm.kunal@gmail.com>.
Co-authored-by: Angelica <angelica.ferlin@gmail.com>.
---
 web/src/user_profile.js              | 10 ++++++++++
 web/styles/modal.css                 | 14 ++++++++++++++
 web/templates/user_profile_modal.hbs |  1 +
 3 files changed, 25 insertions(+)

diff --git a/web/src/user_profile.js b/web/src/user_profile.js
index 3472b879fd..65c86e2b14 100644
--- a/web/src/user_profile.js
+++ b/web/src/user_profile.js
@@ -592,6 +592,11 @@ export function show_edit_bot_info_modal(user_id, $container) {
                 hide_button_spinner($submit_btn);
                 original_values = get_current_values($("#bot-edit-form"));
                 toggle_submit_button($("#edit-user-form"));
+                ui_report.success(
+                    $t_html({defaultMessage: "Saved"}),
+                    $("#user-profile-modal .save-success"),
+                    1200,
+                );
                 $cancel_btn.prop("disabled", false);
             },
             error(xhr) {
@@ -868,6 +873,11 @@ export function show_edit_user_info_modal(user_id, $container) {
                 hide_button_spinner($submit_btn);
                 original_values = get_current_values($("#edit-user-form"));
                 toggle_submit_button($("#edit-user-form"));
+                ui_report.success(
+                    $t_html({defaultMessage: "Saved"}),
+                    $("#user-profile-modal .save-success"),
+                    1200,
+                );
                 $cancel_btn.prop("disabled", false);
             },
             error(xhr) {
diff --git a/web/styles/modal.css b/web/styles/modal.css
index 062e2b27bd..530a3181bf 100644
--- a/web/styles/modal.css
+++ b/web/styles/modal.css
@@ -157,6 +157,20 @@
     color: hsl(0deg 0% 100%) !important;
 }
 
+#user-profile-modal .save-success {
+    vertical-align: top;
+    background-color: transparent;
+    border-radius: 4px;
+    margin-right: 10px;
+    color: hsl(156deg 30% 50%);
+    padding: 0.5rem 1rem;
+    line-height: 1.15;
+
+    &:not(:empty) {
+        border: 1px solid hsl(156deg 30% 50%);
+    }
+}
+
 #read_receipts_error,
 #dialog_error {
     margin-bottom: 10px;
diff --git a/web/templates/user_profile_modal.hbs b/web/templates/user_profile_modal.hbs
index e4c218897c..5bf31f413e 100644
--- a/web/templates/user_profile_modal.hbs
+++ b/web/templates/user_profile_modal.hbs
@@ -135,6 +135,7 @@
             </main>
             <div class="manage-profile-tab-footer">
                 <footer class="modal__footer">
+                    <div class="save-success"></div>
                     <button type="button" class="modal__btn dialog_exit_button" aria-label="{{t 'Close this dialog window' }}" data-micromodal-close>{{t "Cancel" }}</button>
                     <button type="button" class="modal__btn dialog_submit_button">
                         <span>{{t "Save changes"}}</span>