convert notifications-bar component

bigbluebutton-html5/imports/ui/components/notifications-bar/component.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
-import { styles } from './styles.scss';
+import Styled from './styles';
 
 const COLORS = [
   'default', 'primary', 'danger', 'success',
@@ -26,7 +25,7 @@ const NotificationsBar = (props) => {
   const hasColor = COLORS.includes(color);
 
   return (
-    <div
+    <Styled.NotificationsBar
       role={alert ? 'alert' : ''}
       aria-live="off"
       style={
@@ -34,10 +33,10 @@ const NotificationsBar = (props) => {
           backgroundColor: `${color}`,
         } : {}
       }
-      className={cx(styles.notificationsBar, hasColor ? styles[color] : null)}
+      color={color}
     >
       {children}
-    </div>
+    </Styled.NotificationsBar>
   );
 };
 

bigbluebutton-html5/imports/ui/components/notifications-bar/container.jsx

@@ -7,7 +7,7 @@ import Auth from '/imports/ui/services/auth';
 import { MeetingTimeRemaining } from '/imports/api/meetings';
 import Meetings from '/imports/ui/local-collections/meetings-collection/meetings';
 import BreakoutRemainingTime from '/imports/ui/components/breakout-room/breakout-remaining-time/container';
-import { styles } from './styles.scss';
+import Styled from './styles';
 import { layoutSelectInput, layoutDispatch } from '../layout/context';
 import { ACTIONS } from '../layout/enums';
 
@@ -155,9 +155,9 @@ export default injectIntl(withTracker(({ intl }) => {
         data.message = (
           <>
             {intl.formatMessage(intlMessages.waitingMessage, { 0: getRetrySeconds() })}
-            <button className={styles.retryButton} type="button" onClick={reconnect}>
+            <Styled.RetryButton type="button" onClick={reconnect}>
               {intl.formatMessage(intlMessages.retryNow)}
-            </button>
+            </Styled.RetryButton>
           </>
         );
         break;

bigbluebutton-html5/imports/ui/components/notifications-bar/styles.js

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import { lineHeightComputed } from '/imports/ui/stylesheets/styled-components/typography';
+import {
+  colorGray,
+  colorWhite,
+  colorPrimary,
+  colorSuccess,
+  colorDanger,
+} from '/imports/ui/stylesheets/styled-components/palette';
+
+const NotificationsBar = styled.div`
+  padding: calc(${lineHeightComputed} / 2);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  font-weight: 600;
+
+  ${({ color }) => color === 'default' && `
+    color: ${colorGray};
+    background-color: ${colorWhite};
+    border-color: ${colorWhite};
+  `}
+
+  ${({ color }) => color === 'primary' && `
+    color: ${colorWhite};
+    background-color: ${colorPrimary};
+    border-color: ${colorPrimary};
+  `}
+  
+  ${({ color }) => color === 'success' && `
+    color: ${colorWhite};
+    background-color: ${colorSuccess};
+    border-color: ${colorSuccess};
+  `}
+
+  ${({ color }) => color === 'danger' && `
+    color: ${colorWhite};
+    background-color: ${colorDanger};
+    border-color: ${colorDanger};
+  `}
+`;
+
+const RetryButton = styled.button`
+  background-color: transparent;
+   border: none;
+   cursor: pointer;
+   text-decoration: underline;
+   display: inline;
+   margin: 0;
+   padding: 0;
+   color: ${colorWhite};
+`;
+
+export default {
+  NotificationsBar,
+  RetryButton,
+};

bigbluebutton-html5/imports/ui/components/notifications-bar/styles.scss

@@ -1,59 +0,0 @@
-:root {
-  --nb-default-color: var(--color-gray);
-  --nb-default-bg: var(--color-white);
-  --nb-default-border: var(--color-white);
-
-  --nb-primary-color: var(--color-white);
-  --nb-primary-bg: var(--color-primary);
-  --nb-primary-border: var(--color-primary);
-
-  --nb-success-color: var(--color-white);
-  --nb-success-bg: var(--color-success);
-  --nb-success-border: var(--color-success);
-
-  --nb-danger-color: var(--color-white);
-  --nb-danger-bg: var(--color-danger);
-  --nb-danger-border: var(--color-danger);
-}
-
-.notificationsBar {
-  padding: calc(var(--line-height-computed) / 2);
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
-}
-
-@mixin nb-variant($color, $background, $border) {
-  color: $color;
-  background-color: $background;
-  border-color: $border;
-}
-
-.retryButton {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  text-decoration: underline;
-  display: inline;
-  margin: 0;
-  padding: 0;
-  color: var(--nb-primary-color);
-}
-
-.default {
-  @include nb-variant(var(--nb-default-color), var(--nb-default-bg), var(--nb-default-border));
-}
-
-.primary {
-  @include nb-variant(var(--nb-primary-color), var(--nb-primary-bg), var(--nb-primary-border));
-}
-
-.success {
-  @include nb-variant(var(--nb-success-color), var(--nb-success-bg), var(--nb-success-border));
-}
-
-.danger {
-  @include nb-variant(var(--nb-danger-color), var(--nb-danger-bg), var(--nb-danger-border));
-}