From a8f6185f126c98f367e58d393041bef7070fb8b6 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Thu, 7 May 2020 20:39:52 -0500
Subject: [PATCH] fix channel selector styles

fix #4072
---
 ui/component/channelSelector/view.jsx |  2 +-
 ui/scss/component/_channel.scss       | 37 +++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/ui/component/channelSelector/view.jsx b/ui/component/channelSelector/view.jsx
index 1f92e3980..f9a394e9c 100644
--- a/ui/component/channelSelector/view.jsx
+++ b/ui/component/channelSelector/view.jsx
@@ -43,7 +43,7 @@ function ChannelSelector(props: Props) {
         <MenuButton className="">
           <ChannelListItem uri={selectedChannelUrl} isSelected />
         </MenuButton>
-        <MenuList className="menu__list">
+        <MenuList className="menu__list channel__list">
           {channels &&
             channels.map(channel => (
               <MenuItem
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index 49768e13d..8d52ee053 100644
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@@ -180,6 +180,43 @@ $metadata-z-index: 1;
   margin-left: var(--spacing-xsmall);
 }
 
+.menu__list.channel__list {
+  margin-top: var(--spacing-small);
+  margin-left: 0;
+  border-radius: var(--border-radius);
+  background: transparent;
+
+  [role='menuitem'] {
+    &[data-selected] {
+      background: transparent;
+      .channel__list-item {
+        background-color: var(--color-card-background-highlighted);
+      }
+    }
+
+    &:first-child {
+      .channel__list-item {
+        border-top: 1px solid var(--color-border);
+        border-top-left-radius: var(--border-radius);
+        border-top-right-radius: var(--border-radius);
+      }
+    }
+
+    &:last-child {
+      .channel__list-item {
+        border-bottom-left-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
+      }
+    }
+
+    .channel__list-item {
+      padding-right: calc(var(--spacing-xlarge) + var(--spacing-small) * 2);
+      border-left: 1px solid var(--color-border);
+      border-right: 1px solid var(--color-border);
+    }
+  }
+}
+
 .channel__list-item {
   display: flex;
   align-items: center;