From a9b0c03a0d4c99348810e3dc77266e0567b7bac7 Mon Sep 17 00:00:00 2001
From: jagansivam28 <jagansivam71@gmail.com>
Date: Sun, 7 Jun 2020 01:03:42 +0530
Subject: [PATCH] settings CSS: Refactor delete button, text css to use common
 css class.

Refactor user avatar and realm icon delete-button, delete-text CSS
to use common CSS Class.
---
 static/styles/settings.scss                   | 20 ++++++-------------
 .../templates/settings/account_settings.hbs   |  4 ++--
 .../settings/organization_profile_admin.hbs   |  4 ++--
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index e563f99352..ebc1192039 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -1209,27 +1209,22 @@ input[type=checkbox] {
         cursor: pointer;
     }
 
-    #realm_icon_delete_button,
-    #user_avatar_delete_button {
+    .settings-page-delete-button {
         cursor: pointer;
         color: hsl(0, 0%, 75%);
         opacity: 0;
         position: absolute;
+        font-size: 2rem;
         top: 10px;
         right: 10px;
         z-index: 99;
     }
 
-    #realm_icon_delete_button {
-        font-size: 2rem;
-    }
-
     #user_avatar_delete_button {
         font-size: 3rem;
     }
 
-    #realm_icon_delete_button:hover,
-    #user_avatar_delete_button:hover {
+    .settings-page-delete-button:hover {
         color: hsl(0, 0%, 100%);
     }
 
@@ -1239,13 +1234,11 @@ input[type=checkbox] {
     }
 
 
-    #realm_icon_delete_button:hover ~ #realm_icon_delete,
-    #user_avatar_delete_button:hover ~ #user_avatar_delete {
+    .settings-page-delete-button:hover ~ .settings-page-delete-text {
         visibility: visible;
     }
 
-    #realm_icon_delete,
-    #user_avatar_delete {
+    .settings-page-delete-text {
         color: hsl(0, 0%, 100%);
         font-size: 0.85rem;
         position: absolute;
@@ -1337,8 +1330,7 @@ input[type=checkbox] {
             cursor: pointer;
         }
 
-        #realm_icon_delete_button,
-        #user_avatar_delete_button {
+        .settings-page-delete-button {
             opacity: 1;
         }
 
diff --git a/static/templates/settings/account_settings.hbs b/static/templates/settings/account_settings.hbs
index 49b49c5016..afac9215eb 100644
--- a/static/templates/settings/account_settings.hbs
+++ b/static/templates/settings/account_settings.hbs
@@ -159,11 +159,11 @@
                 <div id="user-settings-avatar" class="avatar-icon-settings">
                     <div id="user-avatar-background"></div>
                     <div id="user-avatar-block" style="background-image: url({{ page_params.avatar_url_medium }})" {{#if page_params.is_guest}} class="guest-avatar"{{/if}}></div>
-                    <span id="user_avatar_delete_button" aria-label="{{t 'Delete profile picture'}}" role="button" tabindex="0"
+                    <span id="user_avatar_delete_button" class="settings-page-delete-button"  aria-label="{{t 'Delete profile picture'}}" role="button" tabindex="0"
                       {{#unless user_can_change_avatar}}style="display:none"{{/unless}}>
                         &times;
                     </span>
-                    <span id="user_avatar_delete" aria-label="{{t 'Delete profile picture'}}" tabindex="0">
+                    <span id="user_avatar_delete" class="settings-page-delete-text" 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>
diff --git a/static/templates/settings/organization_profile_admin.hbs b/static/templates/settings/organization_profile_admin.hbs
index 506cda08d1..cf6af3bce8 100644
--- a/static/templates/settings/organization_profile_admin.hbs
+++ b/static/templates/settings/organization_profile_admin.hbs
@@ -32,10 +32,10 @@
                     {{#if is_admin}}
                     <div id="realm_icon_upload_button">
                         <div id="realm-icon-background"></div>
-                        <span id="realm_icon_delete_button" aria-label="{{t 'Delete organization icon'}}" role="button" tabindex="0">
+                        <span id="realm_icon_delete_button" class="settings-page-delete-button" aria-label="{{t 'Delete organization icon'}}" role="button" tabindex="0">
                             &times;
                         </span>
-                        <span id="realm_icon_delete" aria-label="{{t 'Delete organization icon'}}" tabindex="0">
+                        <span id="realm_icon_delete" class="settings-page-delete-text" aria-label="{{t 'Delete organization icon'}}" tabindex="0">
                             {{t 'Delete icon' }}
                         </span>
                         <span id="realm_icon_upload" aria-label="{{t 'Upload organization icon'}}" role="button" tabindex="0">