diff --git a/webapp/components/sidebar_right_menu.jsx b/webapp/components/sidebar_right_menu.jsx
index 6122f60e83..63fe94c5d0 100644
--- a/webapp/components/sidebar_right_menu.jsx
+++ b/webapp/components/sidebar_right_menu.jsx
@@ -298,6 +298,25 @@ export default class SidebarRightMenu extends React.Component {
);
+ const leaveTeam = (
+
+
+
+
+
+
+ );
+
if (isAdmin) {
teamSettingsLink = (
@@ -430,7 +449,7 @@ export default class SidebarRightMenu extends React.Component {
}
let teamDivider = null;
- if (teamSettingsLink || manageLink || joinAnotherTeamLink || createTeam) {
+ if (teamSettingsLink || manageLink || joinAnotherTeamLink || createTeam || leaveTeam) {
teamDivider = ;
}
@@ -501,6 +520,7 @@ export default class SidebarRightMenu extends React.Component {
{teamSettingsLink}
{manageLink}
{createTeam}
+ {leaveTeam}
{joinAnotherTeamLink}
{consoleDivider}
{consoleLink}
diff --git a/webapp/sass/layout/_sidebar-menu.scss b/webapp/sass/layout/_sidebar-menu.scss
index 4af2f6243f..b4d4f15fdf 100644
--- a/webapp/sass/layout/_sidebar-menu.scss
+++ b/webapp/sass/layout/_sidebar-menu.scss
@@ -70,6 +70,13 @@
line-height: 40px;
padding: 0 15px;
+ svg {
+ fill-opacity: 0.85;
+ position: relative;
+ top: 4px;
+ width: 18px;
+ }
+
.icon {
display: inline-block;
left: -5px;
diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx
index e8dc583ef8..986e1b7580 100644
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -456,6 +456,7 @@ export const Constants = {
SCROLL_BOTTOM_ICON: "",
VIDEO_ICON: "",
PIN_ICON: "",
+ LEAVE_TEAM_SVG: "",
THEMES: {
default: {
type: 'Organization',
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 9827dfb342..84b02beb11 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -504,7 +504,8 @@ export function applyTheme(theme) {
changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.8));
changeCss('.sidebar--left .nav-pills__container li > h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6));
changeCss('.app__body .sidebar--left .sidebar__switcher button, .sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
- changeCss('.sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText);
+ changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
+ changeCss('.sidebar--left .status .offline--icon, .app__body .sidebar--menu svg', 'fill:' + theme.sidebarText);
changeCss('.sidebar--left .status.status--group', 'background:' + changeOpacity(theme.sidebarText, 0.3));
changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
changeCss('.app__body .sidebar--left .sidebar__switcher', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));