move ImageView styles to CSS module

Author: severo

src/components/viewers/ImageView.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react'
+import { useConfig } from '../../hooks/useConfig.js'
 import { FileSource } from '../../lib/sources/types.js'
-import { contentTypes, parseFileSize } from '../../lib/utils.js'
+import { cn, contentTypes, parseFileSize } from '../../lib/utils.js'
+import styles from '../../styles/viewers/ImageView.module.css'
 import { Spinner } from '../Layout.js'
 import ContentHeader from './ContentHeader.js'
 
@@ -20,6 +22,7 @@ interface Content {
 export default function ImageView({ source, setError }: ViewerProps) {
   const [content, setContent] = useState<Content>()
   const [isLoading, setIsLoading] = useState(true)
+  const { customClass } = useConfig()
 
   const { fileName, resolveUrl, requestInit } = source
 
@@ -54,7 +57,7 @@ export default function ImageView({ source, setError }: ViewerProps) {
   return <ContentHeader content={content}>
     {content?.dataUri && <img
       alt={source.sourceId}
-      className='image'
+      className={cn(styles.image, customClass?.imageView)}
       src={content.dataUri} />}
 
     {isLoading && <div className='center'><Spinner /></div>}

src/hooks/useConfig.ts

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

src/styles/app.css

@@ -353,22 +353,6 @@ button.close-button:hover {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* viewers */
-
-/* images */
-.image {
-  display: block;
-  flex: 1;
-  min-width: 0;
-  object-fit: scale-down;
-  background-image:
-    linear-gradient(45deg, #ddd 25%, transparent 25%),
-    linear-gradient(135deg, #ddd 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #ddd 75%),
-    linear-gradient(135deg, transparent 75%, #ddd 75%);
-  background-size: 32px 32px;
-  background-position:0 0, 16px 0, 16px -16px, 0px 16px;
-}
 
 .slideContainer {
   display: flex;

src/styles/viewers/ImageView.module.css

@@ -0,0 +1,12 @@
+.imageView {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  object-fit: scale-down;
+  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%),
+    linear-gradient(135deg, #ddd 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #ddd 75%),
+    linear-gradient(135deg, transparent 75%, #ddd 75%);
+  background-size: 32px 32px;
+  background-position: 0 0, 16px 0, 16px -16px, 0px 16px;
+}