beem-component 1.1.8 → 1.1.9

package/dist/assets/css/sidebar.scss

@@ -1,3 +1,9 @@
+.main-chat-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
 .sidebar {
     display: flex;
     flex-direction: column;
@@ -5,7 +11,7 @@
     height: 100%;
     overflow: auto;
     max-width: 20%;
-    width: 20%;
+    width: 100%;
     border: 1px solid #E2E2E2;
 }
 
@@ -33,7 +39,7 @@
     overflow: auto;
 }
 
-.main-chat-container {
+.chat-container {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -47,9 +53,7 @@
     display: flex;
     flex-direction: column;
     max-height: 100%;
-    height: 100%;
     flex-grow: 1;
-    max-height: 100%;
     height: 100%;
 }
 
@@ -59,6 +63,7 @@
     height: 0%;
     flex-grow: 1;
     width: 100%;
+    max-width: 100%;
 }
 
 .chat-messages {
@@ -66,7 +71,8 @@
     flex-direction: column;
     height: 100%;
     overflow: auto;
-    width: 80%;
+    width: 75%;
+    max-width: 75%;
     border: 1px solid #E2E2E2;
 }
 
@@ -76,6 +82,7 @@
     height: 100%;
     overflow: auto;
     width: 25%;
+    max-width: 25%;
     border: 1px solid #E2E2E2;
 }
 

package/dist/components/ChatComponents/ChatBody/chatBody.js

@@ -61,7 +61,7 @@ var Details = _styledComponents.default.div(_templateObject3 || (_templateObject
 
 var MessageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-width: 50%;\n  > * {\n    margin-top: 0.5rem;\n  }\n"])));
 
-var Messages = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 1.143rem;\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n  word-break: break-all;\n  margin: 0rem;\n"])), function (_ref2) {
+var Messages = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0.5rem;\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border: 0.071rem solid ", ";\n  word-break: break-all;\n  margin: 0rem;\n"])), function (_ref2) {
   var state = _ref2.state;
 
   if (state) {
@@ -192,7 +192,7 @@ var BmImageWrapper = _styledComponents.default.div(_templateObject8 || (_templat
 
 exports.BmImageWrapper = BmImageWrapper;
 
-var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 21.429rem;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ""
+var BmImage = _styledComponents.default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", "\n  width: 100%;\n  object-fit: cover;\n  flex-grow: 1;\n"])), ""
 /* Fix width */
 );
 

package/dist/components/ChatComponents/ContactCards/contactCards.js

@@ -15,9 +15,9 @@ 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  padding: 1rem 1.5rem;\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.BmSecondaryBlue12, function (_ref) {
   var active = _ref.active;
-  return active && "    \n    background: ".concat(_colors.BmGrey100, ";\n  ");
+  return active && "    \n    background: ".concat(_colors.BmSecondaryBlue12, ";\n  ");
 });
 
 exports.BmContactCard = BmContactCard;

package/dist/components/Modals/modal.js

@@ -153,7 +153,14 @@ BmModal.Header = function (_ref4) {
   });
 };
 
-BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  > * {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    width: 100%;\n  }\n"])));
+BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  ", "\n"])), ''
+/* > * {
+display: flex;
+flex-direction: row;
+justify-content: space-between;
+width: 100%;
+} */
+);
 BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 BmModal.propTypes = {
   size: _propTypes.default.string,

package/dist/components/colors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmSecondaryYellow = exports.BmSecondaryRed8 = exports.BmSecondaryRed15 = exports.BmSecondaryRed = exports.BmSecondaryPurple = exports.BmSecondaryGrey = exports.BmSecondaryGreen8 = exports.BmSecondaryGreen15 = exports.BmSecondaryGreen = exports.BmSecondaryGold15 = exports.BmSecondaryDarkGreen = exports.BmSecondaryCyan = exports.BmPrimaryWhite = exports.BmPrimaryGold = exports.BmPrimaryBlue = exports.BmPrimaryBlack = exports.BmPictogramGold = exports.BmPictogramBlue = exports.BmGrey600 = exports.BmGrey500 = exports.BmGrey50 = exports.BmGrey400 = exports.BmGrey200 = exports.BmGrey100 = exports.BmBgLightBlue = exports.BmBgGreyBlue = exports.BmBgGrey45 = void 0;
+exports.BmSecondaryYellow = exports.BmSecondaryRed8 = exports.BmSecondaryRed15 = exports.BmSecondaryRed = exports.BmSecondaryPurple = exports.BmSecondaryGrey = exports.BmSecondaryGreen8 = exports.BmSecondaryGreen15 = exports.BmSecondaryGreen = exports.BmSecondaryGold15 = exports.BmSecondaryDarkGreen = exports.BmSecondaryCyan = exports.BmSecondaryBlue12 = exports.BmPrimaryWhite = exports.BmPrimaryGold = exports.BmPrimaryBlue = exports.BmPrimaryBlack = exports.BmPictogramGold = exports.BmPictogramBlue = exports.BmGrey600 = exports.BmGrey500 = exports.BmGrey50 = exports.BmGrey400 = exports.BmGrey200 = exports.BmGrey100 = exports.BmBgLightBlue = exports.BmBgGreyBlue = exports.BmBgGrey45 = void 0;
 // Primary Colors
 var BmPrimaryBlue = "#33B1BA";
 exports.BmPrimaryBlue = BmPrimaryBlue;
@@ -36,9 +36,12 @@ var BmSecondaryRed15 = "rgba(246, 46, 72, 0.15)";
 exports.BmSecondaryRed15 = BmSecondaryRed15;
 var BmSecondaryGreen15 = "rgba(4, 132, 75, 0.15)";
 exports.BmSecondaryGreen15 = BmSecondaryGreen15;
-var BmSecondaryGold15 = "rgba(243, 169, 41, 0.15)"; // Background Colors
+var BmSecondaryGold15 = "rgba(243, 169, 41, 0.15)"; // #33B1BA 12%
 
 exports.BmSecondaryGold15 = BmSecondaryGold15;
+var BmSecondaryBlue12 = "rgba(51, 177, 186, 0.12)"; // Background Colors
+
+exports.BmSecondaryBlue12 = BmSecondaryBlue12;
 var BmBgLightBlue = "#E1EAFC";
 exports.BmBgLightBlue = BmBgLightBlue;
 var BmBgGreyBlue = "#F5F6FA";

package/package.json

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

package/src/App.js

@@ -15,18 +15,20 @@ export const App = () => {
       <GlobalStyle />
       <MainWrapper>
         <div className="main-chat-container">
-          <div className="sidebar">
-            <SideBar />
-          </div>
-          <div className="chat">
-            <ChatHeader />
-            <div className="chat-menu">
-              <div className="chat-messages">
-                <Chat />
-              </div>
-              <div className="chat-contact-info">
-                <CustomerInfo />
-                <InfoAccordion />
+          <div className="chat-container">
+            <div className="sidebar">
+              <SideBar />
+            </div>
+            <div className="chat">
+              <ChatHeader />
+              <div className="chat-menu">
+                <div className="chat-messages">
+                  <Chat />
+                </div>
+                <div className="chat-contact-info">
+                  <CustomerInfo />
+                  <InfoAccordion />
+                </div>
               </div>
             </div>
           </div>

package/src/Chat.js

@@ -6,7 +6,7 @@ import SendIcon from "@mui/icons-material/Send";
 import { BmChat, BmIcons, BmInput } from "./lib/components";
 import "../src/lib/assets/css/sidebar.scss";
 import image from "../src/lib/assets/chart-img.png";
-import azam from '../src/lib/images/azam1.png';
+import azam from "../src/lib/images/azam1.png";
 
 const Chat = () => {
   return (
@@ -20,7 +20,6 @@ const Chat = () => {
           src={image}
           fileName={<p>attachment.jpg</p>}
         />
-
         <BmChat.Details
           state="outbound"
           session="live"
@@ -61,7 +60,15 @@ const Chat = () => {
           displayTime={<p>10:00am</p>}
           status="failed"
         >
-          <p>Outbound</p>
+          <p>
+            Habari! Mimi ni msaidizi wako binafsi Azam TV. Ningependa
+            nikusaidie, lakini tafadhali anza kwa kuchagua kati ya haya
+            nikuhudumie (Mfano chagua namba 2 kubadili kifurushi au 5 kwa msaada
+            zaidi). 1. Angalia Salio 2. Badilisha Kifurishi 3. Tuma Ujumbe
+            Kuwasha Kisimbuzi 4. Huduma za mteja mpya 5. Nahitaji msaada (Huduma
+            kwa mteja) 6. Change language 0. Au ungependa kutuuliza swali
+            lingine?
+          </p>
         </BmChat.Details>{" "}
         <BmChat.Details
           state="outbound"

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

@@ -1,3 +1,9 @@
+.main-chat-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
 .sidebar {
     display: flex;
     flex-direction: column;
@@ -5,7 +11,7 @@
     height: 100%;
     overflow: auto;
     max-width: 20%;
-    width: 20%;
+    width: 100%;
     border: 1px solid #E2E2E2;
 }
 
@@ -33,7 +39,7 @@
     overflow: auto;
 }
 
-.main-chat-container {
+.chat-container {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -47,9 +53,7 @@
     display: flex;
     flex-direction: column;
     max-height: 100%;
-    height: 100%;
     flex-grow: 1;
-    max-height: 100%;
     height: 100%;
 }
 
@@ -59,6 +63,7 @@
     height: 0%;
     flex-grow: 1;
     width: 100%;
+    max-width: 100%;
 }
 
 .chat-messages {
@@ -66,7 +71,8 @@
     flex-direction: column;
     height: 100%;
     overflow: auto;
-    width: 80%;
+    width: 75%;
+    max-width: 75%;
     border: 1px solid #E2E2E2;
 }
 
@@ -76,6 +82,7 @@
     height: 100%;
     overflow: auto;
     width: 25%;
+    max-width: 25%;
     border: 1px solid #E2E2E2;
 }
 

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

@@ -64,7 +64,7 @@ const Messages = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 1.143rem;
+  padding: 0.5rem;
   background: ${({ state }) => {
     if (state) {
       if (state === "inbound") return `${BmPrimaryWhite}`;
@@ -192,7 +192,7 @@ export const BmImageWrapper = styled.div`
 
 export const BmImage = styled.img`
   ${"" /* Fix width */}
-  width: 21.429rem;
+  width: 100%;
   object-fit: cover;
   flex-grow: 1;
 `;

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

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { BmGrey100 } from "../../colors";
+import { BmSecondaryBlue12 } from "../../colors";
 
 export const BmContactCard = styled.div`
   display: flex;
@@ -9,13 +9,13 @@ export const BmContactCard = styled.div`
     margin-right: 1rem;
   }
   &:hover {
-    background: ${BmGrey100};
+    background: ${BmSecondaryBlue12};
   }
 
   ${({ active }) =>
     active &&
     `    
-    background: ${BmGrey100};
+    background: ${BmSecondaryBlue12};
   `}
   cursor: pointer;
   padding: 1rem 1.5rem;

package/src/lib/components/Modals/modal.js

@@ -138,12 +138,12 @@ BmModal.Body = styled.div`
   > *:not(:last-child) {
     margin-bottom: 0.5rem;
   }
-  > * {
+  ${'' /* > * {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
-  }
+  } */}
 `;
 
 BmModal.Footer = styled.div`

package/src/lib/components/colors.js

@@ -32,6 +32,9 @@ export const BmSecondaryGreen15 = "rgba(4, 132, 75, 0.15)";
 
 export const BmSecondaryGold15 = "rgba(243, 169, 41, 0.15)";
 
+// #33B1BA 12%
+export const BmSecondaryBlue12="rgba(51, 177, 186, 0.12)"; 
+
 // Background Colors
 export const BmBgLightBlue = "#E1EAFC";