fix: eslint and typescript errors

Author: GoldElysium

.eslintignore

@@ -5,3 +5,4 @@ next.config.js
 commitlint.config.js
 node_modules
 src/types/payload-types.ts
+imageLoader.js

src/app/[lang]/(StaticLayout)/page.tsx

@@ -106,7 +106,7 @@ export default async function Page({ params: { lang } }: IProps) {
 								{t('page.featured.right')}
 							</span>
 						</TextHeader>
-						<div className="grid h-[40rem] gap-6 md:grid-cols-2 lg:h-[24rem] lg:grid-cols-3">
+						<div className="grid h-[40rem] gap-6 md:grid-cols-2 lg:h-96 lg:grid-cols-3">
 							{featuredProjectsHtml.length > 0 ? (
 								featuredProjectsHtml
 							) : (

src/components/ui/DarkModeToggleMobile.tsx

@@ -25,7 +25,7 @@ export default function DarkModeToggleMobile() {
 					className="h-10 w-[4.25rem] rounded-full bg-black/40 px-2"
 					disabled
 				>
-					<Switch.Thumb className="block size-6 rounded-full bg-white/80 transition-transform duration-150 data-[state=checked]:translate-x-[1.75rem] motion-reduce:transition-none" />
+					<Switch.Thumb className="block size-6 rounded-full bg-white/80 transition-transform duration-150 data-[state=checked]:translate-x-7 motion-reduce:transition-none" />
 				</Switch.Root>
 			</div>
 		);
@@ -45,7 +45,7 @@ export default function DarkModeToggleMobile() {
 				}}
 				className="h-10 w-[4.25rem] rounded-full bg-black/40 px-2"
 			>
-				<Switch.Thumb className="block size-6 rounded-full bg-white/80 transition-transform duration-150 data-[state=checked]:translate-x-[1.75rem] motion-reduce:transition-none" />
+				<Switch.Thumb className="block size-6 rounded-full bg-white/80 transition-transform duration-150 data-[state=checked]:translate-x-7 motion-reduce:transition-none" />
 			</Switch.Root>
 		</div>
 	);

src/components/ui/form/ui/blocks/yes-no.tsx

@@ -280,10 +280,6 @@ export default class YesNoBlock extends YesNo implements IFormNodeBlock {
 				)}
 				<YesNoFabric
 					value={this.answerSlot}
-					styles={{
-						yesColor: 'green',
-						noColor: 'red',
-					}}
 					yes={{
 						label: props.markdownifyToString(this.props.altYes || '') || 'Yes',
 						color: this.props.colorYes,

src/components/ui/project/experimental/sana/Links.tsx

@@ -13,7 +13,7 @@ export default function ProjectLinks({ links }: ProjectLinksProps) {
 				{(links ?? []).map((link, index) => (
 					<div
 						key={`project-link-${index}` /* eslint-disable-line react/no-array-index-key */}
-						className="bg-skin-secondary-1 dark:bg-skin-dark-secondary-1 mt-4 flex h-10 w-[6rem] content-end items-center
+						className="bg-skin-secondary-1 dark:bg-skin-dark-secondary-1 mt-4 flex h-10 w-24 content-end items-center
             justify-center rounded-3xl font-bold text-white
             hover:text-opacity-70"
 					>

src/components/ui/project/kroniimap/KroniiMap.tsx

@@ -154,7 +154,7 @@ export default function KroniiMap({ submissions, markerMap }: IProps) {
 						initialSize={8}
 						scaler={4}
 						coordinates={[3, 55]}
-						className="-rotate-12 scale-x-[-1]"
+						className="-rotate-12 -scale-x-100"
 					/>
 					<ScaledMarker
 						img="https://cdn.holoen.fans/hefw/assets/kroniimap/kronie-plane.gif"
@@ -193,7 +193,7 @@ export default function KroniiMap({ submissions, markerMap }: IProps) {
 						initialSize={8}
 						scaler={4}
 						coordinates={[-129, 40]}
-						className="-rotate-12 scale-x-[-1]"
+						className="-rotate-12 -scale-x-100"
 					/>
 					<ScaledMarker
 						img="https://cdn.holoen.fans/hefw/assets/kroniimap/kronie-boat.gif"
@@ -212,7 +212,7 @@ export default function KroniiMap({ submissions, markerMap }: IProps) {
 						initialSize={8}
 						scaler={4}
 						coordinates={[90, 13]}
-						className="-rotate-12 scale-x-[-1]"
+						className="-rotate-12 -scale-x-100"
 					/>
 				</ZoomableGroup>
 			</ComposableMap>
@@ -278,7 +278,7 @@ export default function KroniiMap({ submissions, markerMap }: IProps) {
 									)}
 								</div>
 								<div className="flex items-center gap-4">
-									<div className="h-[36rem] w-[24rem] overflow-y-auto bg-white px-4 py-8 text-black">
+									<div className="h-[36rem] w-96 overflow-y-auto bg-white px-4 py-8 text-black">
 										<div className="mb-2 flex items-center gap-4">
 											{
 												hasPersonalizedKronie && (
@@ -343,7 +343,7 @@ export default function KroniiMap({ submissions, markerMap }: IProps) {
 															key={media.id}
 															src={media.image.url!}
 															alt={`Submission from ${currentSubmission.author}`}
-															className="-mt-2 max-h-[30rem] max-w-[42rem] object-contain"
+															className="-mt-2 max-h-[30rem] max-w-2xl object-contain"
 															loading={index === 0 ? 'eager' : 'lazy'}
 															width={1280}
 															height={780}