Adding expand icon for RHS (#3386)

* Adding expand icon for RHS

Fixing errors

Adding back getTeamInviteLink with better functionality for mobile

Adding vertical align to post__link

Updating improvements for expand RHS stuff

* Improving transition on mobile

* Removing irrelevant changes

3 files changed, 57 insertions, 9 deletions

diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 2382a39e4..cc9f0f713 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -143,9 +143,16 @@
         &.popover {
             white-space: normal;
         }
-    }
 
-    @import "../components/status-icon";
+        .status {
+            width: 18px;
+
+            svg {
+                max-height: 20px;
+                width: 16px;
+            }
+        }
+    }
 }
 
 .channel-intro {
diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss
index 70b9eb133..50d144b9c 100644
--- a/webapp/sass/layout/_navigation.scss
+++ b/webapp/sass/layout/_navigation.scss
@@ -72,6 +72,7 @@
                 color: $white;
                 display: inline-block;
                 font-weight: 600;
+                line-height: 47px;
                 margin-right: 5px;
                 max-width: calc(100% - 200px);
                 overflow: hidden;
diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index 00e183254..d98474a7f 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -8,6 +8,18 @@
     position: fixed;
     right: 0;
     width: 400px;
+    z-index: 5;
+
+    .sidebar--right__bg {
+        @include single-transition(background-color, .5s, ease);
+        background-color: alpha-color($black, 0);
+        height: 100%;
+        left: -100%;
+        position: absolute;
+        top: 0;
+        visibility: hidden;
+        width: 300%;
+    }
 
     .post-body {
         img {
@@ -46,17 +58,29 @@
     }
 
     .sidebar--right__back {
-        @include opacity(.8);
+        @include single-transition(all, .2s, ease-in);
+        @include opacity(.5);
         color: inherit;
         display: inline-block;
-        font-size: 13px;
+        font-size: 26px;
         margin: 0 0 0 -14px;
         text-align: center;
+        vertical-align: top;
         width: 30px;
+
+        &:hover,
+        &:active {
+            color: inherit;
+            opacity: .8;
+        }
+
+        i {
+            position: relative;
+            top: -2px;
+        }
     }
 
     .sidebar-right__body {
-        @include border-radius(2px 0 0 0);
         @include display-flex;
         @include flex(1 1 auto);
         @include flex-direction(column);
@@ -79,18 +103,22 @@
         word-break: break-word;
     }
 
+    .sidebar--right__buttons {
+        float: right;
+    }
+
     .sidebar--right__close {
         @include single-transition(all, .2s, ease-in);
         background: none;
         border: none;
-        float: right;
-        font-size: 22px;
+        font-size: 20px;
         height: 22px;
         line-height: 0;
         margin: 11px 0 0;
         opacity: .5;
         outline: none;
-        width: 22px;
+        padding: 0;
+        width: 30px;
 
         &:hover,
         &:active {
@@ -99,8 +127,20 @@
 
         i {
             position: relative;
+        }
+    }
+
+    .sidebar--right__expand {
+        @extend .sidebar--right__close;
+        font-size: 17px;
+
+        i {
             top: -2px;
         }
+
+        .fa-compress {
+            display: none;
+        }
     }
 
     .sidebar--right__header {
@@ -110,7 +150,7 @@
         font-size: 1em;
         height: 44px;
         line-height: 44px;
-        padding: 0 1em;
+        padding: 0 5px 0 15px;
         text-transform: uppercase;
     }