From a194aaaa3583ba336c1f1672e86f6831397543a1 Mon Sep 17 00:00:00 2001
From: alemi <me@alemi.dev>
Date: Thu, 23 May 2024 15:07:59 +0200
Subject: [PATCH] fix(web): avatar css, centered devtools link

---
 web/index.html             | 16 ++++++++--------
 web/src/components/user.rs |  4 ++--
 web/src/page/config.rs     |  2 +-
 web/src/page/debug.rs      |  2 +-
 web/src/page/user.rs       |  2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/web/index.html b/web/index.html
index 528ecdc2..b4d81ec0 100644
--- a/web/index.html
+++ b/web/index.html
@@ -162,7 +162,7 @@
 		img {
 			max-width: 100%;
 		}
-		img.avatar-circle {
+		img.avatar {
 			display: inline;
 			border-radius: 50%;
 		}
@@ -170,14 +170,14 @@
 			background-color: var(--background);
 			border: .3em solid var(--accent);
 		}
-		img.avatar-inline {
-			display: inline;
+		img.inline {
 			height: .75em;
-			border-radius: 50%;
 		}
-		img.inline-avatar {
-			height: 2em;
-			width: 2em;
+		img.avatar-actor {
+			min-height: 2em;
+			max-height: 2em;
+			min-width: 2em;
+			max-width: 2em;
 		}
 		.box {
 			border: 3px solid var(--accent);
@@ -309,7 +309,7 @@
 				var(--background) 1em
 			);
 		}
-		.loader {
+		.spinner {
 			animation: spin 1s linear infinite;
 		}
 		span.dots {
diff --git a/web/src/components/user.rs b/web/src/components/user.rs
index 0c11d4ba..c99d1fbd 100644
--- a/web/src/components/user.rs
+++ b/web/src/components/user.rs
@@ -11,7 +11,7 @@ pub fn ActorStrip(object: crate::Object) -> impl IntoView {
 	let avatar = object.icon().get().map(|x| x.url().id().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
 	view! {
 		<a href={Uri::web(U::User, &actor_id)} class="clean hover">
-			<img src={avatar} class="avatar-inline mr-s" /><b>{username}</b><small>@{domain}</small>
+			<img src={avatar} class="avatar inline mr-s" /><b>{username}</b><small>@{domain}</small>
 		</a>
 	}
 }
@@ -33,7 +33,7 @@ pub fn ActorBanner(object: crate::Object) -> impl IntoView {
 				<div>
 					<table class="align" >
 					<tr>
-						<td rowspan="2" ><a href={uri.clone()} ><img class="avatar-circle inline-avatar" src={avatar_url} /></a></td>
+						<td rowspan="2" ><a href={uri.clone()} ><img class="avatar avatar-actor" src={avatar_url} /></a></td>
 						<td><b>{display_name}</b></td>
 					</tr>
 					<tr>
diff --git a/web/src/page/config.rs b/web/src/page/config.rs
index 9a12b577..7126a196 100644
--- a/web/src/page/config.rs
+++ b/web/src/page/config.rs
@@ -91,7 +91,7 @@ pub fn ConfigPage(setter: WriteSignal<crate::Config>) -> impl IntoView {
 					<li><span title="objects without a related activity to display"><input type="checkbox" prop:checked=get_cfg!(filter orphans) on:input=set_cfg!(filter orphans) />" orphans"</span></li>
 			</ul>
 			<hr />
-			<p><a href="/web/config/dev" title="access the devtools page">devtools</a></p>
+			<p class="center"><a href="/web/config/dev" title="access the devtools page">devtools</a></p>
 		</div>
 	}
 }
diff --git a/web/src/page/debug.rs b/web/src/page/debug.rs
index d10c2d74..d80a6a61 100644
--- a/web/src/page/debug.rs
+++ b/web/src/page/debug.rs
@@ -56,7 +56,7 @@ pub fn DebugPage() -> impl IntoView {
 							</td>
 							<td>
 								<input type="checkbox" title="load from local cache" value="cached"
-									class:loader=loading
+									class:spinner=loading
 									prop:checked=cached
 									on:input=move |ev| set_cached.set(event_target_checked(&ev))
 								/>
diff --git a/web/src/page/user.rs b/web/src/page/user.rs
index 2ec78bdc..cd5ffde8 100644
--- a/web/src/page/user.rs
+++ b/web/src/page/user.rs
@@ -104,7 +104,7 @@ pub fn UserPage(tl: Timeline) -> impl IntoView {
 										<table class="pl-2 pr-2 align w-100" style="table-layout: fixed">
 											<tr>
 												<td rowspan=4 style="width: 8em">
-													<img class="avatar-circle avatar-border mr-s" src={avatar_url} style="height: 7em; width: 7em"/>
+													<img class="avatar avatar-border mr-s" src={avatar_url} style="height: 7em; width: 7em"/>
 												</td>
 												<td rowspan=2 class="bottom">
 													<b class="big">{display_name}</b>{actor_type_tag}