From 9d551bffb4e6737adeefd12f44614046e5d39ba9 Mon Sep 17 00:00:00 2001
From: Punam Dahiya <punamdahiya@yahoo.com>
Date: Thu, 25 Oct 2018 13:57:24 -0700
Subject: [PATCH] Fixes #5002 - UI fixes in non-Firefox

---
 server/src/delete-shot-button.js              |  2 +-
 server/src/pages/shot/text-tool.js            | 11 +++++++++--
 server/src/pages/shotindex/view.js            |  2 +-
 static/css/frame.scss                         |  1 +
 static/css/partials/_delete-confirmation.scss |  7 +++++++
 5 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/server/src/delete-shot-button.js b/server/src/delete-shot-button.js
index 5b526a017a..4e24076289 100644
--- a/server/src/delete-shot-button.js
+++ b/server/src/delete-shot-button.js
@@ -81,7 +81,7 @@ exports.DeleteShotButton = class DeleteShotButton extends React.Component {
 
     let deleteButtonStyle = null;
     if (this.props.isIcon) {
-      deleteButtonStyle = `button transparent trash ${deletePanelOpenClass}`;
+      deleteButtonStyle = `button transparent icon-trash ${deletePanelOpenClass}`;
     } else {
       deleteButtonStyle = `button nav-button transparent ${deletePanelOpenClass}`;
     }
diff --git a/server/src/pages/shot/text-tool.js b/server/src/pages/shot/text-tool.js
index 16e07dbe63..a06bcd4949 100644
--- a/server/src/pages/shot/text-tool.js
+++ b/server/src/pages/shot/text-tool.js
@@ -214,12 +214,19 @@ exports.TextTool = class TextTool extends React.Component {
     }
     const styles = window.getComputedStyle(this.textInput.current);
     const FONT_SIZE = parseInt(styles["font-size"], 10);
+    let line_height = styles["line-height"];
+
+    // Depending on the user agent computed styles
+    // line-height can have value as normal
+    if (line_height.toLowerCase() === "normal") {
+      line_height = 1.1 * FONT_SIZE;
+    }
 
     // Due to line-height differences of how fonts are rendered across platforms
     // adjust text y position to one-third of difference of line-height and font-size
-    const ADJUST_VERTICAL_SHIFT = (parseFloat(styles["line-height"]) - FONT_SIZE) / 3;
+    const ADJUST_VERTICAL_SHIFT = (parseFloat(line_height) - FONT_SIZE) / 3;
     const x = this.state.left + parseFloat(styles["padding-left"]);
-    const y = this.state.top + TEXT_INPUT_PADDING + parseFloat(styles["line-height"]) / 2 + ADJUST_VERTICAL_SHIFT;
+    const y = this.state.top + TEXT_INPUT_PADDING + parseFloat(line_height) / 2 + ADJUST_VERTICAL_SHIFT;
 
     const textCanvas = document.createElement("canvas");
     textCanvas.width = this.props.baseCanvas.width;
diff --git a/server/src/pages/shotindex/view.js b/server/src/pages/shotindex/view.js
index 20f8fe9a74..6190b85399 100644
--- a/server/src/pages/shotindex/view.js
+++ b/server/src/pages/shotindex/view.js
@@ -159,7 +159,7 @@ class Body extends React.Component {
       <div>
         <Localized id="shotIndexAlertErrorFavoriteShot">
           <div id="shotIndexAlertErrorFavoriteShot" hidden></div>
-        </Localized>,
+        </Localized>
         <Localized id="shotIndexPageErrorDeletingShot">
           <div id="shotIndexPageErrorDeletingShot" hidden></div>
         </Localized>
diff --git a/static/css/frame.scss b/static/css/frame.scss
index 3cac066473..fc63bffa33 100644
--- a/static/css/frame.scss
+++ b/static/css/frame.scss
@@ -674,6 +674,7 @@ body {
 // CSS used for Annotation Text Tool
 .text-select {
   -moz-appearance: none; //sass-lint:disable-line no-vendor-prefixes
+  -webkit-appearance: none;
   appearance: none;
   background-color: $light-default;
   background-image: url("../img/icon-dropdown.svg");
diff --git a/static/css/partials/_delete-confirmation.scss b/static/css/partials/_delete-confirmation.scss
index 4738019fff..0b7ee7cfe0 100644
--- a/static/css/partials/_delete-confirmation.scss
+++ b/static/css/partials/_delete-confirmation.scss
@@ -1,5 +1,12 @@
 .delete-shot-button {
   position: relative;
+  .icon-trash {
+    z-index: 1;
+     img {
+       width: 20px;
+       height: 20px;
+     }
+  }
 }
 
 .delete-confirmation-dialog {