Fixes #5002 - UI fixes in non-Firefox (#5071)

mozilla-services · Oct 31, 2018 · 9fb24f1 · 9fb24f1
1 parent 158270c
commit 9fb24f1
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,5 +1,12 @@
 .delete-shot-button {
   position: relative;
+  .icon-trash {
+    z-index: 1;
+     img {
+       width: 20px;
+       height: 20px;
+     }
+  }
 }
 
 .delete-confirmation-dialog {