From 4b0042cf9a623e5ca14364564bb56f2b16197813 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 13 Jun 2023 17:42:00 -0700
Subject: [PATCH] refactor: :lipstick: style punishments

---
 packages/client/src/pages/user/home.vue | 61 +++++++++++++++----------
 1 file changed, 36 insertions(+), 25 deletions(-)

diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index f2a014e94..d02b6f665 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -7,23 +7,6 @@
 			:class="{ wide: !narrow }"
 		>
 			<div class="main">
-				<div v-if="$i?.isModerator || $i?.isAdmin">
-					<div class="punished" v-if="user.isSilenced">
-						<i
-							class="ph-warning ph-bold ph-lg"
-							style="margin-right: 8px; color: var(--warn)"
-						></i>
-						{{ i18n.ts.silenced }}
-					</div>
-					<div class="punished" v-if="user.isSuspended">
-						<i
-							class="ph-warning ph-bold ph-lg"
-							style="margin-right: 8px; color: var(--warn)"
-						></i>
-						{{ i18n.ts.suspended }}
-					</div>
-				</div>
-
 				<div class="profile">
 					<MkMoved
 						v-if="user.movedToUri"
@@ -130,6 +113,25 @@
 									class="followed"
 									>{{ i18n.ts.followsYou }}</span
 								>
+								<div
+									v-if="$i?.isModerator || $i?.isAdmin"
+									class="punishments"
+								>
+									<span
+										class="punished"
+										v-if="user.isSilenced"
+									>
+										<i class="ph-warning ph-bold ph-lg"></i>
+										{{ i18n.ts.silenced }}
+									</span>
+									<span
+										class="punished"
+										v-if="user.isSuspended"
+									>
+										<i class="ph-warning ph-bold ph-lg"></i>
+										{{ i18n.ts.suspended }}
+									</span>
+								</div>
 							</div>
 							<div class="bottom">
 								<span class="username"
@@ -458,14 +460,6 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .ftskorzw {
 	> .main {
-		> .punished {
-			font-size: 0.8em;
-			padding: 10px;
-			color: var(--infoWarnBg);
-			background-color: var(--infoWarnFg);
-			border-radius: 10px;
-		}
-
 		> .profile {
 			> .main {
 				position: relative;
@@ -522,6 +516,23 @@ onUnmounted(() => {
 						border-radius: 6px;
 					}
 
+					> .punishments {
+						display: flex;
+						gap: 1rem;
+						margin-top: 0.5rem;
+
+						> .punished {
+							padding: 10px;
+							color: var(--infoWarnBg);
+							background-color: var(--infoWarnFg);
+							border-radius: 10px;
+
+							> i {
+								margin-right: 4px;
+							}
+						}
+					}
+
 					> .title {
 						position: absolute;
 						bottom: 0;