remove styles from this.state

bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/component.jsx

-import React, { Component } from 'react';
+import React from 'react';
 import { injectIntl, intlShape, defineMessages } from 'react-intl';
 import { styles } from './styles';
 
@@ -17,56 +17,16 @@ const intlMessages = defineMessages({
   },
 });
 
-class PermissionsOverlay extends Component {
-  constructor(props) {
-    super(props);
-
-    const broswerStyles = {
-      Chrome: {
-        top: '145px',
-        left: '380px',
-      },
-      Firefox: {
-        top: '210px',
-        left: '605px',
-      },
-      Safari: {
-        top: '100px',
-        left: '100px',
-      },
-      'Microsoft Edge': {
-        top: '38em',
-        left: '60em',
-      },
-    };
-
-    const browser = window.bowser.name;
-
-    this.state = {
-      styles: {
-        top: broswerStyles[browser].top,
-        left: broswerStyles[browser].left,
-      },
-    };
-  }
-
-  render() {
-    const {
-      intl,
-    } = this.props;
-
-    return (
-      <div className={styles.overlay}>
-        <div style={this.state.styles} className={styles.hint}>
-          { intl.formatMessage(intlMessages.title) }
-          <small>
-            { intl.formatMessage(intlMessages.hint) }
-          </small>
-        </div>
-      </div>
-    );
-  }
-}
+const PermissionsOverlay = ({ intl }) => (
+  <div className={styles.overlay}>
+    <div className={styles.hint}>
+      { intl.formatMessage(intlMessages.title) }
+      <small>
+        { intl.formatMessage(intlMessages.hint) }
+      </small>
+    </div>
+  </div>
+);
 
 PermissionsOverlay.propTypes = propTypes;
 

bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss

@@ -20,6 +20,25 @@
   }
 }
 
+@mixin positionHint() {
+  :global(.browser-edge) & {
+    left: 50%;
+    bottom: 10%;
+  }
+  :global(.browser-firefox) & {
+    top: 210px;
+    left: 605px;
+  }
+  :global(.browser-chrome) & {
+    top: 145px;
+    left: 380px;
+  }
+  :global(.browser-safari) & {
+    top: 145px;
+    left: 380px;
+  }
+}
+
 .overlay {
   position: fixed;
   z-index: 1002;
@@ -32,6 +51,8 @@
 }
 
 .hint {
+  @include positionHint();
+
   position: absolute;
   color: #fff;
   font-size: 16px;