mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-04-28 22:07:52 +00:00
Add theme
This commit is contained in:
Nicola Benaglia
parent
af1d44990a
commit
2013561db7
@ -1,16 +1,14 @@
|
||||
import React, { useState } from "react";
|
||||
import InfiniteScroll from "react-infinite-scroller";
|
||||
import {
|
||||
MainContainer,
|
||||
ChatContainer,
|
||||
MessageList,
|
||||
Message,
|
||||
MessageInput,
|
||||
Avatar
|
||||
} from "@chatscope/chat-ui-kit-react";
|
||||
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
|
||||
Avatar,
|
||||
} from '@chatscope/chat-ui-kit-react';
|
||||
import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
|
||||
|
||||
export const ChatContainerComp = ({messages}) => {
|
||||
export const ChatContainerComp = ({ messages }) => {
|
||||
// const [messages, setMessages] = useState([
|
||||
// { id: 1, text: "Hello! How are you?", sender: "Joe"},
|
||||
// { id: 2, text: "I'm good, thank you!", sender: "Me" }
|
||||
@ -26,31 +24,31 @@ export const ChatContainerComp = ({messages}) => {
|
||||
// };
|
||||
|
||||
return (
|
||||
<div style={{ height: "500px", width: "300px" }}>
|
||||
<div style={{ height: '500px', width: '300px' }}>
|
||||
<MainContainer>
|
||||
<ChatContainer>
|
||||
<MessageList>
|
||||
{messages.map((msg) => (
|
||||
<Message
|
||||
key={msg.id}
|
||||
model={{
|
||||
message: msg.text,
|
||||
sentTime: "just now",
|
||||
sender: msg.senderName,
|
||||
direction: 'incoming',
|
||||
position: "single"
|
||||
}}
|
||||
>
|
||||
{msg.direction === "incoming" && <Avatar name={msg.senderName} />}
|
||||
</Message>
|
||||
))}
|
||||
</MessageList>
|
||||
|
||||
<MessageList>
|
||||
{messages.map((msg) => (
|
||||
<Message
|
||||
key={msg.id}
|
||||
model={{
|
||||
message: msg.text,
|
||||
sentTime: 'just now',
|
||||
sender: msg.senderName,
|
||||
direction: 'incoming',
|
||||
position: 'single',
|
||||
}}
|
||||
>
|
||||
{msg.direction === 'incoming' && (
|
||||
<Avatar name={msg.senderName} />
|
||||
)}
|
||||
</Message>
|
||||
))}
|
||||
</MessageList>
|
||||
|
||||
<MessageInput placeholder="Type a message..." />
|
||||
</ChatContainer>
|
||||
</MainContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -1,23 +1,15 @@
|
||||
import React, {
|
||||
useCallback,
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
useMemo,
|
||||
} from "react";
|
||||
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";
|
||||
import { useCallback, useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { MessageItem } from './MessageItem';
|
||||
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
|
||||
import { Box, Typography, useTheme } from '@mui/material';
|
||||
import { ChatOptions } from './ChatOptions';
|
||||
import ErrorBoundary from '../../common/ErrorBoundary';
|
||||
|
||||
export const ChatList = ({
|
||||
initialMessages,
|
||||
myAddress,
|
||||
tempMessages,
|
||||
chatId,
|
||||
onReply,
|
||||
onEdit,
|
||||
handleReaction,
|
||||
@ -29,7 +21,7 @@ export const ChatList = ({
|
||||
enableMentions,
|
||||
openQManager,
|
||||
hasSecretKey,
|
||||
isPrivate
|
||||
isPrivate,
|
||||
}) => {
|
||||
const parentRef = useRef();
|
||||
const [messages, setMessages] = useState(initialMessages);
|
||||
@ -42,33 +34,32 @@ export const ChatList = ({
|
||||
// Initialize the virtualizer
|
||||
const rowVirtualizer = useVirtualizer({
|
||||
count: messages.length,
|
||||
getItemKey: (index) => messages[index]?.tempSignature || messages[index].signature,
|
||||
getItemKey: (index) =>
|
||||
messages[index]?.tempSignature || messages[index].signature,
|
||||
getScrollElement: () => parentRef?.current,
|
||||
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
|
||||
});
|
||||
|
||||
const isAtBottom = useMemo(()=> {
|
||||
const isAtBottom = useMemo(() => {
|
||||
if (parentRef.current && rowVirtualizer?.isScrolling !== undefined) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
|
||||
const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed
|
||||
return atBottom
|
||||
}
|
||||
const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed
|
||||
return atBottom;
|
||||
}
|
||||
|
||||
return false
|
||||
|
||||
}, [rowVirtualizer?.isScrolling])
|
||||
return false;
|
||||
}, [rowVirtualizer?.isScrolling]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!parentRef.current || rowVirtualizer?.isScrolling === undefined) return;
|
||||
if(isAtBottom){
|
||||
if (isAtBottom) {
|
||||
if (scrollingIntervalRef.current) {
|
||||
clearTimeout(scrollingIntervalRef.current);
|
||||
}
|
||||
setShowScrollDownButton(false);
|
||||
return;
|
||||
} else
|
||||
if (rowVirtualizer?.isScrolling) {
|
||||
} else if (rowVirtualizer?.isScrolling) {
|
||||
if (scrollingIntervalRef.current) {
|
||||
clearTimeout(scrollingIntervalRef.current);
|
||||
}
|
||||
@ -108,7 +99,13 @@ export const ChatList = ({
|
||||
|
||||
setTimeout(() => {
|
||||
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) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
|
||||
@ -136,9 +133,9 @@ export const ChatList = ({
|
||||
const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1;
|
||||
if (rowVirtualizer) {
|
||||
if (divideIndex) {
|
||||
rowVirtualizer.scrollToIndex(divideIndex, { align: "start" });
|
||||
rowVirtualizer.scrollToIndex(divideIndex, { align: 'start' });
|
||||
} else {
|
||||
rowVirtualizer.scrollToIndex(index, { align: "end" });
|
||||
rowVirtualizer.scrollToIndex(index, { align: 'end' });
|
||||
}
|
||||
}
|
||||
handleMessageSeen();
|
||||
@ -152,7 +149,7 @@ export const ChatList = ({
|
||||
}))
|
||||
);
|
||||
setShowScrollButton(false);
|
||||
lastSeenUnreadMessageTimestamp.current = Date.now()
|
||||
lastSeenUnreadMessageTimestamp.current = Date.now();
|
||||
}, []);
|
||||
|
||||
const sentNewMessageGroupFunc = useCallback(() => {
|
||||
@ -166,9 +163,9 @@ export const ChatList = ({
|
||||
}, [messages]);
|
||||
|
||||
useEffect(() => {
|
||||
subscribeToEvent("sent-new-message-group", sentNewMessageGroupFunc);
|
||||
subscribeToEvent('sent-new-message-group', sentNewMessageGroupFunc);
|
||||
return () => {
|
||||
unsubscribeFromEvent("sent-new-message-group", sentNewMessageGroupFunc);
|
||||
unsubscribeFromEvent('sent-new-message-group', sentNewMessageGroupFunc);
|
||||
};
|
||||
}, [sentNewMessageGroupFunc]);
|
||||
|
||||
@ -181,21 +178,24 @@ export const ChatList = ({
|
||||
const goToMessage = useCallback((idx) => {
|
||||
rowVirtualizer.scrollToIndex(idx);
|
||||
}, []);
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@ -203,27 +203,26 @@ export const ChatList = ({
|
||||
className="List"
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
overflow: "auto",
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
height: "0px",
|
||||
overflow: 'auto',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
height: '0px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: rowVirtualizer.getTotalSize(),
|
||||
width: "100%",
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
|
||||
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
||||
const index = virtualRow.index;
|
||||
let message = messages[index] || null; // Safeguard against undefined
|
||||
@ -231,7 +230,7 @@ export const ChatList = ({
|
||||
let reply = null;
|
||||
let reactions = null;
|
||||
let isUpdating = false;
|
||||
|
||||
|
||||
try {
|
||||
// Safeguard for message existence
|
||||
if (message) {
|
||||
@ -239,16 +238,19 @@ export const ChatList = ({
|
||||
replyIndex = messages.findIndex(
|
||||
(msg) => msg?.signature === message?.repliedTo
|
||||
);
|
||||
|
||||
|
||||
if (message?.repliedTo && replyIndex !== -1) {
|
||||
reply = { ...(messages[replyIndex] || {}) };
|
||||
if (chatReferences?.[reply?.signature]?.edit) {
|
||||
reply.decryptedData = chatReferences[reply?.signature]?.edit;
|
||||
reply.text = chatReferences[reply?.signature]?.edit?.message;
|
||||
reply.editTimestamp = chatReferences[reply?.signature]?.edit?.timestamp
|
||||
reply.decryptedData =
|
||||
chatReferences[reply?.signature]?.edit;
|
||||
reply.text =
|
||||
chatReferences[reply?.signature]?.edit?.message;
|
||||
reply.editTimestamp =
|
||||
chatReferences[reply?.signature]?.edit?.timestamp;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// GroupDirectId logic
|
||||
if (message?.message && message?.groupDirectId) {
|
||||
replyIndex = messages.findIndex(
|
||||
@ -264,24 +266,34 @@ export const ChatList = ({
|
||||
status: message?.status,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// Check for reactions and edits
|
||||
if (chatReferences?.[message.signature]) {
|
||||
reactions = chatReferences[message.signature]?.reactions || null;
|
||||
|
||||
if (chatReferences[message.signature]?.edit?.message && message?.text) {
|
||||
message.text = chatReferences[message.signature]?.edit?.message;
|
||||
message.isEdit = true
|
||||
message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp
|
||||
reactions =
|
||||
chatReferences[message.signature]?.reactions || null;
|
||||
|
||||
if (
|
||||
chatReferences[message.signature]?.edit?.message &&
|
||||
message?.text
|
||||
) {
|
||||
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) {
|
||||
message.messageText = chatReferences[message.signature]?.edit?.messageText;
|
||||
message.isEdit = true
|
||||
message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp
|
||||
if (
|
||||
chatReferences[message.signature]?.edit?.messageText &&
|
||||
message?.messageText
|
||||
) {
|
||||
message.messageText =
|
||||
chatReferences[message.signature]?.edit?.messageText;
|
||||
message.isEdit = true;
|
||||
message.editTimestamp =
|
||||
chatReferences[message.signature]?.edit?.timestamp;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Check if message is updating
|
||||
if (
|
||||
tempChatReferences?.some(
|
||||
@ -292,34 +304,37 @@ export const ChatList = ({
|
||||
}
|
||||
}
|
||||
} 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
|
||||
message = null;
|
||||
reply = null;
|
||||
reactions = null;
|
||||
}
|
||||
// Render fallback if message is null
|
||||
// Render fallback if message is null
|
||||
if (!message) {
|
||||
return (
|
||||
<div
|
||||
key={virtualRow.index}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: "50%",
|
||||
transform: `translateY(${virtualRow.start}px) translateX(-50%)`,
|
||||
width: "100%",
|
||||
padding: "10px 0",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
}}
|
||||
>
|
||||
<Typography>Error loading message.</Typography>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={virtualRow.index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: '50%',
|
||||
transform: `translateY(${virtualRow.start}px) translateX(-50%)`,
|
||||
width: '100%',
|
||||
padding: '10px 0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
}}
|
||||
>
|
||||
<Typography>Error loading message.</Typography>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -327,49 +342,47 @@ export const ChatList = ({
|
||||
ref={rowVirtualizer.measureElement} //measure dynamic row height
|
||||
key={message.signature}
|
||||
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,
|
||||
left: "50%", // Move to the center horizontally
|
||||
transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering
|
||||
width: "100%", // Control width (90% of the parent)
|
||||
padding: "10px 0",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
overscrollBehavior: "none",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
width: '100%', // Control width (90% of the parent)
|
||||
}}
|
||||
>
|
||||
<ErrorBoundary
|
||||
<ErrorBoundary
|
||||
fallback={
|
||||
<Typography>
|
||||
Error loading content: Invalid Data
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<MessageItem
|
||||
isLast={index === messages.length - 1}
|
||||
lastSignature={lastSignature}
|
||||
message={message}
|
||||
onSeen={handleMessageSeen}
|
||||
isTemp={!!message?.isTemp}
|
||||
myAddress={myAddress}
|
||||
onReply={onReply}
|
||||
onEdit={onEdit}
|
||||
reply={reply}
|
||||
replyIndex={replyIndex}
|
||||
scrollToItem={goToMessage}
|
||||
handleReaction={handleReaction}
|
||||
reactions={reactions}
|
||||
isUpdating={isUpdating}
|
||||
isPrivate={isPrivate}
|
||||
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
<MessageItem
|
||||
isLast={index === messages.length - 1}
|
||||
lastSignature={lastSignature}
|
||||
message={message}
|
||||
onSeen={handleMessageSeen}
|
||||
isTemp={!!message?.isTemp}
|
||||
myAddress={myAddress}
|
||||
onReply={onReply}
|
||||
onEdit={onEdit}
|
||||
reply={reply}
|
||||
replyIndex={replyIndex}
|
||||
scrollToItem={goToMessage}
|
||||
handleReaction={handleReaction}
|
||||
reactions={reactions}
|
||||
isUpdating={isUpdating}
|
||||
isPrivate={isPrivate}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -377,17 +390,17 @@ export const ChatList = ({
|
||||
<button
|
||||
onClick={() => scrollToBottom()}
|
||||
style={{
|
||||
backgroundColor: 'var(--unread)',
|
||||
border: 'none',
|
||||
borderRadius: '20px',
|
||||
bottom: 20,
|
||||
position: "absolute",
|
||||
color: theme.palette.text.primary,
|
||||
cursor: 'pointer',
|
||||
outline: 'none',
|
||||
padding: '10px 20px',
|
||||
position: 'absolute',
|
||||
right: 20,
|
||||
backgroundColor: "var(--unread)",
|
||||
color: "black",
|
||||
padding: "10px 20px",
|
||||
borderRadius: "20px",
|
||||
cursor: "pointer",
|
||||
zIndex: 10,
|
||||
border: "none",
|
||||
outline: "none",
|
||||
}}
|
||||
>
|
||||
Scroll to Unread Messages
|
||||
@ -397,18 +410,18 @@ export const ChatList = ({
|
||||
<button
|
||||
onClick={() => scrollToBottom()}
|
||||
style={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: 'none',
|
||||
borderRadius: '20px',
|
||||
bottom: 20,
|
||||
position: "absolute",
|
||||
color: theme.palette.text.primary,
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
outline: 'none',
|
||||
padding: '10px 20px',
|
||||
position: 'absolute',
|
||||
right: 20,
|
||||
backgroundColor: "var(--Mail-Background)",
|
||||
color: "white",
|
||||
padding: "10px 20px",
|
||||
borderRadius: "20px",
|
||||
cursor: "pointer",
|
||||
zIndex: 10,
|
||||
border: "none",
|
||||
outline: "none",
|
||||
fontSize: "16px",
|
||||
}}
|
||||
>
|
||||
Scroll to bottom
|
||||
@ -417,7 +430,7 @@ export const ChatList = ({
|
||||
</div>
|
||||
{enableMentions && (hasSecretKey || isPrivate === false) && (
|
||||
<ChatOptions
|
||||
openQManager={openQManager}
|
||||
openQManager={openQManager}
|
||||
messages={messages}
|
||||
goToMessage={goToMessage}
|
||||
members={members}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -29,15 +29,14 @@ import { getFee } from '../../background';
|
||||
import { MyContext, isMobile } from '../../App';
|
||||
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
|
||||
|
||||
export const Label = styled('label')(
|
||||
({ theme }) => `
|
||||
export const Label = styled('label')`
|
||||
display: block;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 400;
|
||||
`
|
||||
);
|
||||
margin-bottom: 4px;
|
||||
`;
|
||||
|
||||
const Transition = React.forwardRef(function Transition(
|
||||
props: TransitionProps & {
|
||||
children: React.ReactElement;
|
||||
|
||||
@ -7,6 +7,7 @@ import {
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from '@mui/material';
|
||||
import React, {
|
||||
useCallback,
|
||||
@ -477,22 +478,20 @@ export const Group = ({
|
||||
}
|
||||
setIsOpenSideViewGroups((prev) => !prev);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
timestampEnterDataRef.current = timestampEnterData;
|
||||
}, [timestampEnterData]);
|
||||
|
||||
useEffect(() => {
|
||||
isFocusedRef.current = isFocused;
|
||||
}, [isFocused]);
|
||||
useEffect(() => {
|
||||
groupSectionRef.current = groupSection;
|
||||
}, [groupSection]);
|
||||
|
||||
useEffect(() => {
|
||||
selectedGroupRef.current = selectedGroup;
|
||||
setSelectedGroupId(selectedGroup?.groupId);
|
||||
}, [selectedGroup]);
|
||||
|
||||
useEffect(() => {
|
||||
selectedDirectRef.current = selectedDirect;
|
||||
}, [selectedDirect]);
|
||||
@ -852,6 +851,7 @@ export const Group = ({
|
||||
Object.keys(groupsProperties)
|
||||
)
|
||||
) {
|
||||
// TODO: empty block. Check it!
|
||||
} else {
|
||||
getGroupsProperties(myAddress);
|
||||
}
|
||||
@ -976,6 +976,7 @@ export const Group = ({
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
!initiatedGetMembers.current &&
|
||||
@ -1524,6 +1525,7 @@ export const Group = ({
|
||||
setMobileViewMode('home');
|
||||
}
|
||||
if (!isMobile) {
|
||||
// TODO: empty block. Check it!
|
||||
}
|
||||
setDesktopViewMode('home');
|
||||
|
||||
@ -1601,27 +1603,29 @@ export const Group = ({
|
||||
}
|
||||
};
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const renderDirects = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: isMobile ? '100%' : '380px',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%',
|
||||
background: 'var(--bg-primary)',
|
||||
background: theme.palette.background.default,
|
||||
borderRadius: '0px 15px 15px 0px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%',
|
||||
width: isMobile ? '100%' : '380px',
|
||||
}}
|
||||
>
|
||||
{!isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<ButtonBase
|
||||
@ -1634,8 +1638,8 @@ export const Group = ({
|
||||
groupChatHasUnread || groupsAnnHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'groups'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
label="Groups"
|
||||
selected={desktopSideView === 'groups'}
|
||||
@ -1647,8 +1651,8 @@ export const Group = ({
|
||||
groupChatHasUnread || groupsAnnHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'groups'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
@ -1664,8 +1668,8 @@ export const Group = ({
|
||||
directChatHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'directs'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
label="Messaging"
|
||||
selected={desktopSideView === 'directs'}
|
||||
@ -1676,8 +1680,8 @@ export const Group = ({
|
||||
directChatHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'directs'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
@ -1687,12 +1691,12 @@ export const Group = ({
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
overflowY: 'auto',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{directs.map((direct: any) => (
|
||||
@ -1731,11 +1735,14 @@ export const Group = ({
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
cursor: 'pointer',
|
||||
border: '1px #232428 solid',
|
||||
borderColor: theme.palette.primary,
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
padding: '2px',
|
||||
borderRadius: '2px',
|
||||
background:
|
||||
direct?.address === selectedDirect?.address && 'white',
|
||||
direct?.address === selectedDirect?.address &&
|
||||
theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -1748,8 +1755,8 @@ export const Group = ({
|
||||
<ListItemAvatar>
|
||||
<Avatar
|
||||
sx={{
|
||||
background: '#232428',
|
||||
color: 'white',
|
||||
background: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
alt={direct?.name || direct?.address}
|
||||
>
|
||||
@ -1767,7 +1774,7 @@ export const Group = ({
|
||||
style: {
|
||||
color:
|
||||
direct?.address === selectedDirect?.address &&
|
||||
'black',
|
||||
theme.palette.text.primary,
|
||||
textWrap: 'wrap',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
@ -1776,7 +1783,7 @@ export const Group = ({
|
||||
style: {
|
||||
color:
|
||||
direct?.address === selectedDirect?.address &&
|
||||
'black',
|
||||
theme.palette.text.primary,
|
||||
fontSize: '12px',
|
||||
},
|
||||
}}
|
||||
@ -1821,7 +1828,7 @@ export const Group = ({
|
||||
>
|
||||
<CreateIcon
|
||||
sx={{
|
||||
color: 'white',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
New Chat
|
||||
@ -1840,7 +1847,7 @@ export const Group = ({
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%',
|
||||
background: !isMobile && 'var(--bg-primary)',
|
||||
background: !isMobile && theme.palette.background.default,
|
||||
borderRadius: !isMobile && '0px 15px 15px 0px',
|
||||
}}
|
||||
>
|
||||
@ -1864,8 +1871,8 @@ export const Group = ({
|
||||
groupChatHasUnread || groupsAnnHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'groups'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
label="Groups"
|
||||
selected={desktopSideView === 'groups'}
|
||||
@ -1877,8 +1884,8 @@ export const Group = ({
|
||||
groupChatHasUnread || groupsAnnHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'groups'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
@ -1894,8 +1901,8 @@ export const Group = ({
|
||||
directChatHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'directs'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
label="Messaging"
|
||||
selected={desktopSideView === 'directs'}
|
||||
@ -1906,8 +1913,8 @@ export const Group = ({
|
||||
directChatHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'directs'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
@ -1917,15 +1924,15 @@ export const Group = ({
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
overflowY: 'auto',
|
||||
visibility: chatMode === 'directs' && 'hidden',
|
||||
position: chatMode === 'directs' && 'fixed',
|
||||
left: chatMode === 'directs' && '-1000px',
|
||||
overflowY: 'auto',
|
||||
position: chatMode === 'directs' && 'fixed',
|
||||
visibility: chatMode === 'directs' && 'hidden',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{groups.map((group: any) => (
|
||||
@ -1967,14 +1974,17 @@ export const Group = ({
|
||||
}}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
cursor: 'pointer',
|
||||
border: '1px #232428 solid',
|
||||
padding: '2px',
|
||||
borderRadius: '2px',
|
||||
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
|
||||
@ -1984,22 +1994,22 @@ export const Group = ({
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
{groupsProperties[group?.groupId]?.isOpen === false ? (
|
||||
<Box
|
||||
sx={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
background: '#232428',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: theme.palette.background.default,
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
height: '40px',
|
||||
justifyContent: 'center',
|
||||
width: '40px',
|
||||
}}
|
||||
>
|
||||
<LockIcon
|
||||
@ -2011,13 +2021,13 @@ export const Group = ({
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
background: '#232428',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: theme.palette.background.default,
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
height: '40px',
|
||||
justifyContent: 'center',
|
||||
width: '40px',
|
||||
}}
|
||||
>
|
||||
<NoEncryptionGmailerrorredIcon
|
||||
@ -2026,15 +2036,6 @@ export const Group = ({
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
// <Avatar
|
||||
// sx={{
|
||||
// background: "#232428",
|
||||
// color: "white",
|
||||
// }}
|
||||
// alt={group?.groupName}
|
||||
// >
|
||||
// {group.groupName?.charAt(0)}
|
||||
// </Avatar>
|
||||
)}
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
@ -2050,14 +2051,14 @@ export const Group = ({
|
||||
style: {
|
||||
color:
|
||||
group?.groupId === selectedGroup?.groupId &&
|
||||
'black',
|
||||
theme.palette.text.primary,
|
||||
},
|
||||
}} // Change the color of the primary text
|
||||
secondaryTypographyProps={{
|
||||
style: {
|
||||
color:
|
||||
group?.groupId === selectedGroup?.groupId &&
|
||||
'black',
|
||||
theme.palette.text.primary,
|
||||
fontSize: '12px',
|
||||
},
|
||||
}}
|
||||
@ -2100,10 +2101,10 @@ export const Group = ({
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
gap: '10px',
|
||||
justifyContent: 'center',
|
||||
padding: '10px',
|
||||
gap: '10px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{chatMode === 'groups' && (
|
||||
@ -2115,7 +2116,7 @@ export const Group = ({
|
||||
>
|
||||
<AddCircleOutlineIcon
|
||||
sx={{
|
||||
color: 'white',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
Group Mgmt
|
||||
@ -2132,7 +2133,7 @@ export const Group = ({
|
||||
>
|
||||
<PersonOffIcon
|
||||
sx={{
|
||||
color: 'white',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
</CustomButton>
|
||||
@ -2149,7 +2150,7 @@ export const Group = ({
|
||||
>
|
||||
<CreateIcon
|
||||
sx={{
|
||||
color: 'white',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
New Chat
|
||||
@ -2166,6 +2167,7 @@ export const Group = ({
|
||||
myAddress={myAddress}
|
||||
setIsLoadingGroups={setIsLoadingGroups}
|
||||
/>
|
||||
|
||||
<CustomizedSnackbars
|
||||
open={openSnack}
|
||||
setOpen={setOpenSnack}
|
||||
@ -2175,11 +2177,11 @@ export const Group = ({
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: isMobile ? '100%' : '100%',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
height: isMobile ? '100%' : '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{!isMobile &&
|
||||
@ -2207,6 +2209,7 @@ export const Group = ({
|
||||
desktopViewMode === 'chat' &&
|
||||
desktopSideView !== 'directs' &&
|
||||
renderGroups()}
|
||||
|
||||
{!isMobile &&
|
||||
desktopViewMode === 'chat' &&
|
||||
desktopSideView === 'directs' &&
|
||||
@ -2230,26 +2233,26 @@ export const Group = ({
|
||||
{isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
marginTop: '14px',
|
||||
justifyContent: 'center',
|
||||
display: 'flex',
|
||||
height: '15px',
|
||||
justifyContent: 'center',
|
||||
marginTop: '14px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '320px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
width: '50px',
|
||||
}}
|
||||
>
|
||||
@ -2264,10 +2267,10 @@ export const Group = ({
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '50px',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
width: '50px',
|
||||
}}
|
||||
>
|
||||
<ButtonBase
|
||||
@ -2284,17 +2287,15 @@ export const Group = ({
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
|
||||
right: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
background: theme.palette.background.default,
|
||||
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
top: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
background: '#27282c',
|
||||
zIndex: 5,
|
||||
height: isMobile && `calc(${rootHeight} - 45px)`,
|
||||
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
|
||||
|
||||
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
|
||||
@ -2308,7 +2309,6 @@ export const Group = ({
|
||||
balance={balance}
|
||||
close={() => {
|
||||
setSelectedDirect(null);
|
||||
|
||||
setNewChat(false);
|
||||
}}
|
||||
setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
|
||||
@ -2319,18 +2319,18 @@ export const Group = ({
|
||||
{desktopViewMode === 'chat' && !selectedGroup && (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 400,
|
||||
color: 'rgba(255, 255, 255, 0.2)',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
>
|
||||
No group selected
|
||||
@ -2423,12 +2423,12 @@ export const Group = ({
|
||||
!secretKeyPublishDate && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
padding: '20px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{' '}
|
||||
@ -2550,9 +2550,9 @@ export const Group = ({
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
bottom: '25px',
|
||||
display: 'flex',
|
||||
position: 'absolute',
|
||||
bottom: '25px',
|
||||
right: '25px',
|
||||
zIndex: 100,
|
||||
}}
|
||||
@ -2602,24 +2602,23 @@ export const Group = ({
|
||||
<>
|
||||
<Box
|
||||
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',
|
||||
right: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
top: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
background: '#27282c',
|
||||
zIndex: 5,
|
||||
height: isMobile && `calc(${rootHeight} - 45px)`,
|
||||
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
|
||||
|
||||
left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexGrow: 1,
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<ChatDirect
|
||||
|
||||
@ -1,22 +1,17 @@
|
||||
import * as React from "react";
|
||||
import List from "@mui/material/List";
|
||||
import ListItem from "@mui/material/ListItem";
|
||||
import ListItemButton from "@mui/material/ListItemButton";
|
||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import CommentIcon from "@mui/icons-material/Comment";
|
||||
import InfoIcon from "@mui/icons-material/Info";
|
||||
import GroupAddIcon from "@mui/icons-material/GroupAdd";
|
||||
import { executeEvent } from "../../utils/events";
|
||||
import { Box, ButtonBase, Collapse, Typography } from "@mui/material";
|
||||
import { Spacer } from "../../common/Spacer";
|
||||
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";
|
||||
import * as React from 'react';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import GroupAddIcon from '@mui/icons-material/GroupAdd';
|
||||
import { executeEvent } from '../../utils/events';
|
||||
import { Box, ButtonBase, Collapse, Typography, useTheme } from '@mui/material';
|
||||
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 }) => {
|
||||
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState(
|
||||
@ -37,11 +32,14 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
|
||||
setGroupsWithJoinRequests(resMoreData);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (myAddress) {
|
||||
getJoinRequests();
|
||||
@ -51,57 +49,65 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<ButtonBase
|
||||
sx={{
|
||||
width: "322px",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
padding: "0px 20px",
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '10px',
|
||||
justifyContent: 'flex-start'
|
||||
justifyContent: 'flex-start',
|
||||
padding: '0px 20px',
|
||||
width: '322px',
|
||||
}}
|
||||
onClick={()=> setIsExpanded((prev)=> !prev)}
|
||||
onClick={() => setIsExpanded((prev) => !prev)}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "1rem",
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
Group Invites {groupsWithJoinRequests?.length > 0 && ` (${groupsWithJoinRequests?.length})`}
|
||||
Group Invites{' '}
|
||||
{groupsWithJoinRequests?.length > 0 &&
|
||||
` (${groupsWithJoinRequests?.length})`}
|
||||
</Typography>
|
||||
{isExpanded ? <ExpandLessIcon sx={{
|
||||
marginLeft: 'auto'
|
||||
}} /> : (
|
||||
<ExpandMoreIcon sx={{
|
||||
marginLeft: 'auto'
|
||||
}}/>
|
||||
)}
|
||||
{isExpanded ? (
|
||||
<ExpandLessIcon
|
||||
sx={{
|
||||
marginLeft: 'auto',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ExpandMoreIcon
|
||||
sx={{
|
||||
marginLeft: 'auto',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</ButtonBase>
|
||||
|
||||
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
|
||||
<Box
|
||||
sx={{
|
||||
width: "322px",
|
||||
height: isMobile ? "165px" : "250px",
|
||||
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bgcolor: "background.paper",
|
||||
padding: "20px",
|
||||
borderRadius: "19px",
|
||||
bgcolor: theme.palette.background.paper,
|
||||
borderRadius: '19px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: isMobile ? '165px' : '250px',
|
||||
padding: '20px',
|
||||
width: '322px',
|
||||
}}
|
||||
>
|
||||
{loading && groupsWithJoinRequests.length === 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<CustomLoader />
|
||||
@ -110,18 +116,18 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
{!loading && groupsWithJoinRequests.length === 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "11px",
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: '11px',
|
||||
fontWeight: 400,
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
}}
|
||||
>
|
||||
Nothing to display
|
||||
@ -130,11 +136,11 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
)}
|
||||
<List
|
||||
sx={{
|
||||
width: "100%",
|
||||
width: '100%',
|
||||
maxWidth: 360,
|
||||
bgcolor: "background.paper",
|
||||
maxHeight: "300px",
|
||||
overflow: "auto",
|
||||
bgcolor: theme.palette.background.paper,
|
||||
maxHeight: '300px',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
className="scrollable-container"
|
||||
>
|
||||
@ -142,13 +148,13 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
return (
|
||||
<ListItem
|
||||
sx={{
|
||||
marginBottom: "20px",
|
||||
marginBottom: '20px',
|
||||
}}
|
||||
key={group?.groupId}
|
||||
onClick={() => {
|
||||
setOpenAddGroup(true);
|
||||
setTimeout(() => {
|
||||
executeEvent("openGroupInvitesRequest", {});
|
||||
executeEvent('openGroupInvitesRequest', {});
|
||||
}, 300);
|
||||
}}
|
||||
disablePadding
|
||||
@ -156,8 +162,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
<IconButton edge="end" aria-label="comments">
|
||||
<GroupAddIcon
|
||||
sx={{
|
||||
color: "white",
|
||||
fontSize: "18px",
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: '18px',
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
@ -166,8 +172,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
<ListItemButton disableRipple role={undefined} dense>
|
||||
<ListItemText
|
||||
sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "13px",
|
||||
'& .MuiTypography-root': {
|
||||
fontSize: '13px',
|
||||
fontWeight: 400,
|
||||
},
|
||||
}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user