From 923f6b40c56d6ebfee273e52cbe0405fc70a9b4a Mon Sep 17 00:00:00 2001
From: jagansivam28 <jagansivam71@gmail.com>
Date: Mon, 8 Jun 2020 02:27:40 +0530
Subject: [PATCH] settings org: Replace realm logo delete button with X icon.

Replacing delete button for `realm day/night logo` with "X" icon in the
right corner of the logo image to match "user profile" avatar UI.
---
 static/styles/settings.scss                        |  9 +++++++--
 static/templates/settings/account_settings.hbs     |  2 +-
 .../settings/organization_profile_admin.hbs        |  2 +-
 static/templates/settings/realm-logo-widget.hbs    | 14 ++++++++++----
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index 8e8d518e5c..7a606b4c43 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -663,7 +663,7 @@ input[type=checkbox] {
     height: 200px;
 }
 
-.realm-icon-section .avatar-icon-settings {
+.realm-icon-section .avatar-icon-logo-settings {
     width: 100px;
     height: 100px;
 }
@@ -1185,7 +1185,7 @@ input[type=checkbox] {
     font-size: 1.2em;
 }
 
-.avatar-icon-settings {
+.avatar-icon-logo-settings {
     position: relative;
     border-radius: 5px;
     box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
@@ -1257,6 +1257,11 @@ input[type=checkbox] {
         right: 18px;
     }
 
+    .realm_logo_delete {
+        top: 17px;
+        right: 80px;
+    }
+
     .settings-page-upload-text {
         cursor: pointer;
         font-size: 0.85rem;
diff --git a/static/templates/settings/account_settings.hbs b/static/templates/settings/account_settings.hbs
index c53cccedcd..e84ea5da6c 100644
--- a/static/templates/settings/account_settings.hbs
+++ b/static/templates/settings/account_settings.hbs
@@ -156,7 +156,7 @@
             <h3>{{t "Profile picture" }}</h3>
 
             <div class="inline-block">
-                <div id="user-settings-avatar" class="avatar-icon-settings">
+                <div id="user-settings-avatar" class="avatar-icon-logo-settings">
                     <div class="settings-page-image-background"></div>
                     <span id="avatar-spinner-background" class="upload-spinner-background">
                         <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 a15da530bd..792991fce2 100644
--- a/static/templates/settings/organization_profile_admin.hbs
+++ b/static/templates/settings/organization_profile_admin.hbs
@@ -28,7 +28,7 @@
         <div>{{t "Organization profile picture" }}</div>
         <div class="realm-icon-section">
             <div class="inline-block">
-                <div class="avatar-icon-settings">
+                <div class="avatar-icon-logo-settings">
                     {{#if is_admin}}
                     <div id="realm_icon_upload_button">
                         <div class="settings-page-image-background"></div>
diff --git a/static/templates/settings/realm-logo-widget.hbs b/static/templates/settings/realm-logo-widget.hbs
index 9deebc4c1f..a579d81829 100644
--- a/static/templates/settings/realm-logo-widget.hbs
+++ b/static/templates/settings/realm-logo-widget.hbs
@@ -1,5 +1,14 @@
 <div id="{{theme_mode}}-logo-section" class="realm-logo-section">
-    <div class="inline-block realm-logo-block">
+    <div class="inline-block avatar-icon-logo-settings realm-logo-block">
+        {{#if (and is_admin zulip_plan_is_not_limited)}}
+        <div class="settings-page-image-background"></div>
+        <span class="realm-logo-delete-button settings-page-delete-button" aria-label="{{t 'Delete organization logo'}}" role="button" tabindex="0">
+            &times;
+        </span>
+        <span class="settings-page-delete-text realm_logo_delete" aria-label="{{t 'Delete organization logo'}}" tabindex="0">
+            {{t 'Delete logo' }}
+        </span>
+        {{/if}}
         <img class="realm-logo-img" src="{{ logo_url }}"/>
         <input type="file" name="realm-logo-file-input"
           class="realm-logo-file-input notvisible" value="{{t 'Upload logo' }}"/>
@@ -12,9 +21,6 @@
             <span class="upload-logo-button-text">{{t 'Upload new logo' }}</span>
             <span class="upload-logo-spinner"></span>
         </button>
-        <button class="realm-logo-delete-button button rounded btn-danger w-200 m-t-10 block input-size">
-            {{t 'Delete logo' }}
-        </button>
         {{/if}}
     </div>
     {{/if}}