convert nav-bar settings-dropdown component

bigbluebutton-html5/imports/ui/components/menu/component.jsx

@@ -65,6 +65,19 @@ class BBBMenu extends React.Component {
 
       if (key?.toLowerCase()?.includes(selectedEmoji?.toLowerCase())) itemClasses.push(styles.emojiSelected);
 
+      let customStyles = {
+        paddingLeft: '4px',
+        paddingRight: '4px',
+        paddingTop: '8px',
+        paddingBottom: '8px',
+        marginLeft: '4px',
+        marginRight: '4px'
+      };
+
+      if (a.customStyles) {
+        customStyles = { ...customStyles, ...a.customStyles };
+      }
+
       return [
         a.dividerTop && <Divider disabled />,
         <MenuItem
@@ -74,7 +87,7 @@ class BBBMenu extends React.Component {
           disableRipple={true}
           disableGutters={true}
           disabled={disabled}
-          style={{ paddingLeft: '4px',paddingRight: '4px',paddingTop: '8px', paddingBottom: '8px', marginLeft: '4px', marginRight: '4px' }}
+          style={customStyles}
           onClick={(event) => {
             onClick();
             const close = !key.includes('setstatus') && !key.includes('back');
@@ -94,12 +107,18 @@ class BBBMenu extends React.Component {
 
   render() {
     const { anchorEl } = this.state;
-    const { trigger, intl, wide, classes } = this.props;
+    const { trigger, intl, wide, classes, customStyles } = this.props;
     const actionsItems = this.makeMenuItems();
     const menuClasses = classes || [];
     menuClasses.push(styles.menu);
     if (wide) menuClasses.push(styles.wide);
 
+    let menuStyles = { zIndex: 9999 };
+
+    if (customStyles) {
+      menuStyles = { ...menuStyles, ...customStyles };
+    }
+
     return (
       <>
         <div
@@ -124,7 +143,7 @@ class BBBMenu extends React.Component {
           open={Boolean(anchorEl)}
           onClose={this.handleClose}
           className={menuClasses.join(' ')}
-          style={{ zIndex: 9999 }}
+          style={menuStyles}
         >
           {actionsItems}
           {anchorEl && window.innerWidth < MAX_WIDTH &&

bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx

@@ -6,13 +6,13 @@ import EndMeetingConfirmationContainer from '/imports/ui/components/end-meeting-
 import { makeCall } from '/imports/ui/services/api';
 import AboutContainer from '/imports/ui/components/about/container';
 import SettingsMenuContainer from '/imports/ui/components/settings/container';
-import Button from '/imports/ui/components/button/component';
 import BBBMenu from '/imports/ui/components/menu/component';
 import ShortcutHelpComponent from '/imports/ui/components/shortcut-help/component';
 import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
 import FullscreenService from '../../fullscreen-button/service';
-
-import { styles } from '../styles';
+import { colorDanger } from '/imports/ui/stylesheets/styled-components/palette';
+import deviceInfo from '/imports/utils/deviceInfo';
+import Styled from './styles';
 
 const intlMessages = defineMessages({
   optionsLabel: {
@@ -252,6 +252,8 @@ class SettingsDropdown extends PureComponent {
     }
 
     if (allowLogoutSetting && isMeteorConnected) {
+      const customStyles = { color: colorDanger };
+
       this.menuItems.push(
         {
           key: 'list-item-logout',
@@ -259,7 +261,7 @@ class SettingsDropdown extends PureComponent {
           icon: 'logout',
           label: intl.formatMessage(intlMessages.leaveSessionLabel),
           // description: intl.formatMessage(intlMessages.leaveSessionDesc),
-          className: styles.leaveMeetingButton,
+          customStyles,
           onClick: () => this.leaveSession(),
         },
       );
@@ -275,19 +277,21 @@ class SettingsDropdown extends PureComponent {
       isDropdownOpen,
     } = this.props;
 
-    return (
+    const { isMobile } = deviceInfo;
+    const customStyles = { top: '4rem' };
 
+    return (
       <BBBMenu
-        classes={[styles.offsetTop]}
         accessKey={OPEN_OPTIONS_AK}
+        customStyles={!isMobile ? customStyles : null}
         trigger={(
-          <Button
+          <Styled.DropdownButton
+            state={isDropdownOpen ? 'open' : 'closed'}
             label={intl.formatMessage(intlMessages.optionsLabel)}
             icon="more"
             ghost
             circle
             hideLabel
-            className={isDropdownOpen ? styles.hideDropdownButton : styles.btn}
             // FIXME: Without onClick react proptypes keep warning
             // even after the DropdownTrigger inject an onClick handler
             onClick={() => null}
@@ -295,7 +299,6 @@ class SettingsDropdown extends PureComponent {
         )}
         actions={this.renderMenuItems()}
       />
-
     );
   }
 }

bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/styles.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
+import Button from '/imports/ui/components/button/component';
+
+const DropdownButton = styled(Button)`
+  ${({ state }) => state === 'open' && `
+    @media ${smallOnly} {
+      display: none;
+    }
+  `}
+
+  ${({ state }) => state === 'closed' && `
+    margin: 0;
+
+    & span {
+      border: none;
+      box-shadow: none;
+    }
+
+    z-index: 3;
+
+    &:hover,
+    &:focus {
+      span {
+        background-color: transparent !important;
+        color: var(--color-white) !important;
+        opacity: .75;
+      }
+    }
+  `}
+`;
+
+export default {
+  DropdownButton,
+};