diff --git a/src/assets/Icons/ExitIcon.tsx b/src/assets/Icons/ExitIcon.tsx new file mode 100644 index 0000000..cfbeefa --- /dev/null +++ b/src/assets/Icons/ExitIcon.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +export const ExitIcon= ({ color = 'white', height, width }) => { + return ( + + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/HubsIcon.tsx b/src/assets/Icons/HubsIcon.tsx index 00f6cd4..b96ba8a 100644 --- a/src/assets/Icons/HubsIcon.tsx +++ b/src/assets/Icons/HubsIcon.tsx @@ -1,8 +1,8 @@ import React from 'react'; -export const HubsIcon= ({ color, height, width }) => { +export const HubsIcon= ({ color, height = 31, width = 32 }) => { return ( - + diff --git a/src/assets/Icons/MessagingIcon2.tsx b/src/assets/Icons/MessagingIcon2.tsx new file mode 100644 index 0000000..5cbdb98 --- /dev/null +++ b/src/assets/Icons/MessagingIcon2.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +export const MessagingIcon2= ({ color = '#8F8F91', height = 24, width =24 }) => { + return ( + + + + + + + + ); + }; + \ No newline at end of file diff --git a/src/assets/Icons/NotificationIcon.tsx b/src/assets/Icons/NotificationIcon.tsx index d577954..cc9092c 100644 --- a/src/assets/Icons/NotificationIcon.tsx +++ b/src/assets/Icons/NotificationIcon.tsx @@ -1,11 +1,12 @@ import React from 'react'; -export const NotificationIcon= ({ color, height, width }) => { +export const NotificationIcon= ({ color = 'white', height = 16, width = 14 }) => { return ( - - - - + + + + + ); diff --git a/src/assets/Icons/ReturnIcon.tsx b/src/assets/Icons/ReturnIcon.tsx new file mode 100644 index 0000000..633eafc --- /dev/null +++ b/src/assets/Icons/ReturnIcon.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +export const ReturnIcon= ({ color = 'white', height, width }) => { + return ( + + + + + + + + ); + }; + \ No newline at end of file diff --git a/src/components/Chat/ChatDirect.tsx b/src/components/Chat/ChatDirect.tsx index 33325c8..c499eb3 100644 --- a/src/components/Chat/ChatDirect.tsx +++ b/src/components/Chat/ChatDirect.tsx @@ -6,7 +6,7 @@ import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css"; import Tiptap from './TipTap' import { CustomButton } from '../../App-styles' import CircularProgress from '@mui/material/CircularProgress'; -import { Box, Input, Typography } from '@mui/material'; +import { Box, ButtonBase, Input, Typography } from '@mui/material'; import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar'; import { getNameInfo } from '../Group/Group'; import { Spacer } from '../../common/Spacer'; @@ -17,12 +17,14 @@ import { useMessageQueue } from '../../MessageQueueContext'; import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from '../../utils/events'; import ArrowBackIcon from '@mui/icons-material/ArrowBack'; import ShortUniqueId from "short-unique-id"; +import { ReturnIcon } from '../../assets/Icons/ReturnIcon'; +import { ExitIcon } from '../../assets/Icons/ExitIcon'; const uid = new ShortUniqueId({ length: 5 }); -export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance, close}) => { +export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance, close, setMobileViewModeKeepOpen}) => { const { queueChats, addToQueue, processWithNewMessages} = useMessageQueue(); const [isFocusedParent, setIsFocusedParent] = useState(false); @@ -344,27 +346,69 @@ const clearEditorContent = () => { flexDirection: 'column', width: '100%' }}> - - - Close Direct Chat - + {isMobile && ( + + + + { + close() + }} + > + + + + + {isNewChat ? '' : selectedDirect?.name || (selectedDirect?.address?.slice(0,10) + '...')} + + + { + setSelectedDirect(null) + setMobileViewModeKeepOpen('') + setNewChat(false) + }} + > + + + + + + )} {isNewChat && ( <> @@ -376,7 +420,7 @@ const clearEditorContent = () => { )} - +
{ left: hide && '-100000px', }}> - +
{ +export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId }) => { const hasLoadedInitialRef = useRef(false); const listRef = useRef(); const [messages, setMessages] = useState(initialMessages); const [showScrollButton, setShowScrollButton] = useState(false); - + const cache = useMemo(() => new CellMeasurerCache({ + fixedWidth: true, + defaultHeight: 50, + }), [chatId]); // Recreate cache when chatId changes useEffect(() => { cache.clearAll(); @@ -175,7 +178,7 @@ let uniqueInitialMessages = Array.from(uniqueInitialMessagesMap.values()).sort(( // }, [messages, myAddress]); return ( -
+
{({ height, width }) => ( { - - return new Promise((res, rej) => { chrome?.runtime?.sendMessage( { @@ -50,10 +57,9 @@ export const saveTempPublish = async ({ data, key }: any) => { }, }, (response) => { - if (!response?.error) { res(response); - return + return; } rej(response.error); } @@ -62,19 +68,16 @@ export const saveTempPublish = async ({ data, key }: any) => { }; export const getTempPublish = async () => { - - return new Promise((res, rej) => { chrome?.runtime?.sendMessage( { action: "getTempPublish", - payload: { - }, + payload: {}, }, (response) => { if (!response?.error) { res(response); - return + return; } rej(response.error); } @@ -95,7 +98,6 @@ export const decryptPublishes = async (encryptedMessages: any[], secretKey) => { }, }, (response) => { - if (!response?.error) { res(response); // if(hasInitialized.current){ @@ -130,13 +132,13 @@ export const GroupAnnouncements = ({ handleNewEncryptionNotification, isAdmin, hide, - myName + myName, }) => { const [messages, setMessages] = useState([]); const [isSending, setIsSending] = useState(false); const [isLoading, setIsLoading] = useState(true); const [announcements, setAnnouncements] = useState([]); - const [tempPublishedList, setTempPublishedList] = useState([]) + const [tempPublishedList, setTempPublishedList] = useState([]); const [announcementData, setAnnouncementData] = useState({}); const [selectedAnnouncement, setSelectedAnnouncement] = useState(null); const [isFocusedParent, setIsFocusedParent] = useState(false); @@ -147,37 +149,45 @@ export const GroupAnnouncements = ({ const hasInitialized = useRef(false); const hasInitializedWebsocket = useRef(false); const editorRef = useRef(null); - const dataPublishes = useRef({}) + const dataPublishes = useRef({}); const setEditorRef = (editorInstance) => { editorRef.current = editorInstance; }; + const [, forceUpdate] = React.useReducer((x) => x + 1, 0); - useEffect(()=> { - if(!selectedGroup) return - (async ()=> { - const res = await getDataPublishesFunc(selectedGroup, 'anc') - dataPublishes.current = res || {} - })() - }, [selectedGroup]) + const triggerRerender = () => { + forceUpdate(); // Trigger re-render by updating the state + }; + useEffect(() => { + if (!selectedGroup) return; + (async () => { + const res = await getDataPublishesFunc(selectedGroup, "anc"); + dataPublishes.current = res || {}; + })(); + }, [selectedGroup]); const getAnnouncementData = async ({ identifier, name, resource }) => { try { - let data = dataPublishes.current[`${name}-${identifier}`] - if(!data || (data?.update || data?.created !== (resource?.updated || resource?.created))){ - const res = await requestQueuePublishedAccouncements.enqueue(()=> { + let data = dataPublishes.current[`${name}-${identifier}`]; + if ( + !data || + data?.update || + data?.created !== (resource?.updated || resource?.created) + ) { + const res = await requestQueuePublishedAccouncements.enqueue(() => { return fetch( `${getBaseApiReact()}/arbitrary/DOCUMENT/${name}/${identifier}?encoding=base64` ); - }) - if(!res?.ok) return - data = await res.text(); - await addDataPublishesFunc({...resource, data}, selectedGroup, 'anc') + }); + if (!res?.ok) return; + data = await res.text(); + await addDataPublishesFunc({ ...resource, data }, selectedGroup, "anc"); } else { - data = data.data + data = data.data; } - + const response = await decryptPublishes([{ data }], secretKey); - + const messageData = response[0]; setAnnouncementData((prev) => { return { @@ -185,16 +195,11 @@ export const GroupAnnouncements = ({ [`${identifier}-${name}`]: messageData, }; }); - } catch (error) { - console.log('error', error) + console.log("error", error); } }; - - - - useEffect(() => { if (!secretKey || hasInitializedWebsocket.current) return; setIsLoading(true); @@ -226,64 +231,61 @@ export const GroupAnnouncements = ({ }; const publishAnc = async ({ encryptedData, identifier }: any) => { - - - return new Promise((res, rej) => { - chrome?.runtime?.sendMessage( - { - action: "publishGroupEncryptedResource", - payload: { - encryptedData, - identifier, - }, + return new Promise((res, rej) => { + chrome?.runtime?.sendMessage( + { + action: "publishGroupEncryptedResource", + payload: { + encryptedData, + identifier, }, - (response) => { - if (!response?.error) { - res(response); - } - rej(response.error); + }, + (response) => { + if (!response?.error) { + res(response); } - ); - }); + rej(response.error); + } + ); + }); }; const clearEditorContent = () => { if (editorRef.current) { editorRef.current.chain().focus().clearContent().run(); - if(isMobile){ + if (isMobile) { setTimeout(() => { - editorRef.current?.chain().blur().run(); - setIsFocusedParent(false) + editorRef.current?.chain().blur().run(); + setIsFocusedParent(false); + setTimeout(() => { + triggerRerender(); + }, 300); }, 200); } } }; - const setTempData = async ()=> { + const setTempData = async () => { try { - const getTempAnnouncements = await getTempPublish() - if(getTempAnnouncements?.announcement){ - let tempData = [] - Object.keys(getTempAnnouncements?.announcement || {}).map((key)=> { - const value = getTempAnnouncements?.announcement[key] - tempData.push(value.data) - }) - setTempPublishedList(tempData) - } - } catch (error) { - - } - - } + const getTempAnnouncements = await getTempPublish(); + if (getTempAnnouncements?.announcement) { + let tempData = []; + Object.keys(getTempAnnouncements?.announcement || {}).map((key) => { + const value = getTempAnnouncements?.announcement[key]; + tempData.push(value.data); + }); + setTempPublishedList(tempData); + } + } catch (error) {} + }; const publishAnnouncement = async () => { try { - - pauseAllQueues() - const fee = await getFee('ARBITRARY') + pauseAllQueues(); + const fee = await getFee("ARBITRARY"); await show({ - message: "Would you like to perform a ARBITRARY transaction?" , - publishFee: fee.fee + ' QORT' - }) + message: "Would you like to perform a ARBITRARY transaction?", + publishFee: fee.fee + " QORT", + }); if (isSending) return; if (editorRef.current) { const htmlContent = editorRef.current.getHTML(); @@ -292,8 +294,8 @@ export const GroupAnnouncements = ({ const message = { version: 1, extra: {}, - message: htmlContent - } + message: htmlContent, + }; const secretKeyObject = await getSecretKey(false, true); const message64: any = await objectToBase64(message); const encryptSingle = await encryptChatMessage( @@ -304,36 +306,37 @@ export const GroupAnnouncements = ({ const identifier = `grp-${selectedGroup}-anc-${randomUid}`; const res = await publishAnc({ encryptedData: encryptSingle, - identifier + identifier, }); const dataToSaveToStorage = { name: myName, identifier, - service: 'DOCUMENT', + service: "DOCUMENT", tempData: message, - created: Date.now() - } - await saveTempPublish({data: dataToSaveToStorage, key: 'announcement'}) - setTempData() + created: Date.now(), + }; + await saveTempPublish({ + data: dataToSaveToStorage, + key: "announcement", + }); + setTempData(); clearEditorContent(); } // send chat message } catch (error) { - if(!error) return + if (!error) return; setInfoSnack({ type: "error", message: error, }); - setOpenSnack(true) + setOpenSnack(true); } finally { - resumeAllQueues() + resumeAllQueues(); setIsSending(false); } }; - - const getAnnouncements = React.useCallback( async (selectedGroup) => { try { @@ -349,12 +352,16 @@ export const GroupAnnouncements = ({ }, }); const responseData = await response.json(); - - setTempData() + + setTempData(); setAnnouncements(responseData); setIsLoading(false); for (const data of responseData) { - getAnnouncementData({ name: data.name, identifier: data.identifier, resource: data }); + getAnnouncementData({ + name: data.name, + identifier: data.identifier, + resource: data, + }); } } catch (error) { } finally { @@ -363,199 +370,206 @@ export const GroupAnnouncements = ({ }, [secretKey] ); - + React.useEffect(() => { if (selectedGroup && secretKey && !hasInitialized.current && !hide) { getAnnouncements(selectedGroup); - hasInitialized.current = true + hasInitialized.current = true; } }, [selectedGroup, secretKey, hide]); - - const loadMore = async()=> { + const loadMore = async () => { try { setIsLoading(true); - const offset = announcements.length - const identifier = `grp-${selectedGroup}-anc-`; - const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`; - const response = await fetch(url, { - method: "GET", - headers: { - "Content-Type": "application/json", - }, - }); - const responseData = await response.json(); + const offset = announcements.length; + const identifier = `grp-${selectedGroup}-anc-`; + const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${offset}&reverse=true&prefix=true`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseData = await response.json(); - setAnnouncements((prev)=> [...prev, ...responseData]); - setIsLoading(false); + setAnnouncements((prev) => [...prev, ...responseData]); + setIsLoading(false); + for (const data of responseData) { + getAnnouncementData({ name: data.name, identifier: data.identifier }); + } + } catch (error) {} + }; + + const interval = useRef(null); + + const checkNewMessages = React.useCallback(async () => { + try { + const identifier = `grp-${selectedGroup}-anc-`; + const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseData = await response.json(); + const latestMessage = announcements[0]; + if (!latestMessage) { for (const data of responseData) { - getAnnouncementData({ name: data.name, identifier: data.identifier }); - } - } catch (error) { - - } - - } - - const interval = useRef(null) - - const checkNewMessages = React.useCallback( - async () => { - try { - - const identifier = `grp-${selectedGroup}-anc-`; - const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${identifier}&limit=20&includemetadata=false&offset=${0}&reverse=true&prefix=true`; - const response = await fetch(url, { - method: 'GET', - headers: { - 'Content-Type': 'application/json' - } - }) - const responseData = await response.json() - const latestMessage = announcements[0] - if (!latestMessage) { - for (const data of responseData) { - try { - - getAnnouncementData({ name: data.name, identifier: data.identifier }); - - } catch (error) {} - } - setAnnouncements(responseData) - return - } - const findMessage = responseData?.findIndex( - (item: any) => item?.identifier === latestMessage?.identifier - ) - - if(findMessage === -1) return - const newArray = responseData.slice(0, findMessage) - - for (const data of newArray) { try { - - getAnnouncementData({ name: data.name, identifier: data.identifier }); - + getAnnouncementData({ + name: data.name, + identifier: data.identifier, + }); } catch (error) {} } - setAnnouncements((prev)=> [...newArray, ...prev]) - } catch (error) { - } finally { + setAnnouncements(responseData); + return; } - }, - [announcements, secretKey, selectedGroup] - ) + const findMessage = responseData?.findIndex( + (item: any) => item?.identifier === latestMessage?.identifier + ); + + if (findMessage === -1) return; + const newArray = responseData.slice(0, findMessage); + + for (const data of newArray) { + try { + getAnnouncementData({ name: data.name, identifier: data.identifier }); + } catch (error) {} + } + setAnnouncements((prev) => [...newArray, ...prev]); + } catch (error) { + } finally { + } + }, [announcements, secretKey, selectedGroup]); const checkNewMessagesFunc = useCallback(() => { - let isCalling = false + let isCalling = false; interval.current = setInterval(async () => { - if (isCalling) return - isCalling = true - const res = await checkNewMessages() - isCalling = false - }, 20000) - }, [checkNewMessages]) + if (isCalling) return; + isCalling = true; + const res = await checkNewMessages(); + isCalling = false; + }, 20000); + }, [checkNewMessages]); useEffect(() => { - if(!secretKey || hide) return - checkNewMessagesFunc() + if (!secretKey || hide) return; + checkNewMessagesFunc(); return () => { if (interval?.current) { - clearInterval(interval.current) + clearInterval(interval.current); } - } - }, [checkNewMessagesFunc, hide]) - - + }; + }, [checkNewMessagesFunc, hide]); const combinedListTempAndReal = useMemo(() => { // Combine the two lists const combined = [...tempPublishedList, ...announcements]; - + // Remove duplicates based on the "identifier" const uniqueItems = new Map(); - combined.forEach(item => { - uniqueItems.set(item.identifier, item); // This will overwrite duplicates, keeping the last occurrence + combined.forEach((item) => { + uniqueItems.set(item.identifier, item); // This will overwrite duplicates, keeping the last occurrence }); - + // Convert the map back to an array and sort by "created" timestamp in descending order - const sortedList = Array.from(uniqueItems.values()).sort((a, b) => b.created - a.created); - + const sortedList = Array.from(uniqueItems.values()).sort( + (a, b) => b.created - a.created + ); + return sortedList; }, [tempPublishedList, announcements]); - - if(selectedAnnouncement){ + if (selectedAnnouncement) { return (
- + style={{ + // reference to change height + height: isMobile ? `calc(${getRootHeight()} - 127px` : "100vh", + display: "flex", + flexDirection: "column", + width: "100%", + visibility: hide && "hidden", + position: hide && "fixed", + left: hide && "-1000px", + }} + > +
- ) + ); } - - return (
-
- {!isMobile && ( - - - Group Announcements - - )} - - +
+ {!isMobile && ( + + + Group Announcements + + )} +
{!isLoading && combinedListTempAndReal?.length === 0 && ( - - No announcements + + + No announcements + )} 0 && announcements.length % 20 === 0} + showLoadMore={ + announcements.length > 0 && announcements.length % 20 === 0 + } loadMore={loadMore} myName={myName} /> - - -{isAdmin && ( -
-
- -
- - {isFocusedParent && ( - { - if(isSending) return - setIsFocusedParent(false) - clearEditorContent() - // Unfocus the editor - }} - style={{ - marginTop: 'auto', - alignSelf: 'center', - cursor: isSending ? 'default' : 'pointer', - background: 'red', - flexShrink: 0, - padding: isMobile && '5px', - fontSize: isMobile && '14px', - }} - > - - {` Close`} - - + + {isAdmin && ( +
+
+ +
+ + {isFocusedParent && ( + { + if (isSending) return; + setIsFocusedParent(false); + clearEditorContent(); + setTimeout(() => { + triggerRerender(); + }, 300); + // Unfocus the editor + }} + style={{ + marginTop: "auto", + alignSelf: "center", + cursor: isSending ? "default" : "pointer", + background: "red", + flexShrink: 0, + padding: isMobile && "5px", + fontSize: isMobile && "14px", + }} + > + {` Close`} + )} - { - if (isSending) return; - publishAnnouncement(); - }} - style={{ - marginTop: "auto", - alignSelf: "center", - cursor: isSending ? "default" : "pointer", - background: isSending && "rgba(0, 0, 0, 0.8)", - flexShrink: 0, - padding: isMobile && '5px', - fontSize: isMobile && '14px', + { + if (isSending) return; + publishAnnouncement(); + }} + style={{ + marginTop: "auto", + alignSelf: "center", + cursor: isSending ? "default" : "pointer", + background: isSending && "rgba(0, 0, 0, 0.8)", + flexShrink: 0, + padding: isMobile && "5px", + fontSize: isMobile && "14px", + }} + > + {isSending && ( + + )} + {` Publish Announcement`} + + +
+ )} - }} - > - {isSending && ( - - )} - {` Publish Announcement`} - - - -
-)} - - + diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index 8484fea..58312cb 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -2,6 +2,7 @@ import { Avatar, Box, Button, + ButtonBase, Grid, IconButton, List, @@ -82,6 +83,8 @@ import Header from "../Mobile/MobileHeader"; import { Home } from "./Home"; import { GroupMenu } from "./GroupMenu"; import { getRootHeight } from "../../utils/mobile/mobileUtils"; +import { ReturnIcon } from "../../assets/Icons/ReturnIcon"; +import { ExitIcon } from "../../assets/Icons/ExitIcon"; // let touchStartY = 0; // let disablePullToRefresh = false; @@ -203,7 +206,7 @@ export const decryptResource = async (data: string) => { (response) => { if (!response?.error) { res(response); - return + return; } rej(response.error); } @@ -221,7 +224,7 @@ export const addDataPublishesFunc = async (data: string, groupId, type) => { payload: { data, groupId, - type + type, }, }, (response) => { @@ -243,7 +246,7 @@ export const getDataPublishesFunc = async (groupId, type) => { action: "getDataPublishes", payload: { groupId, - type + type, }, }, (response) => { @@ -369,7 +372,7 @@ export const Group = ({ balance, isOpenDrawerProfile, setIsOpenDrawerProfile, - logoutFunc + logoutFunc, }: GroupProps) => { const [secretKey, setSecretKey] = useState(null); const [secretKeyPublishDate, setSecretKeyPublishDate] = useState(null); @@ -409,12 +412,12 @@ export const Group = ({ const [groupAnnouncements, setGroupAnnouncements] = React.useState({}); const [defaultThread, setDefaultThread] = React.useState(null); const [isOpenDrawer, setIsOpenDrawer] = React.useState(false); - const [hideCommonKeyPopup, setHideCommonKeyPopup] = React.useState(false) - const [isLoadingGroupMessage, setIsLoadingGroupMessage] = React.useState('') + const [hideCommonKeyPopup, setHideCommonKeyPopup] = React.useState(false); + const [isLoadingGroupMessage, setIsLoadingGroupMessage] = React.useState(""); const [drawerMode, setDrawerMode] = React.useState("groups"); - const [mutedGroups, setMutedGroups] = useState([]) - const [mobileViewMode, setMobileViewMode] = useState('home') - const [mobileViewModeKeepOpen, setMobileViewModeKeepOpen] = useState('') + const [mutedGroups, setMutedGroups] = useState([]); + const [mobileViewMode, setMobileViewMode] = useState("home"); + const [mobileViewModeKeepOpen, setMobileViewModeKeepOpen] = useState(""); const isFocusedRef = useRef(true); const selectedGroupRef = useRef(null); @@ -452,29 +455,27 @@ export const Group = ({ { action: "getUserSettings", payload: { - key: 'mutedGroups' - } + key: "mutedGroups", + }, }, (response) => { if (!response?.error) { - - setMutedGroups(response || []); + setMutedGroups(response || []); res(response); - return + return; } rej(response.error); } ); }); } catch (error) { - console.log('error', error) + console.log("error", error); } }; - useEffect(()=> { - - getUserSettings() - }, []) + useEffect(() => { + getUserSettings(); + }, []); const getTimestampEnterChat = async () => { try { @@ -688,7 +689,7 @@ export const Group = ({ secretKeyToPublish?: boolean ) => { try { - setIsLoadingGroupMessage('Locating encryption keys') + setIsLoadingGroupMessage("Locating encryption keys"); // setGroupDataLastSet(null) pauseAllQueues(); let dataFromStorage; @@ -751,7 +752,7 @@ export const Group = ({ if (dataFromStorage) { data = dataFromStorage; } else { - setIsLoadingGroupMessage('Downloading encryption keys') + setIsLoadingGroupMessage("Downloading encryption keys"); const res = await fetch( `${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${publish.name}/${ publish.identifier @@ -796,7 +797,7 @@ export const Group = ({ } } finally { setIsLoadingGroup(false); - setIsLoadingGroupMessage('') + setIsLoadingGroupMessage(""); if (!secretKeyToPublish) { // await getAdmins(selectedGroup?.groupId); } @@ -1016,7 +1017,6 @@ export const Group = ({ secretKey && admins.includes(myAddress) ) { - // getAdmins(selectedGroup?.groupId); getMembers(selectedGroup?.groupId); initiatedGetMembers.current = true; @@ -1153,11 +1153,11 @@ export const Group = ({ const openDirectChatFromInternal = (e) => { const directAddress = e.detail?.address; - const name = e.detail?.name + const name = e.detail?.name; const findDirect = directs?.find( (direct) => direct?.address === directAddress || direct?.name === name ); - + if (findDirect) { setChatMode("directs"); setSelectedDirect(null); @@ -1177,15 +1177,14 @@ export const Group = ({ setSelectedDirect(findDirect); getTimestampEnterChat(); }, 200); - } else { - setChatMode('directs') + setChatMode("directs"); setNewChat(true); setTimeout(() => { - executeEvent("setDirectToValueNewChat", { - directToValue: name || directAddress - }); - }, 500); + executeEvent("setDirectToValueNewChat", { + directToValue: name || directAddress, + }); + }, 500); } }; @@ -1193,7 +1192,10 @@ export const Group = ({ subscribeToEvent("openDirectMessageInternal", openDirectChatFromInternal); return () => { - unsubscribeFromEvent("openDirectMessageInternal", openDirectChatFromInternal); + unsubscribeFromEvent( + "openDirectMessageInternal", + openDirectChatFromInternal + ); }; }, [directs, selectedDirect]); @@ -1205,8 +1207,8 @@ export const Group = ({ }; }, [directs, selectedDirect]); - const handleMarkAsRead = (e)=> { - const {groupId} = e.detail + const handleMarkAsRead = (e) => { + const { groupId } = e.detail; chrome?.runtime?.sendMessage({ action: "addTimestampEnterChat", payload: { @@ -1215,8 +1217,6 @@ export const Group = ({ }, }); - - chrome?.runtime?.sendMessage({ action: "addGroupNotificationTimestamp", payload: { @@ -1228,8 +1228,7 @@ export const Group = ({ getGroupAnnouncements(); getTimestampEnterChat(); }, 200); - } - + }; useEffect(() => { subscribeToEvent("markAsRead", handleMarkAsRead); @@ -1239,7 +1238,6 @@ export const Group = ({ }; }, []); - const resetAllStatesAndRefs = () => { // Reset all useState values to their initial states setSecretKey(null); @@ -1257,7 +1255,7 @@ export const Group = ({ setMembers([]); setGroupOwner(null); setTriedToFetchSecretKey(false); - setHideCommonKeyPopup(false) + setHideCommonKeyPopup(false); setOpenAddGroup(false); setIsInitialGroups(false); setOpenManageMembers(false); @@ -1274,7 +1272,7 @@ export const Group = ({ setGroupSection("home"); setGroupAnnouncements({}); setDefaultThread(null); - setMobileViewMode('home') + setMobileViewMode("home"); // Reset all useRef values to their initial states hasInitialized.current = false; hasInitializedWebsocket.current = false; @@ -1341,7 +1339,7 @@ export const Group = ({ setTimeout(() => { setSelectedGroup(findGroup); - setMobileViewMode('group') + setMobileViewMode("group"); getTimestampEnterChat(); isLoadingOpenSectionFromNotification.current = false; }, 200); @@ -1386,7 +1384,7 @@ export const Group = ({ }); setTimeout(() => { setSelectedGroup(findGroup); - setMobileViewMode('group') + setMobileViewMode("group"); getGroupAnnouncements(); }, 200); @@ -1439,7 +1437,7 @@ export const Group = ({ setTimeout(() => { setSelectedGroup(findGroup); - setMobileViewMode('group') + setMobileViewMode("group"); getGroupAnnouncements(); }, 200); } @@ -1458,11 +1456,10 @@ export const Group = ({ }; const goToHome = async () => { - if(isMobile){ - setMobileViewMode('home') + if (isMobile) { + setMobileViewMode("home"); } - if(!isMobile){ - + if (!isMobile) { } setGroupSection("default"); clearAllQueues(); @@ -1495,7 +1492,7 @@ export const Group = ({ }, 200); }); setSelectedDirect(null); - setNewChat(false) + setNewChat(false); setGroupSection("announcement"); chrome?.runtime?.sendMessage({ action: "addGroupNotificationTimestamp", @@ -1509,16 +1506,16 @@ export const Group = ({ }, 200); }; - const openDrawerGroups = ()=> { + const openDrawerGroups = () => { setIsOpenDrawer(true); - setDrawerMode("groups"); - } + setDrawerMode("groups"); + }; - const goToThreads = ()=> { + const goToThreads = () => { setSelectedDirect(null); - setNewChat(false) - setGroupSection("forum") - } + setNewChat(false); + setGroupSection("forum"); + }; const goToChat = async () => { setGroupSection("default"); @@ -1528,7 +1525,7 @@ export const Group = ({ }, 200); }); setGroupSection("chat"); - setNewChat(false) + setNewChat(false); setSelectedDirect(null); if (selectedGroupRef.current) { chrome?.runtime?.sendMessage({ @@ -1545,19 +1542,66 @@ export const Group = ({ } }; - - const renderDirects = ()=> { + const renderDirects = () => { return (
-
+ + + + + + + { + setMobileViewModeKeepOpen('') + }} + > + + + + + + )} +
{directs.map((direct: any) => ( - + @@ -1614,7 +1662,7 @@ export const Group = ({ sx={{ display: "flex", width: "100%", - alignItems: 'center' + alignItems: "center", }} > @@ -1670,7 +1718,7 @@ export const Group = ({ ))} -
+
- - { - setNewChat(true); - setSelectedDirect(null); - // setSelectedGroup(null); - setIsOpenDrawer(false); + { + setNewChat(true); + setSelectedDirect(null); + // setSelectedGroup(null); + setIsOpenDrawer(false); + }} + > + - - New Chat - - + /> + New Chat +
- ) - } + ); + }; const renderGroups = () => { return (
- {/*
{groups.map((group: any) => ( - + @@ -1903,7 +1952,7 @@ export const Group = ({ // // } onClick={() => { - setMobileViewMode('group') + setMobileViewMode("group"); clearAllQueues(); setSelectedDirect(null); setTriedToFetchSecretKey(false); @@ -1966,71 +2015,77 @@ export const Group = ({ group?.groupId === selectedGroup?.groupId && "white", }} > - - - - - {group.groupName?.charAt(0)} - - - - {groupAnnouncements[group?.groupId] && - !groupAnnouncements[group?.groupId]?.seentimestamp && ( - + + - )} - {group?.data && - isExtMsg(group?.data) && - group?.sender !== myAddress && - group?.timestamp && - ((!timestampEnterData[group?.groupId] && - Date.now() - group?.timestamp < - timeDifferenceForNotificationChats) || - timestampEnterData[group?.groupId] < - group?.timestamp) && ( - - )} - + alt={group?.groupName} + // src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${groupOwner?.name}/qortal_group_avatar_${group.groupId}?async=true`} + > + {group.groupName?.charAt(0)} + + + + {groupAnnouncements[group?.groupId] && + !groupAnnouncements[group?.groupId]?.seentimestamp && ( + + )} + {group?.data && + isExtMsg(group?.data) && + group?.sender !== myAddress && + group?.timestamp && + ((!timestampEnterData[group?.groupId] && + Date.now() - group?.timestamp < + timeDifferenceForNotificationChats) || + timestampEnterData[group?.groupId] < + group?.timestamp) && ( + + )} + @@ -2076,7 +2131,6 @@ export const Group = ({ )}
-
); }; @@ -2093,8 +2147,22 @@ export const Group = ({ info={infoSnack} setInfo={setInfoSnack} /> -
- +
+
{!isMobile && renderGroups()} - - + + - {mobileViewMode === 'groups' && ( - renderGroups() - )} + {mobileViewMode === "groups" && !mobileViewModeKeepOpen && renderGroups()} -{mobileViewModeKeepOpen === 'messaging' && ( - renderDirects() - )} - {newChat && ( - <> - - { - setSelectedDirect(null); - - setNewChat(false); - }} - /> - - - )} - {selectedGroup && ( - <> - {mobileViewMode === 'group' && ( - - )} - - {triedToFetchSecretKey && ( - - )} - {firstSecretKeyInCreation && - triedToFetchSecretKey && - !secretKeyPublishDate && ( -
+ + + - {" "} - - The group's first common encryption key is in the process - of creation. Please wait a few minutes for it to be - retrieved by the network. Checking every 2 minutes... - -
- )} - {!admins.includes(myAddress) && - !secretKey && - triedToFetchSecretKey ? ( + { + close() + }} + > + + + + + + { + setSelectedDirect(null) + setMobileViewModeKeepOpen('') + }} + > + + + + + + + { + setSelectedDirect(null); + + setNewChat(false); + }} + setMobileViewModeKeepOpen={setMobileViewModeKeepOpen} + /> + + + )} + {selectedGroup && ( + <> + + + + { + setMobileViewMode("groups"); + }} + > + + + + + {selectedGroup?.groupName} + + + {/* */} + + + + {mobileViewMode === "group" && ( <> - {secretKeyPublishDate || - (!secretKeyPublishDate && !firstSecretKeyInCreation) ? ( + + + )} + + {triedToFetchSecretKey && ( + + )} + {firstSecretKeyInCreation && + triedToFetchSecretKey && + !secretKeyPublishDate && (
{" "} - You are not part of the encrypted group of members. Wait - until an admin re-encrypts the keys. + The group's first common encryption key is in the + process of creation. Please wait a few minutes for it to + be retrieved by the network. Checking every 2 minutes... - - - Try notifying an admin from the list of admins below: - - - {adminsWithNames.map((admin) => { - return ( - - {admin?.name} - notifyAdmin(admin)} - > - Notify - - - ); - })}
- ) : null} - - ) : admins.includes(myAddress) && + )} + {!admins.includes(myAddress) && !secretKey && - triedToFetchSecretKey ? null : !triedToFetchSecretKey ? null : ( - <> - - - - )} + triedToFetchSecretKey ? ( + <> + {secretKeyPublishDate || + (!secretKeyPublishDate && !firstSecretKeyInCreation) ? ( +
+ {" "} + + You are not part of the encrypted group of members. + Wait until an admin re-encrypts the keys. + + + + Try notifying an admin from the list of admins below: + + + {adminsWithNames.map((admin) => { + return ( + + {admin?.name} + notifyAdmin(admin)} + > + Notify + + + ); + })} +
+ ) : null} + + ) : admins.includes(myAddress) && + !secretKey && + triedToFetchSecretKey ? null : !triedToFetchSecretKey ? null : ( + <> + + + + )} + + {admins.includes(myAddress) && + shouldReEncrypt && + triedToFetchSecretKey && + !firstSecretKeyInCreation && + !hideCommonKeyPopup && ( + + )} + + + {openManageMembers && ( + + )} + + )} + + {selectedDirect && !newChat && ( + <> - {admins.includes(myAddress) && - shouldReEncrypt && - triedToFetchSecretKey && - !firstSecretKeyInCreation && !hideCommonKeyPopup && ( - - )} + + { + setSelectedDirect(null); + + setNewChat(false); + }} + setMobileViewModeKeepOpen={setMobileViewModeKeepOpen} + /> + - - {openManageMembers && ( - - )} - - )} + + )} - {selectedDirect && !newChat && ( - <> - - - - - - - { - setSelectedDirect(null); - - setNewChat(false); - }} - /> - - - - )} - - {mobileViewMode === 'home' && ( - - )} - {/* { + {mobileViewMode === "home" && ( + + )} + {/* { !selectedGroup && groupSection === "home" && ( @@ -2414,7 +2591,7 @@ export const Group = ({ setOpenAddGroup={setOpenAddGroup} /> )} */} - + { setGroupSection("forum"); setSelectedDirect(null); - setNewChat(false) + setNewChat(false); }} > @@ -2617,36 +2795,53 @@ export const Group = ({ message: "Setting up groups... please wait.", }} /> -
- {mobileViewMode === 'home' && !mobileViewModeKeepOpen && ( + {mobileViewMode === "home" && !mobileViewModeKeepOpen && ( <> -
- {/* +
+ {/* {renderGroups()} */} - {isMobile && ( - - )} + {isMobile && ( + + )} )} - - - ); }; - - // {isMobile && ( // // // -// )} \ No newline at end of file +// )} diff --git a/src/components/Group/GroupMenu.tsx b/src/components/Group/GroupMenu.tsx index f113bb5..5bc99c6 100644 --- a/src/components/Group/GroupMenu.tsx +++ b/src/components/Group/GroupMenu.tsx @@ -16,7 +16,7 @@ import { ChatIcon } from "../../assets/Icons/ChatIcon"; import { ThreadsIcon } from "../../assets/Icons/ThreadsIcon"; import { MembersIcon } from "../../assets/Icons/MembersIcon"; -export const GroupMenu = ({ setGroupSection, groupSection }) => { +export const GroupMenu = ({ setGroupSection, groupSection, setOpenManageMembers }) => { const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); @@ -177,7 +177,7 @@ export const GroupMenu = ({ setGroupSection, groupSection }) => { { - // setGroupSection("") + setOpenManageMembers(true) handleClose(); }} > diff --git a/src/components/Group/Home.tsx b/src/components/Group/Home.tsx index 7dcc557..4db465d 100644 --- a/src/components/Group/Home.tsx +++ b/src/components/Group/Home.tsx @@ -1,32 +1,58 @@ -import { Box, Button, Typography } from '@mui/material' -import React from 'react' -import { Spacer } from '../../common/Spacer' -import { ListOfThreadPostsWatched } from './ListOfThreadPostsWatched' -import { ThingsToDoInitial } from './ThingsToDoInitial' -import { GroupJoinRequests } from './GroupJoinRequests' -import { GroupInvites } from './GroupInvites' +import { Box, Button, Typography } from "@mui/material"; +import React from "react"; +import { Spacer } from "../../common/Spacer"; +import { ListOfThreadPostsWatched } from "./ListOfThreadPostsWatched"; +import { ThingsToDoInitial } from "./ThingsToDoInitial"; +import { GroupJoinRequests } from "./GroupJoinRequests"; +import { GroupInvites } from "./GroupInvites"; import RefreshIcon from "@mui/icons-material/Refresh"; -export const Home = ({refreshHomeDataFunc, myAddress, isLoadingGroups, balance, userInfo, groups, setGroupSection, setSelectedGroup, getTimestampEnterChat, setOpenManageMembers, setOpenAddGroup, setMobileViewMode}) => { +export const Home = ({ + refreshHomeDataFunc, + myAddress, + isLoadingGroups, + balance, + userInfo, + groups, + setGroupSection, + setSelectedGroup, + getTimestampEnterChat, + setOpenManageMembers, + setOpenAddGroup, + setMobileViewMode, +}) => { return ( - - - - Welcome - - + sx={{ + display: "flex", + width: "100%", + flexDirection: "column", + height: "100%", + overflow: "auto", + alignItems: "center", + }} + > + + 15 ? "16px" : "20px", + padding: '10px' + }} + > + Welcome{" "} + {userInfo?.name ? ( + {`, ${userInfo?.name}`} + ) : null} + + - {/* */} - {!isLoadingGroups && ( - + {!isLoadingGroups && ( + + + - - - - - - - )} - - - ) -} + + + + )} + + + ); +}; diff --git a/src/components/Group/ManageMembers.tsx b/src/components/Group/ManageMembers.tsx index 078cecc..96a46ba 100644 --- a/src/components/Group/ManageMembers.tsx +++ b/src/components/Group/ManageMembers.tsx @@ -253,6 +253,7 @@ export const ManageMembers = ({ sx={{ width: "100%", padding: "25px", + maxWidth: '750px' }} > @@ -281,7 +283,8 @@ export const ManageMembers = ({ @@ -293,7 +296,8 @@ export const ManageMembers = ({ @@ -304,7 +308,8 @@ export const ManageMembers = ({ diff --git a/src/components/Mobile/MobileFooter.tsx b/src/components/Mobile/MobileFooter.tsx index 1f025f4..778cac3 100644 --- a/src/components/Mobile/MobileFooter.tsx +++ b/src/components/Mobile/MobileFooter.tsx @@ -1,35 +1,46 @@ -import * as React from 'react'; -import { BottomNavigation, BottomNavigationAction, Typography } from '@mui/material'; -import { Home, Groups, Message, ShowChart } from '@mui/icons-material'; -import Box from '@mui/material/Box'; -import BottomLogo from '../../assets/svgs/BottomLogo5.svg' -import { CustomSvg } from '../../common/CustomSvg'; -import { WalletIcon } from '../../assets/Icons/WalletIcon'; -import { HubsIcon } from '../../assets/Icons/HubsIcon'; -import { TradingIcon } from '../../assets/Icons/TradingIcon'; -import { MessagingIcon } from '../../assets/Icons/MessagingIcon'; +import * as React from "react"; +import { + BottomNavigation, + BottomNavigationAction, + Typography, +} from "@mui/material"; +import { Home, Groups, Message, ShowChart } from "@mui/icons-material"; +import Box from "@mui/material/Box"; +import BottomLogo from "../../assets/svgs/BottomLogo5.svg"; +import { CustomSvg } from "../../common/CustomSvg"; +import { WalletIcon } from "../../assets/Icons/WalletIcon"; +import { HubsIcon } from "../../assets/Icons/HubsIcon"; +import { TradingIcon } from "../../assets/Icons/TradingIcon"; +import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; -const IconWrapper = ({children, label, color})=> { - - return - {children} - {label} +const IconWrapper = ({ children, label, color }) => { + return ( + + {children} + + {label} + -} + ); +}; -export const MobileFooter =({ -selectedGroup, +export const MobileFooter = ({ + selectedGroup, groupSection, isUnread, goToAnnouncements, @@ -44,84 +55,131 @@ selectedGroup, openDrawerGroups, goToHome, setIsOpenDrawerProfile, - mobileViewMode, + mobileViewMode, setMobileViewMode, - setMobileViewModeKeepOpen + setMobileViewModeKeepOpen, + hasUnreadGroups, + hasUnreadDirects }) => { - const [value, setValue] = React.useState(0); - return ( - - setValue(newValue)} - sx={{ backgroundColor: 'transparent', flexGrow: 1 }} - > - { + borderTopRightRadius: "25px", + borderTopLeftRadius: "25px", + boxShadow: '0px -2px 10px rgba(0, 0, 0, 0.1)', + }} + > + setValue(newValue)} + sx={{ backgroundColor: "transparent", flexGrow: 1 }} + > + { // setMobileViewMode('wallet') - setIsOpenDrawerProfile(true) - }} icon={} sx={{ color: value === 0 ? 'white' : 'gray', padding: '0px 10px' }} /> - { - setMobileViewMode('groups') - }} icon={} sx={{ color: value === 0 ? 'white' : 'gray', paddingLeft: '10px', paddingRight: '42px' }} /> + setIsOpenDrawerProfile(true); + }} + icon={ + + + + } + sx={{ color: value === 0 ? "white" : "gray", padding: "0px 10px" }} + /> + { + setMobileViewMode("groups"); + }} + icon={ + + + + } + sx={{ + color: value === 0 ? "white" : "gray", + paddingLeft: "10px", + paddingRight: "42px", + }} + /> + - - - {/* Floating Center Button */} - - - {/* Custom Center Icon */} - center-icon - - - - setValue(newValue)} - sx={{ backgroundColor: 'transparent', flexGrow: 1 }} + {/* Floating Center Button */} + + - { - setMobileViewModeKeepOpen('messaging') - }} icon={} sx={{ color: value === 2 ? 'white' : 'gray', paddingLeft: '55px', paddingRight: '10px' }} /> - { - chrome.tabs.create({ url: "https://www.qort.trade", active: true }); - }} icon={} sx={{ color: value === 3 ? 'white' : 'gray' , padding: '0px 10px'}} /> - + {/* Custom Center Icon */} + center-icon + - ); - } \ No newline at end of file + + setValue(newValue)} + sx={{ backgroundColor: "transparent", flexGrow: 1 }} + > + { + setMobileViewModeKeepOpen("messaging"); + }} + icon={ + + + + } + sx={{ + color: value === 2 ? "white" : "gray", + paddingLeft: "55px", + paddingRight: "10px", + }} + /> + { + chrome.tabs.create({ url: "https://www.qort.trade", active: true }); + }} + icon={ + + + + } + sx={{ color: value === 3 ? "white" : "gray", padding: "0px 10px" }} + /> + + + ); +}; diff --git a/src/components/Mobile/MobileHeader.tsx b/src/components/Mobile/MobileHeader.tsx index da9d07e..914e8eb 100644 --- a/src/components/Mobile/MobileHeader.tsx +++ b/src/components/Mobile/MobileHeader.tsx @@ -1,17 +1,35 @@ -import React from 'react'; -import { AppBar, Toolbar, IconButton, Typography, Box, MenuItem, Select, ButtonBase } from '@mui/material'; -import { HomeIcon } from '../../assets/Icons/HomeIcon'; -import { LogoutIcon } from '../../assets/Icons/LogoutIcon'; -import { NotificationIcon } from '../../assets/Icons/NotificationIcon'; -import { ArrowDownIcon } from '../../assets/Icons/ArrowDownIcon'; -import { MessagingIcon } from '../../assets/Icons/MessagingIcon'; +import React, { useState } from "react"; +import { + AppBar, + Toolbar, + IconButton, + Typography, + Box, + MenuItem, + Select, + ButtonBase, + Menu, + ListItemIcon, + ListItemText, +} from "@mui/material"; +import { HomeIcon } from "../../assets/Icons/HomeIcon"; +import { LogoutIcon } from "../../assets/Icons/LogoutIcon"; +import { NotificationIcon } from "../../assets/Icons/NotificationIcon"; +import { ArrowDownIcon } from "../../assets/Icons/ArrowDownIcon"; +import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; +import { MessagingIcon2 } from "../../assets/Icons/MessagingIcon2"; +import { HubsIcon } from "../../assets/Icons/HubsIcon"; const Header = ({ logoutFunc, goToHome, setIsOpenDrawerProfile, isThin, - setMobileViewModeKeepOpen + setMobileViewModeKeepOpen, + hasUnreadGroups, + hasUnreadDirects, + setMobileViewMode, + // selectedGroup, // onHomeClick, // onLogoutClick, @@ -19,94 +37,243 @@ const Header = ({ // onWalletClick, // onNotificationClick, }) => { - if(isThin){ + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + + if (isThin) { return ( - - - {/* Left Home Icon */} - - { - setMobileViewModeKeepOpen('') - goToHome() -}} - // onClick={onHomeClick} + + - - - { - setMobileViewModeKeepOpen() - goToHome() -}} - // onClick={onHomeClick} + {/* Left Home Icon */} + + { + setMobileViewModeKeepOpen(""); + goToHome(); + }} + // onClick={onHomeClick} + > + + + + + + + + {/* Center Title */} + + QORTAL + + + {/* Right Logout Icon */} + + { + setMobileViewModeKeepOpen("messaging"); + }} + edge="end" + color="inherit" + aria-label="logout" + + // onClick={onLogoutClick} + > + + + + + + + + + { + setMobileViewMode("groups"); + setMobileViewModeKeepOpen("") + handleClose(); + }} > - - - - + + + + + + { + setMobileViewModeKeepOpen("messaging"); - {/* Center Title */} - - QORTAL - - - {/* Right Logout Icon */} - - { - setMobileViewModeKeepOpen('messaging') - }} edge="end" color="inherit" aria-label="logout" - -// onClick={onLogoutClick} -> - - - - - - - - - ) + + + + + + + + ); } return ( <> {/* Main Header */} - - + + {/* Left Home Icon */} - - + {/* Center Title */} - + QORTAL {/* Right Logout Icon */} - @@ -116,69 +283,160 @@ onClick={()=> { {/* Secondary Section */} - - - + + Palmas -{/* + {/* */} - - - - + + {/* Right Dropdown */} - { - setIsOpenDrawerProfile(true) - }}> - - - View Wallet - + {/* { + setIsOpenDrawerProfile(true); + }} + > + + + View Wallet + - - - + + + */} + + { + setMobileViewMode("groups"); + setMobileViewModeKeepOpen("") + handleClose(); + }} + > + + + + + + { + setMobileViewModeKeepOpen("messaging"); + + handleClose(); + }} + > + + + + + + ); }; diff --git a/src/index.css b/src/index.css index 68a7ee3..9d6fa90 100644 --- a/src/index.css +++ b/src/index.css @@ -25,6 +25,7 @@ padding: 0px; margin: 0px; box-sizing: border-box !important; + word-break: break-word; --color-instance : #1E1E20; --color-instance-popover-bg: #222222; --Mail-Background: rgba(49, 51, 56, 1); @@ -33,6 +34,7 @@ --bg-primary : rgba(31, 32, 35, 1); --bg-2: #27282c; --bg-3: rgba(0, 0, 0, 0.1); + --unread: rgba(255, 0, 0, 1); } body {