convert settings component

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

@@ -1,8 +1,5 @@
 import React, { Component } from 'react';
 import Modal from '/imports/ui/components/modal/fullscreen/component';
-import {
-  Tab, Tabs, TabList, TabPanel,
-} from 'react-tabs';
 import { defineMessages, injectIntl } from 'react-intl';
 import DataSaving from '/imports/ui/components/settings/submenus/data-saving/component';
 import Application from '/imports/ui/components/settings/submenus/application/component';
@@ -11,8 +8,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 
 import { withModalMounter } from '../modal/service';
-import Icon from '../icon/component';
-import { styles } from './styles';
+import Styled from './styles';
 
 const intlMessages = defineMessages({
   appTabLabel: {
@@ -155,10 +151,10 @@ class Settings extends Component {
     const { intl } = this.props;
 
     return (
-      <span className={styles.toggleLabel}>
+      <Styled.ToggleLabel>
         {status ? intl.formatMessage(intlMessages.on)
           : intl.formatMessage(intlMessages.off)}
-      </span>
+      </Styled.ToggleLabel>
     );
   }
 
@@ -179,39 +175,34 @@ class Settings extends Component {
     } = this.state;
 
     return (
-      <Tabs
-        className={styles.tabs}
+      <Styled.SettingsTabs
         onSelect={this.handleSelectTab}
         selectedIndex={selectedTab}
         role="presentation"
-        selectedTabPanelClassName={styles.selectedTab}
       >
-        <TabList className={styles.tabList}>
-          <Tab
-            className={styles.tabSelector}
+        <Styled.SettingsTabList>
+          <Styled.SettingsTabSelector
             aria-labelledby="appTab"
-            selectedClassName={styles.selected}
+            selectedClassName="is-selected"
           >
-            <Icon iconName="application" className={styles.icon} />
+            <Styled.SettingsIcon iconName="application" />
             <span id="appTab">{intl.formatMessage(intlMessages.appTabLabel)}</span>
-          </Tab>
-          <Tab
-            className={styles.tabSelector}
-            selectedClassName={styles.selected}
+          </Styled.SettingsTabSelector>
+          <Styled.SettingsTabSelector
+            selectedClassName="is-selected"
           >
-            <Icon iconName="alert" className={styles.icon} />
+            <Styled.SettingsIcon iconName="alert" />
             <span id="notificationTab">{intl.formatMessage(intlMessages.notificationLabel)}</span>
-          </Tab>
-          <Tab
-            className={styles.tabSelector}
+          </Styled.SettingsTabSelector>
+          <Styled.SettingsTabSelector
             aria-labelledby="dataSavingTab"
-            selectedClassName={styles.selected}
+            selectedClassName="is-selected"
           >
-            <Icon iconName="network" className={styles.icon} />
+            <Styled.SettingsIcon iconName="network" />
             <span id="dataSaving">{intl.formatMessage(intlMessages.dataSavingLabel)}</span>
-          </Tab>
-        </TabList>
-        <TabPanel className={styles.tabPanel}>
+          </Styled.SettingsTabSelector>
+        </Styled.SettingsTabList>
+        <Styled.SettingsTabPanel selectedClassName="is-selected">
           <Application
             allLocales={allLocales}
             handleUpdateSettings={this.handleUpdateSettings}
@@ -222,8 +213,8 @@ class Settings extends Component {
             selectedLayout={selectedLayout}
             isModerator={isModerator}
           />
-        </TabPanel>
-        <TabPanel className={styles.tabPanel}>
+        </Styled.SettingsTabPanel>
+        <Styled.SettingsTabPanel selectedClassName="is-selected">
           <Notification
             handleUpdateSettings={this.handleUpdateSettings}
             settings={current.application}
@@ -232,16 +223,16 @@ class Settings extends Component {
             displaySettingsStatus={this.displaySettingsStatus}
             {...{ isModerator }}
           />
-        </TabPanel>
-        <TabPanel className={styles.tabPanel}>
+        </Styled.SettingsTabPanel>
+        <Styled.SettingsTabPanel selectedClassName="is-selected">
           <DataSaving
             settings={current.dataSaving}
             handleUpdateSettings={this.handleUpdateSettings}
             showToggleLabel={showToggleLabel}
             displaySettingsStatus={this.displaySettingsStatus}
           />
-        </TabPanel>
-      </Tabs>
+        </Styled.SettingsTabPanel>
+      </Styled.SettingsTabs>
     );
   }
 

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

@@ -0,0 +1,139 @@
+import styled from 'styled-components';
+import {
+  smPaddingX,
+  smPaddingY,
+  mdPaddingY,
+  mdPaddingX,
+} from '/imports/ui/stylesheets/styled-components/general';
+import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
+import {
+  colorGrayDark,
+  colorPrimary,
+  colorWhite,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import { fontSizeLarge } from '/imports/ui/stylesheets/styled-components/typography';
+import {
+  Tab, Tabs, TabList, TabPanel,
+} from 'react-tabs';
+import Icon from '../icon/component';
+
+const ToggleLabel = styled.span`
+  margin-right: ${smPaddingX};
+
+  [dir="rtl"] & {
+    margin: 0 0 0 ${smPaddingX};
+  }
+`;
+
+const SettingsTabs = styled(Tabs)`
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-start;
+
+  @media ${smallOnly} {
+    width: 100%;
+    flex-flow: column;
+  }
+`;
+
+const SettingsTabList = styled(TabList)`
+  display: flex;
+  flex-flow: column;
+  margin: 0;
+  border: none;
+  padding: 0;
+  width: calc(100% / 3);
+
+  @media ${smallOnly} {
+    width: 100%;
+    flex-flow: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+`;
+
+const SettingsTabSelector = styled(Tab)`
+  display: flex;
+  flex-flow: row;
+  font-size: 0.9rem;
+  flex: 0 0 auto;
+  justify-content: flex-start;
+  border: none !important;
+  padding: ${mdPaddingY} ${mdPaddingX};
+  color: ${colorGrayDark};
+  border-radius: .2rem;
+  cursor: pointer;
+  margin-bottom: ${smPaddingY};
+  align-items: center;
+  flex-grow: 0;
+  min-width: 0;
+
+  & > span {
+    min-width: 0;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  @media ${smallOnly} {
+    max-width: 100%;
+    margin: 0 ${smPaddingX} 0 0;
+    & > i {
+      display: none;
+    }
+
+    [dir="rtl"] & {
+       margin: 0 0 0 ${smPaddingX};
+    }
+  }
+
+  &.is-selected {
+    color: ${colorWhite};
+    background-color: ${colorPrimary};
+    font-weight: bold;
+
+    & > i {
+      color: ${colorWhite};
+    }
+  }
+`;
+
+const SettingsIcon = styled(Icon)`
+  margin: 0 .5rem 0 0;
+  font-size: ${fontSizeLarge};
+
+  [dir="rtl"] & {
+     margin: 0 0 0 .5rem;
+  }
+`;
+
+const SettingsTabPanel = styled(TabPanel)`
+  display: none;
+  margin: 0 0 0 1rem;
+  width: calc(100% / 3 * 2);
+
+  [dir="rtl"] & {
+    margin: 0 1rem 0 0;
+  }
+
+  &.is-selected {
+    display: block;
+  }
+
+  @media ${smallOnly} {
+    width: 100%;
+    margin: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+`;
+
+export default {
+  ToggleLabel,
+  SettingsTabs,
+  SettingsTabList,
+  SettingsTabSelector,
+  SettingsIcon,
+  SettingsTabPanel,
+};