beem-component 1.0.6 → 1.1.0

package/dist/assets/css/sidebar.css

@@ -1,3 +1,18 @@
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    height: 100%;
+    overflow: auto;
+    max-width: 20%;
+    width: 20%;
+    border: 1px solid #E2E2E2;
+}
+
+.sidebar>* {
+    margin-bottom: 1.5rem;
+}
+
 .main-sidebar-tabs {
     display: flex;
     flex-direction: row;
@@ -9,4 +24,57 @@
 .main-sidebar-tabs>.sidebar-tabs {
     padding: 1.714rem;
     flex: 1;
+}
+
+.sidebar-contacts {
+    display: flex;
+    flex-direction: column;
+    margin: 0rem;
+    overflow: auto;
+}
+
+.main-chat-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: calc(100vh - 180px);
+    max-width: 100%;
+    width: 100%;
+    background: white;
+}
+
+.chat {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    height: 100%;
+    flex-grow: 1;
+    max-height: 100%;
+    height: 100%;
+}
+
+.chat-menu {
+    display: flex;
+    flex-direction: row;
+    height: 0%;
+    flex-grow: 1;
+    width: 100%;
+}
+
+.chat-messages {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+    width: 80%;
+    border: 1px solid #E2E2E2;
+}
+
+.chat-contact-info {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+    width: 25%;
+    border: 1px solid #E2E2E2;
 }

package/dist/components/ChatBody/chatBody.js

@@ -31,13 +31,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  ", "\n"])), ""
+var BmChat = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  ", "\n"])), ""
 /* border: 0.071rem solid ${BmGrey400}; */
 );
 
-BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 1.5rem;\n"])));
+BmChat.Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 0rem 1.5rem;\n  flex-grow: 1;\n  overflow: auto;\n"])));
 
-var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  ", "\n  justify-content: ", ";\n  > *:not(:last-child) {\n    margin-right: 1rem;\n  }\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n"])), ""
+var Details = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  ", "\n  justify-content: ", ";\n  > *:not(:last-child) {\n    margin-right: 1rem;\n  }\n  overflow-wrap: break-word !important;\n  word-wrap: break-word !important;\n  margin: 0rem;\n  flex-grow: 1;\n"])), ""
 /* align-items: center; */
 , function (_ref) {
   var state = _ref.state;
@@ -133,6 +133,8 @@ BmChat.Details = function (_ref6) {
   }));
 };
 
-BmChat.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  border-top: 0.071rem solid ", ";\n  padding: 0.5rem 0rem;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), _colors.BmGrey400, _colors.BmGrey50);
+BmChat.Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  border-top: 0.071rem solid ", ";\n  padding: 0.5rem 0rem;\n  align-items: center;\n  justify-content: center;\n  ", "\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n"])), _colors.BmGrey400, ''
+/* background: ${BmGrey50}; */
+);
 var _default = BmChat;
 exports.default = _default;

package/dist/components/ChatHeader/chatHeader.js

@@ -7,14 +7,15 @@ exports.BmChatHeader = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _colors = require("../colors");
-
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border: 0.071rem solid ", ";\n  padding: 1rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  button {\n    margin-left: auto;\n  }\n"])), _colors.BmGrey400);
+// import { BmGrey400 } from "../colors";
+var BmChatHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  ", "\n  padding: 1rem;\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  button {\n    margin-left: auto;\n  }\n"])), ''
+/* border: 0.071rem solid ${BmGrey400}; */
+);
 
 exports.BmChatHeader = BmChatHeader;

package/dist/components/ContactCards/contactCards.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmContactCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-right: 1rem;\n  }\n  &:hover {\n    background: ", ";\n  }\n\n  ", "\n  cursor: pointer;\n"])), _colors.BmGrey100, function (_ref) {
+var BmContactCard = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-right: 1rem;\n  }\n  &:hover {\n    background: ", ";\n  }\n\n  ", "\n  cursor: pointer;\n  padding: 1rem 1.5rem;\n"])), _colors.BmGrey100, function (_ref) {
   var active = _ref.active;
   return active && "    \n    background: ".concat(_colors.BmGrey100, ";\n  ");
 });

package/dist/components/InfoTab/infoTab.js

@@ -7,15 +7,16 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _colors = require("../colors");
-
 var _templateObject, _templateObject2, _templateObject3;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmInfoTab = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n  border: 0.071rem solid ", ";\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), _colors.BmGrey400);
+// import { BmGrey400 } from "../colors";
+var BmInfoTab = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem;\n  ", "\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), ''
+/* border: 0.071rem solid ${BmGrey400}; */
+);
 
 BmInfoTab.Content = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
 BmInfoTab.Tabs = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  >*:not(:first-child) {\n    margin-top: 0.5rem;\n  }\n"])));

package/dist/components/index.js

@@ -114,6 +114,12 @@ Object.defineProperty(exports, "BmInput", {
     return _input.BmInput;
   }
 });
+Object.defineProperty(exports, "BmListBox", {
+  enumerable: true,
+  get: function get() {
+    return _listBox.BmListBox;
+  }
+});
 Object.defineProperty(exports, "BmListHeader", {
   enumerable: true,
   get: function get() {
@@ -174,6 +180,12 @@ Object.defineProperty(exports, "BmTab", {
     return _tabs.BmTab;
   }
 });
+Object.defineProperty(exports, "BmTag", {
+  enumerable: true,
+  get: function get() {
+    return _tags.BmTag;
+  }
+});
 Object.defineProperty(exports, "BmTagIcon", {
   enumerable: true,
   get: function get() {
@@ -223,6 +235,8 @@ var _listheader = require("./Lists/listheader");
 
 var _rowLabels = require("./Lists/rowLabels");
 
+var _listBox = require("./Lists/listBox");
+
 var _modal = _interopRequireDefault(require("./Modals/modal"));
 
 var _progressbar = require("./ProgressBar/progressbar");
@@ -237,6 +251,8 @@ var _loader = require("./Loader/loader");
 
 var _checkbox = require("./checkbox");
 
+var _tags = require("./tags");
+
 var _iconStyles = require("./iconStyles");
 
 var _noteBar = require("./NoteBar/noteBar");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.0.6",
+    "version": "1.1.0",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {

package/src/App.js

@@ -1,94 +1,35 @@
-import React, { useState } from "react";
+import React from "react";
 import "../src/main.scss";
-import { BmAvatar, BmInput, BmTab, MainWrapper } from "./lib/components";
+import { MainWrapper } from "./lib/components";
 import { GlobalStyle } from "./lib/components/globalStyles";
-import { BmSideBar } from "./lib/components/sidebar";
 import "./lib/assets/css/sidebar.css";
-import BmChat from "./lib/components/ChatBody/chatBody";
-import { DoneAll, Home, MoreVert, Person, Phone } from "@material-ui/icons";
-import { BmIcons } from "./lib/components/iconStyles";
-import EmojiEmotionsIcon from "@mui/icons-material/EmojiEmotions";
-import AttachFileIcon from "@mui/icons-material/AttachFile";
-import QuickreplyIcon from "@mui/icons-material/Quickreply";
-import SendIcon from "@mui/icons-material/Send";
-import BmInfoTab from "./lib/components/InfoTab/infoTab";
-import { BmButton } from "./lib/components/Buttons/buttons";
-import {
-  BmCustomizedDropdown,
-  BmDropDownMenu,
-  BmDropDownItem,
-  BmButtonDropdownItem,
-} from "./lib/components/dropdownItems";
-
-import { BmButtonDropDown } from "./lib/components/dropdownButton";
-import { BmListBox } from "./lib/components/Lists/listBox";
-import { BmRowLabel } from "./lib/components/Lists/rowLabels";
+import SideBar from "./SideBar";
+import ChatHeader from "./ChatHeader";
+import Chat from "./Chat";
+import CustomerInfo from "./CustomerInfo";
 
 export const App = () => {
-  const [dropDownItem, setDropdownItem] = useState(false);
 
   return (
     <>
       <GlobalStyle />
       <MainWrapper>
-        <BmSideBar>
-          <div className="main-sidebar-tabs">
-            <BmTab state="active" className="sidebar-tabs">
-              <h3>Tabs</h3>
-            </BmTab>
-            <BmTab state="inactive" className="sidebar-tabs">
-              <h3>Tabs</h3>
-            </BmTab>
+        <div className="main-chat-container">
+          <div className="sidebar">
+            <SideBar />
           </div>
-        </BmSideBar>
-
-        <BmChat>
-          <BmChat.Body>
-            <BmChat.Details
-              state="inbound"
-              session="bot"
-              displayTime={<p>12:00pm</p>}
-              status="sent"
-            >
-              <p>Inbound</p>
-            </BmChat.Details>
-            <BmChat.Details
-              state="outbound"
-              session="live"
-              displayTime={<p>10:00am</p>}
-              status="failed"
-            >
-              <p>Outbound</p>
-            </BmChat.Details>
-          </BmChat.Body>
-          <BmChat.Footer>
-            <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-            <BmIcons icon={<AttachFileIcon />} size="xlarge" />
-            <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-            <BmInput placeholder="Enter Message" />
-            <BmIcons icon={<SendIcon />} size="xlarge" />
-          </BmChat.Footer>
-        </BmChat>
-        {/* <BmCustomizedDropdown> */}
-        <BmButton>Create Ticket</BmButton>
-        <BmButtonDropDown
-          size="medium"
-          onClick={() => {
-            setDropdownItem(!dropDownItem);
-          }}
-          variant="primary"
-        >
-          Session
-        </BmButtonDropDown>
-        <BmListBox isOpen={dropDownItem}>
-          <BmRowLabel trailingIcon={<Person />} size="large">
-            <h4>Row Label</h4>
-          </BmRowLabel>
-          <BmRowLabel size="large">
-            <h4>Row Label</h4>
-          </BmRowLabel>
-        </BmListBox>
-        {/* </BmCustomizedDropdown> */}
+          <div className="chat">
+            <ChatHeader />
+            <div className="chat-menu">
+              <div className="chat-messages">
+                <Chat />
+              </div>
+              <div className="chat-contact-info">
+                <CustomerInfo />
+              </div>
+            </div>
+          </div>
+        </div>
       </MainWrapper>
     </>
   );

package/src/Chat.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import { AttachFile } from '@material-ui/icons';
+import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
+import QuickreplyIcon from '@mui/icons-material/Quickreply';
+import SendIcon from '@mui/icons-material/Send';
+import { BmChat, BmIcons, BmInput } from './lib/components';
+
+const Chat = () => {
+  return (
+    <BmChat>
+      <BmChat.Body style={{ flex: 1 }}>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+        >
+          <p>Inbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{' '}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{' '}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{' '}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{' '}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{' '}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{' '}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{' '}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+      </BmChat.Body>
+      <BmChat.Footer>
+        <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+        <BmIcons icon={<AttachFile />} size="xlarge" />
+        <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+        <BmInput placeholder="Enter Message" />
+        <BmIcons icon={<SendIcon />} size="xlarge" />
+      </BmChat.Footer>
+    </BmChat>
+  );
+};
+
+export default Chat;

package/src/ChatHeader.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { BmChatHeader, BmButton} from '../src/lib/components/';
+
+export const ChatHeader = ({ info }) => {
+  return (
+    <>
+      <BmChatHeader style={{ border: "1px solid #E2E2E2" }}>
+        <h2>Contact Name</h2>
+        <p>Last seen: 00:00</p>
+        <BmButton size="medium">End Session</BmButton>
+      </BmChatHeader>
+    </>
+  );
+};
+
+export default ChatHeader;

package/src/CustomerInfo.js

@@ -0,0 +1,46 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { BmBtnIcon, BmInfoTab, BmIcons } from '../src/lib/components/';
+import CallIcon from '@material-ui/icons/Call';
+import EmailIcon from '@material-ui/icons/Email';
+import NoteAddIcon from '@material-ui/icons/NoteAdd';
+import AddIcon from '@material-ui/icons/Add';
+import PriorityHighIcon from '@material-ui/icons/PriorityHigh';
+import { MoreVert } from '@material-ui/icons';
+
+const CustomerInfo = () => {
+  return (
+    <>
+      <BmInfoTab>
+        <BmInfoTab.Content>
+          <h3>Contact Name</h3>
+          <BmIcons icon={<MoreVert />} />
+        </BmInfoTab.Content>
+        <BmInfoTab.Content>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<CallIcon />} />
+            <h4>Call</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<EmailIcon />} />
+            <h4>Email</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<NoteAddIcon />} />
+            <h4>Note</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<AddIcon />} />
+            <h4>Log</h4>
+          </BmInfoTab.Tabs>
+          <BmInfoTab.Tabs>
+            <BmBtnIcon icon={<PriorityHighIcon />} variant="enabled" />
+            <h4>Priority</h4>
+          </BmInfoTab.Tabs>
+        </BmInfoTab.Content>
+      </BmInfoTab>
+    </>
+  );
+};
+
+export default CustomerInfo;

package/src/SideBar.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { BmTab } from "./lib/components/Tabs/tabs";
+import ForumIcon from '@material-ui/icons/Forum';
+import { BmContactCard, BmAvatar, BmCounter, BmTag } from "./lib/components";
+
+const SideBar = () => {
+  return (
+    <>
+      <div className="main-sidebar-tabs">
+        <BmTab
+          state="active"
+          className="sidebar-tabs"
+          leadingIcon={<ForumIcon />}
+        >
+          <h3>Chats</h3>
+        </BmTab>
+      </div>
+      <div className="sidebar-contacts">
+        <BmContactCard>
+          <BmContactCard.Profile>
+            <BmAvatar user="employee" size="small" color="{$BmPrimaryBlack}" />
+          </BmContactCard.Profile>
+          <BmContactCard.Details>
+            <BmContactCard.SubDetails>
+              <h3>Contact Names</h3>
+            </BmContactCard.SubDetails>
+            <BmContactCard.SubDetails>
+              <p>Message text</p>
+              <BmCounter>10</BmCounter>
+            </BmContactCard.SubDetails>
+            <BmContactCard.SubDetails>
+              <BmTag variant="success">label</BmTag>
+              <p>10:00 am</p>
+            </BmContactCard.SubDetails>
+          </BmContactCard.Details>
+        </BmContactCard>
+        <BmContactCard>
+          <BmContactCard.Profile>
+            <BmAvatar user="employee" size="small" color="{$BmPrimaryBlack}" />
+          </BmContactCard.Profile>
+          <BmContactCard.Details>
+            <BmContactCard.SubDetails>
+              <h3>Contact Names</h3>
+            </BmContactCard.SubDetails>
+            <BmContactCard.SubDetails>
+              <p>Message text</p>
+              <BmCounter>10</BmCounter>
+            </BmContactCard.SubDetails>
+            <BmContactCard.SubDetails>
+              <BmTag variant="success">label</BmTag>
+              <p>10:00 am</p>
+            </BmContactCard.SubDetails>
+          </BmContactCard.Details>
+        </BmContactCard>
+        <BmContactCard>
+          <BmContactCard.Profile>
+            <BmAvatar user="employee" size="small" color="{$BmPrimaryBlack}" />
+          </BmContactCard.Profile>
+          <BmContactCard.Details>
+            <BmContactCard.SubDetails>
+              <h3>Contact Names</h3>
+            </BmContactCard.SubDetails>
+            <BmContactCard.SubDetails>
+              <p>Message text</p>
+              <BmCounter>10</BmCounter>
+            </BmContactCard.SubDetails>
+            <BmContactCard.SubDetails>
+              {/* <BmTag variant="success">label</BmTag> */}
+              <p>10:00 am</p>
+            </BmContactCard.SubDetails>
+          </BmContactCard.Details>
+        </BmContactCard>
+      </div>
+    </>
+  );
+};
+
+export default SideBar;

package/src/lib/assets/css/sidebar.css

@@ -1,3 +1,18 @@
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    height: 100%;
+    overflow: auto;
+    max-width: 20%;
+    width: 20%;
+    border: 1px solid #E2E2E2;
+}
+
+.sidebar>* {
+    margin-bottom: 1.5rem;
+}
+
 .main-sidebar-tabs {
     display: flex;
     flex-direction: row;
@@ -9,4 +24,57 @@
 .main-sidebar-tabs>.sidebar-tabs {
     padding: 1.714rem;
     flex: 1;
+}
+
+.sidebar-contacts {
+    display: flex;
+    flex-direction: column;
+    margin: 0rem;
+    overflow: auto;
+}
+
+.main-chat-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: calc(100vh - 180px);
+    max-width: 100%;
+    width: 100%;
+    background: white;
+}
+
+.chat {
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    height: 100%;
+    flex-grow: 1;
+    max-height: 100%;
+    height: 100%;
+}
+
+.chat-menu {
+    display: flex;
+    flex-direction: row;
+    height: 0%;
+    flex-grow: 1;
+    width: 100%;
+}
+
+.chat-messages {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+    width: 80%;
+    border: 1px solid #E2E2E2;
+}
+
+.chat-contact-info {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+    width: 25%;
+    border: 1px solid #E2E2E2;
 }

package/src/lib/components/ChatBody/chatBody.js

@@ -15,6 +15,7 @@ import {
 const BmChat = styled.div`
   display: flex;
   flex-direction: column;
+  height: 100%;
   ${"" /* border: 0.071rem solid ${BmGrey400}; */}
 `;
 
@@ -22,6 +23,8 @@ BmChat.Body = styled.div`
   display: flex;
   flex-direction: column;
   padding: 0rem 1.5rem;
+  flex-grow: 1;
+  overflow: auto;
 `;
 
 const Details = styled.div`
@@ -42,6 +45,7 @@ const Details = styled.div`
   overflow-wrap: break-word !important;
   word-wrap: break-word !important;
   margin: 0rem;
+  flex-grow: 1;
 `;
 
 const MessageDetails = styled.div`
@@ -136,7 +140,7 @@ BmChat.Footer = styled.div`
   padding: 0.5rem 0rem;
   align-items: center;
   justify-content: center;
-  background: ${BmGrey50};
+  ${'' /* background: ${BmGrey50}; */}
   > *:not(:last-child) {
     margin-right: 0.5rem;
   }

package/src/lib/components/ChatBody/chatBody.stories.js

@@ -17,32 +17,32 @@ export default {
 
 export const ChatBody = () => {
   return (
-    <BmChat>
-      <BmChat.Body>
-        <BmChat.Details
-          state="inbound"
-          session="bot"
-          displayTime={<p>12:00pm</p>}
-          status="sent"
-        >
-          <p>Inbound</p>
-        </BmChat.Details>
-        <BmChat.Details
-          state="outbound"
-          session="live"
-          displayTime={<p>10:00am</p>}
-          status="failed"
-        >
-          <p>Outbound</p>
-        </BmChat.Details>
-      </BmChat.Body>
-      <BmChat.Footer>
-        <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
-        <BmIcons icon={<AttachFileIcon />} size="xlarge" />
-        <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
-        <BmInput placeholder="Enter Message" />
-        <BmIcons icon={<SendIcon />} size="xlarge" />
-      </BmChat.Footer>
-    </BmChat>
+      <BmChat>
+        <BmChat.Body>
+          <BmChat.Details
+            state="inbound"
+            session="bot"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+          >
+            <p>Inbound</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="outbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            status="failed"
+          >
+            <p>Outbound</p>
+          </BmChat.Details>
+        </BmChat.Body>
+        <BmChat.Footer>
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+          <BmIcons icon={<AttachFileIcon />} size="xlarge" />
+          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+          <BmInput placeholder="Enter Message" />
+          <BmIcons icon={<SendIcon />} size="xlarge" />
+        </BmChat.Footer>
+      </BmChat>
   );
 };

package/src/lib/components/ChatHeader/chatHeader.js

@@ -1,11 +1,11 @@
 import styled from "styled-components";
-import { BmGrey400 } from "../colors";
+// import { BmGrey400 } from "../colors";
 
 export const BmChatHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  border: 0.071rem solid ${BmGrey400};
+  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
   padding: 1rem;
   > *:not(:last-child) {
     margin-right: 0.5rem;

package/src/lib/components/ContactCards/contactCards.js

@@ -18,6 +18,7 @@ export const BmContactCard = styled.div`
     background: ${BmGrey100};
   `}
   cursor: pointer;
+  padding: 1rem 1.5rem;
 `;
 
 BmContactCard.Profile = styled.div`

package/src/lib/components/InfoTab/infoTab.js

@@ -1,11 +1,11 @@
 import styled from "styled-components";
-import { BmGrey400 } from "../colors";
+// import { BmGrey400 } from "../colors";
 
 const BmInfoTab = styled.div`
   display: flex;
   flex-direction: column;
   padding: 1.5rem;
-  border: 0.071rem solid ${BmGrey400};
+  ${'' /* border: 0.071rem solid ${BmGrey400}; */}
   > *:not(:last-child) {
     margin-bottom: 1rem;
   }

package/src/lib/components/index.js

@@ -10,12 +10,14 @@ import { BmInput } from "./input";
 import { BmRouteLink } from "./RouteLink/link";
 import { BmListHeader } from "./Lists/listheader";
 import { BmRowLabel } from "./Lists/rowLabels";
+import { BmListBox } from "./Lists/listBox";
 import BmModal from "./Modals/modal";
 import { BmProgressBar } from "./ProgressBar/progressbar";
 import { BmTab } from "./Tabs/tabs";
 import * as BmColors from "./colors";
 import { BmLoader } from "./Loader/loader";
 import { BmCheckbox } from "./checkbox";
+import { BmTag } from "./tags";
 import {
   BmTagIcon,
   BmAvatarIcon,
@@ -44,6 +46,7 @@ export {
   BmBtnIcon,
   BmColors,
   BmCard,
+  BmListBox,
   BmListHeader,
   BmRowLabel,
   BmModal,
@@ -53,11 +56,12 @@ export {
   BmTab,
   GlobalStyle,
   MainWrapper,
+  BmLoader,
   // Old components to be refactored
   BmButtonDropDown,
   BmCheckbox,
   BmInput,
-  BmLoader,
+  BmTag,
   //Icons (Remove unused ones and check on the sizing for custom icons)
   BmAvatarIcon,
   BmIcons,