feat: replace missing.webp with question mark and style fixes

src/app/profile/[slug]/page.tsx

@@ -48,7 +48,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 		openGraph: {
 			locale: "en_US",
 			type: "profile",
-			images: [user.image ?? "/missing.webp"],
+			images: [user.image ?? "/missing.svg"],
 			siteName: "TomodachiShare",
 			username: user.username,
 			firstName: user.name,
@@ -57,7 +57,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 			card: "summary",
 			title: `${user.name} (@${user.username}) - TomodachiShare`,
 			description: `View ${user.name}'s profile on TomodachiShare. Creator of ${user._count.miis} Miis. Member since ${joinDate}.`,
-			images: [user.image ?? "/missing.webp"],
+			images: [user.image ?? "/missing.svg"],
 			creator: user.username!,
 		},
 		alternates: {
@@ -88,11 +88,11 @@ export default async function ProfilePage({ params }: Props) {
 		<div>
 			<div className="flex gap-4 mb-2">
 				<Image
-					src={user?.image ?? "/missing.webp"}
+					src={user?.image ?? "/missing.svg"}
 					alt="profile picture"
 					width={128}
 					height={128}
-					className="aspect-square rounded-full border-2 border-amber-500 shadow"
+					className="size-32 aspect-square rounded-full bg-white border-2 border-amber-500 shadow"
 				/>
 
 				<div className="flex flex-col w-full relative">

src/app/profile/settings/page.tsx

@@ -27,11 +27,11 @@ export default async function ProfileSettingsPage() {
 		<div>
 			<div className="flex gap-4 mb-2">
 				<Image
-					src={session.user.image ?? "/missing.webp"}
+					src={session.user.image ?? "/missing.svg"}
 					alt="profile picture"
 					width={128}
 					height={128}
-					className="aspect-square rounded-full border-2 border-amber-500 shadow"
+					className="aspect-square rounded-full bg-white border-2 border-amber-500 shadow"
 				/>
 
 				<div className="flex flex-col w-full relative">

src/components/profile-overview.tsx

@@ -9,11 +9,11 @@ export default async function ProfileOverview() {
 		<li title="Your profile">
 			<Link href={`/profile/${session?.user.id}`} className="pill button !gap-2 !p-0 h-full max-w-64">
 				<Image
-					src={session?.user?.image ?? "/missing.webp"}
+					src={session?.user?.image ?? "/missing.svg"}
 					alt="profile picture"
 					width={40}
 					height={40}
-					className="rounded-full aspect-square object-cover h-full outline-2 outline-orange-400"
+					className="rounded-full aspect-square object-cover h-full bg-white outline-2 outline-orange-400"
 				/>
 				<span className="pr-4 overflow-hidden whitespace-nowrap text-ellipsis w-full">{session?.user?.username ?? "unknown"}</span>
 			</Link>

src/components/submit-form/index.tsx

@@ -132,7 +132,11 @@ export default function SubmitForm() {
 			<div className="flex justify-center">
 				<div className="w-[18.75rem] h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
 					<Carousel
-						images={[studioUrl ?? "/missing.webp", generatedQrCodeUrl ?? "/missing.webp", ...files.map((file) => URL.createObjectURL(file))]}
+						images={[
+							studioUrl ?? "/tomodachi-question-face-icon-alt.svg",
+							generatedQrCodeUrl ?? "/loading.svg",
+							...files.map((file) => URL.createObjectURL(file)),
+						]}
 					/>
 
 					<div className="p-4 flex flex-col gap-1 h-full">