[frontend/UX] Less focus on follower count

yuriha-chan · Oct 3, 2023 · 0c8d38e · 0c8d38e
1 parent d90021a
commit 0c8d38e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue
@@ -20,13 +20,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<div :class="$style.status">
 		<div :class="$style.statusItem">
-			<p :class="$style.statusItemLabel">{{ i18n.ts.notes }}</p><span :class="$style.statusItemValue">{{ number(user.notesCount) }}</span>
+			<span :class="$style.statusItemLabel">{{ i18n.ts.notes }}</span><span :class="$style.statusItemValue">{{ number(user.notesCount) }}</span>
 		</div>
 		<div v-if="isFfVisibleForMe(user)" :class="$style.statusItem">
-			<p :class="$style.statusItemLabel">{{ i18n.ts.following }}</p><span :class="$style.statusItemValue">{{ number(user.followingCount) }}</span>
+			<span :class="$style.statusItemLabel">{{ i18n.ts.following }}</span><span :class="$style.statusItemValue">{{ number(user.followingCount) }}</span>
 		</div>
 		<div v-if="isFfVisibleForMe(user)" :class="$style.statusItem">
-			<p :class="$style.statusItemLabel">{{ i18n.ts.followers }}</p><span :class="$style.statusItemValue">{{ number(user.followersCount) }}</span>
+			<span :class="$style.statusItemLabel">{{ i18n.ts.followers }}</span><span :class="$style.statusItemValue">{{ number(user.followersCount) }}</span>
 		</div>
 	</div>
 	<MkFollowButton v-if="$i && user.id != $i.id" :class="$style.follow" :user="user" mini/>
@@ -105,7 +105,7 @@ defineProps<{
 
 .description {
 	padding: 16px;
-	font-size: 0.8em;
+	font-size: 1.0em;
 	border-top: solid 0.5px var(--divider);
 }
 
@@ -130,11 +130,13 @@ defineProps<{
 	margin: 0;
 	font-size: 0.7em;
 	color: var(--fg);
+	opacity: 0.8;
+	margin-inline-end: 0.2em;
 }
 
 .statusItemValue {
-	font-size: 1em;
-	color: var(--accent);
+	font-size: 0.9em;
+	opacity: 0.8;
 }
 
 .follow {

diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
@@ -106,15 +106,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 					<div class="status">
 						<MkA :to="userPage(user)">
-							<b>{{ number(user.notesCount) }}</b>
+							<span class="number">{{ number(user.notesCount) }}</span>
 							<span>{{ i18n.ts.notes }}</span>
 						</MkA>
 						<MkA v-if="isFfVisibleForMe(user)" :to="userPage(user, 'following')">
-							<b>{{ number(user.followingCount) }}</b>
+							<span class="number">{{ number(user.followingCount) }}</span>
 							<span>{{ i18n.ts.following }}</span>
 						</MkA>
 						<MkA v-if="isFfVisibleForMe(user)" :to="userPage(user, 'followers')">
-							<b>{{ number(user.followersCount) }}</b>
+							<span class="number">{{ number(user.followersCount) }}</span>
 							<span>{{ i18n.ts.followers }}</span>
 						</MkA>
 					</div>
@@ -551,13 +551,15 @@ onUnmounted(() => {
 							text-decoration: none;
 						}
 
-						> b {
-							display: block;
+						> span.number {
+							font-size: 90%;
 							line-height: 16px;
+							opacity: 0.45;
 						}
 
 						> span {
 							font-size: 70%;
+							opacity: 0.9;
 						}
 					}
 				}