Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-25 00:41:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor style

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-19 22:01:15 +02:00
parent 5c93f27fce
commit c5c8d80693
2 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Chat/MessageDisplay.tsx
View File

@ -3,6 +3,7 @@ import DOMPurify from 'dompurify';
import './chat.css'; import './chat.css';
import { executeEvent } from '../../utils/events'; import { executeEvent } from '../../utils/events';
import { Embed } from '../Embeds/Embed'; import { Embed } from '../Embeds/Embed';
import { Box, useTheme } from '@mui/material';
export const extractComponents = (url) => { export const extractComponents = (url) => {
if (!url || !url.startsWith('qortal://')) { if (!url || !url.startsWith('qortal://')) {
@ -75,6 +76,8 @@ const linkify = (text) => {
}; };
export const MessageDisplay = ({ htmlContent, isReply }) => { export const MessageDisplay = ({ htmlContent, isReply }) => {
const theme = useTheme();
const sanitizedContent = useMemo(() => { const sanitizedContent = useMemo(() => {
return DOMPurify.sanitize(linkify(htmlContent), { return DOMPurify.sanitize(linkify(htmlContent), {
ALLOWED_TAGS: [ ALLOWED_TAGS: [
@ -188,13 +191,20 @@ export const MessageDisplay = ({ htmlContent, isReply }) => {
} }
return ( return (
<> <Box
sx={{
'--text-primary': theme.palette.text.primary,
'--text-secondary': theme.palette.text.secondary,
'--background-default': theme.palette.background.default,
'--background-secondary': theme.palette.background.paper,
}}
>
{embedLink && <Embed embedLink={embedData} />} {embedLink && <Embed embedLink={embedData} />}
<div <div
className={`tiptap ${isReply ? 'isReply' : ''}`} className={`tiptap ${isReply ? 'isReply' : ''}`}
dangerouslySetInnerHTML={{ __html: sanitizedContent }} dangerouslySetInnerHTML={{ __html: sanitizedContent }}
onClick={handleClick} onClick={handleClick}
/> />
</> </Box>
); );
}; };

29
src/components/Chat/chat.css
View File

@ -1,6 +1,6 @@
.tiptap { .tiptap {
margin-top: 0; margin-top: 0;
color: theme => theme.palette.text.primary; color: var(--text-primary);
width: 100%; width: 100%;
} }
@ -26,7 +26,7 @@
line-height: 1.1; line-height: 1.1;
margin-top: 2.5rem; margin-top: 2.5rem;
text-wrap: pretty; text-wrap: pretty;
color: theme => theme.palette.text.primary; color: var(--text-primary);
} }
.tiptap h1, .tiptap h1,
@ -55,18 +55,18 @@
/* Code and preformatted text styles */ /* Code and preformatted text styles */
.tiptap code { .tiptap code {
background-color: theme => theme.palette.background.default; background-color: var(--background-default);
border-radius: 0.4rem; border-radius: 0.4rem;
color: theme => theme.palette.text.primary; color: var(--text-primary);
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.25em 0.3em; padding: 0.25em 0.3em;
text-wrap: pretty; text-wrap: pretty;
} }
.tiptap pre { .tiptap pre {
background: theme => theme.palette.background.default; background: var(--background-default);
border-radius: 0.5rem; border-radius: 0.5rem;
color: theme => theme.palette.text.primary; color: var(--text-primary);
font-family: 'JetBrainsMono', monospace; font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0; margin: 1.5rem 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
@ -86,7 +86,7 @@
border-left: 3px solid var(--gray-3); border-left: 3px solid var(--gray-3);
margin: 1.5rem 0; margin: 1.5rem 0;
padding-left: 1rem; padding-left: 1rem;
color: theme => theme.palette.text.primary; color: var(--text-primary);
text-wrap: pretty; text-wrap: pretty;
} }
@ -102,12 +102,12 @@
.tiptap p { .tiptap p {
font-size: 16px; font-size: 16px;
color: theme => theme.palette.text.primary; color: var(--text-primary);
margin: 0px; margin: 0px;
} }
.tiptap p.is-editor-empty:first-child::before { .tiptap p.is-editor-empty:first-child::before {
color: theme => theme.palette.text.primary; color: var(--text-primary);
content: attr(data-placeholder); content: attr(data-placeholder);
float: left; float: left;
height: 0; height: 0;
@ -134,14 +134,14 @@
.tiptap [data-type='mention'] { .tiptap [data-type='mention'] {
box-decoration-break: clone; box-decoration-break: clone;
color: theme => theme.palette.text.secondary; color: var(--text-secondary);
padding: 0.1rem 0.3rem; padding: 0.1rem 0.3rem;
} }
.unread-divider { .unread-divider {
border-bottom: 1px solid white; border-bottom: 1px solid var(--text-primary);
border-radius: 2px; border-radius: 2px;
color: theme => theme.palette.text.primary; color: var(--text-primary);
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 90%; width: 90%;
@ -169,11 +169,10 @@
font-size: 16px; font-size: 16px;
width: 100%; width: 100%;
border: none; border: none;
color: theme => theme.palette.text.primary; color: var(--text-primary);
cursor: pointer;
&:hover, &:hover,
&:hover.is-selected { &:hover.is-selected {
background-color: theme => theme.palette.background.secondary; background-color: var(--background-default);
} }
} }
} }