@messenger-box/platform-browser 10.0.3-alpha.16 → 10.0.3-alpha.160

package/lib/components/dashboard/menu_header.js

@@ -1,4 +1,4 @@
-import*as React from'react';import {useTranslation}from'react-i18next';import {styleSheet}from'../../style.js';import {css}from'@emotion/css';import {FiSearch}from'react-icons/fi';import {VscMenu}from'react-icons/vsc';const MenuHeader = ({
+import*as React from'react';import {useTranslation}from'react-i18next';import {FiSearch}from'@react-icons/all-files/fi/FiSearch.js';import {VscMenu}from'@react-icons/all-files/vsc/VscMenu.js';const MenuHeader = ({
   clickedChannel,
   handleClass
 }) => {
@@ -6,39 +6,53 @@ import*as React from'react';import {useTranslation}from'react-i18next';import {s
     t
   } = useTranslation();
   return React.createElement("div", {
-    className: css(styleSheet.customStyle)
+    className: "w-full bg-white border-b border-gray-200"
   }, React.createElement("div", {
-    className: "navbar_header"
+    className: "flex items-center justify-between h-16 px-4"
+  }, React.createElement("div", {
+    className: "flex items-center"
   }, React.createElement("button", {
     type: "button",
-    className: "navbar_toggle",
+    className: "p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
     onClick: handleClass
   }, React.createElement("span", {
     className: "sr-only"
-  }, React.createElement("span", null, t('messenger_box_browser.toggle_sidebar'))), React.createElement("span", {
-    className: "style--none icon icon__menu icon--sidebarHeaderTextColor"
-  }, React.createElement(VscMenu, null))), React.createElement("div", {
-    className: "navbar_brand"
+  }, t('messenger_box_browser.toggle_sidebar')), React.createElement(VscMenu, {
+    className: "w-6 h-6"
+  })), React.createElement("div", {
+    className: "ml-4"
+  }, clickedChannel.id && React.createElement("div", {
+    className: "flex items-center space-x-2"
   }, React.createElement("div", {
-    className: "menu_wrapper "
-  }, clickedChannel.id ? React.createElement("a", null, React.createElement("span", {
-    className: "heading"
-  }, React.createElement("span", {
-    className: "status "
-  }), React.createElement("span", null, clickedChannel.type === 'DIRECT' ? clickedChannel.displayName : clickedChannel.title)), React.createElement("span", {
-    className: "fa fa-angle-down header-dropdown__icon",
-    title: "Dropdown Icon"
-  })) : '')), React.createElement("button", {
+    className: "flex items-center hover:text-gray-900 cursor-pointer"
+  }, React.createElement("div", {
+    className: "w-2 h-2 bg-green-500 rounded-full mr-2"
+  }), " ", React.createElement("span", {
+    className: "font-medium"
+  }, clickedChannel.type === 'DIRECT' ? clickedChannel.displayName : clickedChannel.title), React.createElement("svg", {
+    className: "w-4 h-4 ml-1",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M19 9l-7 7-7-7"
+  })))))), React.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, React.createElement("button", {
     type: "button",
-    className: "navbar-toggle navbar-right__icon navbar-search pull-right",
+    className: "p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
     "aria-label": "Search"
-  }, React.createElement("span", {
-    className: "icon icon__search",
-    "aria-hidden": "true"
-  }, React.createElement(FiSearch, null))), React.createElement("button", {
+  }, React.createElement(FiSearch, {
+    className: "w-5 h-5"
+  })), React.createElement("button", {
     type: "button",
-    className: "navbar-toggle navbar-right__icon menu-toggle pull-right",
+    className: "p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
     "data-toggle": "collapse",
     "data-target": "#sidebar-nav"
-  }, React.createElement("span", null, React.createElement(VscMenu, null)))));
+  }, React.createElement(VscMenu, {
+    className: "w-5 h-5"
+  })))));
 };export{MenuHeader};//# sourceMappingURL=menu_header.js.map

package/lib/components/dashboard/menu_header.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu_header.js","sources":["../../../src/components/dashboard/menu_header.tsx"],"sourcesContent":[null],"names":[],"mappings":"0NAOa,MAAA,UAAU,GAAG,CAAC;AACvB,EAAA,cAAc;;;;;AAMM,GAAA,GAAA,cAAA,EAAA;4BAEE,CAAA,KAAA,EAAA;6BACD,CAAA,WAAA;wBAGJ,CAAA,KAAA,EAAA;;wBAIiB,CAAA,QAAA,EAAA;;AAEF,IAAA,SAAA,EAAA,eAAA;;AAGQ,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,MAAE,EAAA;AAGd,IAAA,SAAA,EAAA;wBAQZ,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,CAAA,sCACU,CAAA,CAAA,CAAA,EAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAGV,IAAA,SAAA,EAAA;wBACK,CAAA,OAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAAA,KAAQ,CAAG,aAEX,CAAA,KAAA,EAAA;aAEL,EAAA;AAKA,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACI,IAAA,SAAA,EAAA;AAMxB,GAAE,EAAA,cAAA,CAAA,EAAA,GAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"menu_header.js","sources":["../../../src/components/dashboard/menu_header.tsx"],"sourcesContent":[null],"names":[],"mappings":"gMAKO,MAAM,UAAU,GAAG,CAAC;AACvB,EAAA,cAAW;AACX,EAAA;;;;oBAUoB,EAAA;AACA,EAAA,OAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAIJ,IAAA,SAAA,EAAA;wBAGY,CAAA,KAAA,EAAA;;;;iCAIc,EAAA;AACF,IAAA,IAAA,EAAA,QAAA;AAER,IAAA,SAAA,EAAA,8IAAmF;;wBAevG,CAAA,MAAA,EAAA;;AAMQ,GAAA,EAAA,CAAA,CAAA,0CAAS,KAAC,CAAA,aAAU,CAAA,OACf,EAAA;;0BAQL,CAAA,KAAA,EAAA;AAMxB,IAAE,SAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/dashboard/modals/direct_modal.d.ts

@@ -1,10 +1,12 @@
-import * as React from 'react';
-export declare const DirectModal: ({ showDirectChl, handleClose, selectedValues, handleSelect, options, handleGo }: {
-    showDirectChl: any;
-    handleClose: any;
+import React from 'react';
+interface DirectModalProps {
+    show: boolean;
+    onHide: () => void;
+    options: any[];
     selectedValues: any;
-    handleSelect: any;
-    options: any;
-    handleGo: any;
-}) => React.JSX.Element;
+    handleSelect: (value: any) => void;
+    handleGo: () => void;
+}
+export declare const DirectModal: ({ show, onHide, options, selectedValues, handleSelect, handleGo }: DirectModalProps) => React.JSX.Element;
+export {};
 //# sourceMappingURL=direct_modal.d.ts.map

package/lib/components/dashboard/modals/direct_modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"direct_modal.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/modals/direct_modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,WAAW;;;;;;;uBA6CvB,CAAC"}
+{"version":3,"file":"direct_modal.d.ts","sourceRoot":"","sources":["../../../../src/components/dashboard/modals/direct_modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,gBAAgB;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,cAAc,EAAE,GAAG,CAAC;IACpB,YAAY,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,GAAI,mEAAmE,gBAAgB,sBAwE9G,CAAC"}

package/lib/components/dashboard/modals/direct_modal.js

@@ -1,43 +1,41 @@
-import*as React from'react';import {Modal}from'react-bootstrap';import {useTranslation}from'react-i18next';import {VscChromeClose}from'react-icons/vsc';import Select from'react-select';import {css}from'@emotion/css';import {styleSheet}from'../../../style.js';const DirectModal = ({
-  showDirectChl,
-  handleClose,
+import React__default from'react';import {useTranslation}from'react-i18next';import {VscChromeClose}from'@react-icons/all-files/vsc/VscChromeClose.js';import Select from'react-select';const DirectModal = ({
+  show,
+  onHide,
+  options,
   selectedValues,
   handleSelect,
-  options,
   handleGo
 }) => {
   const {
     t
   } = useTranslation();
-  return React.createElement("div", {
-    className: css(styleSheet.customStyle)
-  }, React.createElement(Modal, {
-    show: showDirectChl,
-    onHide: () => handleClose('directChannel')
-  }, React.createElement(Modal.Header, {
-    style: {
-      backgroundColor: '#2b5ebf',
-      color: 'white',
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, React.createElement(Modal.Title, null, t('messenger_box_browser.direct_messages')), React.createElement(VscChromeClose, {
-    onClick: () => handleClose('dir ectChannel'),
-    fontSize: "16px",
-    style: {
-      marginLeft: 'auto',
-      cursor: 'pointer'
-    }
-  })), React.createElement(Modal.Body, null, React.createElement("div", {
-    className: css(styleSheet.modelStyle)
-  }, React.createElement("div", {
-    className: "root_modal"
-  }, React.createElement("div", {
-    className: "root_first"
-  }, React.createElement("div", {
-    className: "search_box"
-  }, React.createElement(Select, {
-    className: "temp",
+  if (!show) return null;
+  return React__default.createElement("div", {
+    className: "fixed inset-0 z-50 overflow-y-auto"
+  }, React__default.createElement("div", {
+    className: "flex min-h-full items-center justify-center p-4"
+  }, React__default.createElement("div", {
+    className: "fixed inset-0 bg-black bg-opacity-25",
+    onClick: onHide
+  }), React__default.createElement("div", {
+    className: "relative w-full max-w-md transform overflow-hidden rounded-lg bg-white shadow-xl transition-all"
+  }, React__default.createElement("div", {
+    className: "bg-blue-600 px-4 py-3 flex items-center justify-between"
+  }, React__default.createElement("h3", {
+    className: "text-lg font-medium text-white"
+  }, t('messenger_box_browser.direct_message')), React__default.createElement("button", {
+    onClick: onHide,
+    className: "text-white hover:text-gray-200 transition-colors"
+  }, React__default.createElement(VscChromeClose, {
+    className: "w-5 h-5"
+  }))), React__default.createElement("div", {
+    className: "p-6"
+  }, React__default.createElement("div", {
+    className: "space-y-4"
+  }, React__default.createElement("div", {
+    className: "flex space-x-2"
+  }, React__default.createElement(Select, {
+    className: "flex-1",
     value: selectedValues.value,
     onChange: handleSelect,
     components: {
@@ -47,10 +45,32 @@ import*as React from'react';import {Modal}from'react-bootstrap';import {useTrans
     autoFocus: true,
     options: options,
     isMulti: true,
-    menuIsOpen: true
-  }), React.createElement("button", {
-    onClick: handleGo
-  }, t('messenger_box_browser.go'))), React.createElement("div", {
-    className: "mid_line"
-  }, React.createElement("p", null, t('messenger_box_browser.use_browse_or_select'), React.createElement("span", null, " ")))))))));
+    menuIsOpen: true,
+    styles: {
+      control: base => ({
+        ...base,
+        borderRadius: '0.375rem',
+        borderColor: '#E5E7EB'
+      }),
+      menu: base => ({
+        ...base,
+        marginTop: '0',
+        boxShadow: 'none',
+        border: 'none'
+      })
+    }
+  }), React__default.createElement("button", {
+    onClick: handleGo,
+    className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+  }, t('messenger_box_browser.go'))), React__default.createElement("div", {
+    className: "relative"
+  }, React__default.createElement("div", {
+    className: "absolute inset-0 flex items-center"
+  }, React__default.createElement("div", {
+    className: "w-full border-t border-gray-300"
+  })), React__default.createElement("div", {
+    className: "relative flex justify-center text-sm"
+  }, React__default.createElement("span", {
+    className: "px-2 text-gray-500 bg-white"
+  }, t('messenger_box_browser.use_browse_or_select')))))))));
 };export{DirectModal};//# sourceMappingURL=direct_modal.js.map

package/lib/components/dashboard/modals/direct_modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"direct_modal.js","sources":["../../../../src/components/dashboard/modals/direct_modal.tsx"],"sourcesContent":[null],"names":[],"mappings":"mQAQa,MAAA,WAAW,GAAG,CAAC;AACxB,EAAA,aAAW;;AAGH,EAAA,cAAA;cACK;;AAIG,EAAA;;AAOA,EAAA,MAAA;;;4BAGY,CAAK,KAAA,EAAA;yCACA;gCAUD;;AAGA,IAAA,MAAA,EAAA,MAAA,WAAA,CAAA,eAAA;qCACM;;AAW1C,MAAE,eAAA,EAAA,SAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"direct_modal.js","sources":["../../../../src/components/dashboard/modals/direct_modal.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"wLAcO,MAAM,WAAW,GAAG,CAAC;AACxB,EAAA,IAAA;AAEA,EAAA,MAAI;AAAO,EAAA,OAAA;AAEX,EAAA,cACI;cACI;AACI,EAAA;;;;AAMQ,GAAA,GAAA,cAAA,EAAA;AACI,EAAA,IAAA,CAAA,IAAA,EAAA,OAAA,IAAA;qCAKR,CAAA,KAAA,EAAA;;iCAEQ,CAAA,KAAA,EAAA;AACI,IAAA,SAAA,EAAA;AAKQ,GAAA,EAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACA,IAAA,SAAA,EAAA,sCAAA;AACH,IAAA,OAAA,EAAA;AAMG,GAAA,CAAA,EAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACI,IAAA,SAAA,EAAA;AACA,GAAA,EAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACA,IAAA,SAAA,EAAA;;AAEJ,IAAA,SAAA,EAAA;AACI,GAAA,EAAA,CAAA,CAAA,sCAAG,CAAA,CAAI,EAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AACP,IAAA,OAAA,EAAA,MAAA;AACA,IAAA,SAAA,EAAA;AACA,GAAA,EAAAA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA;;0CAEP,EAAA;AAEL,IAAA,SAAA,EAAA;iCAOJ,CAAA,KAAA,EAAA;;AAEQ,GAAA,EAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;;AAGA,GAAA,EAAAA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAWpC,IAAE,SAAA,EAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/dashboard/modals.d.ts

@@ -1,9 +1,21 @@
 import * as React from 'react';
-export declare const Modals: ({ directMoreModal, publicChlModal, handleClose, handleChange, handleCreate }: {
-    directMoreModal: any;
+interface Channel {
+    id: string;
+    title: string;
+}
+interface DirectMoreModal {
+    showDirectMore: boolean;
+    handleShow: (type: string, title: string) => void;
+    modalPublicChannels: Channel[];
+    handleJoin: (channelId: string) => void;
+}
+interface ModalsProps {
+    directMoreModal: DirectMoreModal;
     publicChlModal: any;
-    handleClose: any;
-    handleChange: any;
-    handleCreate: any;
-}) => React.JSX.Element;
+    handleClose: (type: string) => void;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleCreate: () => void;
+}
+export declare const Modals: React.FC<ModalsProps>;
+export {};
 //# sourceMappingURL=modals.d.ts.map

package/lib/components/dashboard/modals.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modals.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/modals.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,eAAO,MAAM,MAAM;;;;;;uBAiHlB,CAAC"}
+{"version":3,"file":"modals.d.ts","sourceRoot":"","sources":["../../../src/components/dashboard/modals.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,OAAO;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,eAAe;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,EAAE,OAAO,EAAE,CAAC;IAC/B,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,UAAU,WAAW;IACjB,eAAe,EAAE,eAAe,CAAC;IACjC,cAAc,EAAE,GAAG,CAAC;IACpB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,YAAY,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyGxC,CAAC"}

package/lib/components/dashboard/modals.js

@@ -1,4 +1,4 @@
-import*as React from'react';import {Modal,Button}from'react-bootstrap';import {useTranslation}from'react-i18next';import {VscChromeClose}from'react-icons/vsc';import {css}from'@emotion/css';import {styleSheet}from'../../style.js';const Modals = ({
+import*as React from'react';import {useTranslation}from'react-i18next';import {VscChromeClose}from'@react-icons/all-files/vsc/VscChromeClose.js';const Modals = ({
   directMoreModal,
   publicChlModal,
   handleClose,
@@ -8,112 +8,71 @@ import*as React from'react';import {Modal,Button}from'react-bootstrap';import {u
   const {
     t
   } = useTranslation();
+  if (!directMoreModal.showDirectMore) {
+    return null;
+  }
   return React.createElement("div", {
-    className: css(styleSheet.customStyle)
-  }, React.createElement(Modal, {
-    show: directMoreModal.showDirectMore,
-    onHide: () => handleClose('publicMore')
-  }, React.createElement(Modal.Header, {
-    style: {
-      backgroundColor: '#2b5ebf',
-      color: 'white',
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, React.createElement(Modal.Title, null, t('messenger_box_browser.direct_messages')), React.createElement("div", {
-    className: css(styleSheet.directMoreStyle)
+    className: "fixed inset-0 z-50 overflow-y-auto"
+  }, React.createElement("div", {
+    className: "flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+  }, React.createElement("div", {
+    className: "fixed inset-0 transition-opacity",
+    "aria-hidden": "true"
+  }, React.createElement("div", {
+    className: "absolute inset-0 bg-gray-500 opacity-75"
+  })), React.createElement("span", {
+    className: "hidden sm:inline-block sm:align-middle sm:h-screen",
+    "aria-hidden": "true"
+  }, "\u200B"), React.createElement("div", {
+    className: "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+  }, React.createElement("div", {
+    className: "bg-primary-600 px-4 py-3 sm:px-6 flex items-center justify-between"
+  }, React.createElement("h3", {
+    className: "text-lg leading-6 font-medium text-white"
+  }, t('messenger_box_browser.direct_messages')), React.createElement("div", {
+    className: "flex items-center space-x-4"
   }, React.createElement("button", {
-    onClick: () => directMoreModal.handleShow('publicChannel', 'Public Channel')
-  }, t('messenger_box_browser.create_channel')), React.createElement(VscChromeClose, {
+    onClick: () => directMoreModal.handleShow('publicChannel', 'Public Channel'),
+    className: "text-white hover:text-gray-200 font-medium"
+  }, t('messenger_box_browser.create_channel')), React.createElement("button", {
     onClick: () => handleClose('publicMore'),
-    fontSize: "16px",
-    style: {
-      marginLeft: 'auto',
-      cursor: 'pointer'
-    }
-  }))), React.createElement(Modal.Body, {
-    className: css(styleSheet.directMoreStyle)
+    className: "text-white hover:text-gray-200"
+  }, React.createElement(VscChromeClose, {
+    className: "h-5 w-5"
+  })))), React.createElement("div", {
+    className: "bg-white px-4 py-5 sm:p-6"
   }, React.createElement("div", {
-    className: "public_more_body"
+    className: "space-y-4"
   }, React.createElement("input", {
-    placeholder: "Search Channels"
+    type: "text",
+    placeholder: t('messenger_box_browser.search_channels'),
+    className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500"
   }), directMoreModal.modalPublicChannels.length > 0 ? React.createElement("div", {
-    className: "loop_style"
-  }, directMoreModal.modalPublicChannels.map((chl, index) => {
-    return React.createElement("div", {
-      className: "loop_div"
-    }, React.createElement("h5", {
-      onClick: () => directMoreModal.handleJoin(chl.id)
-    }, chl.title), React.createElement("button", {
-      onClick: () => directMoreModal.handleJoin(chl.id)
-    }, t('messenger_box_browser.join')));
-  })) : React.createElement("div", {
-    className: "no_channel_message"
+    className: "space-y-2"
+  }, directMoreModal.modalPublicChannels.map((channel, index) => React.createElement("div", {
+    key: index,
+    className: "flex items-center justify-between p-3 hover:bg-gray-50 rounded-md"
+  }, React.createElement("h5", {
+    onClick: () => directMoreModal.handleJoin(channel.id),
+    className: "text-gray-900 font-medium cursor-pointer"
+  }, channel.title), React.createElement("button", {
+    onClick: () => directMoreModal.handleJoin(channel.id),
+    className: "px-3 py-1 text-sm text-primary-600 hover:text-primary-700 font-medium"
+  }, t('messenger_box_browser.join'))))) : React.createElement("div", {
+    className: "text-center py-8"
   }, React.createElement("p", {
-    className: "primary_message"
-  }, React.createElement("span", null, t('messenger_box_browser.no_more_channels_to_join'))), React.createElement("p", {
-    className: "secondary_message"
-  }, React.createElement("span", null, t('messenger_box_browser.click_create_new_channel'))))))), React.createElement(Modal, {
-    show: publicChlModal.show,
-    onHide: () => handleClose('publicChannel')
-  }, React.createElement(Modal.Header, {
-    style: {
-      backgroundColor: '#2b5ebf',
-      color: 'white',
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, React.createElement(Modal.Title, null, t('messenger_box_browser.create_public_channel')), React.createElement(VscChromeClose, {
-    onClick: () => handleClose('publicChannel'),
-    fontSize: "16px",
-    style: {
-      marginLeft: 'auto',
-      cursor: 'pointer'
-    }
-  })), React.createElement(Modal.Body, null, React.createElement("div", {
-    className: "modal_div",
-    style: {
-      textAlign: 'center'
-    }
-  }, React.createElement("label", {
-    style: {
-      width: '20%',
-      fontSize: '15px',
-      fontWeight: 500,
-      marginRight: '5px'
-    }
-  }, t('messenger_box_browser.channel_name')), React.createElement("input", {
-    type: "text",
-    name: "name",
-    style: {
-      width: '62%',
-      height: '35px',
-      border: '1px solid gray'
-    },
-    onChange: e => handleChange(e)
-  }), React.createElement("label", {
-    style: {
-      width: '20%',
-      fontSize: '15px',
-      fontWeight: 500,
-      marginRight: '5px'
-    }
-  }, t('messenger_box_browser.channel_description')), React.createElement("input", {
-    type: "text",
-    name: "description",
-    style: {
-      width: '62%',
-      height: '35px',
-      border: '1px solid gray'
-    },
-    onChange: e => handleChange(e)
-  }))), React.createElement(Modal.Footer, null, React.createElement(Button, {
-    onClick: () => handleClose('publicChannel')
-  }, t('messenger_box_browser.close')), React.createElement(Button, {
+    className: "text-gray-900 font-medium"
+  }, t('messenger_box_browser.no_more_channels_to_join')), React.createElement("p", {
+    className: "mt-1 text-gray-500"
+  }, t('messenger_box_browser.click_create_new_channel'))))), React.createElement("div", {
+    className: "bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
+  }, React.createElement("button", {
+    type: "button",
     onClick: handleCreate,
-    style: {
-      backgroundColor: '#2b5ebf',
-      color: 'white'
-    }
-  }, t('messenger_box_browser.create_channel')))));
+    className: "w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm"
+  }, t('messenger_box_browser.create_channel')), React.createElement("button", {
+    type: "button",
+    onClick: () => handleClose('publicMore'),
+    className: "mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+  }, t('messenger_box_browser.close'))))));
 };export{Modals};//# sourceMappingURL=modals.js.map

package/lib/components/dashboard/modals.js.map

@@ -1 +1 @@
-{"version":3,"file":"modals.js","sources":["../../../src/components/dashboard/modals.tsx"],"sourcesContent":[null],"names":[],"mappings":"sOAOa,MAAA,MAAM,GAAG,CAAC;AACnB,EAAA,eAAc;;AAGN,EAAA,WAAA;cACK;;AAIG,CAAA,KAAA;AACI,EAAA,MAAA;AAGA,IAAA;oBAOP,EAAA;4BACQ,CAAA,KAAA,EAAA;6BACM,CAAA,WAAA;wBACS,CAAA,KAAA,EAAA;AAGJ,IAAA,IAAA,EAAA,eAAA,CAAA,cACI;AACI,IAAA,MAAA,EAAA,MAAA,WAAA,CAAA,YAAA;8BACQ,CAAA,MAAA,EAAA;;gCASjB;AACC,MAAA,KAAA,EAAA,OAAA;;;AAUxB;wBACK,CAAA,KAAA,CAAA,KAAA,EAAM,IAAM,EAAA,CAAA,CAAA,uCAC4B,SAAO,CAAA,aAAgB,CAAA,OAAQ;kBAEnE,CAAA,UAAA,CAAA,eAAW;AACZ,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;aAMH,MAAA,eAAA,CAAA,UAAU,CAAA,eAAA,EAAA,gBAAA;6CACF,CAAA,CAAA,EAAA,KAAS,CAAC,aAAY,CAAA,cAAS,EAAA;AAChC,IAAA,OAAA,EAAA,MAAA,WAAA,CAAA,YAAA,CAAA;AAEQ,IAAA,QAAA,EAAA,MAAA;AACA,IAAA,KAAA,EAAA;AACA,MAAA,UAAA,EAAA,MAAA;AACA,MAAA,MAAA,EAAA;AACH;2BAKD,CAAA,KAAA,CAAA,IAAA,EAAA;AAGI,IAAA,SAAA,EAAA,GAAA,CAAA,UAAA,CAAA,eAAY;AACZ,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACA,IAAA,SAAA,EAAA;yBACH,OACD,EAAA;AAEJ,IAAA,WAAA,EAAA;AAEQ,GAAA,CAAA,EAAA,eAAA,CAAA,mBAAY,CAAA,MAAA,GAAA,CAAA,GAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACZ,IAAA,SAAA,EAAA;AACA,GAAA,EAAA,eAAA,CAAA,mBAAY,CAAG,GAAA,CAAA,CAAA,GAAA,EAAA,KAAA,KAAA;AACf,IAAA,OAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACH,MAAA,SAAA,EAAA;0BAKD,CAAA,IAAA,EAAA;AAGI,MAAA,OAAA,EAAA,MAAA,eAAY,CAAA,UAAA,CAAA,GAAA,CAAA,EAAA;AACZ,KAAA,EAAA,GAAA,CAAA,KAAA,CAAA,EAAA,KAAA,CAAA,aAAc,CAAA,QAAA,EAAA;AACd,MAAA,OAAA,EAAA,MAAA,eAAQ,CAAgB,UAAA,CAAA,GAAA,CAAA,EAAA;AAC3B,KAAA,EAAA,CAAA,CAAA,4BACS,CAAC,CAAC,CAAE;aAIzB,CAAA,aAAA,CAAA,KAAA,EAAA;AACG,IAAA,SAAA,EAAA;wBACC,CAAA,GAAA,EAAA;AAOrB,IAAE,SAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"modals.js","sources":["../../../src/components/dashboard/modals.tsx"],"sourcesContent":[null],"names":[],"mappings":"iJAwBO,MAAM,MAAM,GAA0B,CAAC;AAO1C,EAAA,eAAW;AAEX,EAAA,cAAK;AACD,EAAA,WAAA;cACH;AAED,EAAA;;AAGY,EAAA,MAAA;AACI,IAAA;AAGJ,GAAA,GAAA,cAAA,EAAA;sBAIA,CAAA,cAAA,EAAA;;;4BAKQ,CAAA,KAAA,EAAA;;AAOI,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;;wBAQR,CAAA,KAAA,EAAA;iDACS;AACD,IAAA,aAAA,EAAA;AAKC,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;;AAae,GAAA,CAAA,CAAA,EAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;mEAWK;AAGb,IAAA,aAAA,EAAA;gBAOhB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACI,IAAA,SAAA,EAAA;AAOA,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAYxB,IAAE,SAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/messenger/avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/messenger/avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEpE,KAAK,MAAM,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAG,GAAG,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,MAAM,wCAAgD,MAAM,sBAuBxE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/messenger/avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,WAAW,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEpE,KAAK,MAAM,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,GAAG,CAAC;CACb,CAAC;AAYF,eAAO,MAAM,MAAM,GAAI,qCAA4C,MAAM,sBA6BxE,CAAC"}

package/lib/components/messenger/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/messenger/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAc5E,OAAO,+BAA+B,CAAC;AAKvC,UAAU,UAAU;IAChB,OAAO,EAAE,GAAG,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,UAAU,CAqW7C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/messenger/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAY5E,OAAO,+BAA+B,CAAC;AAIvC,UAAU,UAAU;IAChB,OAAO,EAAE,GAAG,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,UAAU,CAqU7C,CAAC"}