convert external-video-player modal component

bigbluebutton-html5/imports/ui/components/external-video-player/modal/component.jsx

@@ -1,12 +1,9 @@
 import React, { Component } from 'react';
 import { withModalMounter } from '/imports/ui/components/modal/service';
-import Modal from '/imports/ui/components/modal/simple/component';
-import Button from '/imports/ui/components/button/component';
-
 import { defineMessages, injectIntl } from 'react-intl';
 import { isUrlValid } from '../service';
-
+import Settings from '/imports/ui/services/settings';
-import { styles } from './styles';
+import Styled from './styles';
 
 const intlMessages = defineMessages({
   start: {
@@ -75,15 +72,16 @@ class ExternalVideoModal extends Component {
   renderUrlError() {
     const { intl } = this.props;
     const { url } = this.state;
+    const { animations } = Settings.application;
 
     const valid = (!url || url.length <= 3) || isUrlValid(url);
 
     return (
       !valid
         ? (
-          <div className={styles.urlError}>
+          <Styled.UrlError animations={animations}>
             {intl.formatMessage(intlMessages.urlError)}
-          </div>
+          </Styled.UrlError>
         )
         : null
     );
@@ -92,23 +90,22 @@ class ExternalVideoModal extends Component {
   render() {
     const { intl, closeModal } = this.props;
     const { url, sharing } = this.state;
+    const { animations } = Settings.application;
 
     const startDisabled = !isUrlValid(url);
 
     return (
-      <Modal
+      <Styled.ExternalVideoModal
-        overlayClassName={styles.overlay}
-        className={styles.modal}
         onRequestClose={closeModal}
         contentLabel={intl.formatMessage(intlMessages.title)}
         hideBorder
       >
-        <header data-test="videoModalHeader" className={styles.header}>
+        <Styled.Header data-test="videoModalHeader">
-          <h3 className={styles.title}>{intl.formatMessage(intlMessages.title)}</h3>
+          <Styled.Title>{intl.formatMessage(intlMessages.title)}</Styled.Title>
-        </header>
+        </Styled.Header>
 
-        <div className={styles.content}>
+        <Styled.Content>
-          <div className={styles.videoUrl}>
+          <Styled.VideoUrl animations={animations}>
             <label htmlFor="video-modal-input">
               {intl.formatMessage(intlMessages.input)}
               <input
@@ -120,23 +117,22 @@ class ExternalVideoModal extends Component {
                 aria-describedby="exernal-video-note"
               />
             </label>
-            <div className={styles.externalVideoNote} id="external-video-note">
+            <Styled.ExternalVideoNote id="external-video-note">
               {intl.formatMessage(intlMessages.note)}
-            </div>
+            </Styled.ExternalVideoNote>
-          </div>
+          </Styled.VideoUrl>
 
           <div>
             {this.renderUrlError()}
           </div>
 
-          <Button
+          <Styled.StartButton
-            className={styles.startBtn}
             label={intl.formatMessage(intlMessages.start)}
             onClick={this.startWatchingHandler}
             disabled={startDisabled}
           />
-        </div>
+        </Styled.Content>
-      </Modal>
+      </Styled.ExternalVideoModal>
     );
   }
 }

bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.js

@@ -0,0 +1,136 @@
+import styled from 'styled-components';
+import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
+import {
+  borderSize,
+  borderRadius,
+  smPaddingY,
+} from '/imports/ui/stylesheets/styled-components/general';
+import {
+  colorText,
+  colorGrayLighter,
+  colorGray,
+  colorWhite,
+  colorLink,
+  colorBlueLight,
+  colorPrimary,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import { fontSizeSmall } from '/imports/ui/stylesheets/styled-components/typography';
+import Modal from '/imports/ui/components/modal/simple/component';
+import Button from '/imports/ui/components/button/component';
+
+const UrlError = styled.div`
+  color: red;
+  padding: 1em 0 2.5em 0;
+
+  ${({ animations }) => animations && `
+    transition: 1s;
+  `}
+`;
+
+const ExternalVideoModal = styled(Modal)`
+  padding: 1.5rem;
+  min-height: 23rem;
+`;
+
+const Header = styled.header`
+  margin: 0;
+  padding: 0;
+  border: none;
+  line-height: 2rem;
+`;
+
+const Title = styled.h3`
+  text-align: center;
+  font-weight: 400;
+  font-size: 1.3rem;
+  white-space: normal;
+
+  @media ${smallOnly} {
+    font-size: 1rem;
+    padding: 0 1rem;
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0;
+  margin-right: auto;
+  margin-left: auto;
+  width: 100%;
+`;
+
+const VideoUrl = styled.div`
+  margin: 0 ${borderSize} 0 ${borderSize};
+
+  & > label {
+    display: block;
+  }
+
+  & > label input {
+    display: block;
+    margin: 10px 0 10px 0;
+    padding: 0.4em;
+    color: ${colorText};
+    line-height: 2rem;
+    width: 100%;
+    font-family: inherit;
+    font-weight: inherit;
+    border: 1px solid ${colorGrayLighter};
+    border-radius: ${borderRadius};
+
+    ${({ animations }) => animations && `
+      transition: box-shadow .2s;
+    `}
+
+    &:focus {
+      outline: none;
+      border-radius: ${borderSize};
+      box-shadow: 0 0 0 ${borderSize} ${colorBlueLight}, inset 0 0 0 1px ${colorPrimary};
+    }
+  }
+
+  & > span {
+    font-weight: 600;
+  }
+`;
+
+const ExternalVideoNote = styled.div`
+  color: ${colorGray};
+  font-size: ${fontSizeSmall};
+  font-style: italic;
+  padding-top: ${smPaddingY};
+`;
+
+const StartButton = styled(Button)`
+  display: flex;
+  align-self: center;
+
+  &:focus {
+    outline: none !important;
+  }
+
+  & > i {
+    color: #3c5764;
+  }
+
+  margin: 0;
+  width: 40%;
+  display: block;
+  position: absolute;
+  bottom: 20px;
+  color: ${colorWhite} !important;
+  background-color: ${colorLink} !important;
+`;
+
+export default {
+  UrlError,
+  ExternalVideoModal,
+  Header,
+  Title,
+  Content,
+  VideoUrl,
+  ExternalVideoNote,
+  StartButton,
+};

bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.scss

@@ -1,147 +0,0 @@
-@import "/imports/ui/stylesheets/variables/breakpoints";
-@import "/imports/ui/components/modal/simple/styles";
-@import "/imports/ui/stylesheets/mixins/focus";
-
-.header {
-  margin: 0;
-  padding: 0;
-  border: none;
-  line-height: 2rem;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0;
-  margin-right: auto;
-  margin-left: auto;
-  width: 100%;
-}
-
-.videoOptions {
-  margin-top: auto;
-  margin-bottom: auto;
-  display: flex;
-}
-
-.overlay {
-  @extend .overlay;
-}
-
-.modal {
-  @extend .modal;
-  padding: 1.5rem;
-  min-height: 23rem;
-}
-
-.closeBtn {
-  position: relative;
-  background-color: var(--color-white);
-
-  i {
-    color: var(--color-gray-light);
-  }
-
-  &:focus,
-  &:hover{
-    background-color: var(--color-gray-lighter);
-    i{
-      color: var(--color-gray);
-    }
-  }
-}
-.warning{
-  text-align: center;
-  font-weight: var(--headings-font-weight);
-  font-size: 5rem;
-  white-space: normal;
-}
-.text{
-  margin: var(--line-height-computed);
-  text-align: center;
-}
-
-.main {
-  margin: var(--line-height-computed);
-  text-align: center;
-  font-size: var(--font-size-large);
-}
-
-.startBtn {
-  display: flex;
-  align-self: center;
-  &:focus {
-    outline: none !important;
-  }
-
-  i{
-    color: #3c5764;
-  }
-
-  margin: 0;
-  width: 40%;
-  display: block;
-  position: absolute;
-  bottom:   20px;
-  color: var(--color-white) !important;
-  background-color: var(--color-link) !important;
-}
-
-.title {
-  text-align: center;
-  font-weight: 400;
-  font-size: 1.3rem;
-  white-space: normal;
-
-  @include mq(var(--small-only)) {
-    font-size: 1rem;
-    padding: 0 1rem;
-  }
-}
-
-.videoUrl {
-  margin: 0 var(--border-size) 0 var(--border-size);
-
-  label {
-    display: block;
-  }
-
-  input {
-    @include inputFocus(var(--color-blue-light));
-    display: block;
-    margin: 10px 0 10px 0;
-    padding: 0.4em;
-    color: var(--color-text);
-    line-height: 2rem;
-    width: 100%;
-    font-family: inherit;
-    font-weight: inherit;
-    border: 1px solid var(--color-gray-lighter);
-    border-radius: var(--border-radius);
-
-    :global(.animationsEnabled) & {
-      transition: box-shadow .2s;
-    }
-  }
-
-  span {
-    font-weight: 600;
-  }
-}
-
-.urlError {
-  color: red;
-  padding: 1em 0 2.5em 0;
-
-  :global(.animationsEnabled) & {
-    transition: 1s;
-  }
-}
-
-.externalVideoNote {
-  color: var(--color-gray);
-  font-size: var(--font-size-small);
-  font-style: italic;
-  padding-top: var(--sm-padding-y);
-}