diff options
Diffstat (limited to 'webui')
-rw-r--r-- | webui/src/components/CommentInput/CommentInput.tsx | 2 | ||||
-rw-r--r-- | webui/src/components/Content/BlockQuoteTag.tsx | 21 | ||||
-rw-r--r-- | webui/src/components/Content/ImageTag.tsx | 9 | ||||
-rw-r--r-- | webui/src/components/Content/index.tsx | 10 | ||||
-rw-r--r-- | webui/src/pages/bug/CommentForm.tsx | 8 | ||||
-rw-r--r-- | webui/src/pages/bug/Message.tsx | 3 |
6 files changed, 36 insertions, 17 deletions
diff --git a/webui/src/components/CommentInput/CommentInput.tsx b/webui/src/components/CommentInput/CommentInput.tsx index c574538e..f12ee8d8 100644 --- a/webui/src/components/CommentInput/CommentInput.tsx +++ b/webui/src/components/CommentInput/CommentInput.tsx @@ -5,7 +5,7 @@ import Tabs from '@material-ui/core/Tabs'; import TextField from '@material-ui/core/TextField'; import { makeStyles } from '@material-ui/core/styles'; -import Content from 'src/components/Content'; +import Content from '../Content'; /** * Styles diff --git a/webui/src/components/Content/BlockQuoteTag.tsx b/webui/src/components/Content/BlockQuoteTag.tsx new file mode 100644 index 00000000..18c34d8a --- /dev/null +++ b/webui/src/components/Content/BlockQuoteTag.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme) => ({ + tag: { + color: theme.palette.text.secondary, + borderLeftWidth: '0.5ch', + borderLeftStyle: 'solid', + borderLeftColor: theme.palette.text.secondary, + marginLeft: 0, + paddingLeft: '0.5rem', + }, +})); + +const BlockQuoteTag = (props: React.HTMLProps<HTMLPreElement>) => { + const classes = useStyles(); + return <blockquote className={classes.tag} {...props} />; +}; + +export default BlockQuoteTag; diff --git a/webui/src/components/Content/ImageTag.tsx b/webui/src/components/Content/ImageTag.tsx index 70ee1bc0..29b01da3 100644 --- a/webui/src/components/Content/ImageTag.tsx +++ b/webui/src/components/Content/ImageTag.tsx @@ -14,9 +14,12 @@ const ImageTag = ({ }: React.ImgHTMLAttributes<HTMLImageElement>) => { const classes = useStyles(); return ( - <a href={props.src} target="_blank" rel="noopener noreferrer nofollow"> - <img className={classes.tag} alt={alt} {...props} /> - </a> + <> + <a href={props.src} target="_blank" rel="noopener noreferrer nofollow"> + <img className={classes.tag} alt={alt} {...props} /> + </a> + <br /> + </> ); }; diff --git a/webui/src/components/Content/index.tsx b/webui/src/components/Content/index.tsx index 56e52e1e..75360bb6 100644 --- a/webui/src/components/Content/index.tsx +++ b/webui/src/components/Content/index.tsx @@ -4,23 +4,25 @@ import parse from 'remark-parse'; import remark2react from 'remark-react'; import unified from 'unified'; +import BlockQuoteTag from './BlockQuoteTag'; import ImageTag from './ImageTag'; import PreTag from './PreTag'; type Props = { markdown: string }; const Content: React.FC<Props> = ({ markdown }: Props) => { - const processor = unified() + const content = unified() .use(parse) .use(html) .use(remark2react, { remarkReactComponents: { img: ImageTag, pre: PreTag, + blockquote: BlockQuoteTag, }, - }); + }) + .processSync(markdown).result; - const contents: React.ReactNode = processor.processSync(markdown).contents; - return <>{contents}</>; + return <>{content}</>; }; export default Content; diff --git a/webui/src/pages/bug/CommentForm.tsx b/webui/src/pages/bug/CommentForm.tsx index e70348a6..a8ce4319 100644 --- a/webui/src/pages/bug/CommentForm.tsx +++ b/webui/src/pages/bug/CommentForm.tsx @@ -17,14 +17,6 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({ container: { padding: theme.spacing(0, 2, 2, 2), }, - textarea: {}, - tabContent: { - margin: theme.spacing(2, 0), - }, - preview: { - borderBottom: `solid 3px ${theme.palette.grey['200']}`, - minHeight: '5rem', - }, actions: { display: 'flex', gap: '1em', diff --git a/webui/src/pages/bug/Message.tsx b/webui/src/pages/bug/Message.tsx index 2f4cbc59..39b11ccd 100644 --- a/webui/src/pages/bug/Message.tsx +++ b/webui/src/pages/bug/Message.tsx @@ -57,7 +57,8 @@ const useStyles = makeStyles((theme) => ({ }, body: { ...theme.typography.body2, - padding: '0.5rem', + paddingLeft: theme.spacing(1), + paddingRight: theme.spacing(1), }, headerActions: { color: theme.palette.info.contrastText, |