Minor bug and UI fixes (#6729)

* PLT-6797 - Code block language tag not selectable

* PLT-6771 - Aligning search box with RHS

* PLT-6827 - Fixing link color in error bar

* PLT-6241 - Adding edge detection

webapp/components/channel_view.jsx

@@ -44,7 +44,7 @@ export default class ChannelView extends React.Component {
         $('body').addClass('app__body');
 
         // IE Detection
-        if (UserAgent.isInternetExplorer()) {
+        if (UserAgent.isInternetExplorer() || UserAgent.isEdge()) {
             $('body').addClass('browser--ie');
         }
     }

webapp/components/new_channel_modal/new_channel_modal.jsx

@@ -112,7 +112,7 @@ export default class NewChannelModal extends React.PureComponent {
 
     componentDidMount() {
         // ???
-        if (UserAgent.isInternetExplorer()) {
+        if (UserAgent.isInternetExplorer() || UserAgent.isEdge()) {
             $('body').addClass('browser--ie');
         }
     }

webapp/components/search_bar.jsx

@@ -255,7 +255,6 @@ export default class SearchBar extends React.Component {
             mentionBtn = (
                 <div
                     className='dropdown channel-header__links'
-                    style={{float: 'left', marginTop: '1px'}}
                 >
                     <OverlayTrigger
                         delayShow={Constants.OVERLAY_TIME_DELAY}
@@ -279,7 +278,6 @@ export default class SearchBar extends React.Component {
             flagBtn = (
                 <div
                     className='dropdown channel-header__links'
-                    style={{float: 'left', marginTop: '1px'}}
                 >
                     <OverlayTrigger
                         delayShow={Constants.OVERLAY_TIME_DELAY}

webapp/sass/components/_error-bar.scss

@@ -18,17 +18,13 @@
     }
 
     a {
-        color: $white;
+        color: inherit !important;
         text-decoration: underline;
 
-        .app__body & {
+        &:hover,
-            color: $white;
+        &:active,
-
+        &:focus {
-            &:hover,
+            color: inherit !important;
-            &:active,
-            &:focus {
-                color: $white;
-            }
         }
 
         &.error-bar__close {

webapp/sass/components/_search.scss

@@ -8,7 +8,13 @@
 
 .search-bar__container {
     @include flex(0 0 56px);
-    padding: 12px 8px 0 0;
+    padding: 12px 5px 0 0;
+
+    .channel-header__links {
+        .sidebar--right & {
+            line-height: 25px;
+        }
+    }
 }
 
 .icon--rotate {
@@ -54,13 +60,13 @@
 .sidebar__search-clear {
     @include opacity(.5);
     color: $dark-gray;
-    width: 40px;
+    cursor: pointer;
     margin-right: 20px;
     position: absolute;
-    top: 12px;
     right: 0;
-    cursor: pointer;
+    top: 12px;
     visibility: hidden;
+    width: 40px;
 }
 
 .search__form {
@@ -74,10 +80,9 @@
     }
 
     .sidebar--right & {
-        width: 300px;
         float: left;
-        margin-left: 17px;
+        margin-right: 7px;
-        margin-right: 9px;
+        width: 325px;
     }
 
     .search-bar {

webapp/sass/layout/_content.scss

@@ -20,7 +20,6 @@
             // stays on the top and don't get hidden by the
             // search's input block
             float: right;
-            margin-right: -18px;
             padding-right: 0px !important;
             position: relative;
             z-index: 6;

webapp/sass/layout/_headers.scss

@@ -426,6 +426,7 @@
 .app__body {
 
     .channel-header__links {
+        display: inline-block;
         font-family: 'Open Sans', sans-serif;
         font-size: 22px;
         height: 30px;

webapp/sass/layout/_markdown.scss

@@ -92,6 +92,7 @@ h6 {
 .post-code__language {
     @include opacity(0);
     @include transition(opacity, .6s);
+    @include unselectable;
     background: #21586d;
     border-radius: 0 0 0 2px;
     color: $white;

webapp/sass/utils/_functions.scss

@@ -21,3 +21,13 @@
     -moz-osx-font-smoothing: grayscale;
     transform: translate(0, 0);
 }
+
+@mixin unselectable {
+    -webkit-user-select: none; /* Chrome/Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE10+ */
+
+    /* Rules below not implemented in browsers yet */
+    -o-user-select: none;
+    user-select: none;
+}