From d20c96cc2b26e481891faf1419ec95ed94781ada Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ram=C3=B3n=20Souza?= <contato@ramonsouza.com>
Date: Tue, 9 Nov 2021 16:02:53 +0000
Subject: [PATCH] convert audio autoplay component

---
 .../components/audio/autoplay/component.jsx   | 10 ++++----
 .../ui/components/audio/autoplay/styles.js    | 24 +++++++++++++++++++
 .../ui/components/audio/autoplay/styles.scss  | 16 -------------
 3 files changed, 28 insertions(+), 22 deletions(-)
 create mode 100644 bigbluebutton-html5/imports/ui/components/audio/autoplay/styles.js
 delete mode 100644 bigbluebutton-html5/imports/ui/components/audio/autoplay/styles.scss

diff --git a/bigbluebutton-html5/imports/ui/components/audio/autoplay/component.jsx b/bigbluebutton-html5/imports/ui/components/audio/autoplay/component.jsx
index 3c4856bbe9..33c32e67b8 100644
--- a/bigbluebutton-html5/imports/ui/components/audio/autoplay/component.jsx
+++ b/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>
     );
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/audio/autoplay/styles.js b/bigbluebutton-html5/imports/ui/components/audio/autoplay/styles.js
new file mode 100644
index 0000000000..25ab2bd4b7
--- /dev/null
+++ b/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,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/audio/autoplay/styles.scss b/bigbluebutton-html5/imports/ui/components/audio/autoplay/styles.scss
deleted file mode 100644
index e9ec0a7ac2..0000000000
--- a/bigbluebutton-html5/imports/ui/components/audio/autoplay/styles.scss
+++ /dev/null
@@ -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;
-  }
-}