Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-29 22:37:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add theme

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-18 19:16:45 +02:00
parent af1d44990a
commit 2013561db7
6 changed files with 845 additions and 773 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Chat/ChatContainer.tsx
View File

@ -1,14 +1,12 @@
import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroller";
import { import {
MainContainer, MainContainer,
ChatContainer, ChatContainer,
MessageList, MessageList,
Message, Message,
MessageInput, MessageInput,
Avatar Avatar,
} from "@chatscope/chat-ui-kit-react"; } from '@chatscope/chat-ui-kit-react';
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css"; import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
export const ChatContainerComp = ({ messages }) => { export const ChatContainerComp = ({ messages }) => {
// const [messages, setMessages] = useState([ // const [messages, setMessages] = useState([
@ -26,7 +24,7 @@ export const ChatContainerComp = ({messages}) => {
// }; // };
return ( return (
<div style={{ height: "500px", width: "300px" }}> <div style={{ height: '500px', width: '300px' }}>
<MainContainer> <MainContainer>
<ChatContainer> <ChatContainer>
<MessageList> <MessageList>
@ -35,13 +33,15 @@ export const ChatContainerComp = ({messages}) => {
key={msg.id} key={msg.id}
model={{ model={{
message: msg.text, message: msg.text,
sentTime: "just now", sentTime: 'just now',
sender: msg.senderName, sender: msg.senderName,
direction: 'incoming', direction: 'incoming',
position: "single" position: 'single',
}} }}
> >
{msg.direction === "incoming" && <Avatar name={msg.senderName} />} {msg.direction === 'incoming' && (
<Avatar name={msg.senderName} />
)}
</Message> </Message>
))} ))}
</MessageList> </MessageList>
@ -52,5 +52,3 @@ export const ChatContainerComp = ({messages}) => {
</div> </div>
); );
}; };

205
src/components/Chat/ChatList.tsx
View File

@ -1,23 +1,15 @@
import React, { import { useCallback, useState, useEffect, useRef, useMemo } from 'react';
useCallback, import { useVirtualizer } from '@tanstack/react-virtual';
useState, import { MessageItem } from './MessageItem';
useEffect, import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
useRef, import { Box, Typography, useTheme } from '@mui/material';
useMemo, import { ChatOptions } from './ChatOptions';
} from "react"; import ErrorBoundary from '../../common/ErrorBoundary';
import { useVirtualizer } from "@tanstack/react-virtual";
import { MessageItem } from "./MessageItem";
import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
import { useInView } from "react-intersection-observer";
import { Box, Typography } from "@mui/material";
import { ChatOptions } from "./ChatOptions";
import ErrorBoundary from "../../common/ErrorBoundary";
export const ChatList = ({ export const ChatList = ({
initialMessages, initialMessages,
myAddress, myAddress,
tempMessages, tempMessages,
chatId,
onReply, onReply,
onEdit, onEdit,
handleReaction, handleReaction,
@ -29,7 +21,7 @@ export const ChatList = ({
enableMentions, enableMentions,
openQManager, openQManager,
hasSecretKey, hasSecretKey,
isPrivate isPrivate,
}) => { }) => {
const parentRef = useRef(); const parentRef = useRef();
const [messages, setMessages] = useState(initialMessages); const [messages, setMessages] = useState(initialMessages);
@ -42,7 +34,8 @@ export const ChatList = ({
// Initialize the virtualizer // Initialize the virtualizer
const rowVirtualizer = useVirtualizer({ const rowVirtualizer = useVirtualizer({
count: messages.length, count: messages.length,
getItemKey: (index) => messages[index]?.tempSignature || messages[index].signature, getItemKey: (index) =>
messages[index]?.tempSignature || messages[index].signature,
getScrollElement: () => parentRef?.current, getScrollElement: () => parentRef?.current,
estimateSize: useCallback(() => 80, []), // Provide an estimated height of items, adjust this as needed estimateSize: useCallback(() => 80, []), // Provide an estimated height of items, adjust this as needed
overscan: 10, // Number of items to render outside the visible area to improve smoothness overscan: 10, // Number of items to render outside the visible area to improve smoothness
@ -52,12 +45,11 @@ export const ChatList = ({
if (parentRef.current && rowVirtualizer?.isScrolling !== undefined) { if (parentRef.current && rowVirtualizer?.isScrolling !== undefined) {
const { scrollTop, scrollHeight, clientHeight } = parentRef.current; const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed
return atBottom return atBottom;
} }
return false return false;
}, [rowVirtualizer?.isScrolling]);
}, [rowVirtualizer?.isScrolling])
useEffect(() => { useEffect(() => {
if (!parentRef.current || rowVirtualizer?.isScrolling === undefined) return; if (!parentRef.current || rowVirtualizer?.isScrolling === undefined) return;
@ -67,8 +59,7 @@ export const ChatList = ({
} }
setShowScrollDownButton(false); setShowScrollDownButton(false);
return; return;
} else } else if (rowVirtualizer?.isScrolling) {
if (rowVirtualizer?.isScrolling) {
if (scrollingIntervalRef.current) { if (scrollingIntervalRef.current) {
clearTimeout(scrollingIntervalRef.current); clearTimeout(scrollingIntervalRef.current);
} }
@ -108,7 +99,13 @@ export const ChatList = ({
setTimeout(() => { setTimeout(() => {
const hasUnreadMessages = totalMessages.some( const hasUnreadMessages = totalMessages.some(
(msg) => msg.unread && !msg?.chatReference && !msg?.isTemp && (!msg?.chatReference && msg?.timestamp > lastSeenUnreadMessageTimestamp.current || 0) (msg) =>
msg.unread &&
!msg?.chatReference &&
!msg?.isTemp &&
((!msg?.chatReference &&
msg?.timestamp > lastSeenUnreadMessageTimestamp.current) ||
0)
); );
if (parentRef.current) { if (parentRef.current) {
const { scrollTop, scrollHeight, clientHeight } = parentRef.current; const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
@ -136,9 +133,9 @@ export const ChatList = ({
const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1; const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1;
if (rowVirtualizer) { if (rowVirtualizer) {
if (divideIndex) { if (divideIndex) {
rowVirtualizer.scrollToIndex(divideIndex, { align: "start" }); rowVirtualizer.scrollToIndex(divideIndex, { align: 'start' });
} else { } else {
rowVirtualizer.scrollToIndex(index, { align: "end" }); rowVirtualizer.scrollToIndex(index, { align: 'end' });
} }
} }
handleMessageSeen(); handleMessageSeen();
@ -152,7 +149,7 @@ export const ChatList = ({
})) }))
); );
setShowScrollButton(false); setShowScrollButton(false);
lastSeenUnreadMessageTimestamp.current = Date.now() lastSeenUnreadMessageTimestamp.current = Date.now();
}, []); }, []);
const sentNewMessageGroupFunc = useCallback(() => { const sentNewMessageGroupFunc = useCallback(() => {
@ -166,9 +163,9 @@ export const ChatList = ({
}, [messages]); }, [messages]);
useEffect(() => { useEffect(() => {
subscribeToEvent("sent-new-message-group", sentNewMessageGroupFunc); subscribeToEvent('sent-new-message-group', sentNewMessageGroupFunc);
return () => { return () => {
unsubscribeFromEvent("sent-new-message-group", sentNewMessageGroupFunc); unsubscribeFromEvent('sent-new-message-group', sentNewMessageGroupFunc);
}; };
}, [sentNewMessageGroupFunc]); }, [sentNewMessageGroupFunc]);
@ -181,21 +178,24 @@ export const ChatList = ({
const goToMessage = useCallback((idx) => { const goToMessage = useCallback((idx) => {
rowVirtualizer.scrollToIndex(idx); rowVirtualizer.scrollToIndex(idx);
}, []); }, []);
const theme = useTheme();
return ( return (
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
width: "100%", height: '100%',
height: "100%", width: '100%',
}} }}
> >
<div <div
style={{ style={{
height: "100%", display: 'flex',
position: "relative", flexDirection: 'column',
display: "flex", height: '100%',
flexDirection: "column", position: 'relative',
width: "100%", width: '100%',
}} }}
> >
<div <div
@ -203,27 +203,26 @@ export const ChatList = ({
className="List" className="List"
style={{ style={{
flexGrow: 1, flexGrow: 1,
overflow: "auto", overflow: 'auto',
position: "relative", position: 'relative',
display: "flex", display: 'flex',
height: "0px", height: '0px',
}} }}
> >
<div <div
style={{ style={{
height: rowVirtualizer.getTotalSize(), height: rowVirtualizer.getTotalSize(),
width: "100%", width: '100%',
}} }}
> >
<div <div
style={{ style={{
position: "absolute",
top: 0,
left: 0, left: 0,
width: "100%", position: 'absolute',
top: 0,
width: '100%',
}} }}
> >
{rowVirtualizer.getVirtualItems().map((virtualRow) => { {rowVirtualizer.getVirtualItems().map((virtualRow) => {
const index = virtualRow.index; const index = virtualRow.index;
let message = messages[index] || null; // Safeguard against undefined let message = messages[index] || null; // Safeguard against undefined
@ -243,9 +242,12 @@ export const ChatList = ({
if (message?.repliedTo && replyIndex !== -1) { if (message?.repliedTo && replyIndex !== -1) {
reply = { ...(messages[replyIndex] || {}) }; reply = { ...(messages[replyIndex] || {}) };
if (chatReferences?.[reply?.signature]?.edit) { if (chatReferences?.[reply?.signature]?.edit) {
reply.decryptedData = chatReferences[reply?.signature]?.edit; reply.decryptedData =
reply.text = chatReferences[reply?.signature]?.edit?.message; chatReferences[reply?.signature]?.edit;
reply.editTimestamp = chatReferences[reply?.signature]?.edit?.timestamp reply.text =
chatReferences[reply?.signature]?.edit?.message;
reply.editTimestamp =
chatReferences[reply?.signature]?.edit?.timestamp;
} }
} }
@ -267,19 +269,29 @@ export const ChatList = ({
// Check for reactions and edits // Check for reactions and edits
if (chatReferences?.[message.signature]) { if (chatReferences?.[message.signature]) {
reactions = chatReferences[message.signature]?.reactions || null; reactions =
chatReferences[message.signature]?.reactions || null;
if (chatReferences[message.signature]?.edit?.message && message?.text) { if (
message.text = chatReferences[message.signature]?.edit?.message; chatReferences[message.signature]?.edit?.message &&
message.isEdit = true message?.text
message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp ) {
message.text =
chatReferences[message.signature]?.edit?.message;
message.isEdit = true;
message.editTimestamp =
chatReferences[message.signature]?.edit?.timestamp;
} }
if (chatReferences[message.signature]?.edit?.messageText && message?.messageText) { if (
message.messageText = chatReferences[message.signature]?.edit?.messageText; chatReferences[message.signature]?.edit?.messageText &&
message.isEdit = true message?.messageText
message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp ) {
message.messageText =
chatReferences[message.signature]?.edit?.messageText;
message.isEdit = true;
message.editTimestamp =
chatReferences[message.signature]?.edit?.timestamp;
} }
} }
// Check if message is updating // Check if message is updating
@ -292,7 +304,10 @@ export const ChatList = ({
} }
} }
} catch (error) { } catch (error) {
console.error("Error processing message:", error, { index, message }); console.error('Error processing message:', error, {
index,
message,
});
// Gracefully handle the error by providing fallback data // Gracefully handle the error by providing fallback data
message = null; message = null;
reply = null; reply = null;
@ -304,16 +319,16 @@ export const ChatList = ({
<div <div
key={virtualRow.index} key={virtualRow.index}
style={{ style={{
position: "absolute", position: 'absolute',
top: 0, top: 0,
left: "50%", left: '50%',
transform: `translateY(${virtualRow.start}px) translateX(-50%)`, transform: `translateY(${virtualRow.start}px) translateX(-50%)`,
width: "100%", width: '100%',
padding: "10px 0", padding: '10px 0',
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
flexDirection: "column", flexDirection: 'column',
gap: "5px", gap: '5px',
}} }}
> >
<Typography>Error loading message.</Typography> <Typography>Error loading message.</Typography>
@ -327,17 +342,17 @@ export const ChatList = ({
ref={rowVirtualizer.measureElement} //measure dynamic row height ref={rowVirtualizer.measureElement} //measure dynamic row height
key={message.signature} key={message.signature}
style={{ style={{
position: "absolute", alignItems: 'center',
display: 'flex',
flexDirection: 'column',
gap: '5px',
left: '50%', // Move to the center horizontally
overscrollBehavior: 'none',
padding: '10px 0',
position: 'absolute',
top: 0, top: 0,
left: "50%", // Move to the center horizontally
transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering
width: "100%", // Control width (90% of the parent) width: '100%', // Control width (90% of the parent)
padding: "10px 0",
display: "flex",
alignItems: "center",
overscrollBehavior: "none",
flexDirection: "column",
gap: "5px",
}} }}
> >
<ErrorBoundary <ErrorBoundary
@ -363,13 +378,11 @@ export const ChatList = ({
reactions={reactions} reactions={reactions}
isUpdating={isUpdating} isUpdating={isUpdating}
isPrivate={isPrivate} isPrivate={isPrivate}
/> />
</ErrorBoundary> </ErrorBoundary>
</div> </div>
); );
})} })}
</div> </div>
</div> </div>
</div> </div>
@ -377,17 +390,17 @@ export const ChatList = ({
<button <button
onClick={() => scrollToBottom()} onClick={() => scrollToBottom()}
style={{ style={{
backgroundColor: 'var(--unread)',
border: 'none',
borderRadius: '20px',
bottom: 20, bottom: 20,
position: "absolute", color: theme.palette.text.primary,
cursor: 'pointer',
outline: 'none',
padding: '10px 20px',
position: 'absolute',
right: 20, right: 20,
backgroundColor: "var(--unread)",
color: "black",
padding: "10px 20px",
borderRadius: "20px",
cursor: "pointer",
zIndex: 10, zIndex: 10,
border: "none",
outline: "none",
}} }}
> >
Scroll to Unread Messages Scroll to Unread Messages
@ -397,18 +410,18 @@ export const ChatList = ({
<button <button
onClick={() => scrollToBottom()} onClick={() => scrollToBottom()}
style={{ style={{
backgroundColor: theme.palette.background.default,
border: 'none',
borderRadius: '20px',
bottom: 20, bottom: 20,
position: "absolute", color: theme.palette.text.primary,
cursor: 'pointer',
fontSize: '16px',
outline: 'none',
padding: '10px 20px',
position: 'absolute',
right: 20, right: 20,
backgroundColor: "var(--Mail-Background)",
color: "white",
padding: "10px 20px",
borderRadius: "20px",
cursor: "pointer",
zIndex: 10, zIndex: 10,
border: "none",
outline: "none",
fontSize: "16px",
}} }}
> >
Scroll to bottom Scroll to bottom

611
src/components/Chat/ChatOptions.tsx
View File

@ -6,124 +6,132 @@ import {
MenuItem, MenuItem,
Select, Select,
Typography, Typography,
Tooltip Tooltip,
} from "@mui/material"; useTheme,
import React, { useEffect, useMemo, useRef, useState } from "react"; } from '@mui/material';
import SearchIcon from "@mui/icons-material/Search"; import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Spacer } from "../../common/Spacer"; import SearchIcon from '@mui/icons-material/Search';
import AlternateEmailIcon from "@mui/icons-material/AlternateEmail"; import { Spacer } from '../../common/Spacer';
import CloseIcon from "@mui/icons-material/Close"; import AlternateEmailIcon from '@mui/icons-material/AlternateEmail';
import CloseIcon from '@mui/icons-material/Close';
import InsertLinkIcon from '@mui/icons-material/InsertLink'; import InsertLinkIcon from '@mui/icons-material/InsertLink';
import Highlight from "@tiptap/extension-highlight"; import Highlight from '@tiptap/extension-highlight';
import Mention from "@tiptap/extension-mention"; import Mention from '@tiptap/extension-mention';
import StarterKit from "@tiptap/starter-kit"; import StarterKit from '@tiptap/starter-kit';
import Underline from "@tiptap/extension-underline"; import Underline from '@tiptap/extension-underline';
import { import {
AppsSearchContainer, AppsSearchContainer,
AppsSearchLeft, AppsSearchLeft,
AppsSearchRight, AppsSearchRight,
} from "../Apps/Apps-styles"; } from '../Apps/Apps-styles';
import IconSearch from "../../assets/svgs/Search.svg"; import IconSearch from '../../assets/svgs/Search.svg';
import IconClearInput from "../../assets/svgs/ClearInput.svg"; import IconClearInput from '../../assets/svgs/ClearInput.svg';
import { import { CellMeasurerCache } from 'react-virtualized';
AutoSizer, import { getBaseApiReact } from '../../App';
CellMeasurer, import { MessageDisplay } from './MessageDisplay';
CellMeasurerCache, import { useVirtualizer } from '@tanstack/react-virtual';
List, import { formatTimestamp } from '../../utils/time';
} from "react-virtualized"; import { ContextMenuMentions } from '../ContextMenuMentions';
import { getBaseApiReact } from "../../App";
import { MessageDisplay } from "./MessageDisplay";
import { useVirtualizer } from "@tanstack/react-virtual";
import { formatTimestamp } from "../../utils/time";
import { ContextMenuMentions } from "../ContextMenuMentions";
import { convert } from 'html-to-text'; import { convert } from 'html-to-text';
import { generateHTML } from "@tiptap/react"; import { generateHTML } from '@tiptap/react';
import ErrorBoundary from "../../common/ErrorBoundary"; import ErrorBoundary from '../../common/ErrorBoundary';
const extractTextFromHTML = (htmlString = '') => { const extractTextFromHTML = (htmlString = '') => {
return convert(htmlString, { return convert(htmlString, {
wordwrap: false, // Disable word wrapping wordwrap: false, // Disable word wrapping
})?.toLowerCase(); })?.toLowerCase();
}; };
const cache = new CellMeasurerCache({ const cache = new CellMeasurerCache({
fixedWidth: true, fixedWidth: true,
defaultHeight: 50, defaultHeight: 50,
}); });
export const ChatOptions = ({ messages : untransformedMessages, goToMessage, members, myName, selectedGroup, openQManager, isPrivate }) => { export const ChatOptions = ({
const [mode, setMode] = useState("default"); messages: untransformedMessages,
const [searchValue, setSearchValue] = useState(""); goToMessage,
members,
myName,
selectedGroup,
openQManager,
isPrivate,
}) => {
const [mode, setMode] = useState('default');
const [searchValue, setSearchValue] = useState('');
const [selectedMember, setSelectedMember] = useState(0); const [selectedMember, setSelectedMember] = useState(0);
const theme = useTheme();
const parentRef = useRef(); const parentRef = useRef();
const parentRefMentions = useRef(); const parentRefMentions = useRef();
const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null) const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null);
const [debouncedValue, setDebouncedValue] = useState(""); // Debounced value const [debouncedValue, setDebouncedValue] = useState(''); // Debounced value
const messages = useMemo(() => { const messages = useMemo(() => {
return untransformedMessages?.map((item) => { return untransformedMessages?.map((item) => {
if (item?.messageText) { if (item?.messageText) {
let transformedMessage = item?.messageText let transformedMessage = item?.messageText;
try { try {
transformedMessage = generateHTML(item?.messageText, [ transformedMessage = generateHTML(item?.messageText, [
StarterKit, StarterKit,
Underline, Underline,
Highlight, Highlight,
Mention Mention,
]) ]);
return { return {
...item, ...item,
messageText: transformedMessage messageText: transformedMessage,
} };
} catch (error) { } catch (error) {
// error // error
} }
} else return item } else return item;
}) });
}, [untransformedMessages]) }, [untransformedMessages]);
const getTimestampMention = async () => { const getTimestampMention = async () => {
try { try {
return new Promise((res, rej) => { return new Promise((res, rej) => {
window.sendMessage("getTimestampMention") window
.sendMessage('getTimestampMention')
.then((response) => { .then((response) => {
if (!response?.error) { if (!response?.error) {
if (response && selectedGroup && response[selectedGroup]) { if (response && selectedGroup && response[selectedGroup]) {
setLastMentionTimestamp(response[selectedGroup]) setLastMentionTimestamp(response[selectedGroup]);
} }
res(response); res(response);
return; return;
} }
rej(response.error); rej(response.error);
}) })
.catch((error) => { .catch((error) => {
rej(error.message || "An error occurred"); rej(error.message || 'An error occurred');
}); });
}); });
} catch (error) {} } catch (error) {
console.log(error);
}
}; };
useEffect(() => { useEffect(() => {
if (mode === 'mentions' && selectedGroup) { if (mode === 'mentions' && selectedGroup) {
window.sendMessage("addTimestampMention", { window
.sendMessage('addTimestampMention', {
timestamp: Date.now(), timestamp: Date.now(),
groupId: selectedGroup groupId: selectedGroup,
}).then((res)=> { })
getTimestampMention() .then((res) => {
}).catch((error) => { getTimestampMention();
console.error("Failed to add timestamp:", error.message || "An error occurred"); })
.catch((error) => {
console.error(
'Failed to add timestamp:',
error.message || 'An error occurred'
);
}); });
} }
}, [mode, selectedGroup]) }, [mode, selectedGroup]);
useEffect(() => { useEffect(() => {
getTimestampMention() getTimestampMention();
}, []) }, []);
// Debounce logic // Debounce logic
useEffect(() => { useEffect(() => {
@ -151,32 +159,39 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
.filter( .filter(
(message) => (message) =>
message?.senderName === selectedMember && message?.senderName === selectedMember &&
extractTextFromHTML(isPrivate ? message?.messageText : message?.decryptedData?.message)?.includes( extractTextFromHTML(
debouncedValue.toLowerCase() isPrivate ? message?.messageText : message?.decryptedData?.message
) )?.includes(debouncedValue.toLowerCase())
) )
?.sort((a, b) => b?.timestamp - a?.timestamp); ?.sort((a, b) => b?.timestamp - a?.timestamp);
} }
return messages return messages
.filter((message) => .filter((message) =>
extractTextFromHTML(isPrivate === false ? message?.messageText : message?.decryptedData?.message)?.includes(debouncedValue.toLowerCase()) extractTextFromHTML(
isPrivate === false
? message?.messageText
: message?.decryptedData?.message
)?.includes(debouncedValue.toLowerCase())
) )
?.sort((a, b) => b?.timestamp - a?.timestamp); ?.sort((a, b) => b?.timestamp - a?.timestamp);
}, [debouncedValue, messages, selectedMember, isPrivate]); }, [debouncedValue, messages, selectedMember, isPrivate]);
const mentionList = useMemo(() => { const mentionList = useMemo(() => {
if(!messages || messages.length === 0 || !myName) return [] if (!messages || messages.length === 0 || !myName) return [];
if (isPrivate === false) { if (isPrivate === false) {
return messages return messages
.filter((message) => .filter((message) =>
extractTextFromHTML(message?.messageText)?.includes(`@${myName?.toLowerCase()}`) extractTextFromHTML(message?.messageText)?.includes(
`@${myName?.toLowerCase()}`
)
) )
?.sort((a, b) => b?.timestamp - a?.timestamp); ?.sort((a, b) => b?.timestamp - a?.timestamp);
} }
return messages return messages
.filter((message) => .filter((message) =>
extractTextFromHTML(message?.decryptedData?.message)?.includes(`@${myName?.toLowerCase()}`) extractTextFromHTML(message?.decryptedData?.message)?.includes(
`@${myName?.toLowerCase()}`
)
) )
?.sort((a, b) => b?.timestamp - a?.timestamp); ?.sort((a, b) => b?.timestamp - a?.timestamp);
}, [messages, myName, isPrivate]); }, [messages, myName, isPrivate]);
@ -203,60 +218,54 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
overscan: 10, // Number of items to render outside the visible area to improve smoothness overscan: 10, // Number of items to render outside the visible area to improve smoothness
}); });
if (mode === 'mentions') {
if (mode === "mentions") {
return ( return (
<Box <Box
sx={{ sx={{
width: "300px", backgroundColor: theme.palette.background.default,
height: "100%", borderBottomLeftRadius: '20px',
display: "flex", borderTopLeftRadius: '20px',
flexDirection: "column", display: 'flex',
// alignItems: 'center', flexDirection: 'column',
backgroundColor: "#1F2023",
borderBottomLeftRadius: "20px",
borderTopLeftRadius: "20px",
overflow: "auto",
flexShrink: 0,
flexGrow: 0, flexGrow: 0,
flexShrink: 0,
height: '100%',
overflow: 'auto',
width: '300px',
}} }}
> >
<Box <Box
sx={{ sx={{
padding: "10px", display: 'flex',
display: "flex", justifyContent: 'flex-end',
justifyContent: "flex-end", padding: '10px',
}} }}
> >
<CloseIcon <CloseIcon
onClick={() => { onClick={() => {
setMode("default"); setMode('default');
}} }}
sx={{ sx={{
cursor: "pointer", cursor: 'pointer',
color: "white", color: theme.palette.text.primary,
}} }}
/> />
</Box> </Box>
<Box <Box
sx={{ sx={{
width: "100%", alignItems: 'center',
height: "100%", display: 'flex',
display: "flex", flexDirection: 'column',
flexDirection: "column", height: '100%',
alignItems: "center", width: '100%',
}} }}
> >
{mentionList?.length === 0 && ( {mentionList?.length === 0 && (
<Typography <Typography
sx={{ sx={{
fontSize: "11px", fontSize: '11px',
fontWeight: 400, fontWeight: 400,
color: "rgba(255, 255, 255, 0.2)", color: theme.palette.text.primary,
}} }}
> >
No results No results
@ -264,46 +273,48 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
)} )}
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
width: "100%", height: '100%',
height: "100%", width: '100%',
}} }}
> >
<div <div
style={{ style={{
height: "100%", display: 'flex',
position: "relative", flexDirection: 'column',
display: "flex", height: '100%',
flexDirection: "column", position: 'relative',
width: "100%", width: '100%',
}} }}
> >
<div <div
ref={parentRefMentions} ref={parentRefMentions}
className="List" className="List"
style={{ style={{
display: 'flex',
flexGrow: 1, flexGrow: 1,
overflow: "auto", height: '0px',
position: "relative", overflow: 'auto',
display: "flex", position: 'relative',
height: "0px",
}} }}
> >
<div <div
style={{ style={{
height: rowVirtualizerMentions.getTotalSize(), height: rowVirtualizerMentions.getTotalSize(),
width: "100%", width: '100%',
}} }}
> >
<div <div
style={{ style={{
position: "absolute",
top: 0,
left: 0, left: 0,
width: "100%", position: 'absolute',
top: 0,
width: '100%',
}} }}
> >
{rowVirtualizerMentions.getVirtualItems().map((virtualRow) => { {rowVirtualizerMentions
.getVirtualItems()
.map((virtualRow) => {
const index = virtualRow.index; const index = virtualRow.index;
let message = mentionList[index]; let message = mentionList[index];
return ( return (
@ -312,21 +323,24 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
ref={rowVirtualizerMentions.measureElement} //measure dynamic row height ref={rowVirtualizerMentions.measureElement} //measure dynamic row height
key={message.signature} key={message.signature}
style={{ style={{
position: "absolute", alignItems: 'center',
display: 'flex',
flexDirection: 'column',
gap: '5px',
left: '50%', // Move to the center horizontally
overscrollBehavior: 'none',
padding: '10px 0',
position: 'absolute',
top: 0, top: 0,
left: "50%", // Move to the center horizontally
transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering
width: "100%", // Control width (90% of the parent) width: '100%', // Control width (90% of the parent)
padding: "10px 0",
display: "flex",
alignItems: "center",
overscrollBehavior: "none",
flexDirection: "column",
gap: "5px",
}} }}
> >
<ShowMessage messages={messages} goToMessage={goToMessage} message={message} /> <ShowMessage
messages={messages}
goToMessage={goToMessage}
message={message}
/>
</div> </div>
); );
})} })}
@ -340,47 +354,46 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
); );
} }
if (mode === "search") { if (mode === 'search') {
return ( return (
<Box <Box
sx={{ sx={{
width: "300px", backgroundColor: theme.palette.background.default,
height: "100%", borderBottomLeftRadius: '20px',
display: "flex", borderTopLeftRadius: '20px',
flexDirection: "column", display: 'flex',
// alignItems: 'center', flexDirection: 'column',
backgroundColor: "#1F2023",
borderBottomLeftRadius: "20px",
borderTopLeftRadius: "20px",
overflow: "auto",
flexShrink: 0,
flexGrow: 0, flexGrow: 0,
flexShrink: 0,
height: '100%',
overflow: 'auto',
width: '300px',
}} }}
> >
<Box <Box
sx={{ sx={{
padding: "10px", display: 'flex',
display: "flex", justifyContent: 'flex-end',
justifyContent: "flex-end", padding: '10px',
}} }}
> >
<CloseIcon <CloseIcon
onClick={() => { onClick={() => {
setMode("default"); setMode('default');
}} }}
sx={{ sx={{
cursor: "pointer", cursor: 'pointer',
color: "white", color: theme.palette.text.primary,
}} }}
/> />
</Box> </Box>
<Box <Box
sx={{ sx={{
width: "100%", alignItems: 'center',
height: "100%", display: 'flex',
display: "flex", flexDirection: 'column',
flexDirection: "column", height: '100%',
alignItems: "center", width: '100%',
}} }}
> >
<AppsSearchContainer> <AppsSearchContainer>
@ -392,8 +405,8 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
sx={{ ml: 1, flex: 1 }} sx={{ ml: 1, flex: 1 }}
placeholder="Search chat text" placeholder="Search chat text"
inputProps={{ inputProps={{
"aria-label": "Search for apps", 'aria-label': 'Search for apps',
fontSize: "16px", fontSize: '16px',
fontWeight: 400, fontWeight: 400,
}} }}
/> />
@ -402,7 +415,7 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
{searchValue && ( {searchValue && (
<ButtonBase <ButtonBase
onClick={() => { onClick={() => {
setSearchValue(""); setSearchValue('');
}} }}
> >
<img src={IconClearInput} /> <img src={IconClearInput} />
@ -412,19 +425,19 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
</AppsSearchContainer> </AppsSearchContainer>
<Box <Box
sx={{ sx={{
padding: "10px", alignItems: 'center',
display: "flex", display: 'flex',
justifyContent: "space-between", justifyContent: 'space-between',
alignItems: 'center' padding: '10px',
}} }}
> >
<Select <Select
size="small"
labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={selectedMember}
label="By member" label="By member"
labelId="demo-simple-select-label"
onChange={(e) => setSelectedMember(e.target.value)} onChange={(e) => setSelectedMember(e.target.value)}
size="small"
value={selectedMember}
> >
<MenuItem value={0}> <MenuItem value={0}>
<em>By member</em> <em>By member</em>
@ -443,20 +456,19 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
setSelectedMember(0); setSelectedMember(0);
}} }}
sx={{ sx={{
cursor: "pointer", cursor: 'pointer',
color: "white", color: theme.palette.text.primary,
}} }}
/> />
)} )}
</Box> </Box>
{debouncedValue && searchedList?.length === 0 && ( {debouncedValue && searchedList?.length === 0 && (
<Typography <Typography
sx={{ sx={{
fontSize: "11px", fontSize: '11px',
fontWeight: 400, fontWeight: 400,
color: "rgba(255, 255, 255, 0.2)", color: theme.palette.text.secondary,
}} }}
> >
No results No results
@ -464,66 +476,65 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
)} )}
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
width: "100%", height: '100%',
height: "100%", width: '100%',
}} }}
> >
<div <div
style={{ style={{
height: "100%", display: 'flex',
position: "relative", flexDirection: 'column',
display: "flex", height: '100%',
flexDirection: "column", position: 'relative',
width: "100%", width: '100%',
}} }}
> >
<div <div
ref={parentRef} ref={parentRef}
className="List" className="List"
style={{ style={{
display: 'flex',
flexGrow: 1, flexGrow: 1,
overflow: "auto", height: '0px',
position: "relative", overflow: 'auto',
display: "flex", position: 'relative',
height: "0px",
}} }}
> >
<div <div
style={{ style={{
height: rowVirtualizer.getTotalSize(), height: rowVirtualizer.getTotalSize(),
width: "100%", width: '100%',
}} }}
> >
<div <div
style={{ style={{
position: "absolute",
top: 0,
left: 0, left: 0,
width: "100%", position: 'absolute',
top: 0,
width: '100%',
}} }}
> >
{rowVirtualizer.getVirtualItems().map((virtualRow) => { {rowVirtualizer.getVirtualItems().map((virtualRow) => {
const index = virtualRow.index; const index = virtualRow.index;
let message = searchedList[index]; let message = searchedList[index];
return ( return (
<div <div
data-index={virtualRow.index} //needed for dynamic row height measurement data-index={virtualRow.index} //needed for dynamic row height measurement
ref={rowVirtualizer.measureElement} //measure dynamic row height ref={rowVirtualizer.measureElement} //measure dynamic row height
key={message.signature} key={message.signature}
style={{ style={{
position: "absolute", alignItems: 'center',
display: 'flex',
flexDirection: 'column',
gap: '5px',
left: '50%', // Move to the center horizontally
overscrollBehavior: 'none',
padding: '10px 0',
position: 'absolute',
top: 0, top: 0,
left: "50%", // Move to the center horizontally
transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering
width: "100%", // Control width (90% of the parent) width: '100%', // Control width (90% of the parent)
padding: "10px 0",
display: "flex",
alignItems: "center",
overscrollBehavior: "none",
flexDirection: "column",
gap: "5px",
}} }}
> >
<ErrorBoundary <ErrorBoundary
@ -533,10 +544,13 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
</Typography> </Typography>
} }
> >
<ShowMessage message={message} goToMessage={goToMessage} messages={messages} /> <ShowMessage
message={message}
goToMessage={goToMessage}
messages={messages}
/>
</ErrorBoundary> </ErrorBoundary>
</div> </div>
); );
})} })}
</div> </div>
@ -551,46 +565,58 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
return ( return (
<Box <Box
sx={{ sx={{
width: "50px", alignItems: 'center',
height: "100%", display: 'flex',
gap: "20px", flexDirection: 'column',
display: "flex", gap: '20px',
flexDirection: "column", height: '100%',
alignItems: "center", width: '50px',
}} }}
> >
<Box <Box
sx={{ sx={{
width: "100%", alignItems: 'center',
padding: "10px", backgroundColor: theme.palette.background.default,
gap: "20px", borderBottomLeftRadius: '20px',
display: "flex", borderTopLeftRadius: '20px',
flexDirection: "column", display: 'flex',
alignItems: "center", flexDirection: 'column',
backgroundColor: "#1F2023", gap: '20px',
borderBottomLeftRadius: "20px", minHeight: '200px',
borderTopLeftRadius: "20px", padding: '10px',
minHeight: "200px", width: '100%',
}}
>
<ButtonBase
onClick={() => {
setMode('search');
}} }}
> >
<ButtonBase onClick={() => {
setMode("search")
}}>
<Tooltip <Tooltip
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>SEARCH</span>} title={
<span
style={{
color: theme.palette.text.primary,
fontSize: '14px',
fontWeight: 700,
}}
>
SEARCH
</span>
}
placement="left" placement="left"
arrow arrow
sx={{ fontSize: "24" }} sx={{ fontSize: '24' }}
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: "#ffffff", color: theme.palette.text.primary,
backgroundColor: "#444444", backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: "#444444", color: theme.palette.text.secondary,
}, },
}, },
}} }}
@ -598,106 +624,137 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
<SearchIcon /> <SearchIcon />
</Tooltip> </Tooltip>
</ButtonBase> </ButtonBase>
<ButtonBase onClick={() => { <ButtonBase
setMode("default") onClick={() => {
setSearchValue('') setMode('default');
setSelectedMember(0) setSearchValue('');
openQManager() setSelectedMember(0);
}}> openQManager();
}}
>
<Tooltip <Tooltip
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>Q-MANAGER</span>} title={
<span
style={{
color: theme.palette.text.primary,
fontSize: '14px',
fontWeight: 700,
}}
>
Q-MANAGER
</span>
}
placement="left" placement="left"
arrow arrow
sx={{ fontSize: "24" }} sx={{ fontSize: '24' }}
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: "#ffffff", color: theme.palette.text.primary,
backgroundColor: "#444444", backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: "#444444", color: theme.palette.text.secondary,
}, },
}, },
}} }}
> >
<InsertLinkIcon sx={{ color: 'white' }} /> <InsertLinkIcon sx={{ color: theme.palette.text.primary }} />
</Tooltip> </Tooltip>
</ButtonBase> </ButtonBase>
<ContextMenuMentions getTimestampMention={getTimestampMention} groupId={selectedGroup}> <ContextMenuMentions
<ButtonBase onClick={() => { getTimestampMention={getTimestampMention}
setMode("mentions") groupId={selectedGroup}
setSearchValue('') >
setSelectedMember(0) <ButtonBase
}}> onClick={() => {
setMode('mentions');
setSearchValue('');
setSelectedMember(0);
}}
>
<Tooltip <Tooltip
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>MENTIONED</span>} title={
<span
style={{
color: theme.palette.text.primary,
fontSize: '14px',
fontWeight: 700,
}}
>
MENTIONED
</span>
}
placement="left" placement="left"
arrow arrow
sx={{ fontSize: "24" }} sx={{ fontSize: '24' }}
slotProps={{ slotProps={{
tooltip: { tooltip: {
sx: { sx: {
color: "#ffffff", color: theme.palette.text.primary,
backgroundColor: "#444444", backgroundColor: theme.palette.background.default,
}, },
}, },
arrow: { arrow: {
sx: { sx: {
color: "#444444", color: theme.palette.text.secondary,
}, },
}, },
}} }}
> >
<AlternateEmailIcon sx={{ <AlternateEmailIcon
color: mentionList?.length > 0 && (!lastMentionTimestamp || lastMentionTimestamp < mentionList[0]?.timestamp) ? 'var(--unread)' : 'white' sx={{
}} /> color:
mentionList?.length > 0 &&
(!lastMentionTimestamp ||
lastMentionTimestamp < mentionList[0]?.timestamp)
? 'var(--unread)'
: 'white',
}}
/>
</Tooltip> </Tooltip>
</ButtonBase> </ButtonBase>
</ContextMenuMentions> </ContextMenuMentions>
</Box> </Box>
</Box> </Box>
); );
}; };
const ShowMessage = ({ message, goToMessage, messages }) => { const ShowMessage = ({ message, goToMessage, messages }) => {
const theme = useTheme();
return ( return (
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
width: "100%", padding: '0px 20px',
padding: "0px 20px", width: '100%',
}} }}
> >
<Box <Box
sx={{ sx={{
display: "flex", alignItems: 'center',
alignItems: "center", display: 'flex',
justifyContent: "space-between", justifyContent: 'space-between',
width: "100%", width: '100%',
}} }}
> >
<Box <Box
sx={{ sx={{
display: "flex", alignItems: 'center',
alignItems: "center", display: 'flex',
gap: "15px", gap: '15px',
}} }}
> >
<Avatar <Avatar
sx={{ sx={{
backgroundColor: "#27282c", backgroundColor: theme.palette.background.default,
color: "white", color: theme.palette.text.primary,
height: "25px", height: '25px',
width: "25px", width: '25px',
}} }}
alt={message?.senderName} alt={message?.senderName}
src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${ src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
@ -709,26 +766,31 @@ const ShowMessage = ({message, goToMessage, messages})=> {
<Typography <Typography
sx={{ sx={{
fontWight: 600, fontWight: 600,
fontFamily: "Inter", fontFamily: 'Inter',
color: "cadetBlue", color: 'cadetBlue',
}} }}
> >
{message?.senderName} {message?.senderName}
</Typography> </Typography>
</Box> </Box>
</Box> </Box>
<Spacer height="5px" /> <Spacer height="5px" />
<Typography sx={{
fontSize: '12px' <Typography
}}>{formatTimestamp(message.timestamp)}</Typography> sx={{
fontSize: '12px',
}}
>
{formatTimestamp(message.timestamp)}
</Typography>
<Box <Box
style={{ style={{
cursor: "pointer", cursor: 'pointer',
}} }}
onClick={() => { onClick={() => {
const findMsgIndex = messages.findIndex( const findMsgIndex = messages.findIndex(
(item) => (item) => item?.signature === message?.signature
item?.signature === message?.signature
); );
if (findMsgIndex !== -1) { if (findMsgIndex !== -1) {
goToMessage(findMsgIndex); goToMessage(findMsgIndex);
@ -736,19 +798,14 @@ const ShowMessage = ({message, goToMessage, messages})=> {
}} }}
> >
{message?.messageText && ( {message?.messageText && (
<MessageDisplay <MessageDisplay htmlContent={message?.messageText} />
htmlContent={message?.messageText}
/>
)} )}
{message?.decryptedData?.message && ( {message?.decryptedData?.message && (
<MessageDisplay <MessageDisplay
htmlContent={ htmlContent={message?.decryptedData?.message || '<p></p>'}
message?.decryptedData?.message || "<p></p>"
}
/> />
)} )}
</Box> </Box>
</Box> </Box>
) );
} };

11
src/components/Group/AddGroup.tsx
View File

@ -29,15 +29,14 @@ import { getFee } from '../../background';
import { MyContext, isMobile } from '../../App'; import { MyContext, isMobile } from '../../App';
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events'; import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
export const Label = styled('label')( export const Label = styled('label')`
({ theme }) => ` display: block;
font-family: 'IBM Plex Sans', sans-serif; font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px; font-size: 14px;
display: block;
margin-bottom: 4px;
font-weight: 400; font-weight: 400;
` margin-bottom: 4px;
); `;
const Transition = React.forwardRef(function Transition( const Transition = React.forwardRef(function Transition(
props: TransitionProps & { props: TransitionProps & {
children: React.ReactElement; children: React.ReactElement;

229
src/components/Group/Group.tsx
View File

@ -7,6 +7,7 @@ import {
ListItemAvatar, ListItemAvatar,
ListItemText, ListItemText,
Typography, Typography,
useTheme,
} from '@mui/material'; } from '@mui/material';
import React, { import React, {
useCallback, useCallback,
@ -477,22 +478,20 @@ export const Group = ({
} }
setIsOpenSideViewGroups((prev) => !prev); setIsOpenSideViewGroups((prev) => !prev);
}; };
useEffect(() => { useEffect(() => {
timestampEnterDataRef.current = timestampEnterData; timestampEnterDataRef.current = timestampEnterData;
}, [timestampEnterData]); }, [timestampEnterData]);
useEffect(() => { useEffect(() => {
isFocusedRef.current = isFocused; isFocusedRef.current = isFocused;
}, [isFocused]); }, [isFocused]);
useEffect(() => { useEffect(() => {
groupSectionRef.current = groupSection; groupSectionRef.current = groupSection;
}, [groupSection]); }, [groupSection]);
useEffect(() => { useEffect(() => {
selectedGroupRef.current = selectedGroup; selectedGroupRef.current = selectedGroup;
setSelectedGroupId(selectedGroup?.groupId); setSelectedGroupId(selectedGroup?.groupId);
}, [selectedGroup]); }, [selectedGroup]);
useEffect(() => { useEffect(() => {
selectedDirectRef.current = selectedDirect; selectedDirectRef.current = selectedDirect;
}, [selectedDirect]); }, [selectedDirect]);
@ -852,6 +851,7 @@ export const Group = ({
Object.keys(groupsProperties) Object.keys(groupsProperties)
) )
) { ) {
// TODO: empty block. Check it!
} else { } else {
getGroupsProperties(myAddress); getGroupsProperties(myAddress);
} }
@ -976,6 +976,7 @@ export const Group = ({
console.log(error); console.log(error);
} }
}; };
useEffect(() => { useEffect(() => {
if ( if (
!initiatedGetMembers.current && !initiatedGetMembers.current &&
@ -1524,6 +1525,7 @@ export const Group = ({
setMobileViewMode('home'); setMobileViewMode('home');
} }
if (!isMobile) { if (!isMobile) {
// TODO: empty block. Check it!
} }
setDesktopViewMode('home'); setDesktopViewMode('home');
@ -1601,27 +1603,29 @@ export const Group = ({
} }
}; };
const theme = useTheme();
const renderDirects = () => { const renderDirects = () => {
return ( return (
<div <div
style={{ style={{
display: 'flex',
width: isMobile ? '100%' : '380px',
flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%', background: theme.palette.background.default,
background: 'var(--bg-primary)',
borderRadius: '0px 15px 15px 0px', borderRadius: '0px 15px 15px 0px',
display: 'flex',
flexDirection: 'column',
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%',
width: isMobile ? '100%' : '380px',
}} }}
> >
{!isMobile && ( {!isMobile && (
<Box <Box
sx={{ sx={{
width: '100%',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center',
display: 'flex', display: 'flex',
gap: '10px', gap: '10px',
justifyContent: 'center',
width: '100%',
}} }}
> >
<ButtonBase <ButtonBase
@ -1634,8 +1638,8 @@ export const Group = ({
groupChatHasUnread || groupsAnnHasUnread groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'groups' : desktopSideView === 'groups'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
label="Groups" label="Groups"
selected={desktopSideView === 'groups'} selected={desktopSideView === 'groups'}
@ -1647,8 +1651,8 @@ export const Group = ({
groupChatHasUnread || groupsAnnHasUnread groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'groups' : desktopSideView === 'groups'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
/> />
</IconWrapper> </IconWrapper>
@ -1664,8 +1668,8 @@ export const Group = ({
directChatHasUnread directChatHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'directs' : desktopSideView === 'directs'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
label="Messaging" label="Messaging"
selected={desktopSideView === 'directs'} selected={desktopSideView === 'directs'}
@ -1676,8 +1680,8 @@ export const Group = ({
directChatHasUnread directChatHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'directs' : desktopSideView === 'directs'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
/> />
</IconWrapper> </IconWrapper>
@ -1687,12 +1691,12 @@ export const Group = ({
<div <div
style={{ style={{
display: 'flex',
width: '100%',
flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
display: 'flex',
flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
overflowY: 'auto', overflowY: 'auto',
width: '100%',
}} }}
> >
{directs.map((direct: any) => ( {directs.map((direct: any) => (
@ -1731,11 +1735,14 @@ export const Group = ({
width: '100%', width: '100%',
flexDirection: 'column', flexDirection: 'column',
cursor: 'pointer', cursor: 'pointer',
border: '1px #232428 solid', borderColor: theme.palette.primary,
borderWidth: '1px',
borderStyle: 'solid',
padding: '2px', padding: '2px',
borderRadius: '2px', borderRadius: '2px',
background: background:
direct?.address === selectedDirect?.address && 'white', direct?.address === selectedDirect?.address &&
theme.palette.background.default,
}} }}
> >
<Box <Box
@ -1748,8 +1755,8 @@ export const Group = ({
<ListItemAvatar> <ListItemAvatar>
<Avatar <Avatar
sx={{ sx={{
background: '#232428', background: theme.palette.background.default,
color: 'white', color: theme.palette.text.primary,
}} }}
alt={direct?.name || direct?.address} alt={direct?.name || direct?.address}
> >
@ -1767,7 +1774,7 @@ export const Group = ({
style: { style: {
color: color:
direct?.address === selectedDirect?.address && direct?.address === selectedDirect?.address &&
'black', theme.palette.text.primary,
textWrap: 'wrap', textWrap: 'wrap',
overflow: 'hidden', overflow: 'hidden',
}, },
@ -1776,7 +1783,7 @@ export const Group = ({
style: { style: {
color: color:
direct?.address === selectedDirect?.address && direct?.address === selectedDirect?.address &&
'black', theme.palette.text.primary,
fontSize: '12px', fontSize: '12px',
}, },
}} }}
@ -1821,7 +1828,7 @@ export const Group = ({
> >
<CreateIcon <CreateIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
New Chat New Chat
@ -1840,7 +1847,7 @@ export const Group = ({
flexDirection: 'column', flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%', height: isMobile ? `calc(${rootHeight} - 45px)` : '100%',
background: !isMobile && 'var(--bg-primary)', background: !isMobile && theme.palette.background.default,
borderRadius: !isMobile && '0px 15px 15px 0px', borderRadius: !isMobile && '0px 15px 15px 0px',
}} }}
> >
@ -1864,8 +1871,8 @@ export const Group = ({
groupChatHasUnread || groupsAnnHasUnread groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'groups' : desktopSideView === 'groups'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
label="Groups" label="Groups"
selected={desktopSideView === 'groups'} selected={desktopSideView === 'groups'}
@ -1877,8 +1884,8 @@ export const Group = ({
groupChatHasUnread || groupsAnnHasUnread groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'groups' : desktopSideView === 'groups'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
/> />
</IconWrapper> </IconWrapper>
@ -1894,8 +1901,8 @@ export const Group = ({
directChatHasUnread directChatHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'directs' : desktopSideView === 'directs'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
label="Messaging" label="Messaging"
selected={desktopSideView === 'directs'} selected={desktopSideView === 'directs'}
@ -1906,8 +1913,8 @@ export const Group = ({
directChatHasUnread directChatHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'directs' : desktopSideView === 'directs'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
/> />
</IconWrapper> </IconWrapper>
@ -1917,15 +1924,15 @@ export const Group = ({
<div <div
style={{ style={{
display: 'flex',
width: '100%',
flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
display: 'flex',
flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
overflowY: 'auto',
visibility: chatMode === 'directs' && 'hidden',
position: chatMode === 'directs' && 'fixed',
left: chatMode === 'directs' && '-1000px', left: chatMode === 'directs' && '-1000px',
overflowY: 'auto',
position: chatMode === 'directs' && 'fixed',
visibility: chatMode === 'directs' && 'hidden',
width: '100%',
}} }}
> >
{groups.map((group: any) => ( {groups.map((group: any) => (
@ -1967,14 +1974,17 @@ export const Group = ({
}} }}
sx={{ sx={{
display: 'flex', display: 'flex',
width: '100%',
flexDirection: 'column',
cursor: 'pointer',
border: '1px #232428 solid',
padding: '2px',
borderRadius: '2px',
background: background:
group?.groupId === selectedGroup?.groupId && 'white', group?.groupId === selectedGroup?.groupId &&
theme.palette.background.default,
borderColor: theme.palette.primary,
borderRadius: '2px',
borderStyle: 'solid',
borderWidth: '1px',
cursor: 'pointer',
flexDirection: 'column',
padding: '2px',
width: '100%',
}} }}
> >
<ContextMenu <ContextMenu
@ -1984,22 +1994,22 @@ export const Group = ({
> >
<Box <Box
sx={{ sx={{
alignItems: 'center',
display: 'flex', display: 'flex',
width: '100%', width: '100%',
alignItems: 'center',
}} }}
> >
<ListItemAvatar> <ListItemAvatar>
{groupsProperties[group?.groupId]?.isOpen === false ? ( {groupsProperties[group?.groupId]?.isOpen === false ? (
<Box <Box
sx={{ sx={{
width: '40px',
height: '40px',
borderRadius: '50%',
background: '#232428',
display: 'flex',
alignItems: 'center', alignItems: 'center',
background: theme.palette.background.default,
borderRadius: '50%',
display: 'flex',
height: '40px',
justifyContent: 'center', justifyContent: 'center',
width: '40px',
}} }}
> >
<LockIcon <LockIcon
@ -2011,13 +2021,13 @@ export const Group = ({
) : ( ) : (
<Box <Box
sx={{ sx={{
width: '40px',
height: '40px',
borderRadius: '50%',
background: '#232428',
display: 'flex',
alignItems: 'center', alignItems: 'center',
background: theme.palette.background.default,
borderRadius: '50%',
display: 'flex',
height: '40px',
justifyContent: 'center', justifyContent: 'center',
width: '40px',
}} }}
> >
<NoEncryptionGmailerrorredIcon <NoEncryptionGmailerrorredIcon
@ -2026,15 +2036,6 @@ export const Group = ({
}} }}
/> />
</Box> </Box>
// <Avatar
// sx={{
// background: "#232428",
// color: "white",
// }}
// alt={group?.groupName}
// >
// {group.groupName?.charAt(0)}
// </Avatar>
)} )}
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
@ -2050,14 +2051,14 @@ export const Group = ({
style: { style: {
color: color:
group?.groupId === selectedGroup?.groupId && group?.groupId === selectedGroup?.groupId &&
'black', theme.palette.text.primary,
}, },
}} // Change the color of the primary text }} // Change the color of the primary text
secondaryTypographyProps={{ secondaryTypographyProps={{
style: { style: {
color: color:
group?.groupId === selectedGroup?.groupId && group?.groupId === selectedGroup?.groupId &&
'black', theme.palette.text.primary,
fontSize: '12px', fontSize: '12px',
}, },
}} }}
@ -2100,10 +2101,10 @@ export const Group = ({
<div <div
style={{ style={{
display: 'flex', display: 'flex',
width: '100%', gap: '10px',
justifyContent: 'center', justifyContent: 'center',
padding: '10px', padding: '10px',
gap: '10px', width: '100%',
}} }}
> >
{chatMode === 'groups' && ( {chatMode === 'groups' && (
@ -2115,7 +2116,7 @@ export const Group = ({
> >
<AddCircleOutlineIcon <AddCircleOutlineIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
Group Mgmt Group Mgmt
@ -2132,7 +2133,7 @@ export const Group = ({
> >
<PersonOffIcon <PersonOffIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
</CustomButton> </CustomButton>
@ -2149,7 +2150,7 @@ export const Group = ({
> >
<CreateIcon <CreateIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
New Chat New Chat
@ -2166,6 +2167,7 @@ export const Group = ({
myAddress={myAddress} myAddress={myAddress}
setIsLoadingGroups={setIsLoadingGroups} setIsLoadingGroups={setIsLoadingGroups}
/> />
<CustomizedSnackbars <CustomizedSnackbars
open={openSnack} open={openSnack}
setOpen={setOpenSnack} setOpen={setOpenSnack}
@ -2175,11 +2177,11 @@ export const Group = ({
<div <div
style={{ style={{
display: 'flex',
width: '100%',
height: isMobile ? '100%' : '100%',
flexDirection: 'row',
alignItems: 'flex-start', alignItems: 'flex-start',
display: 'flex',
flexDirection: 'row',
height: isMobile ? '100%' : '100%',
width: '100%',
}} }}
> >
{!isMobile && {!isMobile &&
@ -2207,6 +2209,7 @@ export const Group = ({
desktopViewMode === 'chat' && desktopViewMode === 'chat' &&
desktopSideView !== 'directs' && desktopSideView !== 'directs' &&
renderGroups()} renderGroups()}
{!isMobile && {!isMobile &&
desktopViewMode === 'chat' && desktopViewMode === 'chat' &&
desktopSideView === 'directs' && desktopSideView === 'directs' &&
@ -2230,26 +2233,26 @@ export const Group = ({
{isMobile && ( {isMobile && (
<Box <Box
sx={{ sx={{
display: 'flex',
alignItems: 'center', alignItems: 'center',
width: '100%', display: 'flex',
marginTop: '14px',
justifyContent: 'center',
height: '15px', height: '15px',
justifyContent: 'center',
marginTop: '14px',
width: '100%',
}} }}
> >
<Box <Box
sx={{ sx={{
display: 'flex',
alignItems: 'center', alignItems: 'center',
display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
width: '320px', width: '320px',
}} }}
> >
<Box <Box
sx={{ sx={{
display: 'flex',
alignItems: 'center', alignItems: 'center',
display: 'flex',
width: '50px', width: '50px',
}} }}
> >
@ -2264,10 +2267,10 @@ export const Group = ({
<Box <Box
sx={{ sx={{
display: 'flex',
alignItems: 'center', alignItems: 'center',
width: '50px', display: 'flex',
justifyContent: 'flex-end', justifyContent: 'flex-end',
width: '50px',
}} }}
> >
<ButtonBase <ButtonBase
@ -2284,17 +2287,15 @@ export const Group = ({
)} )}
<Box <Box
sx={{ sx={{
position: 'absolute', background: theme.palette.background.default,
right: !(desktopViewMode === 'chat') ? 'unset' : '0px',
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px', bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
top: !(desktopViewMode === 'chat') ? 'unset' : '0px',
background: '#27282c',
zIndex: 5,
height: isMobile && `calc(${rootHeight} - 45px)`, height: isMobile && `calc(${rootHeight} - 45px)`,
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
left: !(desktopViewMode === 'chat') ? '-100000px' : '0px', left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
position: 'absolute',
right: !(desktopViewMode === 'chat') ? 'unset' : '0px',
top: !(desktopViewMode === 'chat') ? 'unset' : '0px',
zIndex: 5,
}} }}
> >
<ChatDirect <ChatDirect
@ -2308,7 +2309,6 @@ export const Group = ({
balance={balance} balance={balance}
close={() => { close={() => {
setSelectedDirect(null); setSelectedDirect(null);
setNewChat(false); setNewChat(false);
}} }}
setMobileViewModeKeepOpen={setMobileViewModeKeepOpen} setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
@ -2319,18 +2319,18 @@ export const Group = ({
{desktopViewMode === 'chat' && !selectedGroup && ( {desktopViewMode === 'chat' && !selectedGroup && (
<Box <Box
sx={{ sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
display: 'flex',
height: '100%', height: '100%',
justifyContent: 'center',
width: '100%',
}} }}
> >
<Typography <Typography
sx={{ sx={{
fontSize: '14px', fontSize: '14px',
fontWeight: 400, fontWeight: 400,
color: 'rgba(255, 255, 255, 0.2)', color: theme.palette.text.primary,
}} }}
> >
No group selected No group selected
@ -2423,12 +2423,12 @@ export const Group = ({
!secretKeyPublishDate && ( !secretKeyPublishDate && (
<div <div
style={{ style={{
display: 'flex',
width: '100%',
height: '100%',
flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
display: 'flex',
flexDirection: 'column',
height: '100%',
padding: '20px', padding: '20px',
width: '100%',
}} }}
> >
{' '} {' '}
@ -2550,9 +2550,9 @@ export const Group = ({
<Box <Box
sx={{ sx={{
bottom: '25px',
display: 'flex', display: 'flex',
position: 'absolute', position: 'absolute',
bottom: '25px',
right: '25px', right: '25px',
zIndex: 100, zIndex: 100,
}} }}
@ -2602,24 +2602,23 @@ export const Group = ({
<> <>
<Box <Box
sx={{ sx={{
background: theme.palette.background.default,
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
height: isMobile && `calc(${rootHeight} - 45px)`,
left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
position: 'absolute', position: 'absolute',
right: !(desktopViewMode === 'chat') ? 'unset' : '0px', right: !(desktopViewMode === 'chat') ? 'unset' : '0px',
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
top: !(desktopViewMode === 'chat') ? 'unset' : '0px', top: !(desktopViewMode === 'chat') ? 'unset' : '0px',
background: '#27282c',
zIndex: 5, zIndex: 5,
height: isMobile && `calc(${rootHeight} - 45px)`,
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
}} }}
> >
<Box <Box
sx={{ sx={{
position: 'relative',
flexGrow: 1,
display: 'flex', display: 'flex',
flexGrow: 1,
height: '100%', height: '100%',
position: 'relative',
}} }}
> >
<ChatDirect <ChatDirect

134
src/components/Group/GroupInvites.tsx
View File

@ -1,22 +1,17 @@
import * as React from "react"; import * as React from 'react';
import List from "@mui/material/List"; import List from '@mui/material/List';
import ListItem from "@mui/material/ListItem"; import ListItem from '@mui/material/ListItem';
import ListItemButton from "@mui/material/ListItemButton"; import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from '@mui/material/ListItemText';
import ListItemText from "@mui/material/ListItemText"; import IconButton from '@mui/material/IconButton';
import Checkbox from "@mui/material/Checkbox"; import GroupAddIcon from '@mui/icons-material/GroupAdd';
import IconButton from "@mui/material/IconButton"; import { executeEvent } from '../../utils/events';
import CommentIcon from "@mui/icons-material/Comment"; import { Box, ButtonBase, Collapse, Typography, useTheme } from '@mui/material';
import InfoIcon from "@mui/icons-material/Info"; import { getGroupNames } from './UserListOfInvites';
import GroupAddIcon from "@mui/icons-material/GroupAdd"; import { CustomLoader } from '../../common/CustomLoader';
import { executeEvent } from "../../utils/events"; import { getBaseApiReact, isMobile } from '../../App';
import { Box, ButtonBase, Collapse, Typography } from "@mui/material"; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { Spacer } from "../../common/Spacer"; import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import { getGroupNames } from "./UserListOfInvites";
import { CustomLoader } from "../../common/CustomLoader";
import { getBaseApiReact, isMobile } from "../../App";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
export const GroupInvites = ({ myAddress, setOpenAddGroup }) => { export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState( const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState(
@ -37,11 +32,14 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
setGroupsWithJoinRequests(resMoreData); setGroupsWithJoinRequests(resMoreData);
} catch (error) { } catch (error) {
console.log(error);
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
const theme = useTheme();
React.useEffect(() => { React.useEffect(() => {
if (myAddress) { if (myAddress) {
getJoinRequests(); getJoinRequests();
@ -51,57 +49,65 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
return ( return (
<Box <Box
sx={{ sx={{
width: "100%", alignItems: 'center',
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
alignItems: "center", width: '100%',
}} }}
> >
<ButtonBase <ButtonBase
sx={{ sx={{
width: "322px", display: 'flex',
display: "flex", flexDirection: 'row',
flexDirection: "row",
padding: "0px 20px",
gap: '10px', gap: '10px',
justifyContent: 'flex-start' justifyContent: 'flex-start',
padding: '0px 20px',
width: '322px',
}} }}
onClick={() => setIsExpanded((prev) => !prev)} onClick={() => setIsExpanded((prev) => !prev)}
> >
<Typography <Typography
sx={{ sx={{
fontSize: "1rem", fontSize: '1rem',
}} }}
> >
Group Invites {groupsWithJoinRequests?.length > 0 && ` (${groupsWithJoinRequests?.length})`} Group Invites{' '}
{groupsWithJoinRequests?.length > 0 &&
` (${groupsWithJoinRequests?.length})`}
</Typography> </Typography>
{isExpanded ? <ExpandLessIcon sx={{ {isExpanded ? (
marginLeft: 'auto' <ExpandLessIcon
}} /> : ( sx={{
<ExpandMoreIcon sx={{ marginLeft: 'auto',
marginLeft: 'auto' }}
}}/> />
) : (
<ExpandMoreIcon
sx={{
marginLeft: 'auto',
}}
/>
)} )}
</ButtonBase> </ButtonBase>
<Collapse in={isExpanded} timeout="auto" unmountOnExit> <Collapse in={isExpanded} timeout="auto" unmountOnExit>
<Box <Box
sx={{ sx={{
width: "322px", bgcolor: theme.palette.background.paper,
height: isMobile ? "165px" : "250px", borderRadius: '19px',
display: 'flex',
display: "flex", flexDirection: 'column',
flexDirection: "column", height: isMobile ? '165px' : '250px',
bgcolor: "background.paper", padding: '20px',
padding: "20px", width: '322px',
borderRadius: "19px",
}} }}
> >
{loading && groupsWithJoinRequests.length === 0 && ( {loading && groupsWithJoinRequests.length === 0 && (
<Box <Box
sx={{ sx={{
width: "100%", display: 'flex',
display: "flex", justifyContent: 'center',
justifyContent: "center", width: '100%',
}} }}
> >
<CustomLoader /> <CustomLoader />
@ -110,18 +116,18 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
{!loading && groupsWithJoinRequests.length === 0 && ( {!loading && groupsWithJoinRequests.length === 0 && (
<Box <Box
sx={{ sx={{
width: "100%", alignItems: 'center',
display: "flex", display: 'flex',
justifyContent: "center", height: '100%',
alignItems: "center", justifyContent: 'center',
height: "100%", width: '100%',
}} }}
> >
<Typography <Typography
sx={{ sx={{
fontSize: "11px", color: theme.palette.text.primary,
fontSize: '11px',
fontWeight: 400, fontWeight: 400,
color: "rgba(255, 255, 255, 0.2)",
}} }}
> >
Nothing to display Nothing to display
@ -130,11 +136,11 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
)} )}
<List <List
sx={{ sx={{
width: "100%", width: '100%',
maxWidth: 360, maxWidth: 360,
bgcolor: "background.paper", bgcolor: theme.palette.background.paper,
maxHeight: "300px", maxHeight: '300px',
overflow: "auto", overflow: 'auto',
}} }}
className="scrollable-container" className="scrollable-container"
> >
@ -142,13 +148,13 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
return ( return (
<ListItem <ListItem
sx={{ sx={{
marginBottom: "20px", marginBottom: '20px',
}} }}
key={group?.groupId} key={group?.groupId}
onClick={() => { onClick={() => {
setOpenAddGroup(true); setOpenAddGroup(true);
setTimeout(() => { setTimeout(() => {
executeEvent("openGroupInvitesRequest", {}); executeEvent('openGroupInvitesRequest', {});
}, 300); }, 300);
}} }}
disablePadding disablePadding
@ -156,8 +162,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
<IconButton edge="end" aria-label="comments"> <IconButton edge="end" aria-label="comments">
<GroupAddIcon <GroupAddIcon
sx={{ sx={{
color: "white", color: theme.palette.text.primary,
fontSize: "18px", fontSize: '18px',
}} }}
/> />
</IconButton> </IconButton>
@ -166,8 +172,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
<ListItemButton disableRipple role={undefined} dense> <ListItemButton disableRipple role={undefined} dense>
<ListItemText <ListItemText
sx={{ sx={{
"& .MuiTypography-root": { '& .MuiTypography-root': {
fontSize: "13px", fontSize: '13px',
fontWeight: 400, fontWeight: 400,
}, },
}} }}