Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-27 21:37:51 +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

221
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,21 +15,20 @@ 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,
@ -41,9 +40,8 @@ export const AttachmentCard = ({
isLoadingParent,
errorMsg,
encryptionType,
selectedGroupId
selectedGroupId,
}) => {
const [isOpen, setIsOpen] = useState(true);
const { downloadResource } = useContext(MyContext);
@ -52,109 +50,106 @@ export const AttachmentCard = ({
const url = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}`;
fetch(url)
.then(response => response.blob())
.then(async blob => {
await saveFileToDiskGeneric(blob, resourceData?.fileName)
.then((response) => response.blob())
.then(async (blob) => {
await saveFileToDiskGeneric(blob, resourceData?.fileName);
})
.catch(error => {
console.error("Error fetching the video:", error);
.catch((error) => {
console.error('Error fetching the video:', error);
});
}
};
const saveToDiskEncrypted = async () => {
let blobUrl
let blobUrl;
try {
const { name, service, identifier, key } = resourceData;
const url = `${getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}?encoding=base64`;
const res = await fetch(url)
const res = await fetch(url);
const data = await res.text();
let decryptedData
let decryptedData;
try {
if (key && encryptionType === 'private') {
decryptedData = await window.sendMessage(
"DECRYPT_DATA_WITH_SHARING_KEY",
'DECRYPT_DATA_WITH_SHARING_KEY',
{
encryptedData: data,
key: decodeURIComponent(key),
}
);
}
if (encryptionType === 'group') {
decryptedData = await window.sendMessage(
"DECRYPT_QORTAL_GROUP_DATA",
'DECRYPT_QORTAL_GROUP_DATA',
{
data64: data,
groupId: selectedGroupId,
}
);
}
} 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");
blobUrl = base64ToBlobUrl(decryptedData, resourceData?.mimeType)
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)
await saveFileToDiskGeneric(blob, resourceData?.fileName);
} catch (error) {
console.error(error)
console.error(error);
} finally {
if (blobUrl) {
URL.revokeObjectURL(blobUrl);
}
}
}
};
return (
<Card
sx={{
backgroundColor: "#1F2023",
height: "250px",
backgroundColor: '#1F2023',
height: '250px',
// height: isOpen ? "auto" : "150px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "16px 16px 0px 16px",
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '16px 16px 0px 16px',
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
display: 'flex',
alignItems: 'center',
gap: '10px',
}}
>
<AttachmentIcon
sx={{
color: "white",
color: 'white',
}}
/>
<Typography>ATTACHMENT embed</Typography>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
display: 'flex',
alignItems: 'center',
gap: '10px',
}}
>
<ButtonBase>
<RefreshIcon
onClick={refresh}
sx={{
fontSize: "24px",
color: "white",
fontSize: '24px',
color: 'white',
}}
/>
</ButtonBase>
@ -163,8 +158,8 @@ export const AttachmentCard = ({
<OpenInNewIcon
onClick={openExternal}
sx={{
fontSize: "24px",
color: "white",
fontSize: '24px',
color: 'white',
}}
/>
</ButtonBase>
@ -173,66 +168,67 @@ export const AttachmentCard = ({
</Box>
<Box
sx={{
padding: "8px 16px 8px 16px",
padding: '8px 16px 8px 16px',
}}
>
<Typography
sx={{
fontSize: "12px",
color: "white",
fontSize: '12px',
color: 'white',
}}
>
Created by {decodeIfEncoded(owner)}
</Typography>
<Typography
sx={{
fontSize: "12px",
color: "cadetblue",
fontSize: '12px',
}}
>
{encryptionType === 'private' ? "ENCRYPTED" : encryptionType === 'group' ? 'GROUP ENCRYPTED' : "Not encrypted"}
{encryptionType === 'private'
? 'ENCRYPTED'
: encryptionType === 'group'
? 'GROUP ENCRYPTED'
: 'Not encrypted'}
</Typography>
</Box>
<Divider sx={{ borderColor: "rgb(255 255 255 / 10%)" }} />
<Divider sx={{ borderColor: 'rgb(255 255 255 / 10%)' }} />
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
alignItems: "center",
display: 'flex',
flexDirection: 'column',
width: '100%',
alignItems: 'center',
}}
>
{isLoadingParent && isOpen && (
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
width: '100%',
display: 'flex',
justifyContent: 'center',
}}
>
{" "}
<CustomLoader />{" "}
{' '}
<CustomLoader />{' '}
</Box>
)}
{errorMsg && (
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "center",
width: '100%',
display: 'flex',
justifyContent: 'center',
}}
>
{" "}
{' '}
<Typography
sx={{
fontSize: "14px",
color: "var(--danger)",
fontSize: '14px',
color: 'var(--danger)',
}}
>
{errorMsg}
</Typography>{" "}
</Typography>{' '}
</Box>
)}
</Box>
@ -241,57 +237,70 @@ export const AttachmentCard = ({
<CardContent>
{resourceData?.fileName && (
<>
<Typography sx={{
fontSize: '14px'
}}>{resourceData?.fileName}</Typography>
<Typography
sx={{
fontSize: '14px',
}}
>
{resourceData?.fileName}
</Typography>
<Spacer height="10px" />
</>
)}
<ButtonBase sx={{
<ButtonBase
sx={{
width: '90%',
maxWidth: '400px'
}} onClick={()=> {
maxWidth: '400px',
}}
onClick={() => {
if (resourceDetails?.status?.status === 'READY') {
if (encryptionType) {
saveToDiskEncrypted()
return
saveToDiskEncrypted();
return;
}
saveToDisk()
return
saveToDisk();
return;
}
downloadResource(resourceData)
}}>
downloadResource(resourceData);
}}
>
<FileAttachmentContainer>
<Typography>{resourceDetails?.status?.status === 'DOWNLOADED' ? 'BUILDING' : resourceDetails?.status?.status}</Typography>
<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' && (
{resourceDetails &&
resourceDetails?.status?.status !== 'READY' &&
resourceDetails?.status?.status !== 'FAILED_TO_DOWNLOAD' && (
<>
<CircularProgress sx={{
color: 'white'
}} size={20} />
<FileAttachmentFont>Downloading: {resourceDetails?.status?.percentLoaded || '0'}%</FileAttachmentFont>
<CircularProgress
sx={{
color: 'white',
}}
size={20}
/>
<FileAttachmentFont>
Downloading:{' '}
{resourceDetails?.status?.percentLoaded || '0'}%
</FileAttachmentFont>
</>
)}
{resourceDetails && resourceDetails?.status?.status === 'READY' && (
{resourceDetails &&
resourceDetails?.status?.status === 'READY' && (
<>
<SaveIcon />
<FileAttachmentFont>Save to Disk</FileAttachmentFont>
</>
)}
</FileAttachmentContainer>
</ButtonBase>
</CardContent>
</Box>
</Card>

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

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

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