fix styling on release notes modal

This commit is contained in:
jeffvli
2025-12-04 01:45:34 -08:00
parent 376c09d1ea
commit 424c269c22
2 changed files with 5 additions and 104 deletions
@@ -1,86 +0,0 @@
.markdown-content {
color: var(--mantine-color-text);
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
margin-top: var(--mantine-spacing-md);
margin-bottom: var(--mantine-spacing-xs);
font-weight: 600;
line-height: 1.25;
}
.markdown-content h1 {
font-size: 2em;
}
.markdown-content h2 {
font-size: 1.5em;
}
.markdown-content h3 {
font-size: 1.25em;
}
.markdown-content p {
margin-top: 0;
margin-bottom: var(--mantine-spacing-sm);
}
.markdown-content ul,
.markdown-content ol {
padding-left: var(--mantine-spacing-xl);
margin-top: 0;
margin-bottom: var(--mantine-spacing-sm);
}
.markdown-content li {
margin-bottom: var(--mantine-spacing-xs);
}
.markdown-content code {
padding: 2px 6px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
background-color: var(--mantine-color-dark-6);
border-radius: var(--mantine-radius-sm);
}
.markdown-content pre {
padding: var(--mantine-spacing-md);
margin-top: var(--mantine-spacing-md);
margin-bottom: var(--mantine-spacing-md);
overflow-x: auto;
background-color: var(--mantine-color-dark-6);
border-radius: var(--mantine-radius-md);
}
.markdown-content pre code {
padding: 0;
background-color: transparent;
}
.markdown-content blockquote {
padding-left: var(--mantine-spacing-md);
margin-top: var(--mantine-spacing-md);
margin-bottom: var(--mantine-spacing-md);
border-left: 3px solid var(--mantine-color-gray-6);
}
.markdown-content a {
color: var(--mantine-color-blue-6);
text-decoration: none;
}
.markdown-content a:hover {
text-decoration: underline;
}
.markdown-content img {
max-width: 100%;
border-radius: var(--mantine-radius-md);
}
+5 -18
View File
@@ -6,7 +6,6 @@ import { useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import packageJson from '../../package.json';
import styles from './release-notes-modal.module.css';
import { Button } from '/@/shared/components/button/button';
import { Center } from '/@/shared/components/center/center';
@@ -96,10 +95,7 @@ const ReleaseNotesContent = ({ onDismiss, version }: ReleaseNotesContentProps) =
if (isLoading || isConverting) {
return (
<Center h={400}>
<Stack align="center" gap="md">
<Spinner />
<Text size="sm">{t('common.loading', { postProcess: 'sentenceCase' })}</Text>
</Stack>
<Spinner />
</Center>
);
}
@@ -108,9 +104,7 @@ const ReleaseNotesContent = ({ onDismiss, version }: ReleaseNotesContentProps) =
return (
<Stack gap="md">
<Text>{t('common.newVersion', { postProcess: 'sentenceCase', version })}</Text>
<Text c="dimmed" size="sm">
{t('error.genericError', { postProcess: 'sentenceCase' })}
</Text>
<Text size="sm">{t('error.genericError', { postProcess: 'sentenceCase' })}</Text>
<Group justify="flex-end">
<Button
component="a"
@@ -134,13 +128,10 @@ const ReleaseNotesContent = ({ onDismiss, version }: ReleaseNotesContentProps) =
<Stack gap="md">
<ScrollArea
style={{
height: '500px',
height: '400px',
}}
>
<div
className={styles.markdownContent}
dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
/>
<div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
</ScrollArea>
<Group justify="flex-end">
<Button
@@ -176,12 +167,8 @@ export const ReleaseNotesModal = () => {
if (value !== version) {
openModal({
children: <ReleaseNotesContent onDismiss={handleDismiss} version={version} />,
onClose: handleDismiss,
size: 'xl',
styles: {
body: {
padding: 'var(--mantine-spacing-xl)',
},
},
title: t('common.newVersion', {
postProcess: 'sentenceCase',
version,