From 4b3eceee7015af12750e6f73f11bb0969c8d5c41 Mon Sep 17 00:00:00 2001
From: Kai Faust <kai@fullstacklabs.co>
Date: Wed, 9 Nov 2016 06:40:24 -0800
Subject: [PATCH] PLT-4602 Fix misaligned close button and fix Android icon
 rendering bug (#4492)

* PLT-4602 Fix horizontal alignment for .close__button

Reduce negative left margin to fix miscalculated center-positioning.

* PLT-4602 Fix dropdown close icon rendering bug on Android

The combination of using a unicode character and a pseudo element was
too problematic, so I added a new custom icon svg CLOSE_ICON that
renders consistently on all browsers.

* PLT-4602 Use font-family fix, remove <svg>

You were correct @hmhealey, the problem was that the unicode characters
were rendering as different fonts: Open Sans and Helvetica Neue!
---
 webapp/components/navbar.jsx        | 10 ++++--
 webapp/sass/responsive/_mobile.scss | 55 ++++++++++++++++-------------
 2 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx
index 9721ddee19..d71fec9457 100644
--- a/webapp/components/navbar.jsx
+++ b/webapp/components/navbar.jsx
@@ -546,6 +546,12 @@ export default class Navbar extends React.Component {
                             {deleteChannelOption}
                             {leaveChannelOption}
                             {toggleFavoriteOption}
+                            <div
+                                className='close visible-xs-block'
+                                onClick={() => this.refs.headerOverlay.hide()}
+                            >
+                                {'×'}
+                            </div>
                         </ul>
                     </div>
                 </div>
@@ -671,7 +677,7 @@ export default class Navbar extends React.Component {
                         options={{singleline: true, mentionHighlight: false}}
                     />
                     <div
-                        className='close__icon visible-xs-block'
+                        className='close visible-xs-block'
                         onClick={() => this.refs.headerOverlay.hide()}
                     >
                         {'×'}
@@ -721,7 +727,7 @@ export default class Navbar extends React.Component {
                             />
                         </div>
                         <div
-                            className='close__icon visible-xs-block'
+                            className='close visible-xs-block'
                             onClick={() => this.refs.headerOverlay.hide()}
                         >
                             {'×'}
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index b66189c8b2..8fff2853c5 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -38,21 +38,24 @@
             padding: 15px 20px 100px;
         }
 
-        .close__icon {
-            @include border-radius(50%);
-            border: 1px solid $white;
-            bottom: 25px;
-            color: $white;
+        .close {
+            font-family: 'Open Sans', sans-serif;
             display: block;
-            font-size: 23px;
-            font-weight: 300;
-            height: 30px;
-            left: 50%;
-            line-height: 23px;
-            margin-left: -25px;
             position: fixed;
-            text-align: center;
+            bottom: 25px;
+            height: 30px;
             width: 30px;
+            margin-left: -15px;
+            left: 50%;
+            font-size: 23px;
+            line-height: 27px;
+            border-radius: 50%;
+            border: 1px solid $white;
+            text-align: center;
+            opacity: 1;
+            text-shadow: none;
+            color: white;
+            font-weight: 200;
         }
     }
 
@@ -752,22 +755,24 @@
                 top: 42px;
                 width: 100%;
 
-                &:after {
-                    @include border-radius(50%);
-                    border: 1px solid $white;
-                    bottom: 25px;
-                    color: $white;
-                    content: '\D7';
+                .close {
+                    font-family: 'Open Sans', sans-serif;
                     display: block;
-                    font-size: 23px;
-                    font-weight: 300;
-                    height: 30px;
-                    left: 50%;
-                    line-height: 27px;
-                    margin-left: -25px;
                     position: fixed;
-                    text-align: center;
+                    bottom: 25px;
+                    height: 30px;
                     width: 30px;
+                    margin-left: -15px;
+                    left: 50%;
+                    font-size: 23px;
+                    line-height: 27px;
+                    border-radius: 50%;
+                    border: 1px solid $white;
+                    text-align: center;
+                    opacity: 1;
+                    text-shadow: none;
+                    color: white;
+                    font-weight: 200;
                 }
 
                 > li {