feat(app): add QuestionItem dark mode (#400)

* feat(app): add QuestionItem dark mode

* refactor(app): change levels background color

* refactor(app): change vote button background color

Author: AdiPol1359

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

@@ -13,7 +13,7 @@ type QuestionItemProps = Readonly<{
 }>;
 
 export const QuestionItem = ({ title, votes, voted, level, creationDate }: QuestionItemProps) => (
-	<article className="flex h-36 bg-white p-5 text-sm text-gray-500 shadow-md">
+	<article className="flex h-36 bg-white p-5 text-sm text-neutral-500 shadow-md dark:bg-white-dark dark:text-neutral-200">
 		<QuestionVoting votes={votes} voted={voted} />
 		<h3 className="grow">{title}</h3>
 		<div className="ml-4 flex min-w-max flex-col items-end">

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

@@ -1,9 +1,9 @@
 import { twMerge } from "tailwind-merge";
 
 const levelStyles = {
-	junior: "bg-[#499dff]",
-	mid: "bg-[#27be31]",
-	senior: "bg-[#ffb90b]",
+	junior: "bg-junior-main",
+	mid: "bg-mid-main",
+	senior: "bg-senior-main",
 };
 
 export type Level = keyof typeof levelStyles;

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

@@ -12,8 +12,8 @@ export const QuestionVoting = ({ votes, voted }: QuestionVotingProps) => {
 	return (
 		<button
 			className={twMerge(
-				"mr-4 flex h-fit items-center gap-x-1.5 text-gray-300 transition-colors",
-				voted && "text-primary",
+				"mr-4 flex h-fit items-center gap-x-1.5 text-neutral-200 transition-colors",
+				voted && "text-violet-700 dark:text-violet-300",
 			)}
 			type="button"
 			aria-label={`To pytanie ma ${votes} ${votesPluralize(votes)}. Kliknij, aby ${