Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-27 13:27: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={{
height: '100%',
justifyContent: 'space-between',
borderLeft: `1px solid ${theme.palette.border.subtle}`,
}}
>
<Box

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

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

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

@ -997,6 +997,7 @@ export const ChatGroup = ({
opacity: hide ? 0 : 1,
position: hide ? 'absolute' : 'relative',
width: '100%',
padding: '10px',
}}
>
<ChatList
@ -1021,7 +1022,7 @@ export const ChatGroup = ({
{(!!secretKey || isPrivate === false) && (
<div
style={{
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.surface,
bottom: isFocusedParent ? '0px' : 'unset',
boxSizing: 'border-box',
display: 'flex',
@ -1034,6 +1035,8 @@ export const ChatGroup = ({
top: isFocusedParent ? '0px' : 'unset',
width: '100%',
zIndex: isFocusedParent ? 5 : 'unset',
border: `1px solid ${theme.palette.border.subtle}`,
borderRadius: '10px',
}}
>
<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 { MessageItem } from './MessageItem';
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 ErrorBoundary from '../../common/ErrorBoundary';
@ -407,10 +407,11 @@ export const ChatList = ({
</button>
)}
{showScrollDownButton && !showScrollButton && (
<button
<Button
onClick={() => scrollToBottom()}
variant="contained"
style={{
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.surface,
border: 'none',
borderRadius: '20px',
bottom: 20,
@ -422,10 +423,11 @@ export const ChatList = ({
position: 'absolute',
right: 20,
zIndex: 10,
textTransform: 'none',
}}
>
Scroll to bottom
</button>
</Button>
)}
</div>
{enableMentions && (hasSecretKey || isPrivate === false) && (

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

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

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

@ -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(
<Spacer height="20px" />
<Box
sx={{
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.surface,
borderRadius: '5px',
cursor: 'pointer',
display: 'flex',
@ -319,9 +318,10 @@ export const MessageItem = React.memo(
>
<Box
sx={{
background: theme.palette.background.default,
background: theme.palette.text.primary,
height: '100%',
width: '5px',
flexShrink: 0,
}}
/>
<Box
@ -571,7 +571,7 @@ export const ReplyPreview = ({ message, isEdit = false }) => {
return (
<Box
sx={{
backgroundColor: theme.palette.background.default,
backgroundColor: theme.palette.background.surface,
borderRadius: '5px',
cursor: 'pointer',
display: 'flex',
@ -584,9 +584,10 @@ export const ReplyPreview = ({ message, isEdit = false }) => {
>
<Box
sx={{
background: theme.palette.background.default,
background: theme.palette.text.primary,
height: '100%',
width: '5px',
flexShrink: 0,
}}
/>
<Box

2
src/components/DesktopSideBar.tsx
View File

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

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

@ -1,5 +1,5 @@
import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
import { MyContext, getBaseApiReact } from "../../App";
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { MyContext, getBaseApiReact } from '../../App';
import {
Card,
CardContent,
@ -15,285 +15,294 @@ import {
Dialog,
IconButton,
CircularProgress,
} from "@mui/material";
import { base64ToBlobUrl } from "../../utils/fileReading";
import { saveFileToDiskGeneric } from "../../utils/generateWallet/generateWallet";
} from '@mui/material';
import { base64ToBlobUrl } from '../../utils/fileReading';
import { saveFileToDiskGeneric } from '../../utils/generateWallet/generateWallet';
import AttachmentIcon from '@mui/icons-material/Attachment';
import RefreshIcon from "@mui/icons-material/Refresh";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import { CustomLoader } from "../../common/CustomLoader";
import { Spacer } from "../../common/Spacer";
import { FileAttachmentContainer, FileAttachmentFont } from "./Embed-styles";
import DownloadIcon from "@mui/icons-material/Download";
import RefreshIcon from '@mui/icons-material/Refresh';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import { CustomLoader } from '../../common/CustomLoader';
import { Spacer } from '../../common/Spacer';
import { FileAttachmentContainer, FileAttachmentFont } from './Embed-styles';
import DownloadIcon from '@mui/icons-material/Download';
import SaveIcon from '@mui/icons-material/Save';
import { useSetRecoilState } from "recoil";
import { blobControllerAtom } from "../../atoms/global";
import { decodeIfEncoded } from "../../utils/decode";
import { useSetRecoilState } from 'recoil';
import { blobControllerAtom } from '../../atoms/global';
import { decodeIfEncoded } from '../../utils/decode';
export const AttachmentCard = ({
resourceData,
resourceDetails,
owner,
refresh,
openExternal,
external,
isLoadingParent,
errorMsg,
encryptionType,
selectedGroupId
}) => {
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 (
<Card
};
return (
<Card
sx={{
backgroundColor: '#1F2023',
height: '250px',
// height: isOpen ? "auto" : "150px",
}}
>
<Box
sx={{
backgroundColor: "#1F2023",
height: "250px",
// height: isOpen ? "auto" : "150px",
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '16px 16px 0px 16px',
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "16px 16px 0px 16px",
display: 'flex',
alignItems: 'center',
gap: '10px',
}}
>
<Box
<AttachmentIcon
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
color: 'white',
}}
>
<AttachmentIcon
/>
<Typography>ATTACHMENT embed</Typography>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: '10px',
}}
>
<ButtonBase>
<RefreshIcon
onClick={refresh}
sx={{
color: "white",
fontSize: '24px',
color: 'white',
}}
/>
<Typography>ATTACHMENT embed</Typography>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
}}
>
</ButtonBase>
{external && (
<ButtonBase>
<RefreshIcon
onClick={refresh}
<OpenInNewIcon
onClick={openExternal}
sx={{
fontSize: "24px",
color: "white",
fontSize: '24px',
color: 'white',
}}
/>
</ButtonBase>
{external && (
<ButtonBase>
<OpenInNewIcon
onClick={openExternal}
sx={{
fontSize: "24px",
color: "white",
}}
/>
</ButtonBase>
)}
</Box>
</Box>
<Box
sx={{
padding: "8px 16px 8px 16px",
}}
>
<Typography
sx={{
fontSize: "12px",
color: "white",
}}
>
Created by {decodeIfEncoded(owner)}
</Typography>
<Typography
sx={{
fontSize: "12px",
color: "cadetblue",
}}
>
{encryptionType === 'private' ? "ENCRYPTED" : encryptionType === 'group' ? 'GROUP ENCRYPTED' : "Not encrypted"}
</Typography>
</Box>
<Divider sx={{ borderColor: "rgb(255 255 255 / 10%)" }} />
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
alignItems: "center",
}}
>
{isLoadingParent && isOpen && (
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
}}
>
{" "}
<CustomLoader />{" "}
</Box>
)}
{errorMsg && (
<Box
</Box>
</Box>
<Box
sx={{
padding: '8px 16px 8px 16px',
}}
>
<Typography
sx={{
fontSize: '12px',
color: 'white',
}}
>
Created by {decodeIfEncoded(owner)}
</Typography>
<Typography
sx={{
fontSize: '12px',
}}
>
{encryptionType === 'private'
? 'ENCRYPTED'
: encryptionType === 'group'
? 'GROUP ENCRYPTED'
: 'Not encrypted'}
</Typography>
</Box>
<Divider sx={{ borderColor: 'rgb(255 255 255 / 10%)' }} />
<Box
sx={{
display: 'flex',
flexDirection: 'column',
width: '100%',
alignItems: 'center',
}}
>
{isLoadingParent && isOpen && (
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
}}
>
{' '}
<CustomLoader />{' '}
</Box>
)}
{errorMsg && (
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
}}
>
{' '}
<Typography
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
fontSize: '14px',
color: 'var(--danger)',
}}
>
{" "}
{errorMsg}
</Typography>{' '}
</Box>
)}
</Box>
<Box>
<CardContent>
{resourceData?.fileName && (
<>
<Typography
sx={{
fontSize: "14px",
color: "var(--danger)",
fontSize: '14px',
}}
>
{errorMsg}
</Typography>{" "}
</Box>
{resourceData?.fileName}
</Typography>
<Spacer height="10px" />
</>
)}
</Box>
<Box>
<CardContent>
{resourceData?.fileName && (
<ButtonBase
sx={{
width: '90%',
maxWidth: '400px',
}}
onClick={() => {
if (resourceDetails?.status?.status === 'READY') {
if (encryptionType) {
saveToDiskEncrypted();
return;
}
saveToDisk();
return;
}
downloadResource(resourceData);
}}
>
<FileAttachmentContainer>
<Typography>
{resourceDetails?.status?.status === 'DOWNLOADED'
? 'BUILDING'
: resourceDetails?.status?.status}
</Typography>
{!resourceDetails && (
<>
<Typography sx={{
fontSize: '14px'
}}>{resourceData?.fileName}</Typography>
<Spacer height="10px" />
<DownloadIcon />
<FileAttachmentFont>Download File</FileAttachmentFont>
</>
)}
<ButtonBase sx={{
width: '90%',
maxWidth: '400px'
}} onClick={()=> {
if(resourceDetails?.status?.status === 'READY'){
if(encryptionType){
saveToDiskEncrypted()
return
}
saveToDisk()
return
}
downloadResource(resourceData)
}}>
<FileAttachmentContainer >
<Typography>{resourceDetails?.status?.status === 'DOWNLOADED' ? 'BUILDING' : resourceDetails?.status?.status}</Typography>
{!resourceDetails && (
<>
<DownloadIcon />
<FileAttachmentFont>Download File</FileAttachmentFont>
</>
)}
{resourceDetails && resourceDetails?.status?.status !== 'READY' && resourceDetails?.status?.status !== 'FAILED_TO_DOWNLOAD' && (
<>
<CircularProgress sx={{
color: 'white'
}} size={20} />
<FileAttachmentFont>Downloading: {resourceDetails?.status?.percentLoaded || '0'}%</FileAttachmentFont>
</>
)}
{resourceDetails && resourceDetails?.status?.status === 'READY' && (
<>
<SaveIcon />
<FileAttachmentFont>Save to Disk</FileAttachmentFont>
</>
)}
</FileAttachmentContainer>
</ButtonBase>
</CardContent>
</Box>
</Card>
);
};
{resourceDetails &&
resourceDetails?.status?.status !== 'READY' &&
resourceDetails?.status?.status !== 'FAILED_TO_DOWNLOAD' && (
<>
<CircularProgress
sx={{
color: 'white',
}}
size={20}
/>
<FileAttachmentFont>
Downloading:{' '}
{resourceDetails?.status?.percentLoaded || '0'}%
</FileAttachmentFont>
</>
)}
{resourceDetails &&
resourceDetails?.status?.status === 'READY' && (
<>
<SaveIcon />
<FileAttachmentFont>Save to Disk</FileAttachmentFont>
</>
)}
</FileAttachmentContainer>
</ButtonBase>
</CardContent>
</Box>
</Card>
);
};

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

@ -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 (
<Card
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 (
<Card
sx={{
backgroundColor: '#1F2023',
height: height,
transition: 'height 0.6s ease-in-out',
}}
>
<Box
sx={{
backgroundColor: "#1F2023",
height: height,
transition: "height 0.6s ease-in-out",
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '16px 16px 0px 16px',
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "16px 16px 0px 16px",
display: 'flex',
alignItems: 'center',
gap: '10px',
}}
>
<Box
<ImageIcon
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
color: 'white',
}}
>
<ImageIcon
/>
<Typography>IMAGE embed</Typography>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: '10px',
}}
>
<ButtonBase>
<RefreshIcon
onClick={refresh}
sx={{
color: "white",
fontSize: '24px',
color: 'white',
}}
/>
<Typography>IMAGE embed</Typography>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
}}
>
</ButtonBase>
{external && (
<ButtonBase>
<RefreshIcon
onClick={refresh}
<OpenInNewIcon
onClick={openExternal}
sx={{
fontSize: "24px",
color: "white",
fontSize: '24px',
color: 'white',
}}
/>
</ButtonBase>
{external && (
<ButtonBase>
<OpenInNewIcon
onClick={openExternal}
sx={{
fontSize: "24px",
color: "white",
}}
/>
</ButtonBase>
)}
)}
</Box>
</Box>
<Box
sx={{
padding: '8px 16px 8px 16px',
}}
>
<Typography
sx={{
fontSize: '12px',
color: 'white',
}}
>
Created by {decodeIfEncoded(owner)}
</Typography>
<Typography
sx={{
fontSize: '12px',
}}
>
{encryptionType === 'private'
? 'ENCRYPTED'
: encryptionType === 'group'
? 'GROUP ENCRYPTED'
: 'Not encrypted'}
</Typography>
</Box>
<Divider sx={{ borderColor: 'rgb(255 255 255 / 10%)' }} />
<Box
sx={{
display: 'flex',
flexDirection: 'column',
width: '100%',
alignItems: 'center',
}}
>
{isLoadingParent && isOpen && (
<Box
sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
}}
>
{' '}
<CustomLoader />{' '}
</Box>
</Box>
<Box
sx={{
padding: "8px 16px 8px 16px",
}}
>
<Typography
)}
{errorMsg && (
<Box
sx={{
fontSize: "12px",
color: "white",
width: '100%',
display: 'flex',
justifyContent: 'center',
}}
>
Created by {decodeIfEncoded(owner)}
</Typography>
<Typography
sx={{
fontSize: "12px",
color: "cadetblue",
}}
>
{encryptionType === 'private' ? "ENCRYPTED" : encryptionType === 'group' ? 'GROUP ENCRYPTED' : "Not encrypted"}
</Typography>
</Box>
<Divider sx={{ borderColor: "rgb(255 255 255 / 10%)" }} />
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
alignItems: "center",
}}
>
{isLoadingParent && isOpen && (
<Box
{' '}
<Typography
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
fontSize: '14px',
color: 'var(--danger)',
}}
>
{" "}
<CustomLoader />{" "}
</Box>
)}
{errorMsg && (
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
}}
>
{" "}
<Typography
sx={{
fontSize: "14px",
color: "var(--danger)",
}}
>
{errorMsg}
</Typography>{" "}
</Box>
)}
</Box>
<Box>
<CardContent>
<ImageViewer src={image} />
</CardContent>
</Box>
</Card>
);
};
{errorMsg}
</Typography>{' '}
</Box>
)}
</Box>
export function ImageViewer({ src, alt = "" }) {
const [isFullscreen, setIsFullscreen] = useState(false);
const handleOpenFullscreen = () => setIsFullscreen(true);
const handleCloseFullscreen = () => setIsFullscreen(false);
return (
<>
{/* Image in container */}
<Box>
<CardContent>
<ImageViewer src={image} />
</CardContent>
</Box>
</Card>
);
};
export function ImageViewer({ src, alt = '' }) {
const [isFullscreen, setIsFullscreen] = useState(false);
const handleOpenFullscreen = () => setIsFullscreen(true);
const handleCloseFullscreen = () => setIsFullscreen(false);
return (
<>
{/* Image in container */}
<Box
sx={{
maxWidth: '100%', // Prevent horizontal overflow
display: 'flex',
justifyContent: 'center',
cursor: 'pointer',
}}
onClick={handleOpenFullscreen}
>
<img
src={src}
alt={alt}
style={{
maxWidth: '100%',
maxHeight: '450px', // Adjust max height for small containers
objectFit: 'contain', // Preserve aspect ratio
}}
/>
</Box>
{/* Fullscreen Viewer */}
<Dialog
open={isFullscreen}
onClose={handleCloseFullscreen}
maxWidth="lg"
fullWidth
fullScreen
sx={{
'& .MuiDialog-paper': {
margin: 0,
maxWidth: '100%',
width: '100%',
height: '100vh',
overflow: 'hidden', // Prevent scrollbars
},
}}
>
<Box
sx={{
maxWidth: "100%", // Prevent horizontal overflow
display: "flex",
justifyContent: "center",
cursor: "pointer",
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000', // Optional: dark background for fullscreen mode
}}
onClick={handleOpenFullscreen}
>
{/* Close Button */}
<IconButton
onClick={handleCloseFullscreen}
sx={{
position: 'absolute',
top: 8,
right: 8,
zIndex: 10,
color: 'white',
}}
>
<CloseIcon />
</IconButton>
{/* Fullscreen Image */}
<img
src={src}
alt={alt}
style={{
maxWidth: "100%",
maxHeight: "450px", // Adjust max height for small containers
objectFit: "contain", // Preserve aspect ratio
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain', // Preserve aspect ratio
}}
/>
</Box>
{/* Fullscreen Viewer */}
<Dialog
open={isFullscreen}
onClose={handleCloseFullscreen}
maxWidth="lg"
fullWidth
fullScreen
sx={{
"& .MuiDialog-paper": {
margin: 0,
maxWidth: "100%",
width: "100%",
height: "100vh",
overflow: "hidden", // Prevent scrollbars
},
}}
>
<Box
sx={{
position: "relative",
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#000", // Optional: dark background for fullscreen mode
}}
>
{/* Close Button */}
<IconButton
onClick={handleCloseFullscreen}
sx={{
position: "absolute",
top: 8,
right: 8,
zIndex: 10,
color: "white",
}}
>
<CloseIcon />
</IconButton>
{/* Fullscreen Image */}
<img
src={src}
alt={alt}
style={{
maxWidth: "100%",
maxHeight: "100%",
objectFit: "contain", // Preserve aspect ratio
}}
/>
</Box>
</Dialog>
</>
);
}
</Dialog>
</>
);
}

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

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

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

@ -687,7 +687,6 @@ export const ListOfGroupPromotions = () => {
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}

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

@ -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: {

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

@ -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: {

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