diff --git a/src/App.tsx b/src/App.tsx index a4f60f6..35dc80f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1487,6 +1487,7 @@ function App() { sx={{ height: '100%', justifyContent: 'space-between', + borderLeft: `1px solid ${theme.palette.border.subtle}`, }} > {message?.name} diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx index e79bffe..2a86f1d 100644 --- a/src/components/Chat/ChatGroup.tsx +++ b/src/components/Chat/ChatGroup.tsx @@ -997,6 +997,7 @@ export const ChatGroup = ({ opacity: hide ? 0 : 1, position: hide ? 'absolute' : 'relative', width: '100%', + padding: '10px', }} >
)} {showScrollDownButton && !showScrollButton && ( - + )}
{enableMentions && (hasSecretKey || isPrivate === false) && ( diff --git a/src/components/Chat/ChatOptions.tsx b/src/components/Chat/ChatOptions.tsx index e95fa5b..ddb3a3f 100644 --- a/src/components/Chat/ChatOptions.tsx +++ b/src/components/Chat/ChatOptions.tsx @@ -767,7 +767,6 @@ const ShowMessage = ({ message, goToMessage, messages }) => { sx={{ fontWight: 600, fontFamily: 'Inter', - color: 'cadetBlue', }} > {message?.senderName} diff --git a/src/components/Chat/MessageItem.tsx b/src/components/Chat/MessageItem.tsx index a40fca8..b365d73 100644 --- a/src/components/Chat/MessageItem.tsx +++ b/src/components/Chat/MessageItem.tsx @@ -248,7 +248,6 @@ export const MessageItem = React.memo( sx={{ fontWight: 600, fontFamily: 'Inter', - color: 'cadetBlue', }} > {message?.senderName || message?.sender} @@ -304,7 +303,7 @@ export const MessageItem = React.memo( { return ( { > { + resourceData, + resourceDetails, + owner, + refresh, + openExternal, + external, + isLoadingParent, + errorMsg, + encryptionType, + selectedGroupId, +}) => { + const [isOpen, setIsOpen] = useState(true); + const { downloadResource } = useContext(MyContext); - const [isOpen, setIsOpen] = useState(true); - const { downloadResource } = useContext(MyContext); - - const saveToDisk = async ()=> { - const { name, service, identifier } = resourceData; - - const url = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}`; - fetch(url) - .then(response => response.blob()) - .then(async blob => { - await saveFileToDiskGeneric(blob, resourceData?.fileName) - }) - .catch(error => { - console.error("Error fetching the video:", error); - }); - } - - const saveToDiskEncrypted = async ()=> { - let blobUrl + const saveToDisk = async () => { + const { name, service, identifier } = resourceData; + + const url = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}`; + fetch(url) + .then((response) => response.blob()) + .then(async (blob) => { + await saveFileToDiskGeneric(blob, resourceData?.fileName); + }) + .catch((error) => { + console.error('Error fetching the video:', error); + }); + }; + + const saveToDiskEncrypted = async () => { + let blobUrl; + try { + const { name, service, identifier, key } = resourceData; + + const url = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}?encoding=base64`; + const res = await fetch(url); + const data = await res.text(); + let decryptedData; try { - const { name, service, identifier,key } = resourceData; - - const url = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}?encoding=base64`; - const res = await fetch(url) - const data = await res.text(); - let decryptedData - try { - if(key && encryptionType === 'private'){ - decryptedData = await window.sendMessage( - "DECRYPT_DATA_WITH_SHARING_KEY", - - { - encryptedData: data, - key: decodeURIComponent(key), - } - - ); - } - if(encryptionType === 'group'){ - decryptedData = await window.sendMessage( - "DECRYPT_QORTAL_GROUP_DATA", - - { - data64: data, - groupId: selectedGroupId, - } - - ); - } - } catch (error) { - throw new Error('Unable to decrypt') + if (key && encryptionType === 'private') { + decryptedData = await window.sendMessage( + 'DECRYPT_DATA_WITH_SHARING_KEY', + + { + encryptedData: data, + key: decodeURIComponent(key), + } + ); + } + if (encryptionType === 'group') { + decryptedData = await window.sendMessage( + 'DECRYPT_QORTAL_GROUP_DATA', + + { + data64: data, + groupId: selectedGroupId, + } + ); } - - if (!decryptedData || decryptedData?.error) throw new Error("Could not decrypt data"); - blobUrl = base64ToBlobUrl(decryptedData, resourceData?.mimeType) - const response = await fetch(blobUrl); - const blob = await response.blob(); - await saveFileToDiskGeneric(blob, resourceData?.fileName) - } catch (error) { - console.error(error) - } finally { - if(blobUrl){ - URL.revokeObjectURL(blobUrl); - } - + throw new Error('Unable to decrypt'); + } + + if (!decryptedData || decryptedData?.error) + throw new Error('Could not decrypt data'); + blobUrl = base64ToBlobUrl(decryptedData, resourceData?.mimeType); + const response = await fetch(blobUrl); + const blob = await response.blob(); + await saveFileToDiskGeneric(blob, resourceData?.fileName); + } catch (error) { + console.error(error); + } finally { + if (blobUrl) { + URL.revokeObjectURL(blobUrl); } } - return ( - + - - + ATTACHMENT embed + + + + - ATTACHMENT embed - - + + {external && ( - - {external && ( - - - - )} - - - - - Created by {decodeIfEncoded(owner)} - - - {encryptionType === 'private' ? "ENCRYPTED" : encryptionType === 'group' ? 'GROUP ENCRYPTED' : "Not encrypted"} - - - - - - - {isLoadingParent && isOpen && ( - - {" "} - {" "} - )} - {errorMsg && ( - + + + + Created by {decodeIfEncoded(owner)} + + + {encryptionType === 'private' + ? 'ENCRYPTED' + : encryptionType === 'group' + ? 'GROUP ENCRYPTED' + : 'Not encrypted'} + + + + + {isLoadingParent && isOpen && ( + + {' '} + {' '} + + )} + {errorMsg && ( + + {' '} + - {" "} + {errorMsg} + {' '} + + )} + + + + + {resourceData?.fileName && ( + <> - {errorMsg} - {" "} - + {resourceData?.fileName} + + + )} - - - - - {resourceData?.fileName && ( + { + if (resourceDetails?.status?.status === 'READY') { + if (encryptionType) { + saveToDiskEncrypted(); + return; + } + saveToDisk(); + return; + } + downloadResource(resourceData); + }} + > + + + {resourceDetails?.status?.status === 'DOWNLOADED' + ? 'BUILDING' + : resourceDetails?.status?.status} + + {!resourceDetails && ( <> - {resourceData?.fileName} - + + Download File )} - { - if(resourceDetails?.status?.status === 'READY'){ - if(encryptionType){ - saveToDiskEncrypted() - return - } - saveToDisk() - return - } - downloadResource(resourceData) - }}> - - - {resourceDetails?.status?.status === 'DOWNLOADED' ? 'BUILDING' : resourceDetails?.status?.status} - {!resourceDetails && ( - <> - - Download File - - - )} - {resourceDetails && resourceDetails?.status?.status !== 'READY' && resourceDetails?.status?.status !== 'FAILED_TO_DOWNLOAD' && ( - <> - - Downloading: {resourceDetails?.status?.percentLoaded || '0'}% - - - )} - {resourceDetails && resourceDetails?.status?.status === 'READY' && ( - <> - - Save to Disk - - - )} - - - - - - - - - ); - }; \ No newline at end of file + {resourceDetails && + resourceDetails?.status?.status !== 'READY' && + resourceDetails?.status?.status !== 'FAILED_TO_DOWNLOAD' && ( + <> + + + Downloading:{' '} + {resourceDetails?.status?.percentLoaded || '0'}% + + + )} + {resourceDetails && + resourceDetails?.status?.status === 'READY' && ( + <> + + Save to Disk + + )} + + + + + + ); +}; diff --git a/src/components/Embeds/ImageEmbed.tsx b/src/components/Embeds/ImageEmbed.tsx index f1cc859..4122dfb 100644 --- a/src/components/Embeds/ImageEmbed.tsx +++ b/src/components/Embeds/ImageEmbed.tsx @@ -1,265 +1,265 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState } from 'react'; import { Card, CardContent, Typography, - Box, ButtonBase, Divider, Dialog, IconButton, +} from '@mui/material'; -} from "@mui/material"; - -import RefreshIcon from "@mui/icons-material/Refresh"; -import OpenInNewIcon from "@mui/icons-material/OpenInNew"; -import { CustomLoader } from "../../common/CustomLoader"; -import ImageIcon from "@mui/icons-material/Image"; -import CloseIcon from "@mui/icons-material/Close"; -import { decodeIfEncoded } from "../../utils/decode"; +import RefreshIcon from '@mui/icons-material/Refresh'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; +import { CustomLoader } from '../../common/CustomLoader'; +import ImageIcon from '@mui/icons-material/Image'; +import CloseIcon from '@mui/icons-material/Close'; +import { decodeIfEncoded } from '../../utils/decode'; export const ImageCard = ({ - image, - fetchImage, - owner, - refresh, - openExternal, - external, - isLoadingParent, - errorMsg, - encryptionType, - }) => { - const [isOpen, setIsOpen] = useState(true); - const [height, setHeight] = useState('400px') - useEffect(() => { - if (isOpen) { - fetchImage(); - } - }, [isOpen]); - - // useEffect(()=> { - // if(errorMsg){ - // setHeight('300px') - // } - // }, [errorMsg]) - - return ( - { + const [isOpen, setIsOpen] = useState(true); + const [height, setHeight] = useState('400px'); + useEffect(() => { + if (isOpen) { + fetchImage(); + } + }, [isOpen]); + + // useEffect(()=> { + // if(errorMsg){ + // setHeight('300px') + // } + // }, [errorMsg]) + + return ( + + - - + IMAGE embed + + + + - IMAGE embed - - + + {external && ( - - {external && ( - - - - )} + )} + + + + + Created by {decodeIfEncoded(owner)} + + + {encryptionType === 'private' + ? 'ENCRYPTED' + : encryptionType === 'group' + ? 'GROUP ENCRYPTED' + : 'Not encrypted'} + + + + + {isLoadingParent && isOpen && ( + + {' '} + {' '} - - - - Created by {decodeIfEncoded(owner)} - - - {encryptionType === 'private' ? "ENCRYPTED" : encryptionType === 'group' ? 'GROUP ENCRYPTED' : "Not encrypted"} - - - - - - {isLoadingParent && isOpen && ( - - {" "} - {" "} - - )} - {errorMsg && ( - - {" "} - - {errorMsg} - {" "} - - )} - - - - - - - - - ); - }; + {errorMsg} + {' '} + + )} + - export function ImageViewer({ src, alt = "" }) { - const [isFullscreen, setIsFullscreen] = useState(false); - - const handleOpenFullscreen = () => setIsFullscreen(true); - const handleCloseFullscreen = () => setIsFullscreen(false); - - return ( - <> - {/* Image in container */} + + + + + + + ); +}; + +export function ImageViewer({ src, alt = '' }) { + const [isFullscreen, setIsFullscreen] = useState(false); + + const handleOpenFullscreen = () => setIsFullscreen(true); + const handleCloseFullscreen = () => setIsFullscreen(false); + + return ( + <> + {/* Image in container */} + + {alt} + + + {/* Fullscreen Viewer */} + + {/* Close Button */} + + + + + {/* Fullscreen Image */} {alt} - - {/* Fullscreen Viewer */} - - - {/* Close Button */} - - - - - {/* Fullscreen Image */} - {alt} - - - - ); - } \ No newline at end of file + + + ); +} diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index eaa89e6..a32812c 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -1556,12 +1556,13 @@ export const Group = ({
{ sx={{ fontWight: 600, fontFamily: 'Inter', - color: 'cadetBlue', }} > {promotion?.name} @@ -698,7 +697,6 @@ export const ListOfGroupPromotions = () => { sx={{ fontWight: 600, fontFamily: 'Inter', - color: 'cadetBlue', }} > {promotion?.groupName} @@ -746,7 +744,6 @@ export const ListOfGroupPromotions = () => { sx={{ fontWight: 600, fontFamily: 'Inter', - color: 'cadetBlue', }} > {promotion?.data} diff --git a/src/styles/theme-dark.ts b/src/styles/theme-dark.ts index 9c9e610..fb348a8 100644 --- a/src/styles/theme-dark.ts +++ b/src/styles/theme-dark.ts @@ -15,12 +15,17 @@ const darkThemeOptions: ThemeOptions = { }, background: { default: 'rgb(49, 51, 56)', - paper: 'rgb(96, 96, 97)', + paper: 'rgb(62, 64, 68)', + surface: 'rgb(58, 60, 65)', }, text: { primary: 'rgb(255, 255, 255)', secondary: 'rgb(179, 179, 179)', }, + border: { + main: 'rgba(255, 255, 255, 0.12)', + subtle: 'rgba(255, 255, 255, 0.08)', + }, }, components: { MuiCard: { diff --git a/src/styles/theme-light.ts b/src/styles/theme-light.ts index 1bd114d..db025d3 100644 --- a/src/styles/theme-light.ts +++ b/src/styles/theme-light.ts @@ -6,21 +6,26 @@ const lightThemeOptions: ThemeOptions = { palette: { mode: 'light', primary: { - main: 'rgba(244, 244, 251, 1)', + main: 'rgb(162, 162, 221)', // old light becomes main dark: 'rgb(113, 198, 212)', - light: 'rgb(162, 162, 221)', + light: 'rgba(244, 244, 251, 1)', // former main becomes light }, secondary: { main: 'rgba(194, 222, 236, 1)', }, background: { default: 'rgba(250, 250, 250, 1)', - paper: 'rgb(228, 228, 228)', + paper: 'rgb(220, 220, 220)', // darker card background + surface: 'rgb(240, 240, 240)', // optional middle gray for replies, side panels }, text: { primary: 'rgba(0, 0, 0, 1)', secondary: 'rgba(82, 82, 82, 1)', }, + border: { + main: 'rgba(0, 0, 0, 0.12)', + subtle: 'rgba(0, 0, 0, 0.08)', + }, }, components: { MuiCard: { diff --git a/src/styles/theme.d.ts b/src/styles/theme.d.ts new file mode 100644 index 0000000..762b526 --- /dev/null +++ b/src/styles/theme.d.ts @@ -0,0 +1,19 @@ +import '@mui/material/styles'; + +declare module '@mui/material/styles' { + interface TypeBackground { + surface: string; + } + interface Palette { + border: { + main: string; + subtle: string; + }; + } + interface PaletteOptions { + border?: { + main?: string; + subtle?: string; + }; + } +}