Minor UI improvements (#7137)

* PLT-7303 - Fixing manage members button

* Revert "PLT-7303 - Fixing manage members button"

This reverts commit 7dcb68a8e333a2c95444d417ed9a244c9c30aa99.

* PLT-7303 - Redesigning channel members popover

* Updating font size and positioning

2 files changed, 54 insertions, 15 deletions

diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index b98ec85c9..5ecc0d43e 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -546,6 +546,15 @@
 
 }
 
+.more-modal__button {
+    .btn {
+        font-size: .9em;
+        font-weight: 600;
+        height: 39px;
+        width: 100%;
+    }
+}
+
 .more-modal__list {
     display: flex;
     flex-direction: column;
@@ -565,10 +574,6 @@
         .more-modal__row {
             padding: 5px 10px;
         }
-
-        .more-modal__name {
-            font-weight: normal;
-        }
     }
 
     .more-modal__image {
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index 90573c7ec..be0403292 100644
--- a/webapp/sass/components/_popover.scss
+++ b/webapp/sass/components/_popover.scss
@@ -2,8 +2,9 @@
 @import 'compass/css3/transition';
 
 .popover {
-    @include border-radius($border-rad);
+    @include border-radius($border-rad * 2);
     color: lighten($black, 25%);
+    font-family: inherit;
     padding: 0;
 
     &.bottom,
@@ -11,12 +12,18 @@
     &.top,
     &.left {
         > .arrow {
+            display: none;
+
             &:after {
                 border-color: transparent;
             }
         }
     }
 
+    &.bottom {
+        margin-top: 10px;
+    }
+
     .popover-title {
         @include border-radius(0);
         background: alpha-color($black, .05);
@@ -219,10 +226,19 @@
 }
 
 .member-list__popover {
+    margin-left: -95px;
     max-width: initial;
 
+    .more-modal__body {
+        border-bottom: 1px solid transparent;
+        border-top: 1px solid transparent;
+        max-height: 275px;
+        overflow: auto;
+        position: relative;
+    }
+
     .more-modal__header {
-        padding: 14px 0;
+        padding: 14px 20px;
 
         .icon {
             @include opacity(.8);
@@ -232,26 +248,36 @@
         }
 
         span {
-            font-weight: 500;
+            font-weight: 600;
+        }
+    }
+
+    .more-modal__button {
+        .btn {
+            height: 42px;
         }
     }
 
     .more-modal__list {
         .more-modal__row {
-            border-bottom: none;
-            border-top: 1px solid;
+            border: none;
             cursor: pointer;
-            height: 45px;
+            height: 50px;
+            margin: 1px 0;
             overflow: hidden;
-            padding: 5px 19px 5px 17px;
+            padding: 6px 19px 0 20px;
 
             &:hover {
                 border-left: 3px solid transparent;
-                padding-left: 14px;
+                padding-left: 17px;
 
                 .more-modal__actions {
                     @include opacity(1);
                 }
+
+                .more-modal__name {
+                    font-weight: 600;
+                }
             }
 
             &.more-modal__row--button {
@@ -271,15 +297,18 @@
         }
 
         .more-modal__name {
-            line-height: 33px;
+            font-size: 13.5px;
+            font-weight: normal;
         }
 
         .more-modal__image {
             margin: 0;
+            position: relative;
+            top: -1px;
         }
 
         .more-modal__details {
-            line-height: 32px;
+            line-height: 39px;
             padding-left: 30px;
         }
 
@@ -287,11 +316,16 @@
             @include opacity(0);
             line-height: 42px;
             margin: 0;
+
+            .icon {
+                position: relative;
+                top: 2px;
+            }
         }
     }
 
     .popover-content {
-        max-height: 350px;
+        max-height: 380px;
         padding: 0;
         position: relative;
         width: 260px;