refactor(web/alert): darker alert dialog content color

it doesn't make sense for the content to be the same color as the title
This commit is contained in:
Luke
2023-09-02 23:28:37 +02:00
parent 2393a64e50
commit ef6a8cad6f

View File

@@ -1,4 +1,4 @@
import { Modal, Button, Stack, Group, useMantineTheme } from '@mantine/core'; import { Modal, Button, Stack, Group, useMantineTheme, createStyles } from '@mantine/core';
import { useState } from 'react'; import { useState } from 'react';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import { useNuiEvent } from '../../hooks/useNuiEvent'; import { useNuiEvent } from '../../hooks/useNuiEvent';
@@ -8,8 +8,15 @@ import remarkGfm from 'remark-gfm';
import type { AlertProps } from '../../typings'; import type { AlertProps } from '../../typings';
import MarkdownComponents from '../../config/MarkdownComponents'; import MarkdownComponents from '../../config/MarkdownComponents';
const useStyles = createStyles((theme) => ({
contentStack: {
color: theme.colors.dark[2],
},
}));
const AlertDialog: React.FC = () => { const AlertDialog: React.FC = () => {
const { locale } = useLocales(); const { locale } = useLocales();
const { classes } = useStyles();
const theme = useMantineTheme(); const theme = useMantineTheme();
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
const [dialogData, setDialogData] = useState<AlertProps>({ const [dialogData, setDialogData] = useState<AlertProps>({
@@ -49,7 +56,7 @@ const AlertDialog: React.FC = () => {
transition="fade" transition="fade"
title={<ReactMarkdown components={MarkdownComponents}>{dialogData.header}</ReactMarkdown>} title={<ReactMarkdown components={MarkdownComponents}>{dialogData.header}</ReactMarkdown>}
> >
<Stack> <Stack className={classes.contentStack}>
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
components={{ components={{