convert audio autoplay component

bigbluebutton-html5/imports/ui/components/audio/autoplay/component.jsx

@@ -1,8 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import Button from '/imports/ui/components/button/component';
 import { defineMessages, injectIntl } from 'react-intl';
-import { styles } from './styles';
+import Styled from './styles';
 
 const intlMessages = defineMessages({
   confirmLabel: {
@@ -29,9 +28,8 @@ class AudioAutoplayPrompt extends PureComponent {
       handleAllowAutoplay,
     } = this.props;
     return (
-      <span className={styles.autoplayPrompt}>
-        <Button
-          className={styles.button}
+      <Styled.AutoplayPrompt>
+        <Styled.AutoplayButton
           label={intl.formatMessage(intlMessages.confirmLabel)}
           aria-label={intl.formatMessage(intlMessages.confirmAriaLabel)}
           icon="thumbs_up"
@@ -40,7 +38,7 @@ class AudioAutoplayPrompt extends PureComponent {
           size="jumbo"
           onClick={handleAllowAutoplay}
         />
-      </span>
+      </Styled.AutoplayPrompt>
     );
   }
 }

bigbluebutton-html5/imports/ui/components/audio/autoplay/styles.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import Button from '/imports/ui/components/button/component';
+
+const AutoplayPrompt = styled.span`
+  margin-top: auto;
+  margin-bottom: auto;
+`;
+
+const AutoplayButton = styled(Button)`
+  &:focus {
+    outline: none !important;
+  }
+
+  span:last-child {
+    color: black;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+`;
+
+export default {
+  AutoplayPrompt,
+  AutoplayButton,
+};

bigbluebutton-html5/imports/ui/components/audio/autoplay/styles.scss

@@ -1,16 +0,0 @@
-.autoplayPrompt {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.button {
-  &:focus {
-    outline: none !important;
-  }
-
-  span:last-child {
-    color: black;
-    font-size: 1rem;
-    font-weight: 600;
-  }
-}