From 38c3cc92aace516745ba3f1993052d7e5dc38631 Mon Sep 17 00:00:00 2001 From: PhilReact Date: Sat, 26 Apr 2025 18:03:27 +0300 Subject: [PATCH 01/11] improving bg colors and adding borders --- src/App.tsx | 1 + src/components/Chat/AnnouncementItem.tsx | 1 - src/components/Chat/ChatGroup.tsx | 5 +- src/components/Chat/ChatList.tsx | 10 +- src/components/Chat/ChatOptions.tsx | 1 - src/components/Chat/MessageItem.tsx | 11 +- src/components/DesktopSideBar.tsx | 2 + src/components/Embeds/AttachmentEmbed.tsx | 499 +++++++++--------- src/components/Embeds/ImageEmbed.tsx | 434 +++++++-------- src/components/Group/Group.tsx | 6 +- .../Group/ListOfGroupPromotions.tsx | 3 - src/styles/theme-dark.ts | 7 +- src/styles/theme-light.ts | 11 +- src/styles/theme.d.ts | 19 + 14 files changed, 527 insertions(+), 483 deletions(-) create mode 100644 src/styles/theme.d.ts 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; + }; + } +} From c7b19c0d720e7d3924c045e7d3f73f76ba85d956 Mon Sep 17 00:00:00 2001 From: PhilReact Date: Sat, 26 Apr 2025 19:20:00 +0300 Subject: [PATCH 02/11] change tooltip bg color --- src/App.tsx | 16 ++++++++-------- src/ExtStates/NotAuthenticated.tsx | 9 --------- src/components/Chat/ChatOptions.tsx | 4 ++-- src/components/GeneralNotifications.tsx | 2 +- src/components/QMailStatus.tsx | 2 +- src/styles/App-styles.ts | 3 +-- 6 files changed, 13 insertions(+), 23 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 35dc80f..b215b5e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1525,7 +1525,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1565,7 +1565,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1605,7 +1605,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1645,7 +1645,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1682,7 +1682,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1793,7 +1793,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1838,7 +1838,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1880,7 +1880,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { diff --git a/src/ExtStates/NotAuthenticated.tsx b/src/ExtStates/NotAuthenticated.tsx index 3c8afd9..bbb2b3d 100644 --- a/src/ExtStates/NotAuthenticated.tsx +++ b/src/ExtStates/NotAuthenticated.tsx @@ -641,15 +641,6 @@ export const NotAuthenticated = ({ }} control={ { if (event.target.checked) { diff --git a/src/components/Chat/ChatOptions.tsx b/src/components/Chat/ChatOptions.tsx index ddb3a3f..ed808f2 100644 --- a/src/components/Chat/ChatOptions.tsx +++ b/src/components/Chat/ChatOptions.tsx @@ -358,14 +358,14 @@ export const ChatOptions = ({ return ( { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { diff --git a/src/components/QMailStatus.tsx b/src/components/QMailStatus.tsx index dd6f9be..b171be2 100644 --- a/src/components/QMailStatus.tsx +++ b/src/components/QMailStatus.tsx @@ -76,7 +76,7 @@ export const QMailStatus = () => { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { diff --git a/src/styles/App-styles.ts b/src/styles/App-styles.ts index 980657b..8031321 100644 --- a/src/styles/App-styles.ts +++ b/src/styles/App-styles.ts @@ -131,9 +131,8 @@ export const CustomButton = styled(Box)(({ theme }) => ({ width: 'fit-content', '&:hover': { backgroundColor: theme.palette.background.paper, - color: theme.palette.text.secondary, 'svg path': { - fill: theme.palette.background.paper, + fill: theme.palette.background.secondary, }, }, })); From c4520b960d4e451427e9e4dcc1c1aa502a45743f Mon Sep 17 00:00:00 2001 From: PhilReact Date: Sat, 26 Apr 2025 18:03:27 +0300 Subject: [PATCH 03/11] improving bg colors and adding borders --- src/App.tsx | 1 + src/components/Chat/AnnouncementItem.tsx | 1 - src/components/Chat/ChatGroup.tsx | 5 +- src/components/Chat/ChatList.tsx | 10 +- src/components/Chat/ChatOptions.tsx | 1 - src/components/Chat/MessageItem.tsx | 11 +- src/components/DesktopSideBar.tsx | 2 + src/components/Embeds/AttachmentEmbed.tsx | 499 +++++++++--------- src/components/Embeds/ImageEmbed.tsx | 434 +++++++-------- src/components/Group/Group.tsx | 6 +- .../Group/ListOfGroupPromotions.tsx | 3 - src/styles/theme-dark.ts | 7 +- src/styles/theme-light.ts | 11 +- src/styles/theme.d.ts | 19 + 14 files changed, 527 insertions(+), 483 deletions(-) create mode 100644 src/styles/theme.d.ts diff --git a/src/App.tsx b/src/App.tsx index b3d11d0..f7240b9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1471,6 +1471,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 17ee3e6..fdd57e0 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; + }; + } +} From 6f20bdd684c00d308b432b18c023a7049f7b5edb Mon Sep 17 00:00:00 2001 From: PhilReact Date: Sat, 26 Apr 2025 19:20:00 +0300 Subject: [PATCH 04/11] change tooltip bg color --- src/App.tsx | 16 ++++++++-------- src/ExtStates/NotAuthenticated.tsx | 9 --------- src/components/Chat/ChatOptions.tsx | 4 ++-- src/components/GeneralNotifications.tsx | 2 +- src/components/QMailStatus.tsx | 2 +- src/styles/App-styles.ts | 3 +-- 6 files changed, 13 insertions(+), 23 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f7240b9..6297047 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1509,7 +1509,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1549,7 +1549,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1589,7 +1589,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1629,7 +1629,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1666,7 +1666,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1777,7 +1777,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1822,7 +1822,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -1864,7 +1864,7 @@ function App() { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { diff --git a/src/ExtStates/NotAuthenticated.tsx b/src/ExtStates/NotAuthenticated.tsx index 1f58360..a99a970 100644 --- a/src/ExtStates/NotAuthenticated.tsx +++ b/src/ExtStates/NotAuthenticated.tsx @@ -631,15 +631,6 @@ export const NotAuthenticated = ({ }} control={ { if (event.target.checked) { diff --git a/src/components/Chat/ChatOptions.tsx b/src/components/Chat/ChatOptions.tsx index ddb3a3f..ed808f2 100644 --- a/src/components/Chat/ChatOptions.tsx +++ b/src/components/Chat/ChatOptions.tsx @@ -358,14 +358,14 @@ export const ChatOptions = ({ return ( { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { diff --git a/src/components/QMailStatus.tsx b/src/components/QMailStatus.tsx index b733261..6600211 100644 --- a/src/components/QMailStatus.tsx +++ b/src/components/QMailStatus.tsx @@ -77,7 +77,7 @@ export const QMailStatus = () => { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { diff --git a/src/styles/App-styles.ts b/src/styles/App-styles.ts index 980657b..8031321 100644 --- a/src/styles/App-styles.ts +++ b/src/styles/App-styles.ts @@ -131,9 +131,8 @@ export const CustomButton = styled(Box)(({ theme }) => ({ width: 'fit-content', '&:hover': { backgroundColor: theme.palette.background.paper, - color: theme.palette.text.secondary, 'svg path': { - fill: theme.palette.background.paper, + fill: theme.palette.background.secondary, }, }, })); From c8e501ddee38e673db7fa71dbfec0b75741d93eb Mon Sep 17 00:00:00 2001 From: PhilReact Date: Sun, 27 Apr 2025 15:38:06 +0300 Subject: [PATCH 05/11] fixing styles --- src/App.tsx | 67 +++++++++++++++----- src/assets/Icons/ChatIcon.tsx | 26 +++++--- src/assets/Icons/CopyIcon.tsx | 25 ++++++++ src/assets/Icons/MessagingIcon2.tsx | 14 ----- src/assets/Icons/MessagingIconFilled.tsx | 24 ++++++++ src/assets/Icons/QappDevelopText.tsx | 4 +- src/components/Apps/AppPublish.tsx | 72 ++++++++++------------ src/components/Apps/AppViewerContainer.tsx | 4 +- src/components/Apps/Apps-styles.tsx | 29 +++++---- src/components/Apps/AppsDesktop.tsx | 5 +- src/components/Apps/AppsDevMode.tsx | 21 ++----- src/components/Apps/AppsDevModeNavBar.tsx | 4 +- src/components/Apps/AppsLibraryDesktop.tsx | 8 ++- src/components/Apps/AppsNavBarDesktop.tsx | 4 +- src/components/Apps/AppsPrivate.tsx | 6 ++ src/components/Auth/DownloadWallet.tsx | 8 +++ src/components/Chat/ChatGroup.tsx | 2 +- src/components/Chat/ChatOptions.tsx | 4 +- src/components/Chat/TipTap.tsx | 11 +++- src/components/DesktopSideBar.tsx | 4 +- src/components/Embeds/AttachmentEmbed.tsx | 17 ++--- src/components/Embeds/ImageEmbed.tsx | 17 ++--- src/components/Embeds/PollEmbed.tsx | 24 +++----- src/components/GeneralNotifications.tsx | 2 +- src/components/Group/GroupInvites.tsx | 2 +- src/components/Group/ManageMembers.tsx | 28 +++++---- src/components/QMailStatus.tsx | 6 +- src/styles/App-styles.ts | 3 - src/styles/theme-dark.ts | 14 +++++ src/styles/theme-light.ts | 18 +++++- 30 files changed, 291 insertions(+), 182 deletions(-) create mode 100644 src/assets/Icons/CopyIcon.tsx delete mode 100644 src/assets/Icons/MessagingIcon2.tsx create mode 100644 src/assets/Icons/MessagingIconFilled.tsx diff --git a/src/App.tsx b/src/App.tsx index 6297047..f8e4146 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -30,7 +30,6 @@ import { CountdownCircleTimer } from 'react-countdown-circle-timer'; import Logo1Dark from './assets/svgs/Logo1Dark.svg'; import RefreshIcon from '@mui/icons-material/Refresh'; import DownloadIcon from '@mui/icons-material/Download'; -import Copy from './assets/svgs/Copy.svg'; import ltcLogo from './assets/ltc.png'; import PersonSearchIcon from '@mui/icons-material/PersonSearch'; import qortLogo from './assets/qort.png'; @@ -137,6 +136,7 @@ import ThemeSelector from './components/Theme/ThemeSelector.tsx'; import { useTranslation } from 'react-i18next'; import LanguageSelector from './components/Language/LanguageSelector.tsx'; import { DownloadWallet } from './components/Auth/DownloadWallet.tsx'; +import { CopyIcon } from './assets/Icons/CopyIcon.tsx'; type extStates = | 'not-authenticated' @@ -1297,7 +1297,8 @@ function App() { {rawWallet?.ltcAddress?.slice(0, 6)}... - {rawWallet?.ltcAddress?.slice(-4)} + {rawWallet?.ltcAddress?.slice(-4)}{' '} + @@ -1362,7 +1363,8 @@ function App() { {rawWallet?.address0?.slice(0, 6)}... - {rawWallet?.address0?.slice(-4)} + {rawWallet?.address0?.slice(-4)}{' '} + @@ -1519,7 +1521,11 @@ function App() { }, }} > - + @@ -1559,7 +1565,11 @@ function App() { }, }} > - + @@ -1599,7 +1609,11 @@ function App() { }, }} > - + @@ -1639,7 +1653,11 @@ function App() { }, }} > - + @@ -1681,7 +1699,10 @@ function App() { setIsOpenDrawerProfile(true); }} > - + @@ -1787,7 +1808,11 @@ function App() { }, }} > - + @@ -1832,7 +1857,11 @@ function App() { }, }} > - + )} @@ -1874,7 +1903,11 @@ function App() { }, }} > - + @@ -2165,10 +2198,10 @@ function App() { defaultChecked={messageQortalRequest?.checkbox1?.value} sx={{ '&.Mui-checked': { - color: 'white', // Customize the color when checked + color: theme.palette.text.secondary, // Customize the color when checked }, '& .MuiSvgIcon-root': { - color: 'white', + color: theme.palette.text.secondary, }, }} /> @@ -3407,10 +3440,10 @@ function App() { } sx={{ '&.Mui-checked': { - color: 'white', // Customize the color when checked + color: theme.palette.text.secondary, // Customize the color when checked }, '& .MuiSvgIcon-root': { - color: 'white', + color: theme.palette.text.secondary, }, }} /> @@ -3436,10 +3469,10 @@ function App() { disableRipple sx={{ '&.Mui-checked': { - color: 'white', + color: theme.palette.text.secondary, }, '& .MuiSvgIcon-root': { - color: 'white', + color: theme.palette.text.secondary, }, }} /> diff --git a/src/assets/Icons/ChatIcon.tsx b/src/assets/Icons/ChatIcon.tsx index f68ed35..8546949 100644 --- a/src/assets/Icons/ChatIcon.tsx +++ b/src/assets/Icons/ChatIcon.tsx @@ -1,12 +1,18 @@ import React from 'react'; -export const ChatIcon= ({ color = 'white', height = 15, width = 15 }) => { - return ( - - - - - - ); - }; - \ No newline at end of file +export const ChatIcon = ({ color = 'white', height = 15, width = 15 }) => { + return ( + + + + ); +}; diff --git a/src/assets/Icons/CopyIcon.tsx b/src/assets/Icons/CopyIcon.tsx new file mode 100644 index 0000000..67ede2d --- /dev/null +++ b/src/assets/Icons/CopyIcon.tsx @@ -0,0 +1,25 @@ +import { useTheme } from '@mui/material'; +import React from 'react'; + +export const CopyIcon = ({ color, height = 11, width = 10 }) => { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary; + return ( + + + + ); +}; diff --git a/src/assets/Icons/MessagingIcon2.tsx b/src/assets/Icons/MessagingIcon2.tsx deleted file mode 100644 index da367cd..0000000 --- a/src/assets/Icons/MessagingIcon2.tsx +++ /dev/null @@ -1,14 +0,0 @@ -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/MessagingIconFilled.tsx b/src/assets/Icons/MessagingIconFilled.tsx new file mode 100644 index 0000000..5dc6e04 --- /dev/null +++ b/src/assets/Icons/MessagingIconFilled.tsx @@ -0,0 +1,24 @@ +import { useTheme } from '@mui/material'; +import React from 'react'; + +export const MessagingIconFilled = ({ color, height = 31, width = 31 }) => { + const theme = useTheme(); + + const setColor = color ? color : theme.palette.text.primary; + return ( + + + + ); +}; diff --git a/src/assets/Icons/QappDevelopText.tsx b/src/assets/Icons/QappDevelopText.tsx index e0856cf..9bd30f9 100644 --- a/src/assets/Icons/QappDevelopText.tsx +++ b/src/assets/Icons/QappDevelopText.tsx @@ -14,8 +14,8 @@ export const QappDevelopText: React.FC = ({ return ( { @@ -74,7 +80,7 @@ export const AppPublish = ({ names, categories }) => { const [appType, setAppType] = useState('APP'); const [file, setFile] = useState(null); const { show } = useContext(MyContext); - + const theme = useTheme(); const [tag1, setTag1] = useState(''); const [tag2, setTag2] = useState(''); const [tag3, setTag3] = useState(''); @@ -263,9 +269,7 @@ export const AppPublish = ({ names, categories }) => { - + Name/App @@ -278,11 +282,11 @@ export const AppPublish = ({ names, categories }) => { Select Name/App - {' '} + {/* This is the placeholder item */} {names.map((name) => { @@ -292,9 +296,7 @@ export const AppPublish = ({ names, categories }) => { - + App service type @@ -307,12 +309,11 @@ export const AppPublish = ({ names, categories }) => { Select App Type - {' '} - {/* This is the placeholder item */} + App Website @@ -320,9 +321,7 @@ export const AppPublish = ({ names, categories }) => { - + Title @@ -330,7 +329,7 @@ export const AppPublish = ({ names, categories }) => { value={title} onChange={(e) => setTitle(e.target.value)} sx={{ - border: '0.5px solid var(--50-white, #FFFFFF80)', + border: `0.5px solid ${theme.palette.action.disabled}`, padding: '0px 15px', borderRadius: '5px', height: '36px', @@ -347,9 +346,7 @@ export const AppPublish = ({ names, categories }) => { - + Description @@ -357,7 +354,7 @@ export const AppPublish = ({ names, categories }) => { value={description} onChange={(e) => setDescription(e.target.value)} sx={{ - border: '0.5px solid var(--50-white, #FFFFFF80)', + border: `0.5px solid ${theme.palette.action.disabled}`, padding: '0px 15px', borderRadius: '5px', height: '36px', @@ -374,9 +371,7 @@ export const AppPublish = ({ names, categories }) => { - + Category @@ -389,12 +384,11 @@ export const AppPublish = ({ names, categories }) => { Select Category - {' '} - {/* This is the placeholder item */} + {categories?.map((category) => { return ( @@ -407,9 +401,7 @@ export const AppPublish = ({ names, categories }) => { - + Tags @@ -418,7 +410,7 @@ export const AppPublish = ({ names, categories }) => { value={tag1} onChange={(e) => setTag1(e.target.value)} sx={{ - border: '0.5px solid var(--50-white, #FFFFFF80)', + border: `0.5px solid ${theme.palette.action.disabled}`, padding: '0px 15px', borderRadius: '5px', height: '36px', @@ -435,7 +427,7 @@ export const AppPublish = ({ names, categories }) => { value={tag2} onChange={(e) => setTag2(e.target.value)} sx={{ - border: '0.5px solid var(--50-white, #FFFFFF80)', + border: `0.5px solid ${theme.palette.action.disabled}`, padding: '0px 15px', borderRadius: '5px', height: '36px', @@ -452,7 +444,7 @@ export const AppPublish = ({ names, categories }) => { value={tag3} onChange={(e) => setTag3(e.target.value)} sx={{ - border: '0.5px solid var(--50-white, #FFFFFF80)', + border: `0.5px solid ${theme.palette.action.disabled}`, padding: '0px 15px', borderRadius: '5px', height: '36px', @@ -469,7 +461,7 @@ export const AppPublish = ({ names, categories }) => { value={tag4} onChange={(e) => setTag4(e.target.value)} sx={{ - border: '0.5px solid var(--50-white, #FFFFFF80)', + border: `0.5px solid ${theme.palette.action.disabled}`, padding: '0px 15px', borderRadius: '5px', height: '36px', @@ -486,7 +478,7 @@ export const AppPublish = ({ names, categories }) => { value={tag5} onChange={(e) => setTag5(e.target.value)} sx={{ - border: '0.5px solid var(--50-white, #FFFFFF80)', + border: `0.5px solid ${theme.palette.action.disabled}`, padding: '0px 15px', borderRadius: '5px', height: '36px', diff --git a/src/components/Apps/AppViewerContainer.tsx b/src/components/Apps/AppViewerContainer.tsx index daa3a7e..43c661f 100644 --- a/src/components/Apps/AppViewerContainer.tsx +++ b/src/components/Apps/AppViewerContainer.tsx @@ -27,7 +27,7 @@ const AppViewerContainer = React.forwardRef( } .frame-content { overflow: hidden; - height: '100vh'; + height: 100vh; } `} @@ -35,7 +35,7 @@ const AppViewerContainer = React.forwardRef( } style={{ border: 'none', - height: '100vh', + height: customHeight || '100vh', left: (!isSelected || hide) && '-200vw', overflow: 'hidden', position: (!isSelected || hide) && 'fixed', diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index a335810..40192a3 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -141,7 +141,7 @@ export const AppLibrarySubTitle = styled(Typography)(({ theme }) => ({ export const AppCircle = styled(Box)(({ theme }) => ({ alignItems: 'center', - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.surface, borderColor: theme.palette.mode === 'dark' ? 'rgb(209, 209, 209)' @@ -283,7 +283,7 @@ export const TabParent = styled(Box)(({ theme }) => ({ export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({ alignItems: 'center', - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, display: 'flex', justifyContent: 'space-between', @@ -292,7 +292,7 @@ export const PublishQAppCTAParent = styled(Box)(({ theme }) => ({ export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({ alignItems: 'center', - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, display: 'flex', justifyContent: 'flex-start', @@ -300,7 +300,7 @@ export const PublishQAppCTALeft = styled(Box)(({ theme }) => ({ export const PublishQAppCTARight = styled(Box)(({ theme }) => ({ alignItems: 'center', - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, display: 'flex', justifyContent: 'flex-end', @@ -308,8 +308,8 @@ export const PublishQAppCTARight = styled(Box)(({ theme }) => ({ export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({ alignItems: 'center', - backgroundColor: theme.palette.background.paper, - borderColor: theme.palette.background.default, + backgroundColor: theme.palette.background.default, + borderColor: theme.palette.text.primary, borderRadius: '25px', borderStyle: 'solid', borderWidth: '1px', @@ -322,10 +322,10 @@ export const PublishQAppCTAButton = styled(ButtonBase)(({ theme }) => ({ export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({ alignItems: 'center', - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, display: 'flex', - height: '60px', + height: '80px', justifyContent: 'center', width: '60px', })); @@ -333,7 +333,7 @@ export const PublishQAppDotsBG = styled(Box)(({ theme }) => ({ export const PublishQAppInfo = styled(Typography)(({ theme }) => ({ backgroundColor: theme.palette.background.default, color: theme.palette.text.primary, - fontSize: '10px', + fontSize: '16px', fontStyle: 'italic', fontWeight: 400, lineHeight: 1.2, @@ -341,15 +341,18 @@ export const PublishQAppInfo = styled(Typography)(({ theme }) => ({ export const PublishQAppChoseFile = styled(ButtonBase)(({ theme }) => ({ alignItems: 'center', - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, borderRadius: '5px', color: theme.palette.text.primary, display: 'flex', - fontSize: '10px', + fontSize: '16px', fontWeight: 600, - height: '30px', + height: '40px', justifyContent: 'center', - width: '101px', + width: '120px', + '&:hover': { + backgroundColor: 'action.hover', // background on hover + }, })); export const AppsCategoryInfo = styled(Box)(({ theme }) => ({ diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx index e81e1a3..32098e2 100644 --- a/src/components/Apps/AppsDesktop.tsx +++ b/src/components/Apps/AppsDesktop.tsx @@ -24,6 +24,7 @@ import { useRecoilState } from 'recoil'; import { enabledDevModeAtom } from '../../atoms/global'; import { AppsIcon } from '../../assets/Icons/AppsIcon'; import { CoreSyncStatus } from '../CoreSyncStatus'; +import { MessagingIconFilled } from '../../assets/Icons/MessagingIconFilled'; const uid = new ShortUniqueId({ length: 8 }); @@ -342,6 +343,8 @@ export const AppsDesktop = ({ gap: '25px', height: '100vh', width: '60px', + backgroundColor: theme.palette.background.surface, + borderRight: `1px solid ${theme.palette.border.subtle}`, }} > - - { sx={{ position: 'relative', flexDirection: 'column', - width: '60px', + width: '59px', height: 'unset', maxHeight: '70vh', borderRadius: '0px 30px 30px 0px', @@ -116,7 +116,7 @@ export const AppsDevModeNavBar = () => { '& .MuiTabs-indicator': { backgroundColor: 'white', }, - maxHeight: `320px`, // Ensure the tabs container fits within the available space + maxHeight: `275px`, // Ensure the tabs container fits within the available space overflow: 'hidden', // Prevents overflow on small screens }} > diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index 1c6206e..f09e7c1 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/src/components/Apps/AppsLibraryDesktop.tsx @@ -467,11 +467,13 @@ export const AppsLibraryDesktop = ({ borderRadius: '6px', borderStyle: 'solid', borderWidth: '4px', - boxShadow: '2px 4px 0px 0px #000000', display: 'flex', height: '50px', justifyContent: 'center', padding: '0px 20px', + '&:hover': { + backgroundColor: 'action.hover', // background on hover + }, }} > All @@ -495,11 +497,13 @@ export const AppsLibraryDesktop = ({ borderRadius: '6px', borderStyle: 'solid', borderWidth: '4px', - boxShadow: '2px 4px 0px 0px #000000', display: 'flex', height: '50px', justifyContent: 'center', padding: '0px 20px', + '&:hover': { + backgroundColor: 'action.hover', // background on hover + }, }} > {category?.name} diff --git a/src/components/Apps/AppsNavBarDesktop.tsx b/src/components/Apps/AppsNavBarDesktop.tsx index 890c297..3c6d91c 100644 --- a/src/components/Apps/AppsNavBarDesktop.tsx +++ b/src/components/Apps/AppsNavBarDesktop.tsx @@ -160,7 +160,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => { maxHeight: '70vh', padding: '10px', position: 'relative', - width: '60px', + width: '59px', }} > { '& .MuiTabs-indicator': { backgroundColor: theme.palette.background.default, }, - maxHeight: `320px`, // Ensure the tabs container fits within the available space + maxHeight: `275px`, // Ensure the tabs container fits within the available space overflow: 'hidden', // Prevents overflow on small screens }} > diff --git a/src/components/Apps/AppsPrivate.tsx b/src/components/Apps/AppsPrivate.tsx index 4d3e852..4a39b63 100644 --- a/src/components/Apps/AppsPrivate.tsx +++ b/src/components/Apps/AppsPrivate.tsx @@ -261,6 +261,12 @@ export const AppsPrivate = ({ myName }) => { }} maxWidth="md" fullWidth={true} + PaperProps={{ + style: { + backgroundColor: theme.palette.background.paper, + boxShadow: 'none', + }, + }} > } label={ diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx index 2a86f1d..503ec3a 100644 --- a/src/components/Chat/ChatGroup.tsx +++ b/src/components/Chat/ChatGroup.tsx @@ -1217,7 +1217,7 @@ export const ChatGroup = ({ > diff --git a/src/components/Chat/ChatOptions.tsx b/src/components/Chat/ChatOptions.tsx index ed808f2..c70dbff 100644 --- a/src/components/Chat/ChatOptions.tsx +++ b/src/components/Chat/ChatOptions.tsx @@ -576,7 +576,7 @@ export const ChatOptions = ({ diff --git a/src/components/Chat/TipTap.tsx b/src/components/Chat/TipTap.tsx index 3c5403f..01155b5 100644 --- a/src/components/Chat/TipTap.tsx +++ b/src/components/Chat/TipTap.tsx @@ -365,6 +365,7 @@ export default ({ membersWithNames, enableMentions, }) => { + const theme = useTheme(); const [isDisabledEditorEnter, setIsDisabledEditorEnter] = useRecoilState( isDisabledEditorEnterAtom ); @@ -483,12 +484,16 @@ export default ({ }, []); return ( -
-
+ ); }; diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx index e632b06..f1ccf22 100644 --- a/src/components/DesktopSideBar.tsx +++ b/src/components/DesktopSideBar.tsx @@ -1,6 +1,5 @@ import { Box, ButtonBase, useTheme } from '@mui/material'; import { HomeIcon } from '../assets/Icons/HomeIcon'; -import { MessagingIcon } from '../assets/Icons/MessagingIcon'; import { Save } from './Save/Save'; import { IconWrapper } from './Desktop/DesktopFooter'; import { useRecoilState } from 'recoil'; @@ -9,6 +8,7 @@ import { AppsIcon } from '../assets/Icons/AppsIcon'; import ThemeSelector from './Theme/ThemeSelector'; import { CoreSyncStatus } from './CoreSyncStatus'; import LanguageSelector from './Language/LanguageSelector'; +import { MessagingIconFilled } from '../assets/Icons/MessagingIconFilled'; export const DesktopSideBar = ({ goToHome, @@ -111,7 +111,7 @@ export const DesktopSideBar = ({ label="Chat" disableWidth > - { const [isOpen, setIsOpen] = useState(true); const { downloadResource } = useContext(MyContext); + const theme = useTheme(); const saveToDisk = async () => { const { name, service, identifier } = resourceData; @@ -110,7 +112,7 @@ export const AttachmentCard = ({ return ( ATTACHMENT embed @@ -149,7 +151,7 @@ export const AttachmentCard = ({ onClick={refresh} sx={{ fontSize: '24px', - color: 'white', + color: theme.palette.text.primary, }} /> @@ -159,7 +161,7 @@ export const AttachmentCard = ({ onClick={openExternal} sx={{ fontSize: '24px', - color: 'white', + color: theme.palette.text.primary, }} /> @@ -174,7 +176,6 @@ export const AttachmentCard = ({ Created by {decodeIfEncoded(owner)} @@ -281,10 +282,10 @@ export const AttachmentCard = ({ resourceDetails?.status?.status !== 'FAILED_TO_DOWNLOAD' && ( <> Downloading:{' '} diff --git a/src/components/Embeds/ImageEmbed.tsx b/src/components/Embeds/ImageEmbed.tsx index 4122dfb..24cab97 100644 --- a/src/components/Embeds/ImageEmbed.tsx +++ b/src/components/Embeds/ImageEmbed.tsx @@ -8,6 +8,7 @@ import { Divider, Dialog, IconButton, + useTheme, } from '@mui/material'; import RefreshIcon from '@mui/icons-material/Refresh'; @@ -28,6 +29,7 @@ export const ImageCard = ({ errorMsg, encryptionType, }) => { + const theme = useTheme(); const [isOpen, setIsOpen] = useState(true); const [height, setHeight] = useState('400px'); useEffect(() => { @@ -45,7 +47,7 @@ export const ImageCard = ({ return ( IMAGE embed @@ -84,7 +86,7 @@ export const ImageCard = ({ onClick={refresh} sx={{ fontSize: '24px', - color: 'white', + color: theme.palette.text.primary, }} /> @@ -94,7 +96,7 @@ export const ImageCard = ({ onClick={openExternal} sx={{ fontSize: '24px', - color: 'white', + color: theme.palette.text.primary, }} /> @@ -109,7 +111,6 @@ export const ImageCard = ({ Created by {decodeIfEncoded(owner)} @@ -182,7 +183,7 @@ export function ImageViewer({ src, alt = '' }) { const handleOpenFullscreen = () => setIsFullscreen(true); const handleCloseFullscreen = () => setIsFullscreen(false); - + const theme = useTheme(); return ( <> {/* Image in container */} @@ -231,7 +232,7 @@ export function ImageViewer({ src, alt = '' }) { display: 'flex', justifyContent: 'center', alignItems: 'center', - backgroundColor: '#000', // Optional: dark background for fullscreen mode + backgroundColor: theme.palette.background.paper, // Optional: dark background for fullscreen mode }} > {/* Close Button */} @@ -242,7 +243,7 @@ export function ImageViewer({ src, alt = '' }) { top: 8, right: 8, zIndex: 10, - color: 'white', + color: theme.palette.text.primary, }} > diff --git a/src/components/Embeds/PollEmbed.tsx b/src/components/Embeds/PollEmbed.tsx index 65e5983..4adda15 100644 --- a/src/components/Embeds/PollEmbed.tsx +++ b/src/components/Embeds/PollEmbed.tsx @@ -12,6 +12,7 @@ import { Box, ButtonBase, Divider, + useTheme, } from '@mui/material'; import { getNameInfo } from '../Group/Group'; import PollIcon from '@mui/icons-material/Poll'; @@ -37,6 +38,7 @@ export const PollCard = ({ const [isOpen, setIsOpen] = useState(false); const { show, userInfo } = useContext(MyContext); const [isLoadingSubmit, setIsLoadingSubmit] = useState(false); + const theme = useTheme(); const handleVote = async () => { const fee = await getFee('VOTE_ON_POLL'); @@ -103,7 +105,7 @@ export const PollCard = ({ return ( @@ -124,7 +126,7 @@ export const PollCard = ({ > POLL embed @@ -141,7 +143,7 @@ export const PollCard = ({ onClick={refresh} sx={{ fontSize: '24px', - color: 'white', + color: theme.palette.text.primary, }} /> @@ -151,7 +153,7 @@ export const PollCard = ({ onClick={openExternal} sx={{ fontSize: '24px', - color: 'white', + color: theme.palette.text.primary, }} /> @@ -186,9 +188,6 @@ export const PollCard = ({
)}
- { setTimeout(() => { executeEvent('threadFetchMode', { @@ -781,7 +782,6 @@ export const GroupMail = ({ }} sx={{ alignItems: 'center', - backgroundColor: '#27282c', borderRadius: '5px', bottom: '2px', cursor: 'pointer', @@ -790,14 +790,11 @@ export const GroupMail = ({ padding: '5px', position: 'absolute', right: '2px', - '&:hover': { - background: 'rgba(255, 255, 255, 0.60)', - }, + minWidth: 'unset', }} > @@ -807,11 +804,11 @@ export const GroupMail = ({ - + ); })} diff --git a/src/components/Group/Forum/Mail-styles.ts b/src/components/Group/Forum/Mail-styles.ts index 368e4cb..6fc12de 100644 --- a/src/components/Group/Forum/Mail-styles.ts +++ b/src/components/Group/Forum/Mail-styles.ts @@ -1,4 +1,4 @@ -import { Typography, Box, TextField } from '@mui/material'; +import { Typography, Box } from '@mui/material'; import { styled } from '@mui/system'; export const InstanceContainer = styled(Box)(({ theme }) => ({ @@ -88,7 +88,7 @@ export const ComposeContainer = styled(Box)(({ theme }) => ({ transition: '0.2s background-color', justifyContent: 'center', '&:hover': { - backgroundColor: 'rgba(67, 68, 72, 1)', + backgroundColor: theme.palette.action.hover, }, })); @@ -141,19 +141,6 @@ export const SelectInstanceContainer = styled(Box)(({ theme }) => ({ gap: '17px', })); -export const SelectInstanceContainerInner = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - gap: '3px', - cursor: 'pointer', - padding: '8px', - transition: 'all 0.2s', - '&:hover': { - borderRadius: '8px', - background: '#434448', - }, -})); - export const SelectInstanceContainerFilterInner = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', @@ -174,81 +161,6 @@ export const InstanceP = styled(Typography)(({ theme }) => ({ fontWeight: 500, })); -export const MailMessageRowContainer = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - cursor: 'pointer', - justifyContent: 'space-between', - borderRadius: '56px 5px 10px 56px', - paddingRight: '15px', - transition: 'background 0.2s', - gap: '10px', - '&:hover': { - background: '#434448', - }, -})); - -export const MailMessageRowProfile = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - cursor: 'pointer', - justifyContent: 'flex-start', - gap: '10px', - width: '50%', - overflow: 'hidden', -})); - -export const MailMessageRowInfo = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - cursor: 'pointer', - justifyContent: 'flex-start', - gap: '7px', - width: '50%', -})); - -export const MailMessageRowInfoStatusNotDecrypted = styled(Typography)( - ({ theme }) => ({ - fontSize: '16px', - fontWeight: 900, - textTransform: 'uppercase', - paddingTop: '2px', - }) -); - -export const MailMessageRowInfoStatusRead = styled(Typography)(({ theme }) => ({ - fontSize: '16px', - fontWeight: 300, -})); - -export const MessageExtraInfo = styled(Box)(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - gap: '2px', - overflow: 'hidden', -})); - -export const MessageExtraName = styled(Typography)(({ theme }) => ({ - fontSize: '16px', - fontWeight: 900, - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflow: 'hidden', -})); - -export const MessageExtraDate = styled(Typography)(({ theme }) => ({ - fontSize: '15px', - fontWeight: 500, -})); - -export const MessagesContainer = styled(Box)(({ theme }) => ({ - width: '460px', - maxWidth: '90%', - display: 'flex', - flexDirection: 'column', - gap: '12px', -})); - export const InstanceListParent = styled(Box)` display: flex; flex-direction: column; @@ -378,44 +290,6 @@ export const InstanceListContainerRowGroupIcon = styled('img')({ userSelect: 'none', objectFit: 'contain', }); -export const TypeInAliasTextfield = styled(TextField)({ - width: '340px', // Adjust the width as needed - borderRadius: '5px', - backgroundColor: 'rgba(30, 30, 32, 1)', - border: 'none', - outline: 'none', - input: { - fontSize: 16, - color: 'white', - '&::placeholder': { - fontSize: 16, - color: 'rgba(255, 255, 255, 0.2)', - }, - border: 'none', - outline: 'none', - padding: '10px', - }, - '& .MuiOutlinedInput-root': { - '& fieldset': { - border: 'none', - }, - '&:hover fieldset': { - border: 'none', - }, - '&.Mui-focused fieldset': { - border: 'none', - }, - }, - '& .MuiInput-underline:before': { - borderBottom: 'none', - }, - '& .MuiInput-underline:hover:not(.Mui-disabled):before': { - borderBottom: 'none', - }, - '& .MuiInput-underline:after': { - borderBottom: 'none', - }, -}); export const NewMessageCloseImg = styled('img')({ width: 'auto', @@ -427,6 +301,7 @@ export const NewMessageCloseImg = styled('img')({ export const NewMessageHeaderP = styled(Typography)(({ theme }) => ({ fontSize: '18px', fontWeight: 600, + color: theme.palette.text.primary, })); export const NewMessageInputRow = styled(Box)(({ theme }) => ({ @@ -480,29 +355,24 @@ export const NewMessageAttachmentImg = styled('img')({ border: '1px dashed #646464', }); -export const NewMessageSendButton = styled(Box)` - border-radius: 4px; - border: 1px solid rgba(0, 0, 0, 0.9); - display: inline-flex; - padding: 8px 16px 8px 12px; - justify-content: center; - align-items: center; - gap: 8px; - width: fit-content; - transition: all 0.2s; - color: black; - min-width: 120px; - gap: 8px; - position: relative; - cursor: pointer; - &:hover { - background-color: rgba(41, 41, 43, 1); - color: white; - svg path { - fill: white; // Fill color changes to white on hover - } - } -`; +export const NewMessageSendButton = styled(Box)(({ theme }) => ({ + borderRadius: '4px', + border: `1px solid ${theme.palette.border.main}`, // you can replace with theme.palette.divider or whatever you want later + display: 'inline-flex', + padding: '8px 16px 8px 12px', + justifyContent: 'center', + alignItems: 'center', + width: 'fit-content', + transition: 'all 0.2s', + color: theme.palette.text.primary, // replace later with theme.palette.text.primary if needed + minWidth: '120px', + position: 'relative', + gap: '8px', + cursor: 'pointer', + '&:hover': { + backgroundColor: theme.palette.action.hover, // replace with theme value if needed + }, +})); export const NewMessageSendP = styled(Typography)` font-family: Roboto; @@ -524,14 +394,7 @@ export const ShowMessageNameP = styled(Typography)` text-overflow: ellipsis; overflow: hidden; `; -export const ShowMessageTimeP = styled(Typography)` - color: rgba(255, 255, 255, 0.5); - font-family: Roboto; - font-size: 15px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; + export const ShowMessageSubjectP = styled(Typography)` font-family: Roboto; font-size: 16px; @@ -541,61 +404,44 @@ export const ShowMessageSubjectP = styled(Typography)` text-align: left; `; -export const ShowMessageButton = styled(Box)` -display: inline-flex; -padding: 8px 16px 8px 16px; -align-items: center; -justify-content: center; -gap: 8px; -width: fit-content; -transition: all 0.2s; -color: white; -background-color: rgba(41, 41, 43, 1) -min-width: 120px; -gap: 8px; -border-radius: 4px; -border: 0.5px solid rgba(255, 255, 255, 0.70); -font-family: Roboto; +export const ShowMessageButton = styled(Box)(({ theme }) => ({ + display: 'inline-flex', + padding: '8px 16px', + alignItems: 'center', + justifyContent: 'center', + width: 'fit-content', + transition: 'all 0.2s', + color: theme.palette.text.primary, // you'll replace with theme value + minWidth: '120px', + gap: '8px', + borderRadius: '4px', + border: theme.palette.border.main, // you'll replace + fontFamily: 'Roboto', + cursor: 'pointer', + '&:hover': { + background: theme.palette.action.hover, // you'll replace + borderRadius: '4px', + }, +})); -min-width: 120px; -cursor: pointer; -&:hover { - border-radius: 4px; -border: 0.5px solid rgba(255, 255, 255, 0.70); -background: #434448; -} -`; -export const ShowMessageReturnButton = styled(Box)` -display: inline-flex; -padding: 8px 16px 8px 16px; -align-items: center; -justify-content: center; -gap: 8px; -width: fit-content; -transition: all 0.2s; -color: white; -background-color: rgba(41, 41, 43, 1) -min-width: 120px; -gap: 8px; -border-radius: 4px; -font-family: Roboto; - -min-width: 120px; -cursor: pointer; -&:hover { - border-radius: 4px; -background: #434448; -} -`; - -export const ShowMessageButtonP = styled(Typography)` - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 120%; /* 19.2px */ - letter-spacing: -0.16px; - color: white; -`; +export const ShowMessageReturnButton = styled(Box)(({ theme }) => ({ + display: 'inline-flex', + padding: '8px 16px', + alignItems: 'center', + justifyContent: 'center', + width: 'fit-content', + transition: 'all 0.2s', + color: theme.palette.text.primary, // you'll replace with theme value + minWidth: '120px', + gap: '8px', + borderRadius: '4px', + fontFamily: 'Roboto', + cursor: 'pointer', + '&:hover': { + background: theme.palette.action.hover, // you'll replace + borderRadius: '4px', + }, +})); export const ShowMessageButtonImg = styled('img')({ width: 'auto', @@ -630,18 +476,16 @@ export const MoreImg = styled('img')({ }, }); -export const MoreP = styled(Typography)` - color: rgba(255, 255, 255, 0.5); - - /* Attachments */ - font-family: Roboto; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 120%; /* 19.2px */ - letter-spacing: -0.16px; - white-space: nowrap; -`; +export const MoreP = styled(Typography)(({ theme }) => ({ + color: theme.palette.text.primary, // Now dynamic + fontFamily: 'Roboto', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 400, + lineHeight: '120%', // 19.2px + letterSpacing: '-0.16px', + whiteSpace: 'nowrap', +})); export const ThreadContainerFullWidth = styled(Box)(({ theme }) => ({ display: 'flex', @@ -658,7 +502,6 @@ export const ThreadContainer = styled(Box)(({ theme }) => ({ })); export const GroupNameP = styled(Typography)` - color: #fff; font-size: 25px; font-style: normal; font-weight: 700; @@ -667,7 +510,6 @@ export const GroupNameP = styled(Typography)` `; export const AllThreadP = styled(Typography)` - color: #fff; font-size: 20px; font-style: normal; font-weight: 400; @@ -675,32 +517,32 @@ export const AllThreadP = styled(Typography)` letter-spacing: 0.15px; `; -export const SingleThreadParent = styled(Box)` - border-radius: 35px 4px 4px 35px; - position: relative; - background: #434448; - display: flex; - padding: 13px; - cursor: pointer; - margin-bottom: 5px; - height: 76px; - align-items: center; - transition: 0.2s all; - &:hover { - background: rgba(255, 255, 255, 0.2); - } -`; +export const SingleThreadParent = styled(Box)(({ theme }) => ({ + borderRadius: '35px 4px 4px 35px', + position: 'relative', + display: 'flex', + padding: '13px', + cursor: 'pointer', + marginBottom: '5px', + height: '76px', + alignItems: 'center', + transition: '0.2s all', + backgroundColor: theme.palette.background.paper, // or remove if you want no background by default + '&:hover': { + backgroundColor: theme.palette.action.hover, + }, +})); -export const SingleTheadMessageParent = styled(Box)` - border-radius: 35px 4px 4px 35px; - background: #434448; - display: flex; - padding: 13px; - cursor: pointer; - margin-bottom: 5px; - height: 76px; - align-items: center; -`; +export const SingleTheadMessageParent = styled(Box)(({ theme }) => ({ + borderRadius: '35px 4px 4px 35px', + background: theme.palette.background.paper, + display: 'flex', + padding: '13px', + cursor: 'pointer', + marginBottom: '5px', + height: '76px', + alignItems: 'center', +})); export const ThreadInfoColumn = styled(Box)(({ theme }) => ({ display: 'flex', @@ -713,7 +555,6 @@ export const ThreadInfoColumn = styled(Box)(({ theme }) => ({ })); export const ThreadInfoColumnNameP = styled(Typography)` - color: #fff; font-family: Roboto; font-size: 16px; font-style: normal; @@ -724,26 +565,25 @@ export const ThreadInfoColumnNameP = styled(Typography)` overflow: hidden; `; -export const ThreadInfoColumnbyP = styled('span')` - color: rgba(255, 255, 255, 0.8); - font-family: Roboto; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; +export const ThreadInfoColumnbyP = styled('span')(({ theme }) => ({ + color: theme.palette.text.secondary, + fontFamily: 'Roboto', + fontSize: '16px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 'normal', +})); -export const ThreadInfoColumnTime = styled(Typography)` - color: rgba(255, 255, 255, 0.8); - font-family: Roboto; - font-size: 15px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; +export const ThreadInfoColumnTime = styled(Typography)(({ theme }) => ({ + color: theme.palette.text.secondary, + fontFamily: 'Roboto', + fontSize: '15px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: 'normal', +})); export const ThreadSingleTitle = styled(Typography)` - color: #fff; font-family: Roboto; font-size: 23px; font-style: normal; @@ -755,7 +595,6 @@ export const ThreadSingleTitle = styled(Typography)` `; export const ThreadSingleLastMessageP = styled(Typography)` - color: #fff; font-family: Roboto; font-size: 12px; font-style: normal; @@ -764,7 +603,6 @@ export const ThreadSingleLastMessageP = styled(Typography)` `; export const ThreadSingleLastMessageSpanP = styled('span')` - color: #fff; font-family: Roboto; font-size: 12px; font-style: normal; @@ -792,6 +630,6 @@ export const CloseContainer = styled(Box)(({ theme }) => ({ height: '50px', borderRadius: '0px 12px 0px 0px', '&:hover': { - backgroundColor: 'rgba(162, 31, 31, 1)', + backgroundColor: theme.palette.action.hover, }, })); diff --git a/src/components/Group/Forum/NewThread.tsx b/src/components/Group/Forum/NewThread.tsx index ddcafbb..74ce7f4 100644 --- a/src/components/Group/Forum/NewThread.tsx +++ b/src/components/Group/Forum/NewThread.tsx @@ -1,12 +1,9 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Box, CircularProgress, Input } from '@mui/material'; +import { Box, CircularProgress, Input, useTheme } from '@mui/material'; import ShortUniqueId from 'short-unique-id'; -import ModalCloseSVG from '../../../assets/svgs/ModalClose.svg'; -import ComposeIconSVG from '../../../assets/svgs/ComposeIcon.svg'; import { CloseContainer, ComposeContainer, - ComposeIcon, ComposeP, InstanceFooter, InstanceListContainer, @@ -29,6 +26,8 @@ import { MessageDisplay } from '../../Chat/MessageDisplay'; import { CustomizedSnackbars } from '../../Snackbar/Snackbar'; import { saveTempPublish } from '../../Chat/GroupAnnouncements'; import { useTranslation } from 'react-i18next'; +import { ComposeIcon } from '../../../assets/Icons/ComposeIcon'; +import CloseIcon from '@mui/icons-material/Close'; const uid = new ShortUniqueId({ length: 8 }); @@ -152,6 +151,7 @@ export const NewThread = ({ const [openSnack, setOpenSnack] = React.useState(false); const [infoSnack, setInfoSnack] = React.useState(null); const editorRef = useRef(null); + const theme = useTheme(); const setEditorRef = (editorInstance) => { editorRef.current = editorInstance; }; @@ -406,7 +406,7 @@ export const NewThread = ({ }} onClick={() => setIsOpen(true)} > - + {currentThread ? 'New Post' : 'New Thread'} @@ -417,7 +417,7 @@ export const NewThread = ({ maxWidth: '950px', height: '700px', borderRadius: '12px 12px 0px 0px', - background: '#434448', + background: theme.palette.background.paper, padding: '0px', gap: '0px', }} @@ -429,7 +429,7 @@ export const NewThread = ({ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', - backgroundColor: '#434448', + backgroundColor: theme.palette.background.paper, }} > @@ -441,12 +441,16 @@ export const NewThread = ({ }} onClick={closeModal} > - + - + )} @@ -552,9 +559,14 @@ export const NewThread = ({ {isMessage ? ( - + ) : ( - + )} diff --git a/src/components/Group/Forum/ShowMessageWithoutModal.tsx b/src/components/Group/Forum/ShowMessageWithoutModal.tsx index 914b9c5..57d920d 100644 --- a/src/components/Group/Forum/ShowMessageWithoutModal.tsx +++ b/src/components/Group/Forum/ShowMessageWithoutModal.tsx @@ -20,7 +20,7 @@ import { WrapperUserAction } from '../../WrapperUserAction'; export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => { const [expandAttachments, setExpandAttachments] = useState(false); - + console.log('message', message); let cleanHTML = ''; if (message?.htmlContent) { cleanHTML = DOMPurify.sanitize(message.htmlContent); diff --git a/src/components/Group/Forum/Thread.tsx b/src/components/Group/Forum/Thread.tsx index 4c94e12..266edb6 100644 --- a/src/components/Group/Forum/Thread.tsx +++ b/src/components/Group/Forum/Thread.tsx @@ -5,7 +5,14 @@ import React, { useRef, useState, } from 'react'; -import { Avatar, Box, Button, ButtonBase, Typography } from '@mui/material'; +import { + Avatar, + Box, + Button, + ButtonBase, + Typography, + useTheme, +} from '@mui/material'; import { ShowMessage } from './ShowMessageWithoutModal'; import { ComposeP, @@ -43,6 +50,7 @@ import { CustomLoader } from '../../../common/CustomLoader'; import { WrapperUserAction } from '../../WrapperUserAction'; import { formatTimestampForum } from '../../../utils/time'; import { useTranslation } from 'react-i18next'; +import { ReturnIcon } from '../../../assets/Icons/ReturnIcon'; const requestQueueSaveToLocal = new RequestQueueWithPromise(1); @@ -116,7 +124,7 @@ export const Thread = ({ const [postReply, setPostReply] = useState(null); const [hasLastPage, setHasLastPage] = useState(false); const { t } = useTranslation(['core']); - + const theme = useTheme(); // Update: Use a new ref for the scrollable container const threadContainerRef = useRef(null); const threadBeginningRef = useRef(null); @@ -606,7 +614,7 @@ export const Thread = ({ closeThread(); }} > - + {t('group:action.return_to_thread', { postProcess: 'capitalize', @@ -619,7 +627,7 @@ export const Thread = ({ {fullMessage?.error} @@ -925,7 +932,6 @@ export const Thread = ({ {t('core:downloading_qdn', { postProcess: 'capitalize' })} @@ -958,9 +964,6 @@ export const Thread = ({ groupInfo?.groupId ); }} - sx={{ - color: 'white', - }} > {t('group:action.refetch_page', { postProcess: 'capitalize', diff --git a/src/components/Group/GroupJoinRequests.tsx b/src/components/Group/GroupJoinRequests.tsx index c7bb32e..2bf0b26 100644 --- a/src/components/Group/GroupJoinRequests.tsx +++ b/src/components/Group/GroupJoinRequests.tsx @@ -7,7 +7,7 @@ import IconButton from '@mui/material/IconButton'; import { RequestQueueWithPromise } from '../../utils/queue/queue'; import GroupAddIcon from '@mui/icons-material/GroupAdd'; import { executeEvent } from '../../utils/events'; -import { Box, ButtonBase, Collapse, Typography } from '@mui/material'; +import { Box, ButtonBase, Collapse, Typography, useTheme } from '@mui/material'; import { CustomLoader } from '../../common/CustomLoader'; import { MyContext, getBaseApiReact } from '../../App'; import { myGroupsWhereIAmAdminAtom } from '../../atoms/global'; @@ -35,7 +35,7 @@ export const GroupJoinRequests = ({ const [loading, setLoading] = React.useState(true); const { txList, setTxList } = React.useContext(MyContext); const setMyGroupsWhereIAmAdmin = useSetRecoilState(myGroupsWhereIAmAdminAtom); - + const theme = useTheme(); const getJoinRequests = async () => { try { setLoading(true); @@ -244,7 +244,7 @@ export const GroupJoinRequests = ({ diff --git a/src/components/Group/GroupMenu.tsx b/src/components/Group/GroupMenu.tsx deleted file mode 100644 index 0d81cd2..0000000 --- a/src/components/Group/GroupMenu.tsx +++ /dev/null @@ -1,254 +0,0 @@ -import { useState } from 'react'; -import { - Button, - Menu, - MenuItem, - ListItemIcon, - ListItemText, - Box, -} from '@mui/material'; -import { ArrowDownIcon } from '../../assets/Icons/ArrowDownIcon'; -import { NotificationIcon2 } from '../../assets/Icons/NotificationIcon2'; -import { ChatIcon } from '../../assets/Icons/ChatIcon'; -import { ThreadsIcon } from '../../assets/Icons/ThreadsIcon'; -import { MembersIcon } from '../../assets/Icons/MembersIcon'; - -export const GroupMenu = ({ - setGroupSection, - groupSection, - setOpenManageMembers, - goToAnnouncements, - goToChat, - hasUnreadChat, - hasUnreadAnnouncements, -}) => { - const [anchorEl, setAnchorEl] = useState(null); - const open = Boolean(anchorEl); - - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - return ( - - - - - { - goToChat(); - handleClose(); - }} - > - - - - - - { - goToAnnouncements(); - handleClose(); - }} - > - - - - - - { - setGroupSection('forum'); - handleClose(); - }} - > - - - - - - { - setOpenManageMembers(true); - handleClose(); - }} - > - - - - - - - - ); -}; diff --git a/src/components/Group/HomeDesktop.tsx b/src/components/Group/HomeDesktop.tsx index d0f2459..83f8828 100644 --- a/src/components/Group/HomeDesktop.tsx +++ b/src/components/Group/HomeDesktop.tsx @@ -242,27 +242,6 @@ export const HomeDesktop = ({ )} - - - {/* - - */} - ); diff --git a/src/components/Group/ListOfGroupPromotions.tsx b/src/components/Group/ListOfGroupPromotions.tsx index a684e40..4d402b6 100644 --- a/src/components/Group/ListOfGroupPromotions.tsx +++ b/src/components/Group/ListOfGroupPromotions.tsx @@ -21,6 +21,7 @@ import { Select, TextField, Typography, + useTheme, } from '@mui/material'; import { LoadingButton } from '@mui/lab'; import LockIcon from '@mui/icons-material/Lock'; @@ -90,7 +91,7 @@ export const ListOfGroupPromotions = () => { const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false); const [isLoadingPublish, setIsLoadingPublish] = useState(false); const { show, setTxList } = useContext(MyContext); - + const theme = useTheme(); const listRef = useRef(); const rowVirtualizer = useVirtualizer({ count: promotions.length, @@ -673,7 +674,7 @@ export const ListOfGroupPromotions = () => { { } sx={{ fontSize: '12px', - color: 'white', + color: theme.palette.text.primary, }} > Join Group: {` ${promotion?.groupName}`} @@ -845,10 +846,10 @@ export const ListOfGroupPromotions = () => { multiline={true} sx={{ '& .MuiFormLabel-root': { - color: 'white', + color: theme.palette.text.primary, }, '& .MuiFormLabel-root.Mui-focused': { - color: 'white', + color: theme.palette.text.primary, }, }} /> diff --git a/src/components/Group/QMailMessages.tsx b/src/components/Group/QMailMessages.tsx index 8673110..238a2aa 100644 --- a/src/components/Group/QMailMessages.tsx +++ b/src/components/Group/QMailMessages.tsx @@ -153,7 +153,7 @@ export const QMailMessages = ({ userName, userAddress }) => { {isExpanded ? ( @@ -165,7 +165,7 @@ export const QMailMessages = ({ userName, userAddress }) => { ) : ( @@ -268,7 +268,7 @@ export const QMailMessages = ({ userName, userAddress }) => { ) : !lastEnteredTimestamp ? ( ) : lastEnteredTimestamp < mail?.created && @@ -281,7 +281,7 @@ export const QMailMessages = ({ userName, userAddress }) => { ) : ( )} diff --git a/src/components/Group/Settings.tsx b/src/components/Group/Settings.tsx index 4af646b..a839bfd 100644 --- a/src/components/Group/Settings.tsx +++ b/src/components/Group/Settings.tsx @@ -1,4 +1,12 @@ -import { forwardRef, Fragment, ReactElement, Ref, useEffect } from 'react'; +import { + ChangeEvent, + forwardRef, + Fragment, + ReactElement, + Ref, + useEffect, + useState, +} from 'react'; import Dialog from '@mui/material/Dialog'; import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; @@ -54,12 +62,12 @@ const Transition = forwardRef(function Transition( }); export const Settings = ({ address, open, setOpen }) => { - const [checked, setChecked] = React.useState(false); + const [checked, setChecked] = useState(false); const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom); const theme = useTheme(); - const handleChange = (event: React.ChangeEvent) => { + const handleChange = (event: ChangeEvent) => { setChecked(event.target.checked); window .sendMessage('addUserSettings', { diff --git a/src/components/Home/QortPrice.tsx b/src/components/Home/QortPrice.tsx index 2f118c1..ec74b11 100644 --- a/src/components/Home/QortPrice.tsx +++ b/src/components/Home/QortPrice.tsx @@ -116,7 +116,7 @@ export const QortPrice = () => { > + Based on the latest 20 trades } @@ -127,7 +127,7 @@ export const QortPrice = () => { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -156,7 +156,7 @@ export const QortPrice = () => { {!ltcPerQort ? ( - + ) : ( { {!supply ? ( - + ) : ( { + {lastBlock?.timestamp && formatDate(lastBlock?.timestamp)} } @@ -211,7 +211,7 @@ export const QortPrice = () => { tooltip: { sx: { color: theme.palette.text.primary, - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, }, }, arrow: { @@ -240,7 +240,7 @@ export const QortPrice = () => { {!lastBlock?.height ? ( - + ) : ( { + const theme = useTheme(); return ( diff --git a/src/components/RegisterName.tsx b/src/components/RegisterName.tsx index 35af458..8afa806 100644 --- a/src/components/RegisterName.tsx +++ b/src/components/RegisterName.tsx @@ -1,28 +1,29 @@ -import React, { useCallback, useContext, useEffect, useState } from 'react' +import React, { useCallback, useContext, useEffect, useState } from 'react'; import { - Avatar, - Box, - Button, - ButtonBase, - Collapse, - Dialog, - DialogActions, - DialogContent, - DialogContentText, - DialogTitle, - Input, - ListItem, - ListItemAvatar, - ListItemButton, - ListItemIcon, - ListItemText, - List, - MenuItem, - Popover, - Select, - TextField, - Typography, - } from "@mui/material"; + Avatar, + Box, + Button, + ButtonBase, + Collapse, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + Input, + ListItem, + ListItemAvatar, + ListItemButton, + ListItemIcon, + ListItemText, + List, + MenuItem, + Popover, + Select, + TextField, + Typography, + useTheme, +} from '@mui/material'; import { Label } from './Group/AddGroup'; import { Spacer } from '../common/Spacer'; import { LoadingButton } from '@mui/lab'; @@ -35,278 +36,313 @@ import CheckIcon from '@mui/icons-material/Check'; import ErrorIcon from '@mui/icons-material/Error'; enum Availability { - NULL = 'null', - LOADING = 'loading', - AVAILABLE = 'available', - NOT_AVAILABLE = 'not-available' + NULL = 'null', + LOADING = 'loading', + AVAILABLE = 'available', + NOT_AVAILABLE = 'not-available', } -export const RegisterName = ({setOpenSnack, setInfoSnack, userInfo, show, setTxList, balance}) => { - const [isOpen, setIsOpen] = useState(false) - const [registerNameValue, setRegisterNameValue] = useState('') - const [isLoadingRegisterName, setIsLoadingRegisterName] = useState(false) - const [isNameAvailable, setIsNameAvailable] = useState(Availability.NULL) - const [nameFee, setNameFee] = useState(null) +export const RegisterName = ({ + setOpenSnack, + setInfoSnack, + userInfo, + show, + setTxList, + balance, +}) => { + const [isOpen, setIsOpen] = useState(false); + const [registerNameValue, setRegisterNameValue] = useState(''); + const [isLoadingRegisterName, setIsLoadingRegisterName] = useState(false); + const [isNameAvailable, setIsNameAvailable] = useState( + Availability.NULL + ); + const [nameFee, setNameFee] = useState(null); + const theme = useTheme(); + const checkIfNameExisits = async (name) => { + if (!name?.trim()) { + setIsNameAvailable(Availability.NULL); - const checkIfNameExisits = async (name)=> { - if(!name?.trim()){ - setIsNameAvailable(Availability.NULL) - - return + return; } - setIsNameAvailable(Availability.LOADING) + setIsNameAvailable(Availability.LOADING); try { - const res = await fetch(`${getBaseApiReact()}/names/` + name); - const data = await res.json() - if(data?.message === 'name unknown'){ - setIsNameAvailable(Availability.AVAILABLE) - } else { - setIsNameAvailable(Availability.NOT_AVAILABLE) - } + const res = await fetch(`${getBaseApiReact()}/names/` + name); + const data = await res.json(); + if (data?.message === 'name unknown') { + setIsNameAvailable(Availability.AVAILABLE); + } else { + setIsNameAvailable(Availability.NOT_AVAILABLE); + } } catch (error) { - console.error(error) + console.error(error); } finally { } - } - // Debounce logic - useEffect(() => { - const handler = setTimeout(() => { - checkIfNameExisits(registerNameValue); - }, 500); - - // Cleanup timeout if searchValue changes before the timeout completes - return () => { - clearTimeout(handler); - }; - }, [registerNameValue]); + }; + // Debounce logic + useEffect(() => { + const handler = setTimeout(() => { + checkIfNameExisits(registerNameValue); + }, 500); - const openRegisterNameFunc = useCallback((e) => { - setIsOpen(true) + // Cleanup timeout if searchValue changes before the timeout completes + return () => { + clearTimeout(handler); + }; + }, [registerNameValue]); - }, [ setIsOpen]); - - useEffect(() => { - subscribeToEvent("openRegisterName", openRegisterNameFunc); - - return () => { - unsubscribeFromEvent("openRegisterName", openRegisterNameFunc); - }; - }, [openRegisterNameFunc]); + const openRegisterNameFunc = useCallback( + (e) => { + setIsOpen(true); + }, + [setIsOpen] + ); - useEffect(()=> { - const nameRegistrationFee = async ()=> { - try { - const fee = await getFee("REGISTER_NAME"); - setNameFee(fee?.fee) - } catch (error) { - console.error(error) - } - } - nameRegistrationFee() - }, []) + useEffect(() => { + subscribeToEvent('openRegisterName', openRegisterNameFunc); - const registerName = async () => { + return () => { + unsubscribeFromEvent('openRegisterName', openRegisterNameFunc); + }; + }, [openRegisterNameFunc]); + + useEffect(() => { + const nameRegistrationFee = async () => { try { - if (!userInfo?.address) throw new Error("Your address was not found"); - if(!registerNameValue) throw new Error('Enter a name') - - const fee = await getFee("REGISTER_NAME"); - await show({ - message: "Would you like to register this name?", - publishFee: fee.fee + " QORT", - }); - setIsLoadingRegisterName(true); - new Promise((res, rej) => { - window - .sendMessage("registerName", { - name: registerNameValue, - }) - .then((response) => { - if (!response?.error) { - res(response); - setIsLoadingRegisterName(false); - setInfoSnack({ - type: "success", - message: - "Successfully registered. It may take a couple of minutes for the changes to propagate", - }); - setIsOpen(false); - setRegisterNameValue(""); - setOpenSnack(true); - setTxList((prev) => [ - { - ...response, - type: "register-name", - label: `Registered name: awaiting confirmation. This may take a couple minutes.`, - labelDone: `Registered name: success!`, - done: false, - }, - ...prev.filter((item) => !item.done), - ]); - return; - } - setInfoSnack({ - type: "error", - message: response?.error, - }); - setOpenSnack(true); - rej(response.error); - }) - .catch((error) => { - setInfoSnack({ - type: "error", - message: error.message || "An error occurred", - }); - setOpenSnack(true); - rej(error); - }); - }); + const fee = await getFee('REGISTER_NAME'); + setNameFee(fee?.fee); } catch (error) { - if (error?.message) { - setOpenSnack(true) - setInfoSnack({ - type: "error", - message: error?.message, - }); - } - } finally { - setIsLoadingRegisterName(false); + console.error(error); } }; + nameRegistrationFee(); + }, []); + + const registerName = async () => { + try { + if (!userInfo?.address) throw new Error('Your address was not found'); + if (!registerNameValue) throw new Error('Enter a name'); + + const fee = await getFee('REGISTER_NAME'); + await show({ + message: 'Would you like to register this name?', + publishFee: fee.fee + ' QORT', + }); + setIsLoadingRegisterName(true); + new Promise((res, rej) => { + window + .sendMessage('registerName', { + name: registerNameValue, + }) + .then((response) => { + if (!response?.error) { + res(response); + setIsLoadingRegisterName(false); + setInfoSnack({ + type: 'success', + message: + 'Successfully registered. It may take a couple of minutes for the changes to propagate', + }); + setIsOpen(false); + setRegisterNameValue(''); + setOpenSnack(true); + setTxList((prev) => [ + { + ...response, + type: 'register-name', + label: `Registered name: awaiting confirmation. This may take a couple minutes.`, + labelDone: `Registered name: success!`, + done: false, + }, + ...prev.filter((item) => !item.done), + ]); + return; + } + setInfoSnack({ + type: 'error', + message: response?.error, + }); + setOpenSnack(true); + rej(response.error); + }) + .catch((error) => { + setInfoSnack({ + type: 'error', + message: error.message || 'An error occurred', + }); + setOpenSnack(true); + rej(error); + }); + }); + } catch (error) { + if (error?.message) { + setOpenSnack(true); + setInfoSnack({ + type: 'error', + message: error?.message, + }); + } + } finally { + setIsLoadingRegisterName(false); + } + }; return ( - - {"Register name"} - - - + {'Register name'} + + setRegisterNameValue(e.target.value)} value={registerNameValue} placeholder="Choose a name" /> - {(!balance || (nameFee && balance && balance < nameFee))&& ( + {(!balance || (nameFee && balance && balance < nameFee)) && ( <> - - - - Your balance is {balance ?? 0} QORT. A name registration requires a {nameFee} QORT fee - - - + + + + + Your balance is {balance ?? 0} QORT. A name registration + requires a {nameFee} QORT fee + + + )} {isNameAvailable === Availability.AVAILABLE && ( - - - {registerNameValue} is available + alignItems: 'center', + }} + > + + {registerNameValue} is available )} - {isNameAvailable === Availability.NOT_AVAILABLE && ( - - - {registerNameValue} is unavailable + alignItems: 'center', + }} + > + + {registerNameValue} is unavailable )} - {isNameAvailable === Availability.LOADING && ( - - - Checking if name already existis + alignItems: 'center', + }} + > + + Checking if name already existis )} - Benefits of a name - - - - - - - - - - - - - - - - - - + + Benefits of a name + + + + + + + + + + + + + + + - - - - - - - ) -} + + + + + + + ); +}; From 08f38bad92b958f7660387e53fee651c27cc8cf9 Mon Sep 17 00:00:00 2001 From: PhilReact Date: Sun, 27 Apr 2025 22:29:02 +0300 Subject: [PATCH 07/11] more color changes --- src/assets/Icons/StarEmpty.tsx | 7 +++- src/assets/Icons/StarFilled.tsx | 7 +++- src/assets/svgs/Copy.svg | 3 -- src/assets/svgs/Forum.svg | 3 -- src/assets/svgs/Info.svg | 3 -- src/assets/svgs/ModalClose.svg | 3 -- src/assets/svgs/Return.svg | 3 -- src/assets/svgs/Search.svg | 3 -- src/components/Apps/AppInfo.tsx | 2 +- src/components/Apps/AppInfoSnippet.tsx | 2 +- src/components/Apps/Apps-styles.tsx | 6 +-- src/components/Apps/AppsLibraryDesktop.tsx | 8 +++- src/components/Chat/ChatOptions.tsx | 8 +++- src/components/ContextMenuPinnedApps.tsx | 14 +++++-- src/components/Group/Forum/DisplayHtml.tsx | 45 ---------------------- src/components/Group/Forum/GroupMail.tsx | 2 +- src/components/Group/Forum/Thread.tsx | 1 - src/components/Group/WalletsAppWrapper.tsx | 8 ++-- 18 files changed, 44 insertions(+), 84 deletions(-) delete mode 100644 src/assets/svgs/Copy.svg delete mode 100644 src/assets/svgs/Forum.svg delete mode 100644 src/assets/svgs/Info.svg delete mode 100644 src/assets/svgs/ModalClose.svg delete mode 100644 src/assets/svgs/Return.svg delete mode 100644 src/assets/svgs/Search.svg delete mode 100644 src/components/Group/Forum/DisplayHtml.tsx diff --git a/src/assets/Icons/StarEmpty.tsx b/src/assets/Icons/StarEmpty.tsx index d69ad49..fdd0f0c 100644 --- a/src/assets/Icons/StarEmpty.tsx +++ b/src/assets/Icons/StarEmpty.tsx @@ -1,4 +1,9 @@ +import { useTheme } from '@mui/material'; + export const StarEmptyIcon = () => { + const theme = useTheme(); + + const setColor = theme.palette.text.secondary; return ( { > ); diff --git a/src/assets/Icons/StarFilled.tsx b/src/assets/Icons/StarFilled.tsx index 90cab45..b6645cf 100644 --- a/src/assets/Icons/StarFilled.tsx +++ b/src/assets/Icons/StarFilled.tsx @@ -1,4 +1,9 @@ +import { useTheme } from '@mui/material'; + export const StarFilledIcon = () => { + const theme = useTheme(); + + const setColor = theme.palette.text.primary; return ( { > ); diff --git a/src/assets/svgs/Copy.svg b/src/assets/svgs/Copy.svg deleted file mode 100644 index 0348fc9..0000000 --- a/src/assets/svgs/Copy.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/Forum.svg b/src/assets/svgs/Forum.svg deleted file mode 100644 index 7957b06..0000000 --- a/src/assets/svgs/Forum.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/Info.svg b/src/assets/svgs/Info.svg deleted file mode 100644 index 63f9bfc..0000000 --- a/src/assets/svgs/Info.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/ModalClose.svg b/src/assets/svgs/ModalClose.svg deleted file mode 100644 index 1a8b18e..0000000 --- a/src/assets/svgs/ModalClose.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/Return.svg b/src/assets/svgs/Return.svg deleted file mode 100644 index e4ff9b3..0000000 --- a/src/assets/svgs/Return.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/Search.svg b/src/assets/svgs/Search.svg deleted file mode 100644 index b6cb06b..0000000 --- a/src/assets/svgs/Search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/Apps/AppInfo.tsx b/src/components/Apps/AppInfo.tsx index f9e72b3..17f9b7e 100644 --- a/src/components/Apps/AppInfo.tsx +++ b/src/components/Apps/AppInfo.tsx @@ -186,7 +186,7 @@ export const AppInfo = ({ app, myName }) => { }} sx={{ backgroundColor: isInstalled - ? '#0091E1' + ? theme.palette.primary.main : theme.palette.background.paper, height: '29px', maxWidth: '320px', diff --git a/src/components/Apps/AppInfoSnippet.tsx b/src/components/Apps/AppInfoSnippet.tsx index dfe4ea6..8aaf33d 100644 --- a/src/components/Apps/AppInfoSnippet.tsx +++ b/src/components/Apps/AppInfoSnippet.tsx @@ -183,7 +183,7 @@ export const AppInfoSnippet = ({ }} sx={{ backgroundColor: isInstalled - ? '#0091E1' + ? theme.palette.primary.main : theme.palette.background.paper, }} > diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx index 40192a3..dd10e36 100644 --- a/src/components/Apps/Apps-styles.tsx +++ b/src/components/Apps/Apps-styles.tsx @@ -75,7 +75,7 @@ export const AppsWidthLimiter = styled(Box)(({ theme }) => ({ export const AppsSearchContainer = styled(Box)(({ theme }) => ({ alignItems: 'center', - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, borderRadius: '8px', color: theme.palette.text.primary, display: 'flex', @@ -87,7 +87,7 @@ export const AppsSearchContainer = styled(Box)(({ theme }) => ({ export const AppsSearchLeft = styled(Box)(({ theme }) => ({ alignItems: 'center', - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, display: 'flex', flexGrow: 1, @@ -99,7 +99,7 @@ export const AppsSearchLeft = styled(Box)(({ theme }) => ({ export const AppsSearchRight = styled(Box)(({ theme }) => ({ alignItems: 'center', - backgroundColor: theme.palette.background.default, + backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, display: 'flex', flexShrink: 1, diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx index f09e7c1..3490e89 100644 --- a/src/components/Apps/AppsLibraryDesktop.tsx +++ b/src/components/Apps/AppsLibraryDesktop.tsx @@ -39,7 +39,8 @@ import { Spacer } from '../../common/Spacer'; import { AppInfoSnippet } from './AppInfoSnippet'; import { Virtuoso } from 'react-virtuoso'; import { executeEvent } from '../../utils/events'; -import { ShowMessageReturnButton } from '../Group/Forum/Mail-styles'; +import { ComposeP, ShowMessageReturnButton } from '../Group/Forum/Mail-styles'; +import { ReturnIcon } from '../../assets/Icons/ReturnIcon.tsx'; const officialAppList = [ 'q-tube', @@ -273,7 +274,10 @@ export const AppsLibraryDesktop = ({ onClick={() => { executeEvent('navigateBack', {}); }} - > + > + + Return to Apps Dashboard + diff --git a/src/components/Chat/ChatOptions.tsx b/src/components/Chat/ChatOptions.tsx index c70dbff..49d5150 100644 --- a/src/components/Chat/ChatOptions.tsx +++ b/src/components/Chat/ChatOptions.tsx @@ -24,7 +24,7 @@ import { AppsSearchLeft, AppsSearchRight, } from '../Apps/Apps-styles'; -import IconSearch from '../../assets/svgs/Search.svg'; + import IconClearInput from '../../assets/svgs/ClearInput.svg'; import { CellMeasurerCache } from 'react-virtualized'; import { getBaseApiReact } from '../../App'; @@ -398,7 +398,11 @@ export const ChatOptions = ({ > - + setSearchValue(e.target.value)} diff --git a/src/components/ContextMenuPinnedApps.tsx b/src/components/ContextMenuPinnedApps.tsx index 7dad268..3e2c2be 100644 --- a/src/components/ContextMenuPinnedApps.tsx +++ b/src/components/ContextMenuPinnedApps.tsx @@ -5,6 +5,7 @@ import { MenuItem, Typography, styled, + useTheme, } from '@mui/material'; import PushPinIcon from '@mui/icons-material/PushPin'; import { saveToLocalStorage } from './Apps/AppsNavBarDesktop'; @@ -13,7 +14,6 @@ import { sortablePinnedAppsAtom } from '../atoms/global'; const CustomStyledMenu = styled(Menu)(({ theme }) => ({ '& .MuiPaper-root': { - backgroundColor: '#f9f9f9', borderRadius: '12px', padding: theme.spacing(1), boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)', @@ -23,7 +23,7 @@ const CustomStyledMenu = styled(Menu)(({ theme }) => ({ color: '#444', transition: '0.3s background-color', '&:hover': { - backgroundColor: '#f0f0f0', + backgroundColor: theme.palette.action.hover, }, }, })); @@ -37,6 +37,7 @@ export const ContextMenuPinnedApps = ({ children, app, isMine }) => { const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState( sortablePinnedAppsAtom ); + const theme = useTheme(); const handleContextMenu = (event) => { if (isMine) return; @@ -170,9 +171,14 @@ export const ContextMenuPinnedApps = ({ children, app, isMine }) => { }} > - + - + Unpin app diff --git a/src/components/Group/Forum/DisplayHtml.tsx b/src/components/Group/Forum/DisplayHtml.tsx deleted file mode 100644 index 786672a..0000000 --- a/src/components/Group/Forum/DisplayHtml.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { useMemo } from 'react'; -import DOMPurify from 'dompurify'; -import 'react-quill/dist/quill.snow.css'; -import 'react-quill/dist/quill.core.css'; -import 'react-quill/dist/quill.bubble.css'; -import { Box, styled } from '@mui/material'; -import { convertQortalLinks } from '../../../utils/qortalLink'; - -const CrowdfundInlineContent = styled(Box)(({ theme }) => ({ - display: 'flex', - fontFamily: 'Mulish', - fontSize: '19px', - fontWeight: 400, - letterSpacing: 0, - color: theme.palette.text.primary, - width: '100%', -})); - -export const DisplayHtml = ({ html, textColor }: any) => { - const cleanContent = useMemo(() => { - if (!html) return null; - - const sanitize: string = DOMPurify.sanitize(html, { - USE_PROFILES: { html: true }, - }); - const anchorQortal = convertQortalLinks(sanitize); - return anchorQortal; - }, [html]); - - if (!cleanContent) return null; - - return ( - -
- - ); -}; diff --git a/src/components/Group/Forum/GroupMail.tsx b/src/components/Group/Forum/GroupMail.tsx index fcc0a09..d6a3700 100644 --- a/src/components/Group/Forum/GroupMail.tsx +++ b/src/components/Group/Forum/GroupMail.tsx @@ -681,8 +681,8 @@ export const GroupMail = ({ diff --git a/src/components/Group/Forum/Thread.tsx b/src/components/Group/Forum/Thread.tsx index 266edb6..a086a0b 100644 --- a/src/components/Group/Forum/Thread.tsx +++ b/src/components/Group/Forum/Thread.tsx @@ -29,7 +29,6 @@ import { } from './Mail-styles'; import { Spacer } from '../../../common/Spacer'; import { threadIdentifier } from './GroupMail'; -import ReturnSVG from '../../../assets/svgs/Return.svg'; import { NewThread } from './NewThread'; import { decryptPublishes, diff --git a/src/components/Group/WalletsAppWrapper.tsx b/src/components/Group/WalletsAppWrapper.tsx index c569425..82e6660 100644 --- a/src/components/Group/WalletsAppWrapper.tsx +++ b/src/components/Group/WalletsAppWrapper.tsx @@ -1,4 +1,4 @@ -import { Box, ButtonBase, Divider, Typography } from '@mui/material'; +import { Box, ButtonBase, Divider, Typography, useTheme } from '@mui/material'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import CloseIcon from '@mui/icons-material/Close'; import AppViewerContainer from '../Apps/AppViewerContainer'; @@ -25,7 +25,7 @@ export const WalletsAppWrapper = () => { service: 'APP', path: 'qortal?authOnMount=true', }); - + const theme = useTheme(); const isDisableBackButton = useMemo(() => { if (selectedTab && navigationController[selectedTab?.tabId]?.hasBack) return false; @@ -62,7 +62,7 @@ export const WalletsAppWrapper = () => { position: 'fixed', height: '100vh', width: '100vw', - backgroundColor: '#27282c', // TODO: set color theme + backgroundColor: theme.palette.background.paper, // TODO: set color theme zIndex: 100, bottom: 0, right: 0, @@ -92,7 +92,7 @@ export const WalletsAppWrapper = () => { From efc83c89aa477b8ccf64a2feaf4f53ff70135ceb Mon Sep 17 00:00:00 2001 From: PhilReact Date: Mon, 28 Apr 2025 10:24:14 +0300 Subject: [PATCH 08/11] added theme to icons --- src/common/BoundedNumericTextField.tsx | 13 +++++++++---- src/components/Apps/AppsDevModeNavBar.tsx | 8 ++++---- src/components/Apps/AppsHomeDesktop.tsx | 13 ++++++------- src/components/GeneralNotifications.tsx | 2 +- .../Group/Forum/ShowMessageWithoutModal.tsx | 2 +- src/components/Group/Group.tsx | 2 +- src/components/Group/ListOfMembers.tsx | 5 +++-- src/components/Group/Settings.tsx | 8 +------- src/components/RegisterName.tsx | 10 +++++----- 9 files changed, 31 insertions(+), 32 deletions(-) diff --git a/src/common/BoundedNumericTextField.tsx b/src/common/BoundedNumericTextField.tsx index fa0d4b1..f64c8ad 100644 --- a/src/common/BoundedNumericTextField.tsx +++ b/src/common/BoundedNumericTextField.tsx @@ -1,4 +1,9 @@ -import { IconButton, InputAdornment, TextFieldProps } from '@mui/material'; +import { + IconButton, + InputAdornment, + TextFieldProps, + useTheme, +} from '@mui/material'; import React, { useRef, useState } from 'react'; import AddIcon from '@mui/icons-material/Add'; import RemoveIcon from '@mui/icons-material/Remove'; @@ -39,7 +44,7 @@ export const BoundedNumericTextField = ({ const stringIsEmpty = (value: string) => { return value === ''; }; - + const theme = useTheme(); const isAllZerosNum = /^0*\.?0*$/; const isFloatNum = /^-?[0-9]*\.?[0-9]*$/; const isIntegerNum = /^-?[0-9]+$/; @@ -133,7 +138,7 @@ export const BoundedNumericTextField = ({ > {' '} @@ -143,7 +148,7 @@ export const BoundedNumericTextField = ({ > {' '} diff --git a/src/components/Apps/AppsDevModeNavBar.tsx b/src/components/Apps/AppsDevModeNavBar.tsx index a677d67..bcc8811 100644 --- a/src/components/Apps/AppsDevModeNavBar.tsx +++ b/src/components/Apps/AppsDevModeNavBar.tsx @@ -6,7 +6,7 @@ import { } from './Apps-styles'; import { NavBack } from '../../assets/Icons/NavBack.tsx'; import { NavAdd } from '../../assets/Icons/NavAdd.tsx'; -import { ButtonBase, Tab, Tabs } from '@mui/material'; +import { ButtonBase, Tab, Tabs, useTheme } from '@mui/material'; import { executeEvent, subscribeToEvent, @@ -23,7 +23,7 @@ export const AppsDevModeNavBar = () => { const [navigationController, setNavigationController] = useRecoilState( navigationControllerAtom ); - + const theme = useTheme(); const [isNewTabWindow, setIsNewTabWindow] = useState(false); const tabsRef = useRef(null); const [anchorEl, setAnchorEl] = useState(null); @@ -114,7 +114,7 @@ export const AppsDevModeNavBar = () => { scrollButtons={true} sx={{ '& .MuiTabs-indicator': { - backgroundColor: 'white', + backgroundColor: theme.palette.text.primary, }, maxHeight: `275px`, // Ensure the tabs container fits within the available space overflow: 'hidden', // Prevents overflow on small screens @@ -133,7 +133,7 @@ export const AppsDevModeNavBar = () => { } // Pass custom component sx={{ '&.Mui-selected': { - color: 'white', + color: theme.palette.text.primary, }, padding: '0px', margin: '0px', diff --git a/src/components/Apps/AppsHomeDesktop.tsx b/src/components/Apps/AppsHomeDesktop.tsx index c77865c..8a96015 100644 --- a/src/components/Apps/AppsHomeDesktop.tsx +++ b/src/components/Apps/AppsHomeDesktop.tsx @@ -69,10 +69,7 @@ export const AppsHomeDesktop = ({ display: 'flex', gap: '20px', alignItems: 'center', - backgroundColor: - theme.palette.mode === 'dark' - ? 'rgba(41, 41, 43, 1)' - : 'rgb(209, 209, 209)', + backgroundColor: theme.palette.background.paper, padding: '7px', borderRadius: '20px', width: '100%', @@ -91,9 +88,9 @@ export const AppsHomeDesktop = ({ placeholder="qortal://" sx={{ width: '100%', - color: theme.palette.mode === 'dark' ? 'white' : 'black', + color: theme.palette.text.primary, '& .MuiInput-input::placeholder': { - color: 'rgba(84, 84, 84, 0.70) !important', + color: theme.palette.text.secondary, fontSize: '20px', fontStyle: 'normal', fontWeight: 400, @@ -115,7 +112,9 @@ export const AppsHomeDesktop = ({ openQortalUrl()}> diff --git a/src/components/GeneralNotifications.tsx b/src/components/GeneralNotifications.tsx index 25fbb6b..3e9cd02 100644 --- a/src/components/GeneralNotifications.tsx +++ b/src/components/GeneralNotifications.tsx @@ -149,7 +149,7 @@ export const GeneralNotifications = ({ address }) => { > {' '} {formatDate(latestTx?.timestamp)} diff --git a/src/components/Group/Forum/ShowMessageWithoutModal.tsx b/src/components/Group/Forum/ShowMessageWithoutModal.tsx index 57d920d..914b9c5 100644 --- a/src/components/Group/Forum/ShowMessageWithoutModal.tsx +++ b/src/components/Group/Forum/ShowMessageWithoutModal.tsx @@ -20,7 +20,7 @@ import { WrapperUserAction } from '../../WrapperUserAction'; export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => { const [expandAttachments, setExpandAttachments] = useState(false); - console.log('message', message); + let cleanHTML = ''; if (message?.htmlContent) { cleanHTML = DOMPurify.sanitize(message.htmlContent); diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index fdd57e0..4e04b02 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -1780,7 +1780,7 @@ export const Group = ({
); }; - console.log('groupsProperties', groupsProperties); + const renderGroups = () => { return (
{ @@ -354,7 +355,7 @@ const ListOfMembers = ({ {member?.isAdmin && ( diff --git a/src/components/Group/Settings.tsx b/src/components/Group/Settings.tsx index a839bfd..77032f7 100644 --- a/src/components/Group/Settings.tsx +++ b/src/components/Group/Settings.tsx @@ -131,9 +131,7 @@ export const Settings = ({ address, open, setOpen }) => { onClose={handleClose} TransitionComponent={Transition} > - + General Settings @@ -152,7 +150,6 @@ export const Settings = ({ address, open, setOpen }) => { { /> {window?.electronAPI && ( @@ -248,7 +248,7 @@ export const RegisterName = ({ > {registerNameValue} is available @@ -264,7 +264,7 @@ export const RegisterName = ({ > {registerNameValue} is unavailable @@ -298,7 +298,7 @@ export const RegisterName = ({ @@ -308,7 +308,7 @@ export const RegisterName = ({ From ba9062dbcf4ea909b6004a774251b296bc4f7fed Mon Sep 17 00:00:00 2001 From: PhilReact Date: Mon, 28 Apr 2025 16:13:41 +0300 Subject: [PATCH 09/11] added theme manager --- package-lock.json | 416 ++++++++++++++++++ package.json | 1 + src/Wallets.tsx | 6 +- src/components/BuyQortInformation.tsx | 13 +- .../Group/ListOfGroupPromotions.tsx | 1 + src/components/Group/Settings.tsx | 2 + src/components/Theme/ThemeContext.tsx | 132 ++++-- src/components/Theme/ThemeManager.tsx | 309 +++++++++++++ src/components/Theme/themeManager.css | 39 ++ src/styles/theme-dark.ts | 8 +- src/styles/theme-light.ts | 6 +- 11 files changed, 880 insertions(+), 53 deletions(-) create mode 100644 src/components/Theme/ThemeManager.tsx create mode 100644 src/components/Theme/themeManager.css diff --git a/package-lock.json b/package-lock.json index bd1bebf..dd65c25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "@tiptap/starter-kit": "^2.5.9", "@transistorsoft/capacitor-background-fetch": "^6.0.1", "@types/chrome": "^0.0.263", + "@uiw/react-color": "^2.5.1", "adm-zip": "^0.5.16", "asmcrypto.js": "2.3.2", "axios": "^1.7.7", @@ -5900,6 +5901,399 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@uiw/color-convert": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/color-convert/-/color-convert-2.5.1.tgz", + "integrity": "sha512-p+P8Ho0Z1AbUprES0hcLEDAaXbGH92TmjckkRQZ5S7HcyQ+9ZXlSsDFILjFbYu/okVjx5VG59T57Dx84lv9AWA==", + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0" + } + }, + "node_modules/@uiw/react-color": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color/-/react-color-2.5.1.tgz", + "integrity": "sha512-u6Kj7rdhsMOls2KItpHLkG8WTghDS2jYBucLeOLLJXJDs25TuEBI9d1o939og8cUJtTwBrowWFFU63a1kGsciA==", + "license": "MIT", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-alpha": "2.5.1", + "@uiw/react-color-block": "2.5.1", + "@uiw/react-color-chrome": "2.5.1", + "@uiw/react-color-circle": "2.5.1", + "@uiw/react-color-colorful": "2.5.1", + "@uiw/react-color-compact": "2.5.1", + "@uiw/react-color-editable-input": "2.5.1", + "@uiw/react-color-editable-input-hsla": "2.5.1", + "@uiw/react-color-editable-input-rgba": "2.5.1", + "@uiw/react-color-github": "2.5.1", + "@uiw/react-color-hue": "2.5.1", + "@uiw/react-color-material": "2.5.1", + "@uiw/react-color-name": "2.5.1", + "@uiw/react-color-saturation": "2.5.1", + "@uiw/react-color-shade-slider": "2.5.1", + "@uiw/react-color-sketch": "2.5.1", + "@uiw/react-color-slider": "2.5.1", + "@uiw/react-color-swatch": "2.5.1", + "@uiw/react-color-wheel": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-alpha": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-alpha/-/react-color-alpha-2.5.1.tgz", + "integrity": "sha512-hPsIgsnuOQrqinXt3Gt+87fHudbUvvPW+TpvRY0HS9v4ptFu5UsCc/7DPTVKTaL+p+0oaA6eTbziLzPLRLzgsQ==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-drag-event-interactive": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-block": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-block/-/react-color-block-2.5.1.tgz", + "integrity": "sha512-qvubiV0z0P3OxpNt6o1UQ3CVsjVBY1/n/oz6Gzzxx9YPqSClI04AtFjwOQxF7M17SYqXv+88y77gfEfPIqk5+A==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-editable-input": "2.5.1", + "@uiw/react-color-swatch": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-chrome": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-chrome/-/react-color-chrome-2.5.1.tgz", + "integrity": "sha512-m/CyRaWgmkW5aQTQ8AZwyvopYm+bhvX06uS+ezQjXDYDtjLvq7RbM0JLLNIOyMXke964R58fhoX4G06ZWd8ycA==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-alpha": "2.5.1", + "@uiw/react-color-editable-input": "2.5.1", + "@uiw/react-color-editable-input-hsla": "2.5.1", + "@uiw/react-color-editable-input-rgba": "2.5.1", + "@uiw/react-color-github": "2.5.1", + "@uiw/react-color-hue": "2.5.1", + "@uiw/react-color-saturation": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-circle": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-circle/-/react-color-circle-2.5.1.tgz", + "integrity": "sha512-+8zb/Ork1Q5f2bq0jN+GF7OyqY+2ZDYGrdZovN3EBZLMmERbg6TM2+1gTweeFsdiEM/gpteupJpwKpO1aBCocg==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-swatch": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-colorful": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-colorful/-/react-color-colorful-2.5.1.tgz", + "integrity": "sha512-Y/8Y2Kman6IZQpgs4tPTGPuTNr3fJIJxf4f13jll6xuaOsVZeDq9q+DlMErggL+5ICtaBr8gG+w68nCiY+QqKg==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-alpha": "2.5.1", + "@uiw/react-color-hue": "2.5.1", + "@uiw/react-color-saturation": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-compact": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-compact/-/react-color-compact-2.5.1.tgz", + "integrity": "sha512-5jHJcXEkjMwcghzCgSBU2rPMVjuuaJ7B6IxypNkafRQ4FkW/6bP9WpPkzcNXCZ/gPvSJ1OMQ+Y600mdO78qG5Q==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-editable-input": "2.5.1", + "@uiw/react-color-editable-input-rgba": "2.5.1", + "@uiw/react-color-swatch": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-editable-input": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-editable-input/-/react-color-editable-input-2.5.1.tgz", + "integrity": "sha512-0kr5vQJGPln8LObXwfI2YLiHFz2DW3Atgi51JXlrZUyyaVujXRgMTAc1fz/1RQR6cU2A4bweFaCQljcTsv+Cdg==", + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-editable-input-hsla": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-editable-input-hsla/-/react-color-editable-input-hsla-2.5.1.tgz", + "integrity": "sha512-gmnXB6JrYFAd8VN/EfNDJaTdkFHAnUxjzcsQjQyOEr046jDjWgEc/5o2uE1LwIvoJNg9Lo6LYsr37LnFWwsiLw==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-editable-input-rgba": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-editable-input-rgba": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-editable-input-rgba/-/react-color-editable-input-rgba-2.5.1.tgz", + "integrity": "sha512-rk6OxL9lTdRI45aNe3GbUghvaELk4knkEf0gvF/mPHxoeE+nNphSrO5gHm3HhoDOgaplp81VP3q4gUwcdjBzvw==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-editable-input": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-github": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-github/-/react-color-github-2.5.1.tgz", + "integrity": "sha512-t05rIy2ifReiVnjv3x+IVlJH7wvwtZugMeouDa/1Y7jIGZswO0zw3zMxz7qfHrzf5NVYWjmEF8QCj85ngv9brg==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-swatch": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-hue": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-hue/-/react-color-hue-2.5.1.tgz", + "integrity": "sha512-o7mjZhm+U4gHxaBXFxjPINeE3jWfiZAl7RUFqwn4PDZC8wvhU5hEKgJUvcXzErYro0ZYrE1fC/wUHRpI+vcEBg==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-alpha": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-material": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-material/-/react-color-material-2.5.1.tgz", + "integrity": "sha512-iPB4YfKVTNO1lSIQ16DMdDurDKvGTjv6Qwi/nq47yE3nnhB0YbOFwb/IZbWBS1sCTPx1an7dM2IZ+hYoYcjrXg==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-editable-input": "2.5.1", + "@uiw/react-color-editable-input-rgba": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-name": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-name/-/react-color-name-2.5.1.tgz", + "integrity": "sha512-JFb6DFz9kF2jI42MS/vtXZu1XzIrzcSIOqCwVkYWCQnSxOM9h+vd4pv2Yi1oy7IPgaadXUDkrGQSAvEkXU593Q==", + "dependencies": { + "colors-named": "^1.0.1", + "colors-named-hex": "^1.0.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0" + } + }, + "node_modules/@uiw/react-color-saturation": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-saturation/-/react-color-saturation-2.5.1.tgz", + "integrity": "sha512-mQ6eGmn6dUXfScQrb5tP0TBGCpZWzrQuYOAiwK9u31IJaxFwD1NNAzkiienWe4MQkA5zmgz7Ol6FEdLN8K+vGw==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-drag-event-interactive": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-shade-slider": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-shade-slider/-/react-color-shade-slider-2.5.1.tgz", + "integrity": "sha512-hrscAmqmy/Od/usUPETaEuvsNRhUGvNArl73d7HK6e6FjbRFPDBq40LkvjETe8BJMbxrBXTMo6dK7DO08lYq9g==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-alpha": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-sketch": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-sketch/-/react-color-sketch-2.5.1.tgz", + "integrity": "sha512-eQgAnlSZvqoTt6frZa/j+tFdaIBEFneIdxEUfidD8hwvyu5OR/WLHnDy/4fYAxhehDp9Ej8eS3ZsCgPACBMOtA==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-alpha": "2.5.1", + "@uiw/react-color-editable-input": "2.5.1", + "@uiw/react-color-editable-input-rgba": "2.5.1", + "@uiw/react-color-hue": "2.5.1", + "@uiw/react-color-saturation": "2.5.1", + "@uiw/react-color-swatch": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-slider": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-slider/-/react-color-slider-2.5.1.tgz", + "integrity": "sha512-2yluI0Akp6UMXTeAJ4CEjL8flhIFpn3xUPsFXbQmBSzMYJygleVFmwhMye8LSA2PCe3UdaqA2cWXxWsTL0FbIg==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-color-alpha": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-swatch": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-swatch/-/react-color-swatch-2.5.1.tgz", + "integrity": "sha512-EQ7UEzxdohfsdpXmcEWNmK/uiznZovEKo6+j3OLrSU5pZGO7pxjR9sQMlscikvd8Mu1Mm3U0E6bJseo2acD4Lg==", + "dependencies": { + "@uiw/color-convert": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-color-wheel": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-color-wheel/-/react-color-wheel-2.5.1.tgz", + "integrity": "sha512-e3tDwDoC2T7zTapRRm/QxcOJ7IWJwNCoxZ/f97RL1Ib3gAN/k67H1bkR9TK7euRCUxGy031guxTgdKO9v19XFg==", + "dependencies": { + "@uiw/color-convert": "2.5.1", + "@uiw/react-drag-event-interactive": "2.5.1" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, + "node_modules/@uiw/react-drag-event-interactive": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@uiw/react-drag-event-interactive/-/react-drag-event-interactive-2.5.1.tgz", + "integrity": "sha512-GNxhxk5L4O5Gpi20A/BG5sO0GNBNwtNWJidJsJu3pgHUBErN4rhqTDXXu3BQTz5C8yOG5D02Y6Zq/6yu6ckImw==", + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.19.0", + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", @@ -7774,6 +8168,28 @@ "color-support": "bin.js" } }, + "node_modules/colors-named": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/colors-named/-/colors-named-1.0.2.tgz", + "integrity": "sha512-2ANq2r393PV9njYUD66UdfBcxR1slMqRA3QRTWgCx49JoCJ+kOhyfbQYxKJbPZQIhZUcNjVOs5AlyY1WwXec3w==", + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + } + }, + "node_modules/colors-named-hex": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/colors-named-hex/-/colors-named-hex-1.0.2.tgz", + "integrity": "sha512-k6kq1e1pUCQvSVwIaGFq2l0LrkAPQZWyeuZn1Z8nOiYSEZiKoFj4qx690h2Kd34DFl9Me0gKS6MUwAMBJj8nuA==", + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + } + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", diff --git a/package.json b/package.json index 3c92ad4..3594023 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@tiptap/starter-kit": "^2.5.9", "@transistorsoft/capacitor-background-fetch": "^6.0.1", "@types/chrome": "^0.0.263", + "@uiw/react-color": "^2.5.1", "adm-zip": "^0.5.16", "asmcrypto.js": "2.3.2", "axios": "^1.7.7", diff --git a/src/Wallets.tsx b/src/Wallets.tsx index 3c53c52..cb66936 100644 --- a/src/Wallets.tsx +++ b/src/Wallets.tsx @@ -48,7 +48,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => { const [password, setPassword] = useState(''); const [isOpenSeedModal, setIsOpenSeedModal] = useState(false); const [isLoadingEncryptSeed, setIsLoadingEncryptSeed] = useState(false); - + const theme = useTheme(); const { isShow, onCancel, onOk, show } = useModal(); const { getRootProps, getInputProps } = useDropzone({ @@ -216,7 +216,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => { maxHeight: '60vh', overflowY: 'auto', overflowX: 'hidden', - backgroundColor: 'rgb(30 30 32 / 70%)', + backgroundColor: theme.palette.background.paper, }} > {wallets?.map((wallet, idx) => { @@ -429,7 +429,7 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => { bgcolor: theme.palette.background.default, flexGrow: 1, '&:hover': { - backgroundColor: theme.palette.background.paper, + backgroundColor: theme.palette.action.hover, transform: 'scale(1.01)', }, transition: 'all 0.1s ease-in-out', diff --git a/src/components/BuyQortInformation.tsx b/src/components/BuyQortInformation.tsx index cbcbe39..776eefb 100644 --- a/src/components/BuyQortInformation.tsx +++ b/src/components/BuyQortInformation.tsx @@ -110,7 +110,6 @@ export const BuyQortInformation = ({ balance }) => { { > - + - + diff --git a/src/components/Group/ListOfGroupPromotions.tsx b/src/components/Group/ListOfGroupPromotions.tsx index 4d402b6..7942dd2 100644 --- a/src/components/Group/ListOfGroupPromotions.tsx +++ b/src/components/Group/ListOfGroupPromotions.tsx @@ -48,6 +48,7 @@ import { useVirtualizer } from '@tanstack/react-virtual'; import ErrorBoundary from '../../common/ErrorBoundary'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandLessIcon from '@mui/icons-material/ExpandLess'; +import { getFee } from '../../background'; export const requestQueuePromos = new RequestQueueWithPromise(20); export function utf8ToBase64(inputString: string): string { diff --git a/src/components/Group/Settings.tsx b/src/components/Group/Settings.tsx index 77032f7..3ac9a2e 100644 --- a/src/components/Group/Settings.tsx +++ b/src/components/Group/Settings.tsx @@ -18,6 +18,7 @@ import { TransitionProps } from '@mui/material/transitions'; import { Box, FormControlLabel, Switch, styled, useTheme } from '@mui/material'; import { enabledDevModeAtom } from '../../atoms/global'; import { useRecoilState } from 'recoil'; +import ThemeManager from '../Theme/ThemeManager'; const LocalNodeSwitch = styled(Switch)(({ theme }) => ({ padding: 8, @@ -185,6 +186,7 @@ export const Settings = ({ address, open, setOpen }) => { label="Enable dev mode" /> )} + diff --git a/src/components/Theme/ThemeContext.tsx b/src/components/Theme/ThemeContext.tsx index d2e7048..0f24b4a 100644 --- a/src/components/Theme/ThemeContext.tsx +++ b/src/components/Theme/ThemeContext.tsx @@ -6,57 +6,129 @@ import { useEffect, useCallback, } from 'react'; -import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles'; -import { darkTheme } from '../../styles/theme-dark'; -import { lightTheme } from '../../styles/theme-light'; +import { + ThemeProvider as MuiThemeProvider, + createTheme, +} from '@mui/material/styles'; +import { lightThemeOptions } from '../../styles/theme-light'; +import { darkThemeOptions } from '../../styles/theme-dark'; + +const defaultTheme = { + id: 'default', + name: 'Default Theme', + light: lightThemeOptions.palette, + dark: darkThemeOptions.palette, +}; const ThemeContext = createContext({ themeMode: 'light', toggleTheme: () => {}, + userThemes: [defaultTheme], + addUserTheme: (themes) => {}, + setUserTheme: (theme) => {}, + currentThemeId: 'default', }); -export const ThemeProvider = ({ children }: { children: React.ReactNode }) => { +export const ThemeProvider = ({ children }) => { const [themeMode, setThemeMode] = useState('light'); + const [userThemes, setUserThemes] = useState([defaultTheme]); + const [currentThemeId, setCurrentThemeId] = useState('default'); - const theme = useMemo( - () => (themeMode === 'light' ? lightTheme : darkTheme), - [themeMode] - ); + const currentTheme = + userThemes.find((theme) => theme.id === currentThemeId) || defaultTheme; + + const muiTheme = useMemo(() => { + if (themeMode === 'light') { + return createTheme({ + ...lightThemeOptions, + palette: { + ...currentTheme.light, + }, + }); + } else { + return createTheme({ + ...lightThemeOptions, + palette: { + ...currentTheme.dark, + }, + }); + } + }, [themeMode, currentTheme]); + + const saveSettings = ( + themes = userThemes, + mode = themeMode, + themeId = currentThemeId + ) => { + localStorage.setItem( + 'saved_ui_theme', + JSON.stringify({ + mode, + userThemes: themes, + currentThemeId: themeId, + }) + ); + }; const toggleTheme = () => { - setThemeMode((prevMode) => { - const newMode = prevMode === 'light' ? 'dark' : 'light'; - - const themeProperties = { - mode: newMode, - }; - - localStorage.setItem('saved_ui_theme', JSON.stringify(themeProperties)); - + setThemeMode((prev) => { + const newMode = prev === 'light' ? 'dark' : 'light'; + saveSettings(userThemes, newMode, currentThemeId); return newMode; }); }; - const getSavedTheme = useCallback(async () => { - try { - const themeProperties = JSON.parse( - localStorage.getItem(`saved_ui_theme`) || '{}' - ); + const addUserTheme = (themes) => { + setUserThemes(themes); + saveSettings(themes); + }; - const theme = themeProperties?.mode || 'light'; - setThemeMode(theme); - } catch (error) { - console.log('error', error); + const setUserTheme = (theme) => { + if (theme.id === 'default') { + setCurrentThemeId('default'); + saveSettings(userThemes, themeMode, 'default'); + } else { + setCurrentThemeId(theme.id); + saveSettings(userThemes, themeMode, theme.id); + } + }; + + const loadSettings = useCallback(() => { + const saved = localStorage.getItem('saved_ui_theme'); + if (saved) { + try { + const parsed = JSON.parse(saved); + if (parsed.mode === 'light' || parsed.mode === 'dark') + setThemeMode(parsed.mode); + if (Array.isArray(parsed.userThemes)) { + const filteredThemes = parsed.userThemes.filter( + (theme) => theme.id !== 'default' + ); + setUserThemes([defaultTheme, ...filteredThemes]); + } + if (parsed.currentThemeId) setCurrentThemeId(parsed.currentThemeId); + } catch (error) { + console.error('Failed to parse saved_ui_theme:', error); + } } }, []); useEffect(() => { - getSavedTheme(); - }, [getSavedTheme]); + loadSettings(); + }, [loadSettings]); return ( - - {children} + + {children} ); }; diff --git a/src/components/Theme/ThemeManager.tsx b/src/components/Theme/ThemeManager.tsx new file mode 100644 index 0000000..3b2b711 --- /dev/null +++ b/src/components/Theme/ThemeManager.tsx @@ -0,0 +1,309 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { + Box, + Button, + IconButton, + Typography, + Dialog, + DialogTitle, + DialogContent, + DialogActions, + List, + ListItemText, + ListItemSecondaryAction, + TextField, + Tabs, + Tab, + ListItemButton, +} from '@mui/material'; +import { Sketch } from '@uiw/react-color'; +import DeleteIcon from '@mui/icons-material/Delete'; +import EditIcon from '@mui/icons-material/Edit'; +import AddIcon from '@mui/icons-material/Add'; +import CheckIcon from '@mui/icons-material/Check'; +import { useThemeContext } from './ThemeContext'; +import { darkThemeOptions } from '../../styles/theme-dark'; +import { lightThemeOptions } from '../../styles/theme-light'; +import ShortUniqueId from 'short-unique-id'; +import { rgbStringToHsva, rgbaStringToHsva } from '@uiw/color-convert'; + +const uid = new ShortUniqueId({ length: 8 }); + +function detectColorFormat(color) { + if (typeof color !== 'string') return null; + if (color.startsWith('rgba')) return 'rgba'; + if (color.startsWith('rgb')) return 'rgb'; + return null; +} + +export default function ThemeManager() { + const { userThemes, addUserTheme, setUserTheme, currentThemeId } = + useThemeContext(); + const [openEditor, setOpenEditor] = useState(false); + const [themeDraft, setThemeDraft] = useState({ + id: '', + name: '', + light: {}, + dark: {}, + }); + const [currentTab, setCurrentTab] = useState('light'); + const nameInputRef = useRef(null); + + useEffect(() => { + if (openEditor && nameInputRef.current) { + nameInputRef.current.focus(); + } + }, [openEditor]); + + const handleAddTheme = () => { + setThemeDraft({ + id: '', + name: '', + light: structuredClone(lightThemeOptions.palette), + dark: structuredClone(darkThemeOptions.palette), + }); + setOpenEditor(true); + }; + + const handleEditTheme = (themeId) => { + const themeToEdit = userThemes.find((theme) => theme.id === themeId); + if (themeToEdit) { + setThemeDraft({ ...themeToEdit }); + setOpenEditor(true); + } + }; + + const handleSaveTheme = () => { + if (themeDraft.id) { + const updatedThemes = [...userThemes]; + const index = updatedThemes.findIndex( + (theme) => theme.id === themeDraft.id + ); + if (index !== -1) { + updatedThemes[index] = themeDraft; + addUserTheme(updatedThemes); + } + } else { + const newTheme = { ...themeDraft, id: uid.rnd() }; + const updatedThemes = [...userThemes, newTheme]; + addUserTheme(updatedThemes); + setUserTheme(newTheme); + } + setOpenEditor(false); + }; + + const handleDeleteTheme = (id) => { + const updatedThemes = userThemes.filter((theme) => theme.id !== id); + addUserTheme(updatedThemes); + + if (id === currentThemeId) { + // Find the default theme object in the list + const defaultTheme = updatedThemes.find( + (theme) => theme.id === 'default' + ); + + if (defaultTheme) { + setUserTheme(defaultTheme); + } else { + // Emergency fallback + setUserTheme({ + light: lightThemeOptions, + dark: darkThemeOptions, + }); + } + } + }; + + const handleApplyTheme = (theme) => { + setUserTheme(theme); + }; + + const handleColorChange = (mode, fieldPath, color) => { + setThemeDraft((prev) => { + const updated = { ...prev }; + const paths = fieldPath.split('.'); + updated[mode][paths[0]][paths[1]] = color.hex; + return updated; + }); + }; + + const renderColorPicker = (mode, label, fieldPath, currentValue) => { + let color = currentValue || '#ffffff'; + const format = detectColorFormat(currentValue); + if (format === 'rgba') { + color = rgbaStringToHsva(currentValue); + } else if (format === 'rgb') { + color = rgbStringToHsva(currentValue); + } + return ( + + + {label} + + handleColorChange(mode, fieldPath, color)} + /> + + ); + }; + + return ( + + + Theme Manager + + + + + + {userThemes?.map((theme, index) => ( + + + + {theme.id !== 'default' && ( + <> + handleEditTheme(theme.id)}> + + + handleDeleteTheme(theme.id)}> + + + + )} + handleApplyTheme(theme)}> + + + + + ))} + + + setOpenEditor(false)} + fullWidth + maxWidth="md" + > + + {themeDraft.id ? 'Edit Theme' : 'Add New Theme'} + + + + setThemeDraft((prev) => ({ ...prev, name: e.target.value })) + } + /> + + setCurrentTab(newValue)} + sx={{ mt: 2, mb: 2 }} + > + + + + + + {renderColorPicker( + currentTab, + 'Primary Main', + 'primary.main', + themeDraft[currentTab]?.primary?.main + )} + {renderColorPicker( + currentTab, + 'Primary Dark', + 'primary.dark', + themeDraft[currentTab]?.primary?.dark + )} + {renderColorPicker( + currentTab, + 'Primary Light', + 'primary.light', + themeDraft[currentTab]?.primary?.light + )} + {renderColorPicker( + currentTab, + 'Secondary Main', + 'secondary.main', + themeDraft[currentTab]?.secondary?.main + )} + {renderColorPicker( + currentTab, + 'Background Default', + 'background.default', + themeDraft[currentTab]?.background?.default + )} + {renderColorPicker( + currentTab, + 'Background Paper', + 'background.paper', + themeDraft[currentTab]?.background?.paper + )} + {renderColorPicker( + currentTab, + 'Background Surface', + 'background.surface', + themeDraft[currentTab]?.background?.surface + )} + {renderColorPicker( + currentTab, + 'Text Primary', + 'text.primary', + themeDraft[currentTab]?.text?.primary + )} + {renderColorPicker( + currentTab, + 'Text Secondary', + 'text.secondary', + themeDraft[currentTab]?.text?.secondary + )} + {renderColorPicker( + currentTab, + 'Border Main', + 'border.main', + themeDraft[currentTab]?.border?.main + )} + {renderColorPicker( + currentTab, + 'Border Subtle', + 'border.subtle', + themeDraft[currentTab]?.border?.subtle + )} + + + + + + + + + ); +} diff --git a/src/components/Theme/themeManager.css b/src/components/Theme/themeManager.css new file mode 100644 index 0000000..85a4538 --- /dev/null +++ b/src/components/Theme/themeManager.css @@ -0,0 +1,39 @@ +[data-color-mode*='dark'] .w-color-sketch { + --sketch-background: #323232 !important; +} + +[data-color-mode*='dark'] .w-color-swatch { + --sketch-swatch-border-top: 1px solid #525252 !important; +} + +[data-color-mode*='dark'] .w-color-block { + --block-background-color: #323232 !important; + --block-box-shadow: rgb(0 0 0 / 10%) 0 1px !important; +} + +[data-color-mode*='dark'] .w-color-editable-input { + --editable-input-label-color: #757575 !important; + --editable-input-box-shadow: #616161 0px 0px 0px 1px inset !important; + --editable-input-color: #bbb !important; +} + +[data-color-mode*='dark'] .w-color-github { + --github-border: 1px solid rgba(0, 0, 0, 0.2) !important; + --github-background-color: #323232 !important; + --github-box-shadow: rgb(0 0 0 / 15%) 0px 3px 12px !important; + --github-arrow-border-color: rgba(0, 0, 0, 0.15) !important; +} + +[data-color-mode*='dark'] .w-color-compact { + --compact-background-color: #323232 !important; +} + +[data-color-mode*='dark'] .w-color-material { + --material-background-color: #323232 !important; + --material-border-bottom-color: #707070 !important; +} + +[data-color-mode*='dark'] .w-color-alpha { + --alpha-pointer-background-color: #6a6a6a !important; + --alpha-pointer-box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px !important; +} diff --git a/src/styles/theme-dark.ts b/src/styles/theme-dark.ts index 971da81..d54a1c1 100644 --- a/src/styles/theme-dark.ts +++ b/src/styles/theme-dark.ts @@ -1,14 +1,14 @@ import { createTheme, ThemeOptions } from '@mui/material/styles'; import { commonThemeOptions } from './theme-common'; -const darkThemeOptions: ThemeOptions = { +export const darkThemeOptions: ThemeOptions = { ...commonThemeOptions, palette: { mode: 'dark', primary: { - main: 'rgb(46, 61, 96)', - dark: 'rgb(5, 20, 53)', - light: 'rgb(45, 92, 201)', + main: 'rgb(100, 155, 240)', + dark: 'rgb(45, 92, 201)', + light: 'rgb(130, 185, 255)', }, secondary: { main: 'rgb(69, 173, 255)', diff --git a/src/styles/theme-light.ts b/src/styles/theme-light.ts index dbba746..e66788f 100644 --- a/src/styles/theme-light.ts +++ b/src/styles/theme-light.ts @@ -1,7 +1,7 @@ import { createTheme, ThemeOptions } from '@mui/material/styles'; import { commonThemeOptions } from './theme-common'; -const lightThemeOptions: ThemeOptions = { +export const lightThemeOptions: ThemeOptions = { ...commonThemeOptions, palette: { mode: 'light', @@ -26,10 +26,6 @@ const lightThemeOptions: ThemeOptions = { main: 'rgba(0, 0, 0, 0.12)', subtle: 'rgba(0, 0, 0, 0.08)', }, - border: { - main: 'rgba(0, 0, 0, 0.12)', - subtle: 'rgba(0, 0, 0, 0.08)', - }, }, components: { MuiCard: { From ed7b36791a4d5e97569ca6f8734c5b6087fb8628 Mon Sep 17 00:00:00 2001 From: PhilReact Date: Mon, 28 Apr 2025 19:55:48 +0300 Subject: [PATCH 10/11] add css vars to theme palette --- src/App.tsx | 14 +++--- src/ExtStates/NotAuthenticated.tsx | 7 +-- src/Wallets.tsx | 6 +-- src/components/Apps/AppsDesktop.tsx | 4 +- src/components/Apps/AppsDevMode.tsx | 4 +- src/components/Apps/AppsNavBarDesktop.tsx | 4 +- src/components/Chat/ChatDirect.tsx | 3 +- src/components/Chat/ChatGroup.tsx | 3 +- src/components/Chat/ChatList.tsx | 2 +- src/components/Chat/ChatOptions.tsx | 2 +- src/components/Chat/GroupAnnouncements.tsx | 2 +- src/components/Desktop/DesktopFooter.tsx | 4 +- src/components/Desktop/DesktopHeader.tsx | 8 ++-- src/components/DesktopSideBar.tsx | 4 +- src/components/Embeds/AttachmentEmbed.tsx | 2 +- src/components/Embeds/ImageEmbed.tsx | 2 +- src/components/Embeds/PollEmbed.tsx | 2 +- src/components/GeneralNotifications.tsx | 2 +- src/components/GlobalActions/JoinGroup.tsx | 4 +- src/components/Group/AddGroupList.tsx | 7 +-- src/components/Group/Forum/GroupMail.tsx | 12 +++-- src/components/Group/Forum/Mail-styles.ts | 44 +++++++------------ src/components/Group/Group.tsx | 26 +++++------ .../Group/ListOfGroupPromotions.tsx | 4 +- src/components/Group/QMailMessages.tsx | 12 +++-- src/components/Group/UserListOfInvites.tsx | 7 +-- src/components/Minting/Minting.tsx | 12 ++--- src/components/QMailStatus.tsx | 2 +- src/components/Save/Save.tsx | 16 +++---- src/components/Theme/ThemeManager.tsx | 18 ++++++++ src/styles/theme-dark.ts | 5 +++ src/styles/theme-light.ts | 5 +++ src/styles/theme.d.ts | 10 +++++ 33 files changed, 149 insertions(+), 110 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index dbdc846..d31f4d7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3121,12 +3121,12 @@ function App() { - + {userThemes?.map((theme, index) => ( {theme.id !== 'default' && ( <> + exportTheme(theme)}> + + handleEditTheme(theme.id)}> diff --git a/src/utils/fileReading/index.ts b/src/utils/fileReading/index.ts index a6295c8..a04435c 100644 --- a/src/utils/fileReading/index.ts +++ b/src/utils/fileReading/index.ts @@ -1,63 +1,93 @@ // @ts-nocheck class Semaphore { - constructor(count) { - this.count = count - this.waiting = [] - } - acquire() { - return new Promise(resolve => { - if (this.count > 0) { - this.count-- - resolve() - } else { - this.waiting.push(resolve) - } - }) - } - release() { - if (this.waiting.length > 0) { - const resolve = this.waiting.shift() - resolve() - } else { - this.count++ - } - } + constructor(count) { + this.count = count; + this.waiting = []; + } + acquire() { + return new Promise((resolve) => { + if (this.count > 0) { + this.count--; + resolve(); + } else { + this.waiting.push(resolve); + } + }); + } + release() { + if (this.waiting.length > 0) { + const resolve = this.waiting.shift(); + resolve(); + } else { + this.count++; + } + } } -let semaphore = new Semaphore(1) -let reader = new FileReader() +let semaphore = new Semaphore(1); +let reader = new FileReader(); -export const fileToBase64 = (file) => new Promise(async (resolve, reject) => { - const reader = new FileReader(); // Create a new instance - await semaphore.acquire(); - reader.readAsDataURL(file); - reader.onload = () => { - const dataUrl = reader.result; - semaphore.release(); - if (typeof dataUrl === 'string') { - resolve(dataUrl.split(',')[1]); - } else { - reject(new Error('Invalid data URL')); - } - reader.onload = null; // Clear the handler - reader.onerror = null; // Clear the handle - }; - reader.onerror = (error) => { - semaphore.release(); - reject(error); - reader.onload = null; // Clear the handler - reader.onerror = null; // Clear the handle - }; +export const fileToBase64 = (file) => + new Promise(async (resolve, reject) => { + const reader = new FileReader(); // Create a new instance + await semaphore.acquire(); + reader.readAsDataURL(file); + reader.onload = () => { + const dataUrl = reader.result; + semaphore.release(); + if (typeof dataUrl === 'string') { + resolve(dataUrl.split(',')[1]); + } else { + reject(new Error('Invalid data URL')); + } + reader.onload = null; // Clear the handler + reader.onerror = null; // Clear the handle + }; + reader.onerror = (error) => { + semaphore.release(); + reject(error); + reader.onload = null; // Clear the handler + reader.onerror = null; // Clear the handle + }; }); - -export const base64ToBlobUrl = (base64, mimeType = "image/png") => { - const binary = atob(base64); - const array = []; - for (let i = 0; i < binary.length; i++) { - array.push(binary.charCodeAt(i)); - } - const blob = new Blob([new Uint8Array(array)], { type: mimeType }); - return URL.createObjectURL(blob); - }; \ No newline at end of file +export const base64ToBlobUrl = (base64, mimeType = 'image/png') => { + const binary = atob(base64); + const array = []; + for (let i = 0; i < binary.length; i++) { + array.push(binary.charCodeAt(i)); + } + const blob = new Blob([new Uint8Array(array)], { type: mimeType }); + return URL.createObjectURL(blob); +}; + +export const handleImportClick = async (fileTypes) => { + const fileInput = document.createElement('input'); + fileInput.type = 'file'; + fileInput.accept = fileTypes; + + // Create a promise to handle file selection and reading synchronously + return await new Promise((resolve, reject) => { + fileInput.onchange = () => { + const file = fileInput.files[0]; + if (!file) { + reject(new Error('No file selected')); + return; + } + + const reader = new FileReader(); + reader.onload = (e) => { + resolve(e.target.result); // Resolve with the file content + }; + reader.onerror = () => { + reject(new Error('Error reading file')); + }; + + reader.readAsText(file); // Read the file as text (Base64 string) + }; + + // Trigger the file input dialog + fileInput.click(); + }); +};