move MarkdownView styles to CSS module

Author: severo

src/components/viewers/MarkdownView.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react'
+import { useConfig } from '../../hooks/useConfig.js'
 import type { FileSource } from '../../lib/sources/types.js'
-import { parseFileSize } from '../../lib/utils.js'
+import { cn, parseFileSize } from '../../lib/utils.js'
+import styles from '../../styles/MarkdownView.module.css'
 import { Spinner } from '../Layout.js'
 import Markdown from '../Markdown.js'
 import ContentHeader, { TextContent } from './ContentHeader.js'
@@ -16,6 +18,7 @@ interface ViewerProps {
 export default function MarkdownView({ source, setError }: ViewerProps) {
   const [content, setContent] = useState<TextContent>()
   const [isLoading, setIsLoading] = useState(true)
+  const { customClass } = useConfig()
 
   const { resolveUrl, requestInit } = source
 
@@ -45,7 +48,7 @@ export default function MarkdownView({ source, setError }: ViewerProps) {
   }, [resolveUrl, requestInit, setError])
 
   return <ContentHeader content={content}>
-    <Markdown className='markdown' text={content?.text ?? ''} />
+    <Markdown className={cn(styles.markdownView, customClass?.markdownView)} text={content?.text ?? ''} />
 
     { isLoading && <div className='center'><Spinner /></div> }
   </ContentHeader>

src/hooks/useConfig.ts

@@ -11,6 +11,7 @@ export interface Config {
   customClass?: {
     brand?: string
     highTable?: string
+    markdownView?: string
     sideBar?: string
     textView?: string
     welcome?: string

src/styles/app.css

@@ -369,38 +369,6 @@ button.close-button:hover {
   background-size: 32px 32px;
   background-position:0 0, 16px 0, 16px -16px, 0px 16px;
 }
-/* markdown */
-.markdown {
-  background-color: #222226;
-  color: #ddd;
-  flex: 1;
-  padding: 8px 20px;
-  white-space: pre-wrap;
-  overflow-y: auto;
-}
-.markdown a {
-  color: #cdf;
-}
-.markdown p {
-  margin-block: 1em;
-}
-.markdown pre {
-  background-color: #34343a;
-  border-left: #446 solid 5px;
-  margin: 0;
-  padding: 12px 14px;
-  white-space: pre-wrap;
-}
-.markdown h1 {
-  font-size: 32px;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-.markdown h2 {
-  font-weight: 500;
-  margin-bottom: 8px;
-  margin-top: 16px;
-}
 
 .slideContainer {
   display: flex;

src/styles/viewers/MarkdownView.module.css

@@ -0,0 +1,32 @@
+/* markdownView */
+.markdownView {
+  background-color: #222226;
+  color: #ddd;
+  flex: 1;
+  padding: 8px 20px;
+  white-space: pre-wrap;
+  overflow-y: auto;
+}
+.markdownView a {
+  color: #cdf;
+}
+.markdownView p {
+  margin-block: 1em;
+}
+.markdownView pre {
+  background-color: #34343a;
+  border-left: #446 solid 5px;
+  margin: 0;
+  padding: 12px 14px;
+  white-space: pre-wrap;
+}
+.markdownView h1 {
+  font-size: 32px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.markdownView h2 {
+  font-weight: 500;
+  margin-bottom: 8px;
+  margin-top: 16px;
+}