convert dropdown component

bigbluebutton-html5/imports/ui/components/dropdown/component.jsx

@@ -2,13 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
 import TetherComponent from 'react-tether';
-import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
 import deviceInfo from '/imports/utils/deviceInfo';
-import Button from '/imports/ui/components/button/component';
 import screenreaderTrap from 'makeup-screenreader-trap';
 import { Session } from 'meteor/session';
-import { styles } from './styles';
+import Styled from './styles';
 
 import DropdownTrigger from '/imports/ui/components/dropdown/trigger/component';
 import DropdownContent from '/imports/ui/components/dropdown/content/component';
@@ -199,7 +197,6 @@ class Dropdown extends Component {
   render() {
     const {
       children,
-      className,
       intl,
       keepOpen,
       tethered,
@@ -246,10 +243,8 @@ class Dropdown extends Component {
     });
 
     const showCloseBtn = (isOpen && keepOpen) || (isOpen && keepOpen === null);
-    console.log({className})
     return (
-      <div
-        className={cx(styles.dropdown, className)}
+      <Styled.Dropdown
         aria-live={otherProps['aria-live']}
         aria-relevant={otherProps['aria-relevant']}
         aria-haspopup={otherProps['aria-haspopup']}
@@ -290,8 +285,7 @@ class Dropdown extends Component {
                     {content}
                     {showCloseBtn
                       ? (
-                        <Button
-                          className={styles.close}
+                        <Styled.CloseButton
                           label={intl.formatMessage(intlMessages.close)}
                           size="lg"
                           color="default"
@@ -309,8 +303,7 @@ class Dropdown extends Component {
                 {content}
                 {showCloseBtn
                   ? (
-                    <Button
-                      className={styles.close}
+                    <Styled.CloseButton
                       label={intl.formatMessage(intlMessages.close)}
                       size="lg"
                       color="default"
@@ -320,7 +313,7 @@ class Dropdown extends Component {
               </>
             )
         }
-      </div>
+      </Styled.Dropdown>
     );
   }
 }

bigbluebutton-html5/imports/ui/components/dropdown/styles.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import Button from '/imports/ui/components/button/component';
+import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography';
+import { lineHeightComputed } from '/imports/ui/stylesheets/styled-components/typography';
+import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
+import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
+
+const Dropdown = styled.div`
+  position: relative;
+  z-index: 3;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const CloseButton = styled(Button)`
+  display: none;
+  position: fixed;
+  bottom: 0.8rem;
+  border-radius: 0;
+  z-index: 1011;
+  font-size: calc(${fontSizeLarge} * 1.1);
+  width: calc(100% - (${lineHeightComputed} * 2));
+  left: ${lineHeightComputed};
+  box-shadow: 0 0 0 2rem ${colorWhite} !important;
+  border: ${colorWhite} !important;
+
+  @media ${smallOnly} {
+    display: block;
+  }
+`;
+
+export default {
+  Dropdown,
+  CloseButton,
+};