From 270b842c71380e4a3207511afd229d5debf62aba Mon Sep 17 00:00:00 2001
From: nullnyat <nullnyat@outlook.com>
Date: Thu, 17 Feb 2022 20:05:50 +0900
Subject: [PATCH] =?UTF-8?q?bot=E3=81=AE=E3=81=A8=E3=81=93=E3=82=8D?=
 =?UTF-8?q?=E3=81=84=E3=81=84=E3=81=8B=E3=82=93=E3=81=98=E3=81=AB=E3=81=97?=
 =?UTF-8?q?=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/note-header.vue | 13 +++++--------
 packages/client/src/pages/user/index.vue       | 12 +++++++++---
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/note-header.vue b/packages/client/src/components/note-header.vue
index 56a3a37e7..15e1ce63d 100644
--- a/packages/client/src/components/note-header.vue
+++ b/packages/client/src/components/note-header.vue
@@ -3,7 +3,7 @@
 	<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
 		<MkUserName :user="note.user"/>
 	</MkA>
-	<div v-if="note.user.isBot" class="is-bot">bot</div>
+	<div v-if="note.user.isBot" class="is-bot"><svg xmlns="http://www.w3.org/2000/svg" class="is-bot" fill="#96CCE7" viewBox="0 0 512 512"><title>Hardware Chip</title><path d="M352 128H160a32 32 0 00-32 32v192a32 32 0 0032 32h192a32 32 0 0032-32V160a32 32 0 00-32-32zm0 216a8 8 0 01-8 8H168a8 8 0 01-8-8V168a8 8 0 018-8h176a8 8 0 018 8z" fill="none"/><rect x="160" y="160" width="192" height="192" rx="8" ry="8"/><path d="M464 192a16 16 0 000-32h-16v-32a64.07 64.07 0 00-64-64h-32V48a16 16 0 00-32 0v16h-48V48a16 16 0 00-32 0v16h-48V48a16 16 0 00-32 0v16h-32a64.07 64.07 0 00-64 64v32H48a16 16 0 000 32h16v48H48a16 16 0 000 32h16v48H48a16 16 0 000 32h16v32a64.07 64.07 0 0064 64h32v16a16 16 0 0032 0v-16h48v16a16 16 0 0032 0v-16h48v16a16 16 0 0032 0v-16h32a64.07 64.07 0 0064-64v-32h16a16 16 0 000-32h-16v-48h16a16 16 0 000-32h-16v-48zm-80 160a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h192a32 32 0 0132 32z"/></svg></div>
 	<div class="username"><MkAcct :user="note.user"/></div>
 	<div class="info">
 		<MkA class="created-at" :to="notePage(note)">
@@ -54,13 +54,10 @@ defineProps<{
 	}
 
 	> .is-bot {
-		flex-shrink: 0;
-		align-self: center;
-		margin: 0 .5em 0 0;
-		padding: 1px 6px;
-		font-size: 80%;
-		border: solid 0.5px var(--divider);
-		border-radius: 3px;
+		width: 19px;
+		height: 19px;
+		transform: translateY(4px);
+		margin-right: 0.5em;
 	}
 
 	> .username {
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 2c2e1f239..95a84a240 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -20,9 +20,9 @@
 									<div class="bottom">
 										<span class="username"><MkAcct :user="user" :detail="true" /></span>
 										<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><img style="height: 20px; transform: translateY(4px);" src="https://s3.nca10.net/misskey/cb40a22b-cccf-490d-b224-bffa359a3462.png"/></span>
-								<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><img style="height: 20px; transform: translateY(4px);" src="https://s3.nca10.net/misskey/cb40a22b-cccf-490d-b224-bffa359a3462.png"/></span>
+										<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><img style="height: 20px; transform: translateY(4px);" src="https://s3.nca10.net/misskey/cb40a22b-cccf-490d-b224-bffa359a3462.png"/></span>
 										<span v-if="user.isLocked" :title="$ts.isLocked"><i style="color: #96CCE7;" class="fas fa-lock"></i></span>
-										<span v-if="user.isBot" :title="$ts.isBot"><i style="color: #96CCE7;" class="fas fa-robot"></i></span>
+										<span v-if="user.isBot" :title="$ts.isBot"><svg xmlns="http://www.w3.org/2000/svg" class="is-bot-icon" fill="#96CCE7" viewBox="0 0 512 512"><title>Hardware Chip</title><path d="M352 128H160a32 32 0 00-32 32v192a32 32 0 0032 32h192a32 32 0 0032-32V160a32 32 0 00-32-32zm0 216a8 8 0 01-8 8H168a8 8 0 01-8-8V168a8 8 0 018-8h176a8 8 0 018 8z" fill="none"/><rect x="160" y="160" width="192" height="192" rx="8" ry="8"/><path d="M464 192a16 16 0 000-32h-16v-32a64.07 64.07 0 00-64-64h-32V48a16 16 0 00-32 0v16h-48V48a16 16 0 00-32 0v16h-48V48a16 16 0 00-32 0v16h-32a64.07 64.07 0 00-64 64v32H48a16 16 0 000 32h16v48H48a16 16 0 000 32h16v48H48a16 16 0 000 32h16v32a64.07 64.07 0 0064 64h32v16a16 16 0 0032 0v-16h48v16a16 16 0 0032 0v-16h48v16a16 16 0 0032 0v-16h32a64.07 64.07 0 0064-64v-32h16a16 16 0 000-32h-16v-48h16a16 16 0 000-32h-16v-48zm-80 160a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h192a32 32 0 0132 32z"/></svg></span>
 									</div>
 								</div>
 								<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
@@ -39,7 +39,7 @@
 									<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><img style="height: 20px; transform: translateY(4px);" src="https://s3.nca10.net/misskey/cb40a22b-cccf-490d-b224-bffa359a3462.png"/></span>
 									<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><img style="height: 20px; transform: translateY(4px);" src="https://s3.nca10.net/misskey/cb40a22b-cccf-490d-b224-bffa359a3462.png"/></span>
 									<span v-if="user.isLocked" :title="$ts.isLocked"><i style="color: #96CCE7;" class="fas fa-lock"></i></span>
-									<span v-if="user.isBot" :title="$ts.isBot"><i style="color: #96CCE7;" class="fas fa-robot"></i></span>
+									<span v-if="user.isBot" :title="$ts.isBot"><svg xmlns="http://www.w3.org/2000/svg" class="is-bot-icon" fill="#96CCE7" viewBox="0 0 512 512"><title>Hardware Chip</title><path d="M352 128H160a32 32 0 00-32 32v192a32 32 0 0032 32h192a32 32 0 0032-32V160a32 32 0 00-32-32zm0 216a8 8 0 01-8 8H168a8 8 0 01-8-8V168a8 8 0 018-8h176a8 8 0 018 8z" fill="none"/><rect x="160" y="160" width="192" height="192" rx="8" ry="8"/><path d="M464 192a16 16 0 000-32h-16v-32a64.07 64.07 0 00-64-64h-32V48a16 16 0 00-32 0v16h-48V48a16 16 0 00-32 0v16h-48V48a16 16 0 00-32 0v16h-32a64.07 64.07 0 00-64 64v32H48a16 16 0 000 32h16v48H48a16 16 0 000 32h16v48H48a16 16 0 000 32h16v32a64.07 64.07 0 0064 64h32v16a16 16 0 0032 0v-16h48v16a16 16 0 0032 0v-16h48v16a16 16 0 0032 0v-16h32a64.07 64.07 0 0064-64v-32h16a16 16 0 000-32h-16v-48h16a16 16 0 000-32h-16v-48zm-80 160a32 32 0 01-32 32H160a32 32 0 01-32-32V160a32 32 0 0132-32h192a32 32 0 0132 32z"/></svg></span>
 								</div>
 							</div>
 							<div class="description">
@@ -293,6 +293,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.is-bot-icon {
+	width: 24px;
+	height: 24px;
+	transform: translateY(5px);
+}
+
 .fade-enter-active,
 .fade-leave-active {
 	transition: opacity 0.125s ease;