fix(app): fix frontend bugs (#457)

* fix(app): fix frontend bugs

* refactor(app): remove null

* refactor(app): change markdown format to md

* fix(app): fix dark mode colors

apps/app/package.json

@@ -27,7 +27,8 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"rehype-prism-plus": "1.5.0",
-		"tailwind-merge": "1.8.0"
+		"tailwind-merge": "1.8.0",
+		"xss": "1.0.14"
 	},
 	"devDependencies": {
 		"@csstools/postcss-oklab-function": "1.1.1",

apps/app/src/app/(main-layout)/questions/[technology]/[page]/loading.tsx

@@ -1,8 +1,8 @@
 export default function Loading() {
 	return (
 		<div className="mt-8 flex items-center justify-center" aria-label="ładowanie pytań">
-			<div className="h-12 w-12 animate-loader border-4 border-primary">
-				<div className="w-full animate-loader-inner bg-primary" />
+			<div className="h-12 w-12 animate-loader border-4 border-primary dark:border-neutral-200">
+				<div className="w-full animate-loader-inner bg-primary dark:bg-neutral-200" />
 			</div>
 		</div>
 	);

apps/app/src/components/AdminPanel/AdminPanel.tsx

@@ -45,7 +45,7 @@ export const AdminPanel = ({ page, technology, levels, status }: AdminPanelProps
 					/>
 				</>
 			) : (
-				<p className="mt-10 text-2xl font-bold uppercase text-primary">
+				<p className="mt-10 text-2xl font-bold uppercase text-primary dark:text-neutral-200">
 					{status === "accepted"
 						? "Nie znaleziono żadnego pytania"
 						: "Brak pytań do zaakceptowania"}

apps/app/src/components/QuestionItem/QuestionContent.tsx

@@ -2,9 +2,6 @@
 
 import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
 
-import "prismjs";
-
-// import "prismjs/themes/prism-coy.css";
 import "../../styles/prism-one-light.css";
 
 type QuestionContentProps = Readonly<{

apps/app/src/lib/markdown.ts

@@ -1,10 +1,11 @@
 import rehypePrism from "rehype-prism-plus";
+import xss from "xss";
 import { serialize } from "next-mdx-remote/serialize";
 
 export const serializeSource = (source: string) =>
-	serialize(source, {
+	serialize(xss(source, { whiteList: {} }), {
 		mdxOptions: {
-			remarkPlugins: [],
 			rehypePlugins: [rehypePrism],
+			format: "md",
 		},
 	});