@messenger-box/platform-browser 10.0.3-alpha.7 → 10.0.3-alpha.74

package/src/components/InboxMessage/index.tsx

@@ -3,23 +3,20 @@ import { useSelector } from 'react-redux';
 import { Modal } from 'react-bootstrap';
 import Select from 'react-select';
 import { useTranslation } from 'react-i18next';
-import { VscChromeClose } from 'react-icons/vsc';
-import { AiOutlineMenu } from 'react-icons/ai';
+import { VscChromeClose } from '@react-icons/all-files/vsc/VscChromeClose';
+import { AiOutlineMenu } from '@react-icons/all-files/ai/AiOutlineMenu';
 import { indexOf } from 'lodash-es';
-import { Button, Avatar, Text } from '@chakra-ui/react';
-import { css } from '@emotion/css';
 import {
     useGetAllUsersQuery,
     useGetMessagesQuery,
     useAddDirectChannelMutation,
     useGetChannelsByUserQuery,
     useGetAllChannelQuery,
-} from 'common/lib/generated/generated.js';
+} from 'common/graphql';
 import Messages from './Messages';
 import PopoverComponent from './Popover';
 import InboxDetails from './InboxDetails';
 import InboxSidebar from './InboxSidebar';
-import { stylesheet } from './style';
 
 export default function InboxMessage() {
     const [id, setId] = useState<number>();
@@ -77,8 +74,6 @@ export default function InboxMessage() {
             ]);
         }
     }, [loading, channelData, currentUserId]);
-    // console.log(allChannels)
-    console.log(channel);
 
     const handleSelectMessgae = (item: any) => {
         setShowMessageSide(true);
@@ -99,9 +94,9 @@ export default function InboxMessage() {
                     tempOpt.push({
                         value: { username: `${i.username}`, uid: `${i.id}` },
                         label: (
-                            <div style={{ cursor: 'pointer' }}>
-                                <Avatar width="40px" backgroundColor="grey" size="42" borderRadius="50%"></Avatar>
-                                <Text color="black">{i.username}</Text>
+                            <div className="flex items-center cursor-pointer">
+                                <div className="w-10 h-10 bg-gray-400 rounded-full"></div>
+                                <span className="ml-2 text-black">{i.username}</span>
                             </div>
                         ),
                     });
@@ -113,7 +108,7 @@ export default function InboxMessage() {
             });
         }
     }, [usersRes.loading, usersRes.data]);
-    console.log(user);
+
     useEffect(() => {
         if (!loading) {
             setMessageList(data.messages.data);
@@ -140,7 +135,6 @@ export default function InboxMessage() {
         if (selectedValues) {
             let uids = [];
             let dName = '';
-            console.log(selectedChannel?.value);
             if (selectedValues.length > 1) {
                 selectedValues.forEach((i) => {
                     uids.push(i.value.uid);
@@ -179,24 +173,24 @@ export default function InboxMessage() {
         }
     };
     return (
-        <div className={css(stylesheet.inboxStyles)}>
-            <div className={toggleDrawer ? 'inbox-sidebar-active' : 'inbox-sidebar'}>
-                <div className="conversations">
-                    <div className="header-section">
-                        <div className="allmessage-header">
-                            <h3>{t('messenger_box_browser.messages')}</h3>
-                            <Button
-                                as="a"
-                                borderRadius="50%"
-                                width="30px"
-                                height="30px"
-                                _hover={{ backgroundColor: 'rgb(221, 221, 221)' }}
-                                onClick={() => {
-                                    setShowPopover(!showPopover);
-                                }}
+        <div className="flex w-full h-[75vh] bg-white">
+            <div
+                className={`${
+                    toggleDrawer ? 'w-1/5' : 'w-1/4'
+                } h-full flex flex-col justify-between border-r border-gray-200`}
+            >
+                <div className="w-full">
+                    <div className="mb-5 pb-2 border-b border-gray-200 h-14">
+                        <div className="flex items-center justify-between p-2.5">
+                            <h3 className="ml-4 mt-4 text-black font-bold text-base">
+                                {t('messenger_box_browser.messages')}
+                            </h3>
+                            <button
+                                onClick={() => setShowPopover(!showPopover)}
+                                className="w-7 h-7 rounded-full hover:bg-gray-200 flex items-center justify-center"
                             >
-                                <AiOutlineMenu style={{ fontSize: '20px', color: 'black' }} />
-                            </Button>
+                                <AiOutlineMenu className="text-xl text-black" />
+                            </button>
                             {showPopover ? <PopoverComponent toggleDrawer={toggleDrawer} /> : ''}
                         </div>
                     </div>
@@ -209,30 +203,22 @@ export default function InboxMessage() {
                         users={user}
                     />
                 </div>
-                <div className="add-conversations">
+                <div className="p-5 w-full border-t border-gray-200">
                     <Modal show={showModal} onHide={handleClose}>
-                        <Modal.Header
-                            style={{
-                                backgroundColor: '#2b5ebf',
-                                color: 'white',
-                                display: 'flex',
-                                alignItems: 'center',
-                            }}
-                        >
+                        <Modal.Header className="bg-[#2b5ebf] text-white flex items-center">
                             <Modal.Title>{t('messenger_box_browser.add_conversations')}</Modal.Title>
                             <VscChromeClose
                                 onClick={() => handleClose()}
-                                fontSize="16px"
-                                style={{ marginLeft: 'auto', cursor: 'pointer' }}
+                                className="ml-auto text-base cursor-pointer"
                             />
                         </Modal.Header>
                         <Modal.Body>
-                            <div className={css(stylesheet.modelStyle as any)}>
-                                <div className="root_modal">
-                                    <div className="root_first">
-                                        <div className="search_box">
+                            <div className="flex flex-col h-[calc(90vh-120px)] w-full overflow-x-hidden p-0 py-4 max-h-[calc(90vh-80px)] overflow-auto">
+                                <div className="flex flex-col h-[calc(90vh-120px)] w-full">
+                                    <div className="my-1.5 w-full">
+                                        <div className="flex">
                                             <Select
-                                                className="temp"
+                                                className="w-full"
                                                 value={selectedValues?.value}
                                                 onChange={handleSelect}
                                                 components={{
@@ -244,10 +230,15 @@ export default function InboxMessage() {
                                                 isMulti={true}
                                                 menuIsOpen={true}
                                             />
-                                            <button onClick={handleGo}>Go</button>
+                                            <button
+                                                onClick={handleGo}
+                                                className="max-w-[70px] w-full ml-4 bg-[#166de0] text-white border-none"
+                                            >
+                                                Go
+                                            </button>
                                         </div>
-                                        <div className="mid_line">
-                                            <p>
+                                        <div className="mt-2.5">
+                                            <p className="text-[#3d3c40] opacity-60 text-sm">
                                                 {t('messenger_box_browser.use_browse_or_select')}
                                                 <span> </span>
                                             </p>
@@ -257,31 +248,25 @@ export default function InboxMessage() {
                             </div>
                         </Modal.Body>
                     </Modal>
-                    <Button
-                        size="large"
-                        className="conversation-btn"
-                        backgroundColor="#1890ff"
-                        height="40px"
-                        borderRadius="3px"
-                        border="none"
-                        color="white"
-                        variant="outline"
-                        fontSize="20px"
+                    <button
                         onClick={() => setShowModal(true)}
+                        className="w-full h-10 bg-[#1890ff] rounded px-4 py-2 text-white text-lg hover:bg-[#40a9ff] transition-colors"
                     >
                         {t('messenger_box_browser.add_conversations')}
-                    </Button>
+                    </button>
                 </div>
             </div>
-            <div className={`msg-container${toggleDrawer ? '-active' : ''}`}>
-                <div className="border"></div>
-                {showMessageSide == true ? (
-                    <Messages id={id} user={user} userId={userId} currentUser={currentUser} />
-                ) : (
-                    ''
-                )}
+            <div className={`${toggleDrawer ? 'w-3/5' : 'w-4/5'}`}>
+                <div className="h-14 w-full border-b border-gray-200"></div>
+                {showMessageSide && <Messages id={id} user={user} userId={userId} currentUser={currentUser} />}
             </div>
-            <div className={toggleDrawer ? 'inbox-details' : 'inbox-details-active'}>
+            <div
+                className={`${
+                    toggleDrawer
+                        ? 'w-1/5 border-l border-gray-200 transition-all duration-500'
+                        : 'w-0 opacity-0 overflow-hidden transition-all duration-500'
+                }`}
+            >
                 <InboxDetails handleToggle={handleToggle} toggleDrawer={toggleDrawer} />
             </div>
         </div>

package/src/components/dashboard/menu_header.tsx

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

package/src/components/dashboard/modals/direct_modal.tsx

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