diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx
index 076a076181..cc98c495ee 100644
--- a/web/react/components/admin_console/admin_sidebar.jsx
+++ b/web/react/components/admin_console/admin_sidebar.jsx
@@ -5,6 +5,9 @@ import AdminSidebarHeader from './admin_sidebar_header.jsx';
import SelectTeamModal from './select_team_modal.jsx';
import * as Utils from '../../utils/utils.jsx';
+const Tooltip = ReactBootstrap.Tooltip;
+const OverlayTrigger = ReactBootstrap.OverlayTrigger;
+
export default class AdminSidebar extends React.Component {
constructor(props) {
super(props);
@@ -80,6 +83,12 @@ export default class AdminSidebar extends React.Component {
render() {
var count = '*';
var teams = 'Loading';
+ const removeTooltip = (
+ {'Remove team from sidebar menu'}
+ );
+ const addTeamTooltip = (
+ {'Add team from sidebar menu'}
+ );
if (this.props.teams != null) {
count = '' + Object.keys(this.props.teams).length;
@@ -102,14 +111,19 @@ export default class AdminSidebar extends React.Component {
className={'nav__sub-menu-item ' + this.isSelected('team_users', team.id)}
>
{team.name}
+
- {'x'}
+ {'×'}
+
@@ -245,15 +259,20 @@ export default class AdminSidebar extends React.Component {
{'TEAMS (' + count + ')'}
+
+
diff --git a/web/react/components/admin_console/select_team_modal.jsx b/web/react/components/admin_console/select_team_modal.jsx
index 22189821b0..858b6bbfed 100644
--- a/web/react/components/admin_console/select_team_modal.jsx
+++ b/web/react/components/admin_console/select_team_modal.jsx
@@ -57,7 +57,7 @@ export default class SelectTeamModal extends React.Component {
diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss
index 206d5bfca6..af827a7f82 100644
--- a/web/sass-files/sass/partials/_admin-console.scss
+++ b/web/sass-files/sass/partials/_admin-console.scss
@@ -37,13 +37,22 @@
background: #333;
padding: 10px 10px;
margin: 1px 0 0;
+ .menu-icon--right {
+ top: 6px;
+ right: 12px;
+ }
}
}
.menu-icon--right {
- vertical-align: top;
- padding: 5px 10px;
- margin: -5px;
- float: right;
+ position: absolute;
+ right: 10px;
+ top: 3px;
+ font-size: 18px;
+ font-weight: 600;
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ text-align: center;
.fa {
font-size: 13px;
right: -2px;
@@ -60,7 +69,7 @@
li {
> a {
font-size: 13px;
- padding: 5px 15px;
+ padding: 5px 35px 5px 15px;
background: transparent;
color: #bbb;
&:hover {