@messenger-box/platform-browser 10.0.3-alpha.54 → 10.0.3-alpha.61

package/src/components/dashboard/modals.tsx

@@ -1,121 +1,130 @@
 import * as React from 'react';
-import { Button, Modal } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { VscChromeClose } from 'react-icons/vsc';
-import { css } from '@emotion/css';
-import { styleSheet } from '../../style';
 
-export const Modals = ({ directMoreModal, publicChlModal, handleClose, handleChange, handleCreate }) => {
+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: (type: string) => void;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleCreate: () => void;
+}
+
+export const Modals: React.FC<ModalsProps> = ({
+    directMoreModal,
+    publicChlModal,
+    handleClose,
+    handleChange,
+    handleCreate,
+}) => {
     const { t } = useTranslation();
+
+    if (!directMoreModal.showDirectMore) {
+        return null;
+    }
+
     return (
-        <div className={css(styleSheet.customStyle as any)}>
-            <Modal show={directMoreModal.showDirectMore} onHide={() => handleClose('publicMore')}>
-                <Modal.Header
-                    style={{ backgroundColor: '#2b5ebf', color: 'white', display: 'flex', alignItems: 'center' }}
-                >
-                    <Modal.Title>{t('messenger_box_browser.direct_messages')}</Modal.Title>
-                    <div className={css(styleSheet.directMoreStyle as any)}>
-                        <button onClick={() => directMoreModal.handleShow('publicChannel', 'Public Channel')}>
-                            {t('messenger_box_browser.create_channel')}
-                        </button>
-                        <VscChromeClose
-                            onClick={() => handleClose('publicMore')}
-                            fontSize="16px"
-                            style={{ marginLeft: 'auto', cursor: 'pointer' }}
-                        />
+        <div className="fixed inset-0 z-50 overflow-y-auto">
+            <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+                <div className="fixed inset-0 transition-opacity" aria-hidden="true">
+                    <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
+                </div>
+
+                <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+                    &#8203;
+                </span>
+
+                <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">
+                    <div className="bg-primary-600 px-4 py-3 sm:px-6 flex items-center justify-between">
+                        <h3 className="text-lg leading-6 font-medium text-white">
+                            {t('messenger_box_browser.direct_messages')}
+                        </h3>
+                        <div className="flex items-center space-x-4">
+                            <button
+                                onClick={() => directMoreModal.handleShow('publicChannel', 'Public Channel')}
+                                className="text-white hover:text-gray-200 font-medium"
+                            >
+                                {t('messenger_box_browser.create_channel')}
+                            </button>
+                            <button
+                                onClick={() => handleClose('publicMore')}
+                                className="text-white hover:text-gray-200"
+                            >
+                                <VscChromeClose className="h-5 w-5" />
+                            </button>
+                        </div>
                     </div>
-                </Modal.Header>
-                <Modal.Body className={css(styleSheet.directMoreStyle as any)}>
-                    <div className="public_more_body">
-                        <input placeholder="Search Channels" />
-                        {directMoreModal.modalPublicChannels.length > 0 ? (
-                            <div className="loop_style">
-                                {directMoreModal.modalPublicChannels.map((chl, index) => {
-                                    return (
-                                        <div className="loop_div">
-                                            <h5 onClick={() => directMoreModal.handleJoin(chl.id)}>{chl.title}</h5>
-                                            <button onClick={() => directMoreModal.handleJoin(chl.id)}>
+                    <div className="bg-white px-4 py-5 sm:p-6">
+                        <div className="space-y-4">
+                            <input
+                                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 ? (
+                                <div className="space-y-2">
+                                    {directMoreModal.modalPublicChannels.map((channel, index) => (
+                                        <div
+                                            key={index}
+                                            className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-md"
+                                        >
+                                            <h5
+                                                onClick={() => directMoreModal.handleJoin(channel.id)}
+                                                className="text-gray-900 font-medium cursor-pointer"
+                                            >
+                                                {channel.title}
+                                            </h5>
+                                            <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')}
                                             </button>
                                         </div>
-                                    );
-                                })}
-                            </div>
-                        ) : (
-                            <div className="no_channel_message">
-                                <p className="primary_message">
-                                    <span>{t('messenger_box_browser.no_more_channels_to_join')}</span>
-                                </p>
-                                <p className="secondary_message">
-                                    <span>{t('messenger_box_browser.click_create_new_channel')}</span>
-                                </p>
-                            </div>
-                        )}
+                                    ))}
+                                </div>
+                            ) : (
+                                <div className="text-center py-8">
+                                    <p className="text-gray-900 font-medium">
+                                        {t('messenger_box_browser.no_more_channels_to_join')}
+                                    </p>
+                                    <p className="mt-1 text-gray-500">
+                                        {t('messenger_box_browser.click_create_new_channel')}
+                                    </p>
+                                </div>
+                            )}
+                        </div>
                     </div>
-                </Modal.Body>
-            </Modal>
-            <Modal show={publicChlModal.show} onHide={() => handleClose('publicChannel')}>
-                <Modal.Header
-                    style={{ backgroundColor: '#2b5ebf', color: 'white', display: 'flex', alignItems: 'center' }}
-                >
-                    <Modal.Title>{t('messenger_box_browser.create_public_channel')}</Modal.Title>
-                    <VscChromeClose
-                        onClick={() => handleClose('publicChannel')}
-                        fontSize="16px"
-                        style={{ marginLeft: 'auto', cursor: 'pointer' }}
-                    />
-                </Modal.Header>
-                <Modal.Body>
-                    <div className="modal_div" style={{ textAlign: 'center' }}>
-                        <label
-                            style={{
-                                width: '20%',
-                                fontSize: '15px',
-                                fontWeight: 500,
-                                marginRight: '5px',
-                            }}
+                    <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                        <button
+                            type="button"
+                            onClick={handleCreate}
+                            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.channel_name')}
-                        </label>
-                        <input
-                            type="text"
-                            name="name"
-                            style={{
-                                width: '62%',
-                                height: '35px',
-                                border: '1px solid gray',
-                            }}
-                            onChange={(e) => handleChange(e)}
-                        />
-                        <label
-                            style={{
-                                width: '20%',
-                                fontSize: '15px',
-                                fontWeight: 500,
-                                marginRight: '5px',
-                            }}
+                            {t('messenger_box_browser.create_channel')}
+                        </button>
+                        <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.channel_description')}
-                        </label>
-                        <input
-                            type="text"
-                            name="description"
-                            style={{
-                                width: '62%',
-                                height: '35px',
-                                border: '1px solid gray',
-                            }}
-                            onChange={(e) => handleChange(e)}
-                        />
+                            {t('messenger_box_browser.close')}
+                        </button>
                     </div>
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button onClick={() => handleClose('publicChannel')}>{t('messenger_box_browser.close')}</Button>
-                    <Button onClick={handleCreate} style={{ backgroundColor: '#2b5ebf', color: 'white' }}>
-                        {t('messenger_box_browser.create_channel')}
-                    </Button>
-                </Modal.Footer>
-            </Modal>
+                </div>
+            </div>
         </div>
     );
 };

package/src/components/messenger/avatar/index.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { css } from '@emotion/css';
-import { styleSheet } from './style';
 
 type IAvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
@@ -10,29 +8,45 @@ type IProps = {
     url?: string | any;
     size?: IAvatarSize;
     username: string;
-    time:  any;
+    time: any;
+};
+
+const sizeClasses = {
+    xxs: 'w-6 h-6',
+    xs: 'w-8 h-8',
+    sm: 'w-10 h-10',
+    md: 'w-12 h-12',
+    lg: 'w-14 h-14',
+    xl: 'w-16 h-16',
+    xxl: 'w-20 h-20',
 };
 
 export const Avatar = ({ url, size = 'md', text, username, time }: IProps) => {
-    const classes = classNames(`Avatar Avatar-${size}`);
+    const avatarSizeClass = sizeClasses[size];
 
     if (text) {
         return (
-            <div className={css(styleSheet.avatarStyles)}>
-                <div className={classes + ` Avatar-plain`} data-content={text} />
+            <div className="flex items-center">
+                <div
+                    className={classNames(
+                        'rounded-full bg-gray-200 flex items-center justify-center text-gray-600',
+                        avatarSizeClass,
+                    )}
+                    data-content={text}
+                />
             </div>
         );
     }
     return (
-        <div className={css(styleSheet.avatarStyles as any)}>
-            <a href="">
-                <img src={url} className={classes} alt="" />
+        <div className="flex items-center space-x-3">
+            <a href="#" className="block">
+                <img src={url} className={classNames('rounded-full object-cover', avatarSizeClass)} alt={username} />
             </a>
-            <div className="username">
-                <a href="">
-                    <h4>{username}</h4>
+            <div className="flex flex-col">
+                <a href="#" className="hover:underline">
+                    <h4 className="font-medium text-gray-900">{username}</h4>
                 </a>
-                <p>{time}</p>
+                <p className="text-sm text-gray-500">{time}</p>
             </div>
         </div>
     );