upgraded Web UI library to 2.10.2

web/src/components/bootstrap-components/Tabs.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Card, Button, CardHeader, CardBody } from 'reactstrap';
+import classnames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import PageHeader from '../common/PageHeader';
+import FalconEditor from '../common/FalconEditor';
+
+const basicExampleCode = `function Tab () {
+
+  const [activeTab, setActiveTab] = useState('1');
+
+  const toggle = tab => {
+    if (activeTab !== tab) setActiveTab(tab);
+  };
+
+  return (
+    <>
+      <Nav tabs>
+        <NavItem className='cursor-pointer'>
+          <NavLink
+            className={classnames({ active: activeTab === '1' })}
+            onClick={() => {
+              toggle('1');
+            }}
+          >
+            Tab1
+          </NavLink>
+        </NavItem>
+        <NavItem className='cursor-pointer'>
+          <NavLink
+            className={classnames({ active: activeTab === '2' })}
+            onClick={() => {
+              toggle('2');
+            }}
+          >
+            More Tabs
+          </NavLink>
+        </NavItem>
+    </Nav>
+    <TabContent activeTab={activeTab}>
+      <TabPane tabId="1" >
+        <Row>
+          <Col sm="12 mt-4">
+            <h4>Tab 1 Contents</h4>
+          </Col>
+        </Row>
+      </TabPane>
+      <TabPane tabId="2">
+        <Row className='mt-4'>
+          <Col sm="6">
+            <Card body>
+              <CardTitle>Special Title Treatment</CardTitle>
+              <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+              <Button>Go somewhere</Button>
+            </Card>
+          </Col>
+          <Col sm="6">
+            <Card body>
+              <CardTitle>Special Title Treatment</CardTitle>
+              <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+              <Button>Go somewhere</Button>
+            </Card>
+          </Col>
+        </Row>
+      </TabPane>
+    </TabContent>
+  </>
+  )
+}`;
+
+const Tabs = () => {
+  return (
+    <>
+      <PageHeader
+        title="Tabs"
+        description="Takes the basic nav and adds the tab prop to generate a tabbed interface. Use them to create tab able regions with our tab JavaScript plugin."
+        className="mb-3"
+      >
+        <Button
+          tag="a"
+          href="https://reactstrap.github.io/components/tabs/"
+          target="_blank"
+          color="link"
+          size="sm"
+          className="pl-0"
+        >
+          Tab on reactstrap
+          <FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />
+        </Button>
+      </PageHeader>
+      <Card>
+        <CardHeader>
+          <h5 className="mb-0">Example</h5>
+        </CardHeader>
+        <CardBody className="bg-light">
+          <FalconEditor code={basicExampleCode} scope={{ classnames }} />
+        </CardBody>
+      </Card>
+    </>
+  );
+};
+
+export default Tabs;

web/src/components/changelog/changeLogs.js

@@ -1,7 +1,26 @@
 export default [
+  {
+    title: `2.10.2 - African hobby`,
+    publish: '13 May, 2021',
+    logs: {
+      Fix: ['Plyr plugin compatibility'],
+    }
+  },
+  {
+    title: `2.10.1 - Greater Kestrels`,
+    publish: '19 November, 2020',
+    logs: {
+      New: ['<strong>Component</strong> : Tabs'],
+      Fix: ['Chat page flickering on fluid layout'],
+      Migration: {
+        Add: ['<code>src/components/bootstrap-component/Tabs.js</code>'],
+        Update: ['<code>src/components/chat/Chat.js</code>']
+      }
+    }
+  },
   {
     title: `2.10.0 - Eurasian hobby`,
-    publish: '14 September, 2020',
+    publish: '14 November, 2020',
     logs: {
       New: ['<strong>Component</strong> : Autocomplete', '<strong>Plugin</strong> : <code>FuseJS</code>'],
       Migration: {
@@ -22,7 +41,7 @@ export default [
   },
   {
     title: `2.9.0 - Banded kestrel`,
-    publish: '02 September, 2020',
+    publish: '02 November, 2020',
     logs: {
       New: [
         '<strong>Page</strong> :Calender',

web/src/components/chat/Chat.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Card, CardBody } from 'reactstrap';
 import ChatProvider from './ChatProvider';
 import ChatSidebar from './sidebar/ChatSidebar';
@@ -6,6 +6,12 @@ import ChatContent from './content/ChatContent';
 import Flex from '../common/Flex';
 
 const Chat = () => {
+  useEffect(() => {
+    document.body.classList.add('overflow-hidden');
+    return () => {
+      document.body.classList.remove('overflow-hidden');
+    };
+  }, []);
   return (
     <ChatProvider>
       <Card className="card-chat">

web/src/components/email/inbox/InboxHeader.js

@@ -44,7 +44,7 @@ const InboxHeader = ({ isAllSelected, toggleIsAllSelected, selectedItems, isInde
         <Col xs="auto">
           <Button tag={Link} color="falcon-primary" size="sm" to="/email/compose">
             <FontAwesomeIcon icon="plus" transform="shrink-3" className="mr-1" />
-            Compose new
+            Compose <span className="d-md-inline-block d-none ">new</span>
           </Button>
         </Col>
       </Row>

web/src/layouts/DashboardRoutes.js

@@ -27,6 +27,7 @@ import ProgressBar from '../components/bootstrap-components/ProgressBar';
 import Sidepanel from '../components/bootstrap-components/Sidepanel';
 import Spinners from '../components/bootstrap-components/Spinners';
 import Tables from '../components/bootstrap-components/Tables';
+import Tabs from '../components/bootstrap-components/Tabs';
 import Tooltips from '../components/bootstrap-components/Tooltips';
 import VerticalNavbar from '../components/bootstrap-components/VerticalNavbar';
 import Calendar from '../components/calendar/Calendar';
@@ -205,6 +206,7 @@ const DashboardRoutes = () => (
     <Route path="/components/paginations" exact component={Paginations} />
     <Route path="/components/popovers" exact component={Popovers} />
     <Route path="/components/progress" exact component={ProgressBar} />
+    <Route path="/components/tab" exact component={Tabs} />
     <Route path="/components/tables" exact component={Tables} />
     <Route path="/components/tooltips" exact component={Tooltips} />
     <Route path="/components/spinners" exact component={Spinners} />