removing white spaces inside menus

refactoring code

...

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

@@ -74,8 +74,8 @@ class BBBMenu extends React.Component {
         paddingRight: '4px',
         paddingTop: '8px',
         paddingBottom: '8px',
-        marginLeft: '4px',
-        marginRight: '4px'
+        marginLeft: '0px',
+        marginRight: '0px',
       };
 
       if (a.customStyles) {
@@ -99,11 +99,11 @@ class BBBMenu extends React.Component {
             if (close) this.handleClose(event);
             event.stopPropagation();
           }}>
-          <div style={{ display: 'flex', flexFlow: 'row', width: '100%' }}>
+          <Styled.MenuItemWrapper>
             {a.icon ? <Icon iconName={a.icon} key="icon" /> : null}
             <Styled.Option>{label}</Styled.Option>
             {a.iconRight ? <Styled.IconRight iconName={a.iconRight} key="iconRight" /> : null}
-          </div>
+          </Styled.MenuItemWrapper>
         </Styled.BBBMenuItem>,
         a.divider && <Divider disabled />
       ];

bigbluebutton-html5/imports/ui/components/common/menu/styles.js

@@ -6,6 +6,13 @@ import { colorWhite, colorPrimary } from '/imports/ui/stylesheets/styled-compone
 import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography';
 import { mediumUp } from '/imports/ui/stylesheets/styled-components/breakpoints';
 
+const MenuItemWrapper = styled.div`
+  display: flex;
+  flex-flow: row;
+  width: 100%;
+  align-items: center;
+`;
+
 const Option = styled.div`
   line-height: 1;
   margin-right: 1.65rem;
@@ -78,6 +85,7 @@ const BBBMenuItem = styled(MenuItem)`
 `;
 
 export default {
+  MenuItemWrapper,
   Option,
   CloseButton,
   IconRight,

bigbluebutton-html5/imports/ui/stylesheets/styled-components/globalStyles.js

@@ -26,6 +26,10 @@ const GlobalStyle = createGlobalStyle`
     }
   }
 
+  .MuiList-padding {
+    padding: 0 !important;
+  }
+
   .MuiPaper-root {
     background-color: ${dropdownBg};
     border-radius: ${borderRadius};