@messenger-box/platform-browser 10.0.3-alpha.56 → 10.0.3-alpha.62

package/src/components/InboxMessage/Messages/index.tsx

@@ -3,11 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { BiImage } from 'react-icons/bi';
 import { BiArchiveIn } from 'react-icons/bi';
 import { BsFillArrowUpCircleFill } from 'react-icons/bs';
-import { css } from '@emotion/css';
-import { Button, InputGroup, InputRightElement, Textarea, Tooltip } from '@chakra-ui/react';
 import { useGetMessagesQuery, useSendMessagesMutation } from 'common/graphql';
 import MsgList from '../MessagesList';
-import { styleSheet } from './styles';
 
 export default function Messages({ id, user, userId, currentUser }: any) {
     const [message, setMessage] = useState('');
@@ -19,18 +16,22 @@ export default function Messages({ id, user, userId, currentUser }: any) {
             channelId: id,
         },
     });
+
     useEffect(() => {
         if (!loading) {
             setMessageList(data.messages.data);
         }
     }, [loading, id, data?.messages?.data, messageList]);
-    const [sendMsg, {}] = useSendMessagesMutation({
+
+    const [sendMsg] = useSendMessagesMutation({
         context: {},
     });
+
     const messagesEndRef = useRef(null);
     const scrollToBottom = () => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     };
+
     const handleEnterBtn = () => {
         if (message) {
             sendMsg({
@@ -47,10 +48,11 @@ export default function Messages({ id, user, userId, currentUser }: any) {
             setMessage('');
         }
     };
+
     const item = user?.find((element) => {
         return element.id !== userId;
     });
-    // console.log(textarea)
+
     const handleTextareaHeight = (e) => {
         if (e.key === 'Enter' && message !== '') {
             setHeight(40 + message.split('\n').length * 10 + 'px');
@@ -58,101 +60,60 @@ export default function Messages({ id, user, userId, currentUser }: any) {
             setHeight('40px');
         }
     };
+
     return (
-        <div className={css(styleSheet.messageListStyles as any)}>
-            <div className="message-container">
-                <div className="message-username">
-                    <h2>{item?.username}</h2>
-                    <div>
-                        <Tooltip
-                            label={t('messenger_box_browser.archive')}
-                            placement="bottom-end"
-                            backgroundColor="black"
-                            // bg="white"
-                            display="flex"
-                            alignItems="center"
-                            width="60px"
-                            borderRadius="10px"
-                            fontSize="15px"
-                            height="40px"
-                            justifyContent="center"
-                            marginTop="5px"
-                            color="white"
-                            boxShadow="0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)"
-                            hasArrow={true}
+        <div className="flex flex-col h-full bg-white">
+            <div className="flex-1 overflow-hidden">
+                <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
+                    <h2 className="text-lg font-semibold">{item?.username}</h2>
+                    <div className="relative group">
+                        <button
+                            className="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200 group-hover:bg-gray-100"
+                            onClick={handleEnterBtn}
+                            title={t('messenger_box_browser.archive')}
                         >
-                            <Button
-                                border="none"
-                                bg="none"
-                                width="30px"
-                                height="30px"
-                                onClick={handleEnterBtn}
-                                borderRadius="50%"
-                                _hover={{ backgroundColor: 'rgb(221, 221, 221)' }}
-                            >
-                                <BiArchiveIn />
-                            </Button>
-                        </Tooltip>
+                            <BiArchiveIn className="w-5 h-5 text-gray-600" />
+                        </button>
+                        <div className="absolute hidden group-hover:block -bottom-10 right-0 px-2 py-1 text-sm text-white bg-black rounded shadow-lg">
+                            {t('messenger_box_browser.archive')}
+                        </div>
                     </div>
                 </div>
-                <div className="message-row">
+                <div className="flex flex-col h-[calc(100vh-200px)]">
                     <MsgList id={id} messageList={messageList} user={user} currentUser={currentUser} />
                     <div ref={messagesEndRef}></div>
-                    <div className="message-input">
-                        <Tooltip
-                            label={t('messenger_box_browser.image')}
-                            placement="top"
-                            // bg="white"
-                            display="flex"
-                            alignItems="center"
-                            width="60px"
-                            borderRadius="10px"
-                            fontSize="15px"
-                            height="40px"
-                            justifyContent="center"
-                            marginTop="5px"
-                            color="black"
-                            boxShadow="0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)"
-                            hasArrow={true}
-                        >
-                            <Button
-                                border="none"
-                                borderRadius="50%"
-                                bg="none"
-                                marginRight="5px"
-                                height="40px"
-                                width="40px"
-                                _hover={{ backgroundColor: 'rgb(221, 221, 221)' }}
-                            >
-                                <BiImage color="#464646" style={{ fontSize: '25px' }} />
-                            </Button>
-                        </Tooltip>
-                        <InputGroup size="md">
-                            <Textarea
-                                placeholder={t('messenger_box_browser.type_your_message')}
-                                value={message}
-                                height={height}
-                                onKeyUp={handleTextareaHeight}
-                                // height={enter ? message.split('\n').length * 10 + 'px' : '40px'}
-                                onChange={(e) => setMessage(e.target.value)}
-                            />
-                            <InputRightElement>
-                                <Button
-                                    border="none"
-                                    bg="none"
-                                    onClick={handleEnterBtn}
-                                    position="relative"
-                                    right="53px"
-                                    top="6px"
+                    <div className="p-4 border-t border-gray-200">
+                        <div className="flex items-center space-x-2">
+                            <div className="relative group">
+                                <button
+                                    className="p-2 rounded-full hover:bg-gray-100 transition-colors duration-200"
+                                    title={t('messenger_box_browser.image')}
                                 >
-                                    {message !== '' ? (
-                                        <BsFillArrowUpCircleFill color="rgb(34, 34, 34)" style={{ fontSize: '25px' }} />
-                                    ) : (
-                                        ''
-                                    )}
-                                </Button>
-                            </InputRightElement>
-                        </InputGroup>
+                                    <BiImage className="w-6 h-6 text-gray-600" />
+                                </button>
+                                <div className="absolute hidden group-hover:block -top-10 left-1/2 -translate-x-1/2 px-2 py-1 text-sm text-black bg-white rounded shadow-lg">
+                                    {t('messenger_box_browser.image')}
+                                </div>
+                            </div>
+                            <div className="flex-1 relative">
+                                <textarea
+                                    className="w-full px-4 py-2 text-gray-700 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
+                                    placeholder={t('messenger_box_browser.type_your_message')}
+                                    value={message}
+                                    style={{ height }}
+                                    onKeyUp={handleTextareaHeight}
+                                    onChange={(e) => setMessage(e.target.value)}
+                                />
+                                {message !== '' && (
+                                    <button
+                                        className="absolute right-3 bottom-2 p-1 hover:bg-gray-100 rounded-full transition-colors duration-200"
+                                        onClick={handleEnterBtn}
+                                    >
+                                        <BsFillArrowUpCircleFill className="w-6 h-6 text-gray-800" />
+                                    </button>
+                                )}
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

package/src/components/InboxMessage/MessagesList/index.tsx

@@ -1,93 +1,81 @@
-import React, { useState, useEffect } from 'react';
-import {
-    Avatar,
-    Box,
-    Text,
-    Modal,
-    ModalOverlay,
-    ModalContent,
-    ModalBody,
-    ModalCloseButton,
-    useDisclosure,
-} from '@chakra-ui/react';
+import React, { useState } from 'react';
 import Moment from 'moment';
 import { AiFillFlag } from 'react-icons/ai';
 import UserModalContent from '../UserModalContent';
 
 export default function MsgList({ messageList, currentUser }: any) {
-    const { isOpen, onOpen, onClose } = useDisclosure();
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedUser, setSelectedUser] = useState<any>(null);
+
+    const openModal = (element: any) => {
+        setSelectedUser(element);
+        setIsOpen(true);
+    };
+
+    const closeModal = () => {
+        setIsOpen(false);
+        setSelectedUser(null);
+    };
+
     return (
         <>
-            {messageList?.map((element, index) => {
-                // if (message.author.username == user?.username ) {
-                return (
-                    <div className="message-list" key={index}>
-                        <Box display="flex" width="100%">
-                            <Avatar
-                                width="40px"
-                                height="40px"
-                                backgroundColor="grey"
-                                borderRadius="50%"
-                                src={element?.imageUrl ? element?.imageUrl : ''}
-                                marginRight="15px"
-                                onClick={onOpen}
-                            ></Avatar>
-                            <Modal isOpen={isOpen} onClose={onClose} motionPreset="slideInBottom">
-                                <ModalOverlay />
-                                <ModalContent
-                                    backgroundColor="white"
-                                    width="1036px"
-                                    position="absolute"
-                                    left="530px"
-                                    top="100px"
-                                    height="700px"
-                                    borderRadius="10px"
-                                    boxShadow="0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)"
+            {messageList?.map((element, index) => (
+                <div className="message-list" key={index}>
+                    <div className="flex w-full">
+                        <div
+                            className="w-10 h-10 bg-gray-400 rounded-full mr-4 cursor-pointer overflow-hidden"
+                            onClick={() => openModal(element)}
+                        >
+                            {element?.imageUrl && (
+                                <img
+                                    src={element.imageUrl}
+                                    alt={element?.author?.username}
+                                    className="w-full h-full object-cover"
+                                />
+                            )}
+                        </div>
+
+                        <div className="w-full">
+                            <p className="text-xl text-black">{element?.author?.username}</p>
+                            <div className="flex justify-between">
+                                <p className="text-gray-500">{element?.message}</p>
+                                {currentUser !== element?.author?.username && <AiFillFlag className="text-black" />}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ))}
+
+            {/* Modal */}
+            {isOpen && (
+                <div className="fixed inset-0 z-50 overflow-y-auto">
+                    <div className="flex items-center justify-center min-h-screen px-4">
+                        {/* Overlay */}
+                        <div
+                            className="fixed inset-0 bg-black bg-opacity-30 transition-opacity"
+                            onClick={closeModal}
+                        ></div>
+
+                        {/* Modal content */}
+                        <div className="relative bg-white w-[1036px] h-[700px] rounded-lg shadow-2xl">
+                            <div className="flex justify-between border-b border-gray-200 py-4">
+                                <button
+                                    onClick={closeModal}
+                                    className="ml-4 text-black hover:text-gray-700 w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100"
                                 >
-                                    <Box
-                                        display="flex"
-                                        justifyContent="space-between"
-                                        borderBottom="1px solid rgb(221, 221, 221)"
-                                        paddingBottom="15px"
-                                        paddingTop="15px"
-                                    >
-                                        <ModalCloseButton
-                                            as="a"
-                                            width="30px"
-                                            marginLeft="10px"
-                                            color="black"
-                                            _hover={{ color: 'black' }}
-                                        />
-                                    </Box>
-                                    <ModalBody>
-                                        <UserModalContent
-                                            username={element?.author?.username}
-                                            image={element.imageUrl ? element.imageUrl : ''}
-                                        />
-                                    </ModalBody>
-                                </ModalContent>
-                            </Modal>
-                            <Box width="100%">
-                                <Text fontSize="20px" color="black">
-                                    {element?.author?.username}
-                                </Text>
-                                <Box display="flex" justifyContent="space-between">
-                                    <Text color="grey">{element?.message}</Text>
-                                    {currentUser !== element?.author?.username ? <AiFillFlag color="black" /> : ''}
-                                </Box>
-                            </Box>
-                        </Box>
+                                    ×
+                                </button>
+                            </div>
+                            <div className="p-6">
+                                <UserModalContent
+                                    username={selectedUser?.author?.username}
+                                    image={selectedUser?.imageUrl || ''}
+                                />
+                            </div>
+                        </div>
                     </div>
-                );
-                // }
-                // else {
-                //     return (
-                //         <div className='message-list'>
-                //             {element?.sendTo == user.username  ? <Comment author={<p className='username'>{element?.author?.username}</p>} key={index} datetime={Moment().format('HH mm: A')} avatar={<Avatar>{element?.author?.username.charAt(0)}</Avatar>} content={<div className="message"><p>{element.message}</p></div>} /> : '' }
-                //         </div>
-                //     )
-                // }
-            })}
+                </div>
+            )}
         </>
     );
 }

package/src/components/InboxMessage/Popover/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Box } from '@chakra-ui/react';
-import { css } from '@emotion/css';
-import { styleSheet } from './style';
 
-export default function Popover({ toggleDrawer }: any) {
+interface PopoverProps {
+    toggleDrawer: boolean;
+}
+
+export default function Popover({ toggleDrawer }: PopoverProps) {
     const { t } = useTranslation();
 
     const content = [
@@ -20,41 +21,16 @@ export default function Popover({ toggleDrawer }: any) {
             total: '0',
         },
     ];
+
     return (
-        <div className={css(styleSheet.customPopoverStyles(toggleDrawer) as any)}>
-            {content?.map((item, index) => {
-                if (!item.total) {
-                    return (
-                        <Box _hover={{ bg: '#edecec' }} className="popover-style" key={index}>
-                            <Button
-                                border="none"
-                                fontSize="15px"
-                                color="#282121"
-                                variant="link"
-                                bg="none"
-                                height="30px"
-                            >
-                                {item.name}
-                            </Button>
-                        </Box>
-                    );
-                } else {
-                    return (
-                        <Box _hover={{ bg: '#edecec' }} className="popover-style" key={index}>
-                            <Button
-                                border="none"
-                                fontSize="15px"
-                                color="#282121"
-                                variant="link"
-                                bg="none"
-                                height="30px"
-                            >
-                                {item.name + `(${item.total})`}
-                            </Button>
-                        </Box>
-                    );
-                }
-            })}
+        <div className={`absolute z-50 bg-white shadow-lg rounded-md py-2 ${toggleDrawer ? 'right-0' : 'left-0'}`}>
+            {content?.map((item, index) => (
+                <div key={index} className="hover:bg-gray-100 px-4 py-1">
+                    <button className="text-[15px] text-[#282121] h-[30px] w-full text-left focus:outline-none">
+                        {item.total ? `${item.name} (${item.total})` : item.name}
+                    </button>
+                </div>
+            ))}
         </div>
     );
 }

package/src/components/InboxMessage/UserModalContent/index.tsx

@@ -1,61 +1,58 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { AiOutlineSecurityScan, AiOutlineUser } from 'react-icons/ai';
+import { AiOutlineSecurityScan } from 'react-icons/ai';
 import { FiCheck } from 'react-icons/fi';
 import { BsFillStarFill } from 'react-icons/bs';
-import { Avatar, Button, Text } from '@chakra-ui/react';
-import { css } from '@emotion/css';
-import { styleSheet } from './style';
 
 export default function UserModalContent({ username, imageUrl }: any) {
     const { t } = useTranslation();
     return (
-        <div className={css(styleSheet.UserContentStyles)}>
-            <div className="user-info">
-                <div className="avatar">
-                    <Avatar
-                        size="large"
-                        src={imageUrl !== '' ? imageUrl : ''}
-                        backgroundColor="grey"
-                        width="200px"
-                        height="200px"
-                        borderRadius="50%"
-                        marginBottom="10px"
-                    />
-                    <a href="#">{t('messenger_box_browser.update_photo')}</a>
+        <div className="p-6">
+            <div className="flex flex-col items-center mb-8">
+                <div className="flex flex-col items-center mb-6">
+                    <img className="w-48 h-48 rounded-full mb-2 bg-gray-300" src={imageUrl || ''} alt={username} />
+                    <a href="#" className="text-blue-600 hover:text-blue-800">
+                        {t('messenger_box_browser.update_photo')}
+                    </a>
                 </div>
-                <AiOutlineSecurityScan style={{ width: '24px', height: '24px', color: 'black' }} />
-                <div className="identify">
-                    <h3>{t('messenger_box_browser.identity_verification')}</h3>
-                    <Text as="p" color="black">
-                        {t('messenger_box_browser.show_others_you_are_really_you')}
-                    </Text>
-                    <Button className="get-badge-btn" color="black" bg="transparent">
-                        {t('messenger_box_browser.get_the_badge')}
-                    </Button>
+                <div className="flex items-center mb-6">
+                    <AiOutlineSecurityScan className="w-6 h-6 text-black mr-3" />
+                    <div className="flex flex-col">
+                        <h3 className="text-lg font-semibold mb-2">
+                            {t('messenger_box_browser.identity_verification')}
+                        </h3>
+                        <p className="text-black mb-3">{t('messenger_box_browser.show_others_you_are_really_you')}</p>
+                        <button className="text-black border border-black px-4 py-2 rounded hover:bg-gray-100">
+                            {t('messenger_box_browser.get_the_badge')}
+                        </button>
+                    </div>
                 </div>
-                <div className="user-conformation">
-                    <h3>{t('messenger_box_browser.username_confirmed', { username: username })}</h3>
-                    <div className="email-address">
-                        <FiCheck color="black" />
-                        <Text as="p" color="black">
-                            {t('messenger_box_browser.email_address')}
-                        </Text>
+                <div className="w-full">
+                    <h3 className="text-lg font-semibold mb-3">
+                        {t('messenger_box_browser.username_confirmed', { username })}
+                    </h3>
+                    <div className="flex items-center">
+                        <FiCheck className="text-black mr-2" />
+                        <p className="text-black">{t('messenger_box_browser.email_address')}</p>
                     </div>
                 </div>
             </div>
-            <div className="user-details">
-                <div className="user">
-                    <h2>{t('messenger_box_browser.hi_username', { username: username })}</h2>
-                    <Text as="p">{t('messenger_box_browser.joined_in_date', { date: '2021' })}</Text>
-                    <a>{t('messenger_box_browser.edit_profile')}</a>
-                    <h3>
-                        <BsFillStarFill color="black" />
+            <div className="border-t pt-6">
+                <div className="mb-6">
+                    <h2 className="text-2xl font-bold mb-2">{t('messenger_box_browser.hi_username', { username })}</h2>
+                    <p className="text-gray-600 mb-2">{t('messenger_box_browser.joined_in_date', { date: '2021' })}</p>
+                    <a href="#" className="text-blue-600 hover:text-blue-800 block mb-4">
+                        {t('messenger_box_browser.edit_profile')}
+                    </a>
+                    <h3 className="flex items-center text-lg font-semibold">
+                        <BsFillStarFill className="text-black mr-2" />
                         {t('messenger_box_browser.reviews')}
                     </h3>
                 </div>
-                <div className="reviews">
-                    <a>{t('messenger_box_browser.reviews_by_you')}</a>
+                <div>
+                    <a href="#" className="text-blue-600 hover:text-blue-800">
+                        {t('messenger_box_browser.reviews_by_you')}
+                    </a>
                 </div>
             </div>
         </div>