From 0de77cabb0526f2134cff19964f4afacf149e405 Mon Sep 17 00:00:00 2001
From: jagansivam28 <jagansivam71@gmail.com>
Date: Thu, 16 Apr 2020 23:16:45 +0530
Subject: [PATCH] settings UI: Add brighness on hover effect for "X" icon in
 upload avatar.

Increase brightness on hover effect for "X" icon in upload
avatar area is added and change the text to "delete profile picture"
while hovering over "X" icon in the avatar upload area.
---
 static/styles/settings.scss                   | 30 +++++++++++++++++--
 .../templates/settings/account_settings.hbs   |  3 ++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index 4c6b4d1e2e..1c12fd1729 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -1145,7 +1145,7 @@ input[type=checkbox].inline-block {
 
     #user_avatar_delete_button {
         cursor: pointer;
-        color: hsl(236, 33%, 90%);
+        color: hsl(0, 0%, 75%);
         opacity: 0;
         font-size: 3rem;
         position: absolute;
@@ -1154,9 +1154,31 @@ input[type=checkbox].inline-block {
         z-index: 99;
     }
 
+    #user_avatar_delete_button:hover {
+        color: hsl(0, 0%, 100%);
+    }
+
+    #user_avatar_delete_button:hover ~ #user_avatar_upload_button {
+        visibility: hidden;
+    }
+
+    #user_avatar_delete_button:hover ~ #user_avatar_delete {
+        visibility: visible;
+    }
+
+    #user_avatar_delete {
+        color: hsl(0, 0%, 100%);
+        font-size: 0.85rem;
+        position: absolute;
+        top: 90px;
+        right: 40px;
+        visibility: hidden;
+        z-index: 99;
+    }
+
     #user_avatar_upload_button {
         cursor: pointer;
-        color: hsl(236, 33%, 90%);
+        color: hsl(0, 0%, 85%);
         opacity: 0;
         font-size: 0.85rem;
         position: absolute;
@@ -1165,6 +1187,10 @@ input[type=checkbox].inline-block {
         z-index: 99;
     }
 
+    #user_avatar_upload_button:hover {
+        color: hsl(0, 0%, 100%);
+    }
+
     #user-avatar-spinner {
         position: absolute;
         top: 40%;
diff --git a/static/templates/settings/account_settings.hbs b/static/templates/settings/account_settings.hbs
index d0afc0a162..f16f36aefd 100644
--- a/static/templates/settings/account_settings.hbs
+++ b/static/templates/settings/account_settings.hbs
@@ -163,6 +163,9 @@
                       {{#unless user_can_change_avatar}}style="display:none"{{/unless}}>
                         &times;
                     </span>
+                    <span id="user_avatar_delete" aria-label="{{t 'Delete profile picture'}}" tabindex="0">
+                        {{t 'Delete profile picture' }}
+                    </span>
                     <object id="user-avatar-spinner" type="image/svg+xml" data="/static/images/tail-spin.svg"></object>
                     <span id="user_avatar_upload_button" aria-label="{{t 'Upload new profile picture'}}" role="button" tabindex="0"
                       {{#if (and (not page_params.is_admin) page_params.realm_avatar_changes_disabled)}}style="display:none"{{/if}}>