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

public/loading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 139.636 139.636"><g transform="translate(57.818 57.818)"><path d="M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1zm0 19a8 8 0 1 1 8-8 8 8 0 0 1-8 8z" opacity=".25"/><path d="M10.14 1.16a11 11 0 0 0-9 8.92A1.59 1.59 0 0 0 2.46 12a1.52 1.52 0 0 0 1.65-1.3 8 8 0 0 1 6.66-6.61A1.42 1.42 0 0 0 12 2.69h0a1.57 1.57 0 0 0-1.86-1.53z"><animateTransform attributeName="transform" dur="2s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g></svg>

public/missing.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64"
+   height="63.999996"
+   viewBox="0 0 16.933332 16.933332"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       d="m 5.1060909,6.0241817 c -0.137,0.357 -0.037,0.541 0.324,0.664 l 1.196,0.44299 c 0.374,0.123 0.499,0.049 0.673,-0.33199 0.324,-0.714 0.62299,-1.046 1.28399,-1.046 0.586,0 0.86,0.295 0.86,0.701 0,0.81199 -0.685,0.98399 -1.309,1.36599 -0.536,0.32 -1.04699,0.812 -1.04699,1.98099 0,0.3810003 0.137,0.4920003 0.51099,0.4920003 h 1.122 c 0.374,0 0.511,-0.111 0.511,-0.4920003 0,-0.29499 0.187,-0.49199 0.461,-0.67699 0.7479901,-0.504 2.1939901,-0.898 2.1939901,-2.69399 0,-1.501 -1.209,-2.559 -3.2899901,-2.559 -1.93199,0 -2.96599,0.873 -3.48999,2.153 z m 3.38999,4.6869803 h -0.623 c -0.74799,0 -0.98499,0.234 -0.98499,0.96 v 0.431 c 0,0.72599 0.237,0.95999 0.98499,0.95999 h 0.623 c 0.735,0 0.972,-0.234 0.972,-0.95999 v -0.431 c 0,-0.726 -0.237,-0.96 -0.972,-0.96 z"
+       fill="#ff8904"
+       paint-order="stroke fill markers"
+       id="path6"
+       style="stroke-width:0.999996" />
+  </g>
+</svg>

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">