From 953e46a0429a3e604b35b261e91c18181aab83f8 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Fri, 25 Apr 2025 23:00:35 +0100
Subject: [PATCH] feat: replace missing.webp with question mark and style fixes

---
 public/loading.svg                   |   1 +
 public/missing.svg                   |  23 +++++++++++++++++++++++
 public/missing.webp                  | Bin 122 -> 0 bytes
 src/app/profile/[slug]/page.tsx      |   8 ++++----
 src/app/profile/settings/page.tsx    |   4 ++--
 src/components/profile-overview.tsx  |   4 ++--
 src/components/submit-form/index.tsx |   6 +++++-
 7 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 public/loading.svg
 create mode 100644 public/missing.svg
 delete mode 100644 public/missing.webp

diff --git a/public/loading.svg b/public/loading.svg
new file mode 100644
index 0000000..ed4aa54
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/public/missing.svg b/public/missing.svg
new file mode 100644
index 0000000..dcc266c
--- /dev/null
+++ b/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>
diff --git a/public/missing.webp b/public/missing.webp
deleted file mode 100644
index 1d623b67b5fa8575045f696abe2c7fdabc09f391..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 122
zcmV-=0EPcjNk&F;00012MM6+kP&iCw0000l|HJ<P4-oS|-18qCh=w8j|Fo!Ti|9Yv
zwr#^akhBkI?wriw|6cq@eEj#<Kk*;`krw~`^-uiAfBeV)?g0MdKmOx?cL4wKAOG>c
cJAnWAkN^1J9l(G5$AA3q4&XojQ!f510DYQ7X#fBK

diff --git a/src/app/profile/[slug]/page.tsx b/src/app/profile/[slug]/page.tsx
index ffe1f76..784a3d1 100644
--- a/src/app/profile/[slug]/page.tsx
+++ b/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">
diff --git a/src/app/profile/settings/page.tsx b/src/app/profile/settings/page.tsx
index a0fb023..603e261 100644
--- a/src/app/profile/settings/page.tsx
+++ b/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">
diff --git a/src/components/profile-overview.tsx b/src/components/profile-overview.tsx
index c43f758..c93f33b 100644
--- a/src/components/profile-overview.tsx
+++ b/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>
diff --git a/src/components/submit-form/index.tsx b/src/components/submit-form/index.tsx
index be94d99..f72d68a 100644
--- a/src/components/submit-form/index.tsx
+++ b/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">