convert nav-bar component

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

@@ -1,13 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
 import getFromUserSettings from '/imports/ui/services/users-settings';
 import { defineMessages, injectIntl } from 'react-intl';
-import Icon from '../icon/component';
-import { styles } from './styles.scss';
-import Button from '/imports/ui/components/button/component';
+import Styled from './styles';
 import RecordingIndicator from './recording-indicator/container';
 import TalkingIndicatorContainer from '/imports/ui/components/nav-bar/talking-indicator/container';
 import ConnectionStatusButton from '/imports/ui/components/connection-status/button/container';
@@ -131,7 +128,6 @@ class NavBar extends Component {
     const {
       hasUnreadMessages,
       hasUnreadNotes,
-      // isExpanded,
       intl,
       shortcuts: TOGGLE_USERLIST_AK,
       mountModal,
@@ -143,9 +139,6 @@ class NavBar extends Component {
     } = this.props;
 
     const hasNotification = hasUnreadMessages || hasUnreadNotes;
-    const toggleBtnClasses = {};
-    toggleBtnClasses[styles.btn] = true;
-    toggleBtnClasses[styles.btnWithNotificationDot] = hasNotification;
 
     let ariaLabel = intl.formatMessage(intlMessages.toggleUserListAria);
     ariaLabel += hasNotification ? (` ${intl.formatMessage(intlMessages.newMessages)}`) : '';
@@ -153,8 +146,7 @@ class NavBar extends Component {
     const isExpanded = sidebarNavigation.isOpen;
 
     return (
-      <header
-        className={styles.navbar}
+      <Styled.Navbar
         style={
           main === 'new'
             ? {
@@ -171,11 +163,11 @@ class NavBar extends Component {
             }
         }
       >
-        <div className={styles.top}>
-          <div className={styles.left}>
+        <Styled.Top>
+          <Styled.Left>
             {!isExpanded ? null
-              : <Icon iconName="left_arrow" className={styles.arrowLeft} />}
-            <Button
+              : <Styled.ArrowLeft iconName="left_arrow" />}
+            <Styled.NavbarToggleButton
               onClick={this.handleToggleUserList}
               ghost
               circle
@@ -185,30 +177,29 @@ class NavBar extends Component {
               tooltipLabel={intl.formatMessage(intlMessages.toggleUserListLabel)}
               aria-label={ariaLabel}
               icon="user"
-              className={cx(toggleBtnClasses)}
               aria-expanded={isExpanded}
               accessKey={TOGGLE_USERLIST_AK}
+              hasNotification={hasNotification}
             />
             {isExpanded ? null
-              : <Icon iconName="right_arrow" className={styles.arrowRight} />}
-          </div>
-          <div className={styles.center}>
-            <h1 className={styles.presentationTitle}>{presentationTitle}</h1>
-
+              : <Styled.ArrowRight iconName="right_arrow" />}
+          </Styled.Left>
+          <Styled.Center>
+            <Styled.PresentationTitle>{presentationTitle}</Styled.PresentationTitle>
             <RecordingIndicator
               mountModal={mountModal}
               amIModerator={amIModerator}
             />
-          </div>
-          <div className={styles.right}>
+          </Styled.Center>
+          <Styled.Right>
             {ConnectionStatusService.isEnabled() ? <ConnectionStatusButton /> : null}
             <SettingsDropdownContainer amIModerator={amIModerator} />
-          </div>
-        </div>
-        <div className={styles.bottom}>
+          </Styled.Right>
+        </Styled.Top>
+        <Styled.Bottom>
           <TalkingIndicatorContainer amIModerator={amIModerator} />
-        </div>
-      </header>
+        </Styled.Bottom>
+      </Styled.Navbar>
     );
   }
 }

bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx

@@ -12,7 +12,7 @@ import ShortcutHelpComponent from '/imports/ui/components/shortcut-help/componen
 import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
 import FullscreenService from '../../fullscreen-button/service';
 
-import { styles } from '../styles';
+import { styles } from '../styles.scss';
 
 const intlMessages = defineMessages({
   optionsLabel: {

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

@@ -0,0 +1,154 @@
+import styled from 'styled-components';
+import Icon from '../icon/component';
+import {
+  barsPadding,
+  lgPaddingY,
+  mdPaddingX,
+  borderSize,
+} from '/imports/ui/stylesheets/styled-components/general';
+import {
+  colorWhite,
+  colorDanger,
+  colorGrayDark,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import { fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
+import { phoneLandscape } from '/imports/ui/stylesheets/styled-components/breakpoints';
+import Button from '/imports/ui/components/button/component';
+
+const Navbar = styled.header`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  font-size: 1.5rem;
+  padding: ${barsPadding} ${barsPadding} 0 ${barsPadding};
+`;
+
+const Top = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const Left = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ArrowLeft = styled(Icon)`
+  position: absolute;
+  font-size: 40%;
+  color: ${colorWhite};
+
+  width: ${lgPaddingY};
+  left: 1.1rem;
+  [dir="rtl"] & {
+    right: 2.5rem;
+    left: 0;
+  }
+`;
+
+const ArrowRight = styled(Icon)`
+  position: absolute;
+  font-size: 40%;
+  color: ${colorWhite};
+
+  width: ${mdPaddingX};
+  left: 2.5rem;
+  [dir="rtl"] & {
+    right: .5rem;
+    left: 0;
+  }
+`;
+
+const Center = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+  flex: 1;
+`;
+
+const PresentationTitle = styled.h1`
+  font-weight: 200;
+  color: ${colorWhite};
+  font-size: ${fontSizeBase};
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 30vw;
+
+  > [class^="icon-bbb-"] {
+    font-size: 75%;
+  }
+`;
+
+const Right = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex: 0;
+`;
+
+const Bottom = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  @media ${phoneLandscape} {
+    margin-top: .25rem;
+  }
+`;
+
+const NavbarToggleButton = styled(Button)`
+  margin: 0;
+
+  span {
+    border: none;
+    box-shadow: none;
+  }
+
+  z-index: 3;
+
+  &:hover,
+  &:focus {
+    span {
+      background-color: transparent !important;
+      color: ${colorWhite} !important;
+      opacity: .75;
+    }
+  }
+
+  ${({ hasNotification }) => hasNotification && `
+    position: relative;
+
+    &:after {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      bottom: ${borderSize};
+      right: 3px;
+      background-color: ${colorDanger};
+      border: ${borderSize} solid ${colorGrayDark};
+    }
+  `}
+`;
+
+export default {
+  Navbar,
+  Top,
+  Left,
+  ArrowLeft,
+  ArrowRight,
+  Center,
+  PresentationTitle,
+  Right,
+  Bottom,
+  NavbarToggleButton,
+};