convert recording-indicator component

bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/component.jsx

@@ -4,8 +4,7 @@ import humanizeSeconds from '/imports/utils/humanizeSeconds';
 import Tooltip from '/imports/ui/components/tooltip/component';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import cx from 'classnames';
+import Styled from './styles';
-import { styles } from './styles';
 
 const intlMessages = defineMessages({
   notificationRecordingStart: {
@@ -138,7 +137,7 @@ class RecordingIndicator extends PureComponent {
     };
 
     const recordingIndicatorIcon = (
-      <span data-test="mainWhiteboard" className={cx(styles.recordingIndicatorIcon, (!isPhone || recording) && styles.presentationTitleMargin)}>
+      <Styled.RecordingIndicatorIcon titleMargin={!isPhone || recording} data-test="mainWhiteboard">
         <svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1" viewBox="0 0 20 20">
           <g stroke="#FFF" fill="#FFF" strokeLinecap="square">
             <circle
@@ -157,16 +156,16 @@ class RecordingIndicator extends PureComponent {
             />
           </g>
         </svg>
-      </span>
+      </Styled.RecordingIndicatorIcon>
     );
 
     const showButton = amIModerator && allowStartStopRecording;
 
     const recordMeetingButton = (
-      <div
+      <Styled.RecordingControl
         aria-label={recordTitle}
         aria-describedby={"recording-description"}
-        className={recording ? styles.recordingControlON : styles.recordingControlOFF}
+        recording={recording}
         role="button"
         tabIndex={0}
         key="recording-toggle"
@@ -174,14 +173,14 @@ class RecordingIndicator extends PureComponent {
         onKeyPress={recordingToggle}
       >
         {recordingIndicatorIcon}
-        <div className={styles.presentationTitle}>
+        <Styled.PresentationTitle>
-          <span id={"recording-description"} className={styles.visuallyHidden}>
+          <Styled.VisuallyHidden id={"recording-description"}>
             {`${title} ${recording ? humanizeSeconds(time) : ''}`}
-          </span>
+          </Styled.VisuallyHidden>
           {recording
             ? <span aria-hidden>{humanizeSeconds(time)}</span> : <span>{recordTitle}</span>}
-        </div>
+        </Styled.PresentationTitle>
-      </div>
+      </Styled.RecordingControl>
     );
 
     const recordMeetingButtonWithTooltip = (
@@ -195,9 +194,9 @@ class RecordingIndicator extends PureComponent {
     return (
       <Fragment>
         {record
-          ? <span className={styles.presentationTitleSeparator} aria-hidden>|</span>
+          ? <Styled.PresentationTitleSeparator aria-hidden>|</Styled.PresentationTitleSeparator>
           : null}
-        <div className={styles.recordingIndicator}>
+        <Styled.RecordingIndicator>
           {showButton
             ? recordingButton
             : null}
@@ -208,20 +207,19 @@ class RecordingIndicator extends PureComponent {
                 ? intlMessages.notificationRecordingStart
                 : intlMessages.notificationRecordingStop)}`}
             >
-              <div
+              <Styled.RecordingStatusViewOnly
                 aria-label={`${intl.formatMessage(recording
                   ? intlMessages.notificationRecordingStart
                   : intlMessages.notificationRecordingStop)}`}
-                className={styles.recordingStatusViewOnly}
               >
                 {recordingIndicatorIcon}
 
                 {recording
-                  ? <div className={styles.presentationTitle}>{humanizeSeconds(time)}</div> : null}
+                  ? <Styled.PresentationTitle>{humanizeSeconds(time)}</Styled.PresentationTitle> : null}
-              </div>
+              </Styled.RecordingStatusViewOnly>
             </Tooltip>
           )}
-        </div>
+        </Styled.RecordingIndicator>
       </Fragment>
     );
   }

bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.js

@@ -0,0 +1,138 @@
+import styled from 'styled-components';
+import { fontSizeLarge, fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
+import {
+  smPaddingX,
+  borderSize,
+  borderSizeLarge,
+  borderSizeSmall,
+} from '/imports/ui/stylesheets/styled-components/general';
+import { colorWhite, colorPrimary, colorGray } from '/imports/ui/stylesheets/styled-components/palette';
+
+const RecordingIndicatorIcon = styled.span`
+  width: ${fontSizeLarge};
+  height: ${fontSizeLarge};
+  font-size: ${fontSizeBase};
+
+  ${({ titleMargin }) => titleMargin && `
+    [dir="ltr"] & {
+      margin-right: ${smPaddingX};
+    }
+  `}
+`;
+
+const RecordingControl = styled.div`
+  display: flex;
+  border-radius: 2em 2em;
+  align-items: center;
+
+  span {
+    border: none;
+    box-shadow: none;
+    background-color: transparent !important;
+    color: ${colorWhite} !important;
+  }
+
+  &:hover {
+    color: ${colorWhite} !important;
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 ${borderSize} ${colorPrimary};
+  }
+  
+  ${({ recording }) => recording && `
+    padding: 5px;
+    background-color: ${colorPrimary};
+    border: ${borderSizeLarge} solid ${colorPrimary};
+
+    &:focus {
+      background-clip: padding-box;
+      border: ${borderSizeLarge} solid transparent;
+    }
+  `}
+
+  ${({ recording }) => !recording && `
+    padding: 7px;
+    border: ${borderSizeSmall} solid ${colorWhite};
+
+    &:focus {
+      padding: 5px;
+      border: ${borderSizeLarge} solid ${colorWhite};
+      box-shadow: none;
+    }
+  `}
+`;
+
+const PresentationTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-weight: 200;
+  color: ${colorWhite};
+  font-size: ${fontSizeBase};
+  padding: 0;
+  margin-right: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 30vw;
+
+  [dir="rtl"]  & {
+    margin-left: 0;
+    margin-right: ${smPaddingX};
+  }
+
+  & > [class^="icon-bbb-"] {
+    font-size: 75%;
+  }
+
+  span {
+    vertical-align: middle;
+  }
+`;
+
+const VisuallyHidden = styled.span`
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  height: 1px; width: 1px;
+  margin: -1px; padding: 0; border: 0;
+`;
+
+const PresentationTitleSeparator = styled.span`
+  color: ${colorGray};
+  font-size: ${fontSizeBase};
+  margin: 0 1rem;
+`;
+
+const RecordingIndicator = styled.div`
+  &:hover {
+    outline: transparent;
+    outline-style: dotted;
+    outline-width: ${borderSize};
+  }
+
+  &:active,
+  &:focus,
+  &:focus-within {
+    outline: transparent;
+    outline-width: ${borderSize};
+    outline-style: solid;
+  }
+`;
+
+const RecordingStatusViewOnly = styled.div`
+  display: flex;
+`;
+
+export default {
+  RecordingIndicatorIcon,
+  RecordingControl,
+  PresentationTitle,
+  VisuallyHidden,
+  PresentationTitleSeparator,
+  RecordingIndicator,
+  RecordingStatusViewOnly,
+};

bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss

@@ -1,122 +0,0 @@
-@import '/imports/ui/stylesheets/mixins/_indicators';
-@import "/imports/ui/stylesheets/variables/placeholders";
-
-.visuallyHidden {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  height: 1px; width: 1px;
-  margin: -1px; padding: 0; border: 0;
-}
-
-%recordingControl {
-  display: flex;
-  border-radius: 2em 2em;
-  align-items: center;
-
-  span {
-    border: none;
-    box-shadow: none;
-    background-color: transparent !important;
-    color: var(--color-white) !important;
-  }
-
-  &:hover {
-    color: var(--color-white) !important;
-    cursor: pointer;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 var(--border-size) var(--color-primary);
-  }
-}
-
-.recordingControlON {
-  @extend %recordingControl;
-
-  padding: 5px;
-  background-color: var(--color-primary);
-  border: var(--border-size-large) solid var(--color-primary);
-
-  &:focus {
-    background-clip: padding-box;
-    border: var(--border-size-large) solid transparent;
-  }
-}
-
-.recordingControlOFF {
-  @extend %recordingControl;
-
-  padding: 7px;
-  border: var(--border-size-small) solid var(--color-white);
-  
-  &:focus {
-    padding: 5px;
-    border: var(--border-size-large) solid var(--color-white);
-    box-shadow: none;
-  }
-}
-
-.presentationTitle {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  font-weight: 200;
-  color: var(--color-white);
-  font-size: var(--font-size-base);
-  padding: 0;
-  margin-right: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 30vw;
-
-  [dir="rtl"]  & {
-    margin-left: 0;
-    margin-right: var(--sm-padding-x);
-  }
-
-  > [class^="icon-bbb-"] {
-    font-size: 75%;
-  }
-
-  span {
-    vertical-align: middle;
-  }
-}
-
-.presentationTitleMargin {
-  [dir="ltr"] & {
-    margin-right: var(--sm-padding-x);
-  }
-}
-
-.recordingStatusViewOnly {
-  display: flex;
-}
-
-.recordingIndicatorIcon {
-  width: var(--font-size-large);
-  height: var(--font-size-large);
-  font-size: var(--font-size-base);
-}
-
-.recordingIndicator {
-  &:hover {
-    @extend %highContrastOutline;
-  }
-
-  &:active,
-  &:focus,
-  &:focus-within {
-    @extend %highContrastOutline;
-    outline-style: solid;
-  }
-}
-
-.presentationTitleSeparator {
-  color: var(--color-gray);
-  font-size: var(--font-size-base);
-  margin: 0 1rem;
-}