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

improving bg colors and adding borders

Browse Source
This commit is contained in:
PhilReact 2025-04-26 18:03:27 +03:00
parent be67323367
commit 38c3cc92aa
14 changed files with 527 additions and 483 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.tsx
View File

@ -1487,6 +1487,7 @@ function App() {
sx={{ sx={{
height: '100%', height: '100%',
justifyContent: 'space-between', justifyContent: 'space-between',
borderLeft: `1px solid ${theme.palette.border.subtle}`,
}} }}
> >
<Box <Box

1
src/components/Chat/AnnouncementItem.tsx
View File

@ -101,7 +101,6 @@ export const AnnouncementItem = ({
sx={{ sx={{
fontWight: 600, fontWight: 600,
fontFamily: 'Inter', fontFamily: 'Inter',
color: 'cadetBlue',
}} }}
> >
{message?.name} {message?.name}

5
src/components/Chat/ChatGroup.tsx
View File

@ -997,6 +997,7 @@ export const ChatGroup = ({
opacity: hide ? 0 : 1, opacity: hide ? 0 : 1,
position: hide ? 'absolute' : 'relative', position: hide ? 'absolute' : 'relative',
width: '100%', width: '100%',
padding: '10px',
}} }}
> >
<ChatList <ChatList
@ -1021,7 +1022,7 @@ export const ChatGroup = ({
{(!!secretKey || isPrivate === false) && ( {(!!secretKey || isPrivate === false) && (
<div <div
style={{ style={{
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.surface,
bottom: isFocusedParent ? '0px' : 'unset', bottom: isFocusedParent ? '0px' : 'unset',
boxSizing: 'border-box', boxSizing: 'border-box',
display: 'flex', display: 'flex',
@ -1034,6 +1035,8 @@ export const ChatGroup = ({
top: isFocusedParent ? '0px' : 'unset', top: isFocusedParent ? '0px' : 'unset',
width: '100%', width: '100%',
zIndex: isFocusedParent ? 5 : 'unset', zIndex: isFocusedParent ? 5 : 'unset',
border: `1px solid ${theme.palette.border.subtle}`,
borderRadius: '10px',
}} }}
> >
<div <div

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

@ -2,7 +2,7 @@ import { useCallback, useState, useEffect, useRef, useMemo } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual';
import { MessageItem } from './MessageItem'; import { MessageItem } from './MessageItem';
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events'; import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
import { Box, Typography, useTheme } from '@mui/material'; import { Box, Button, Typography, useTheme } from '@mui/material';
import { ChatOptions } from './ChatOptions'; import { ChatOptions } from './ChatOptions';
import ErrorBoundary from '../../common/ErrorBoundary'; import ErrorBoundary from '../../common/ErrorBoundary';
@ -407,10 +407,11 @@ export const ChatList = ({
</button> </button>
)} )}
{showScrollDownButton && !showScrollButton && ( {showScrollDownButton && !showScrollButton && (
<button <Button
onClick={() => scrollToBottom()} onClick={() => scrollToBottom()}
variant="contained"
style={{ style={{
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.surface,
border: 'none', border: 'none',
borderRadius: '20px', borderRadius: '20px',
bottom: 20, bottom: 20,
@ -422,10 +423,11 @@ export const ChatList = ({
position: 'absolute', position: 'absolute',
right: 20, right: 20,
zIndex: 10, zIndex: 10,
textTransform: 'none',
}} }}
> >
Scroll to bottom Scroll to bottom
</button> </Button>
)} )}
</div> </div>
{enableMentions && (hasSecretKey || isPrivate === false) && ( {enableMentions && (hasSecretKey || isPrivate === false) && (

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

@ -767,7 +767,6 @@ const ShowMessage = ({ message, goToMessage, messages }) => {
sx={{ sx={{
fontWight: 600, fontWight: 600,
fontFamily: 'Inter', fontFamily: 'Inter',
color: 'cadetBlue',
}} }}
> >
{message?.senderName} {message?.senderName}

11
src/components/Chat/MessageItem.tsx
View File

@ -248,7 +248,6 @@ export const MessageItem = React.memo(
sx={{ sx={{
fontWight: 600, fontWight: 600,
fontFamily: 'Inter', fontFamily: 'Inter',
color: 'cadetBlue',
}} }}
> >
{message?.senderName || message?.sender} {message?.senderName || message?.sender}
@ -304,7 +303,7 @@ export const MessageItem = React.memo(
<Spacer height="20px" /> <Spacer height="20px" />
<Box <Box
sx={{ sx={{
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.surface,
borderRadius: '5px', borderRadius: '5px',
cursor: 'pointer', cursor: 'pointer',
display: 'flex', display: 'flex',
@ -319,9 +318,10 @@ export const MessageItem = React.memo(
> >
<Box <Box
sx={{ sx={{
background: theme.palette.background.default, background: theme.palette.text.primary,
height: '100%', height: '100%',
width: '5px', width: '5px',
flexShrink: 0,
}} }}
/> />
<Box <Box
@ -571,7 +571,7 @@ export const ReplyPreview = ({ message, isEdit = false }) => {
return ( return (
<Box <Box
sx={{ sx={{
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.surface,
borderRadius: '5px', borderRadius: '5px',
cursor: 'pointer', cursor: 'pointer',
display: 'flex', display: 'flex',
@ -584,9 +584,10 @@ export const ReplyPreview = ({ message, isEdit = false }) => {
> >
<Box <Box
sx={{ sx={{
background: theme.palette.background.default, background: theme.palette.text.primary,
height: '100%', height: '100%',
width: '5px', width: '5px',
flexShrink: 0,
}} }}
/> />
<Box <Box

2
src/components/DesktopSideBar.tsx
View File

@ -39,6 +39,8 @@ export const DesktopSideBar = ({
gap: '25px', gap: '25px',
height: '100vh', height: '100vh',
width: '60px', width: '60px',
backgroundColor: theme.palette.background.surface,
borderRight: `1px solid ${theme.palette.border.subtle}`,
}} }}
> >
<ButtonBase <ButtonBase

243
src/components/Embeds/AttachmentEmbed.tsx
View File

@ -1,5 +1,5 @@
import React, { useContext, useEffect, useMemo, useRef, useState } from "react"; import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { MyContext, getBaseApiReact } from "../../App"; import { MyContext, getBaseApiReact } from '../../App';
import { import {
Card, Card,
CardContent, CardContent,
@ -15,21 +15,20 @@ import {
Dialog, Dialog,
IconButton, IconButton,
CircularProgress, CircularProgress,
} from "@mui/material"; } from '@mui/material';
import { base64ToBlobUrl } from "../../utils/fileReading"; import { base64ToBlobUrl } from '../../utils/fileReading';
import { saveFileToDiskGeneric } from "../../utils/generateWallet/generateWallet"; import { saveFileToDiskGeneric } from '../../utils/generateWallet/generateWallet';
import AttachmentIcon from '@mui/icons-material/Attachment'; import AttachmentIcon from '@mui/icons-material/Attachment';
import RefreshIcon from "@mui/icons-material/Refresh"; import RefreshIcon from '@mui/icons-material/Refresh';
import OpenInNewIcon from "@mui/icons-material/OpenInNew"; import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import { CustomLoader } from "../../common/CustomLoader"; import { CustomLoader } from '../../common/CustomLoader';
import { Spacer } from "../../common/Spacer"; import { Spacer } from '../../common/Spacer';
import { FileAttachmentContainer, FileAttachmentFont } from "./Embed-styles"; import { FileAttachmentContainer, FileAttachmentFont } from './Embed-styles';
import DownloadIcon from "@mui/icons-material/Download"; import DownloadIcon from '@mui/icons-material/Download';
import SaveIcon from '@mui/icons-material/Save'; import SaveIcon from '@mui/icons-material/Save';
import { useSetRecoilState } from "recoil"; import { useSetRecoilState } from 'recoil';
import { blobControllerAtom } from "../../atoms/global"; import { blobControllerAtom } from '../../atoms/global';
import { decodeIfEncoded } from "../../utils/decode"; import { decodeIfEncoded } from '../../utils/decode';
export const AttachmentCard = ({ export const AttachmentCard = ({
resourceData, resourceData,
@ -41,120 +40,116 @@ export const AttachmentCard = ({
isLoadingParent, isLoadingParent,
errorMsg, errorMsg,
encryptionType, encryptionType,
selectedGroupId selectedGroupId,
}) => { }) => {
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
const { downloadResource } = useContext(MyContext); const { downloadResource } = useContext(MyContext);
const saveToDisk = async ()=> { const saveToDisk = async () => {
const { name, service, identifier } = resourceData; const { name, service, identifier } = resourceData;
const url = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}`; const url = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}`;
fetch(url) fetch(url)
.then(response => response.blob()) .then((response) => response.blob())
.then(async blob => { .then(async (blob) => {
await saveFileToDiskGeneric(blob, resourceData?.fileName) await saveFileToDiskGeneric(blob, resourceData?.fileName);
}) })
.catch(error => { .catch((error) => {
console.error("Error fetching the video:", error); console.error('Error fetching the video:', error);
}); });
} };
const saveToDiskEncrypted = async ()=> { const saveToDiskEncrypted = async () => {
let blobUrl let blobUrl;
try { try {
const { name, service, identifier,key } = resourceData; const { name, service, identifier, key } = resourceData;
const url = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}?encoding=base64`; const url = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}?encoding=base64`;
const res = await fetch(url) const res = await fetch(url);
const data = await res.text(); const data = await res.text();
let decryptedData let decryptedData;
try { try {
if(key && encryptionType === 'private'){ if (key && encryptionType === 'private') {
decryptedData = await window.sendMessage( decryptedData = await window.sendMessage(
"DECRYPT_DATA_WITH_SHARING_KEY", 'DECRYPT_DATA_WITH_SHARING_KEY',
{ {
encryptedData: data, encryptedData: data,
key: decodeURIComponent(key), key: decodeURIComponent(key),
} }
); );
} }
if(encryptionType === 'group'){ if (encryptionType === 'group') {
decryptedData = await window.sendMessage( decryptedData = await window.sendMessage(
"DECRYPT_QORTAL_GROUP_DATA", 'DECRYPT_QORTAL_GROUP_DATA',
{ {
data64: data, data64: data,
groupId: selectedGroupId, groupId: selectedGroupId,
} }
); );
} }
} catch (error) { } catch (error) {
throw new Error('Unable to decrypt') throw new Error('Unable to decrypt');
} }
if (!decryptedData || decryptedData?.error) throw new Error("Could not decrypt data"); if (!decryptedData || decryptedData?.error)
blobUrl = base64ToBlobUrl(decryptedData, resourceData?.mimeType) throw new Error('Could not decrypt data');
blobUrl = base64ToBlobUrl(decryptedData, resourceData?.mimeType);
const response = await fetch(blobUrl); const response = await fetch(blobUrl);
const blob = await response.blob(); const blob = await response.blob();
await saveFileToDiskGeneric(blob, resourceData?.fileName) await saveFileToDiskGeneric(blob, resourceData?.fileName);
} catch (error) { } catch (error) {
console.error(error) console.error(error);
} finally { } finally {
if(blobUrl){ if (blobUrl) {
URL.revokeObjectURL(blobUrl); URL.revokeObjectURL(blobUrl);
} }
}
} }
};
return ( return (
<Card <Card
sx={{ sx={{
backgroundColor: "#1F2023", backgroundColor: '#1F2023',
height: "250px", height: '250px',
// height: isOpen ? "auto" : "150px", // height: isOpen ? "auto" : "150px",
}} }}
> >
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
justifyContent: "space-between", justifyContent: 'space-between',
padding: "16px 16px 0px 16px", padding: '16px 16px 0px 16px',
}} }}
> >
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
gap: "10px", gap: '10px',
}} }}
> >
<AttachmentIcon <AttachmentIcon
sx={{ sx={{
color: "white", color: 'white',
}} }}
/> />
<Typography>ATTACHMENT embed</Typography> <Typography>ATTACHMENT embed</Typography>
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
gap: "10px", gap: '10px',
}} }}
> >
<ButtonBase> <ButtonBase>
<RefreshIcon <RefreshIcon
onClick={refresh} onClick={refresh}
sx={{ sx={{
fontSize: "24px", fontSize: '24px',
color: "white", color: 'white',
}} }}
/> />
</ButtonBase> </ButtonBase>
@ -163,8 +158,8 @@ export const AttachmentCard = ({
<OpenInNewIcon <OpenInNewIcon
onClick={openExternal} onClick={openExternal}
sx={{ sx={{
fontSize: "24px", fontSize: '24px',
color: "white", color: 'white',
}} }}
/> />
</ButtonBase> </ButtonBase>
@ -173,66 +168,67 @@ export const AttachmentCard = ({
</Box> </Box>
<Box <Box
sx={{ sx={{
padding: "8px 16px 8px 16px", padding: '8px 16px 8px 16px',
}} }}
> >
<Typography <Typography
sx={{ sx={{
fontSize: "12px", fontSize: '12px',
color: "white", color: 'white',
}} }}
> >
Created by {decodeIfEncoded(owner)} Created by {decodeIfEncoded(owner)}
</Typography> </Typography>
<Typography <Typography
sx={{ sx={{
fontSize: "12px", fontSize: '12px',
color: "cadetblue",
}} }}
> >
{encryptionType === 'private' ? "ENCRYPTED" : encryptionType === 'group' ? 'GROUP ENCRYPTED' : "Not encrypted"} {encryptionType === 'private'
? 'ENCRYPTED'
: encryptionType === 'group'
? 'GROUP ENCRYPTED'
: 'Not encrypted'}
</Typography> </Typography>
</Box> </Box>
<Divider sx={{ borderColor: "rgb(255 255 255 / 10%)" }} /> <Divider sx={{ borderColor: 'rgb(255 255 255 / 10%)' }} />
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
width: "100%", width: '100%',
alignItems: "center", alignItems: 'center',
}} }}
> >
{isLoadingParent && isOpen && ( {isLoadingParent && isOpen && (
<Box <Box
sx={{ sx={{
width: "100%", width: '100%',
display: "flex", display: 'flex',
justifyContent: "center", justifyContent: 'center',
}} }}
> >
{" "} {' '}
<CustomLoader />{" "} <CustomLoader />{' '}
</Box> </Box>
)} )}
{errorMsg && ( {errorMsg && (
<Box <Box
sx={{ sx={{
width: "100%", width: '100%',
display: "flex", display: 'flex',
justifyContent: "center", justifyContent: 'center',
}} }}
> >
{" "} {' '}
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: '14px',
color: "var(--danger)", color: 'var(--danger)',
}} }}
> >
{errorMsg} {errorMsg}
</Typography>{" "} </Typography>{' '}
</Box> </Box>
)} )}
</Box> </Box>
@ -241,59 +237,72 @@ export const AttachmentCard = ({
<CardContent> <CardContent>
{resourceData?.fileName && ( {resourceData?.fileName && (
<> <>
<Typography sx={{ <Typography
fontSize: '14px' sx={{
}}>{resourceData?.fileName}</Typography> fontSize: '14px',
}}
>
{resourceData?.fileName}
</Typography>
<Spacer height="10px" /> <Spacer height="10px" />
</> </>
)} )}
<ButtonBase sx={{ <ButtonBase
sx={{
width: '90%', width: '90%',
maxWidth: '400px' maxWidth: '400px',
}} onClick={()=> { }}
if(resourceDetails?.status?.status === 'READY'){ onClick={() => {
if(encryptionType){ if (resourceDetails?.status?.status === 'READY') {
saveToDiskEncrypted() if (encryptionType) {
return saveToDiskEncrypted();
return;
} }
saveToDisk() saveToDisk();
return return;
} }
downloadResource(resourceData) downloadResource(resourceData);
}}> }}
>
<FileAttachmentContainer > <FileAttachmentContainer>
<Typography>{resourceDetails?.status?.status === 'DOWNLOADED' ? 'BUILDING' : resourceDetails?.status?.status}</Typography> <Typography>
{resourceDetails?.status?.status === 'DOWNLOADED'
? 'BUILDING'
: resourceDetails?.status?.status}
</Typography>
{!resourceDetails && ( {!resourceDetails && (
<> <>
<DownloadIcon /> <DownloadIcon />
<FileAttachmentFont>Download File</FileAttachmentFont> <FileAttachmentFont>Download File</FileAttachmentFont>
</> </>
)} )}
{resourceDetails && resourceDetails?.status?.status !== 'READY' && resourceDetails?.status?.status !== 'FAILED_TO_DOWNLOAD' && ( {resourceDetails &&
resourceDetails?.status?.status !== 'READY' &&
resourceDetails?.status?.status !== 'FAILED_TO_DOWNLOAD' && (
<> <>
<CircularProgress sx={{ <CircularProgress
color: 'white' sx={{
}} size={20} /> color: 'white',
<FileAttachmentFont>Downloading: {resourceDetails?.status?.percentLoaded || '0'}%</FileAttachmentFont> }}
size={20}
/>
<FileAttachmentFont>
Downloading:{' '}
{resourceDetails?.status?.percentLoaded || '0'}%
</FileAttachmentFont>
</> </>
)} )}
{resourceDetails && resourceDetails?.status?.status === 'READY' && ( {resourceDetails &&
resourceDetails?.status?.status === 'READY' && (
<> <>
<SaveIcon /> <SaveIcon />
<FileAttachmentFont>Save to Disk</FileAttachmentFont> <FileAttachmentFont>Save to Disk</FileAttachmentFont>
</> </>
)} )}
</FileAttachmentContainer> </FileAttachmentContainer>
</ButtonBase> </ButtonBase>
</CardContent> </CardContent>
</Box> </Box>
</Card> </Card>
); );
}; };

160
src/components/Embeds/ImageEmbed.tsx
View File

@ -1,23 +1,21 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { import {
Card, Card,
CardContent, CardContent,
Typography, Typography,
Box, Box,
ButtonBase, ButtonBase,
Divider, Divider,
Dialog, Dialog,
IconButton, IconButton,
} from '@mui/material';
} from "@mui/material"; import RefreshIcon from '@mui/icons-material/Refresh';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import RefreshIcon from "@mui/icons-material/Refresh"; import { CustomLoader } from '../../common/CustomLoader';
import OpenInNewIcon from "@mui/icons-material/OpenInNew"; import ImageIcon from '@mui/icons-material/Image';
import { CustomLoader } from "../../common/CustomLoader"; import CloseIcon from '@mui/icons-material/Close';
import ImageIcon from "@mui/icons-material/Image"; import { decodeIfEncoded } from '../../utils/decode';
import CloseIcon from "@mui/icons-material/Close";
import { decodeIfEncoded } from "../../utils/decode";
export const ImageCard = ({ export const ImageCard = ({
image, image,
@ -29,9 +27,9 @@ export const ImageCard = ({
isLoadingParent, isLoadingParent,
errorMsg, errorMsg,
encryptionType, encryptionType,
}) => { }) => {
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
const [height, setHeight] = useState('400px') const [height, setHeight] = useState('400px');
useEffect(() => { useEffect(() => {
if (isOpen) { if (isOpen) {
fetchImage(); fetchImage();
@ -47,46 +45,46 @@ export const ImageCard = ({
return ( return (
<Card <Card
sx={{ sx={{
backgroundColor: "#1F2023", backgroundColor: '#1F2023',
height: height, height: height,
transition: "height 0.6s ease-in-out", transition: 'height 0.6s ease-in-out',
}} }}
> >
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
justifyContent: "space-between", justifyContent: 'space-between',
padding: "16px 16px 0px 16px", padding: '16px 16px 0px 16px',
}} }}
> >
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
gap: "10px", gap: '10px',
}} }}
> >
<ImageIcon <ImageIcon
sx={{ sx={{
color: "white", color: 'white',
}} }}
/> />
<Typography>IMAGE embed</Typography> <Typography>IMAGE embed</Typography>
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
gap: "10px", gap: '10px',
}} }}
> >
<ButtonBase> <ButtonBase>
<RefreshIcon <RefreshIcon
onClick={refresh} onClick={refresh}
sx={{ sx={{
fontSize: "24px", fontSize: '24px',
color: "white", color: 'white',
}} }}
/> />
</ButtonBase> </ButtonBase>
@ -95,8 +93,8 @@ export const ImageCard = ({
<OpenInNewIcon <OpenInNewIcon
onClick={openExternal} onClick={openExternal}
sx={{ sx={{
fontSize: "24px", fontSize: '24px',
color: "white", color: 'white',
}} }}
/> />
</ButtonBase> </ButtonBase>
@ -105,65 +103,67 @@ export const ImageCard = ({
</Box> </Box>
<Box <Box
sx={{ sx={{
padding: "8px 16px 8px 16px", padding: '8px 16px 8px 16px',
}} }}
> >
<Typography <Typography
sx={{ sx={{
fontSize: "12px", fontSize: '12px',
color: "white", color: 'white',
}} }}
> >
Created by {decodeIfEncoded(owner)} Created by {decodeIfEncoded(owner)}
</Typography> </Typography>
<Typography <Typography
sx={{ sx={{
fontSize: "12px", fontSize: '12px',
color: "cadetblue",
}} }}
> >
{encryptionType === 'private' ? "ENCRYPTED" : encryptionType === 'group' ? 'GROUP ENCRYPTED' : "Not encrypted"} {encryptionType === 'private'
? 'ENCRYPTED'
: encryptionType === 'group'
? 'GROUP ENCRYPTED'
: 'Not encrypted'}
</Typography> </Typography>
</Box> </Box>
<Divider sx={{ borderColor: "rgb(255 255 255 / 10%)" }} /> <Divider sx={{ borderColor: 'rgb(255 255 255 / 10%)' }} />
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
width: "100%", width: '100%',
alignItems: "center", alignItems: 'center',
}} }}
> >
{isLoadingParent && isOpen && ( {isLoadingParent && isOpen && (
<Box <Box
sx={{ sx={{
width: "100%", width: '100%',
display: "flex", display: 'flex',
justifyContent: "center", justifyContent: 'center',
}} }}
> >
{" "} {' '}
<CustomLoader />{" "} <CustomLoader />{' '}
</Box> </Box>
)} )}
{errorMsg && ( {errorMsg && (
<Box <Box
sx={{ sx={{
width: "100%", width: '100%',
display: "flex", display: 'flex',
justifyContent: "center", justifyContent: 'center',
}} }}
> >
{" "} {' '}
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: '14px',
color: "var(--danger)", color: 'var(--danger)',
}} }}
> >
{errorMsg} {errorMsg}
</Typography>{" "} </Typography>{' '}
</Box> </Box>
)} )}
</Box> </Box>
@ -175,9 +175,9 @@ export const ImageCard = ({
</Box> </Box>
</Card> </Card>
); );
}; };
export function ImageViewer({ src, alt = "" }) { export function ImageViewer({ src, alt = '' }) {
const [isFullscreen, setIsFullscreen] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false);
const handleOpenFullscreen = () => setIsFullscreen(true); const handleOpenFullscreen = () => setIsFullscreen(true);
@ -188,10 +188,10 @@ export const ImageCard = ({
{/* Image in container */} {/* Image in container */}
<Box <Box
sx={{ sx={{
maxWidth: "100%", // Prevent horizontal overflow maxWidth: '100%', // Prevent horizontal overflow
display: "flex", display: 'flex',
justifyContent: "center", justifyContent: 'center',
cursor: "pointer", cursor: 'pointer',
}} }}
onClick={handleOpenFullscreen} onClick={handleOpenFullscreen}
> >
@ -199,9 +199,9 @@ export const ImageCard = ({
src={src} src={src}
alt={alt} alt={alt}
style={{ style={{
maxWidth: "100%", maxWidth: '100%',
maxHeight: "450px", // Adjust max height for small containers maxHeight: '450px', // Adjust max height for small containers
objectFit: "contain", // Preserve aspect ratio objectFit: 'contain', // Preserve aspect ratio
}} }}
/> />
</Box> </Box>
@ -214,35 +214,35 @@ export const ImageCard = ({
fullWidth fullWidth
fullScreen fullScreen
sx={{ sx={{
"& .MuiDialog-paper": { '& .MuiDialog-paper': {
margin: 0, margin: 0,
maxWidth: "100%", maxWidth: '100%',
width: "100%", width: '100%',
height: "100vh", height: '100vh',
overflow: "hidden", // Prevent scrollbars overflow: 'hidden', // Prevent scrollbars
}, },
}} }}
> >
<Box <Box
sx={{ sx={{
position: "relative", position: 'relative',
width: "100%", width: '100%',
height: "100%", height: '100%',
display: "flex", display: 'flex',
justifyContent: "center", justifyContent: 'center',
alignItems: "center", alignItems: 'center',
backgroundColor: "#000", // Optional: dark background for fullscreen mode backgroundColor: '#000', // Optional: dark background for fullscreen mode
}} }}
> >
{/* Close Button */} {/* Close Button */}
<IconButton <IconButton
onClick={handleCloseFullscreen} onClick={handleCloseFullscreen}
sx={{ sx={{
position: "absolute", position: 'absolute',
top: 8, top: 8,
right: 8, right: 8,
zIndex: 10, zIndex: 10,
color: "white", color: 'white',
}} }}
> >
<CloseIcon /> <CloseIcon />
@ -253,13 +253,13 @@ export const ImageCard = ({
src={src} src={src}
alt={alt} alt={alt}
style={{ style={{
maxWidth: "100%", maxWidth: '100%',
maxHeight: "100%", maxHeight: '100%',
objectFit: "contain", // Preserve aspect ratio objectFit: 'contain', // Preserve aspect ratio
}} }}
/> />
</Box> </Box>
</Dialog> </Dialog>
</> </>
); );
} }

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

@ -1556,12 +1556,13 @@ export const Group = ({
<div <div
style={{ style={{
alignItems: 'flex-start', alignItems: 'flex-start',
background: theme.palette.background.default, background: theme.palette.background.surface,
borderRadius: '0px 15px 15px 0px', borderRadius: '0px 15px 15px 0px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
height: '100%', height: '100%',
width: '380px', width: '380px',
padding: '0px 2px',
}} }}
> >
<Box <Box
@ -1789,8 +1790,9 @@ export const Group = ({
flexDirection: 'column', flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
height: '100%', height: '100%',
background: theme.palette.background.default, background: theme.palette.background.surface,
borderRadius: '0px 15px 15px 0px', borderRadius: '0px 15px 15px 0px',
padding: '0px 2px',
}} }}
> >
<Box <Box

3
src/components/Group/ListOfGroupPromotions.tsx
View File

@ -687,7 +687,6 @@ export const ListOfGroupPromotions = () => {
sx={{ sx={{
fontWight: 600, fontWight: 600,
fontFamily: 'Inter', fontFamily: 'Inter',
color: 'cadetBlue',
}} }}
> >
{promotion?.name} {promotion?.name}
@ -698,7 +697,6 @@ export const ListOfGroupPromotions = () => {
sx={{ sx={{
fontWight: 600, fontWight: 600,
fontFamily: 'Inter', fontFamily: 'Inter',
color: 'cadetBlue',
}} }}
> >
{promotion?.groupName} {promotion?.groupName}
@ -746,7 +744,6 @@ export const ListOfGroupPromotions = () => {
sx={{ sx={{
fontWight: 600, fontWight: 600,
fontFamily: 'Inter', fontFamily: 'Inter',
color: 'cadetBlue',
}} }}
> >
{promotion?.data} {promotion?.data}

7
src/styles/theme-dark.ts
View File

@ -15,12 +15,17 @@ const darkThemeOptions: ThemeOptions = {
}, },
background: { background: {
default: 'rgb(49, 51, 56)', default: 'rgb(49, 51, 56)',
paper: 'rgb(96, 96, 97)', paper: 'rgb(62, 64, 68)',
surface: 'rgb(58, 60, 65)',
}, },
text: { text: {
primary: 'rgb(255, 255, 255)', primary: 'rgb(255, 255, 255)',
secondary: 'rgb(179, 179, 179)', secondary: 'rgb(179, 179, 179)',
}, },
border: {
main: 'rgba(255, 255, 255, 0.12)',
subtle: 'rgba(255, 255, 255, 0.08)',
},
}, },
components: { components: {
MuiCard: { MuiCard: {

11
src/styles/theme-light.ts
View File

@ -6,21 +6,26 @@ const lightThemeOptions: ThemeOptions = {
palette: { palette: {
mode: 'light', mode: 'light',
primary: { primary: {
main: 'rgba(244, 244, 251, 1)', main: 'rgb(162, 162, 221)', // old light becomes main
dark: 'rgb(113, 198, 212)', dark: 'rgb(113, 198, 212)',
light: 'rgb(162, 162, 221)', light: 'rgba(244, 244, 251, 1)', // former main becomes light
}, },
secondary: { secondary: {
main: 'rgba(194, 222, 236, 1)', main: 'rgba(194, 222, 236, 1)',
}, },
background: { background: {
default: 'rgba(250, 250, 250, 1)', 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: { text: {
primary: 'rgba(0, 0, 0, 1)', primary: 'rgba(0, 0, 0, 1)',
secondary: 'rgba(82, 82, 82, 1)', secondary: 'rgba(82, 82, 82, 1)',
}, },
border: {
main: 'rgba(0, 0, 0, 0.12)',
subtle: 'rgba(0, 0, 0, 0.08)',
},
}, },
components: { components: {
MuiCard: { MuiCard: {

19
src/styles/theme.d.ts vendored Normal file
View File

@ -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;
};
}
}