convert poll dragAndDrop component

bigbluebutton-html5/imports/ui/components/poll/dragAndDrop/component.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 
 import { defineMessages, injectIntl } from 'react-intl';
-import { styles } from './styles.scss';
-import Button from '/imports/ui/components/button/component';
+import Styled from './styles';
 
 
 // src: https://medium.com/@650egor/simple-drag-and-drop-file-upload-in-react-2cb409d88929
@@ -110,25 +109,20 @@ class DragAndDrop extends Component {
     const { intl, children } = this.props;
     const { pollValueText, drag } = this.state;
     return (
-      <div
-        className={styles.dndContainer}
-        ref={this.dropRef}
-      >
-        <textarea
+      <Styled.DndContainer ref={this.dropRef}>
+        <Styled.DndTextArea
+          active={drag}
           value={pollValueText}
-          className={drag ? styles.dndActive : styles.dndInActive}
           onChange={e => this.handleTextInput(e)}
         />
-        <Button
+        <Styled.DndButton
           onClick={() => this.setPollValues()}
           label={intl.formatMessage(intlMessages.customPollTextArea)}
           color="primary"
           disabled={pollValueText < 1}
-          className={styles.btn}
         />
         {children}
-      </div>
-
+      </Styled.DndContainer>
     );
   }
 } export default withModalMounter(injectIntl(DragAndDrop));

bigbluebutton-html5/imports/ui/components/poll/dragAndDrop/styles.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import Button from '/imports/ui/components/button/component';
+import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
+
+const DndContainer = styled.div`
+  height: 200px;
+`;
+
+const DndTextArea = styled.textarea`
+  width: 100%;
+  height: 100%;
+  resize: none;
+  font-size: ${fontSizeSmall};
+
+  ${({ active }) => active && `
+    background: grey;
+  `}
+
+  ${({ active }) => !active && `
+    background: white;
+  `}
+`;
+
+const DndButton = styled(Button)`
+  width: 100%;
+`;
+
+export default {
+  DndContainer,
+  DndTextArea,
+  DndButton,
+};

bigbluebutton-html5/imports/ui/components/poll/dragAndDrop/styles.scss

@@ -1,26 +0,0 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
-.dndContainer {
-  height: 200px;
-}
-
-.customPollValuesTextfield {
-  width: 100%;
-  height: 100%;
-  resize: none;
-  font-size: var(--font-size-small);
-}
-
-.dndActive {
-  @extend .customPollValuesTextfield;
-  background: grey;
-}
-
-.dndInActive {
-  @extend .customPollValuesTextfield;
-  background: white;
-}
-
-.btn {
-  width: 100%;
-}