From 69852b8a0581be424982b03aeae9f4df0493c0db Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Mon, 29 May 2023 09:40:00 -0400
Subject: [PATCH] Move follow button + always show label

---
 packages/client/src/pages/user/home.vue | 68 ++++++++++---------------
 packages/client/src/style.scss          |  5 ++
 2 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 5de9b28d67..277d5f5ef9 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -134,20 +134,19 @@
 						</div>
 						<div class="follow-container">
 							<div class="actions">
-								<MkFollowButton
-									:user="user"
-									@refresh="emit('refresh')"
-									:inline="true"
-									:transparent="false"
-									:full="!narrow"
-									class="koudoku"
-								/>
 								<button class="menu _button" @click="menu">
 									<i
 										class="ph-dots-three-outline ph-bold ph-lg"
 									></i>
 								</button>
-								<!-- <MkFollowButton v-else-if="$i == null" :user="user" :remote="true" :inline="true" :transparent="false" :full="true" class="koudoku"/> -->
+								<MkFollowButton
+									:user="user"
+									@refresh="emit('refresh')"
+									:inline="true"
+									:transparent="false"
+									:full="true"
+									class="koudoku"
+								/>
 							</div>
 						</div>
 						<div class="description">
@@ -490,29 +489,6 @@ onUnmounted(() => {
 						border-radius: 6px;
 					}
 
-					> .actions {
-						position: absolute;
-						top: 12px;
-						right: 12px;
-						padding: 8px;
-						border-radius: 24px;
-
-						> .menu {
-							vertical-align: bottom;
-							height: 31px;
-							width: 31px;
-							color: #fff;
-							text-shadow: 0 0 8px var(--shadow);
-							font-size: 16px;
-						}
-
-						> .koudoku {
-							margin-left: 4px;
-							width: 31px;
-							vertical-align: bottom;
-						}
-					}
-
 					> .title {
 						position: absolute;
 						bottom: 0;
@@ -581,22 +557,23 @@ onUnmounted(() => {
 
 					> .actions {
 						position: absolute;
-						top: 12px;
+						top: 6px;
 						right: 12px;
 						padding: 8px;
 						border-radius: 24px;
+						display: flex;
+						justify-content: center;
+						align-items: center;
 
 						> .menu {
-							vertical-align: bottom;
 							height: 31px;
 							width: 31px;
 							color: --fg;
 							font-size: 16px;
 						}
 
-						> .koudoku {
-							margin-left: 4px;
-							vertical-align: bottom;
+						> :deep(.follow-button) {
+							margin-left: 8px;
 						}
 					}
 
@@ -797,6 +774,13 @@ onUnmounted(() => {
 
 				> .title {
 					display: block;
+					border-bottom: 0;
+					padding-bottom: 0;
+					> .bottom {
+						> .username {
+							margin-right: 0;
+						}
+					}
 				}
 
 				> .avatar {
@@ -822,15 +806,19 @@ onUnmounted(() => {
 				}
 
 				> .description {
-					top: -55px;
+					top: 0;
 					position: relative;
 				}
 
 				> .follow-container {
 					overflow: visible !important;
+					display: flex;
+					justify-content: center;
+					height: auto;
+					border-bottom: 1px solid var(--divider);
+					padding-bottom: 5px;
 					> .actions {
-						top: -110px;
-						right: 0px;
+						position: static;
 					}
 				}
 			}
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 4b914c4085..10b5914896 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -212,6 +212,11 @@ hr {
 		opacity: 0.5;
 		cursor: default;
 	}
+
+	> i:only-child {
+		display: block;
+		margin: auto;
+	}
 }
 
 ._buttonPrimary {