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 {