From 1301f941665c633c3afdad5fc64a2e4491f9cadf Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 25 Sep 2021 22:13:24 +0900
Subject: [PATCH] wip

---
 src/client/components/signin.vue             |  8 ++++----
 src/client/components/signup.vue             | 18 +++++++++---------
 src/client/components/user-select-dialog.vue |  2 +-
 src/client/pages/api-console.vue             |  2 +-
 src/client/pages/docs.vue                    |  2 +-
 src/client/pages/emojis.category.vue         |  2 +-
 src/client/pages/federation.vue              |  4 ++--
 src/client/pages/my-antennas/editor.vue      |  2 +-
 src/client/style.scss                        | 14 ++++++++++----
 9 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue
index ccd3802fa..d6e1ee8b6 100755
--- a/src/client/components/signin.vue
+++ b/src/client/components/signin.vue
@@ -1,17 +1,17 @@
 <template>
 <form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
-	<div class="auth _section">
+	<div class="auth _section _formRoot">
 		<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 		<div class="normal-signin" v-if="!totpLogin">
-			<MkInput v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange" data-cy-signin-username>
+			<MkInput class="_formBlock" v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange" data-cy-signin-username>
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
 			</MkInput>
-			<MkInput v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required data-cy-signin-password>
+			<MkInput class="_formBlock" v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required data-cy-signin-password>
 				<template #prefix><i class="fas fa-lock"></i></template>
 				<template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template>
 			</MkInput>
-			<MkButton type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
+			<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
 		</div>
 		<div class="2fa-signin" v-if="totpLogin" :class="{ securityKeys: user && user.securityKeys }">
 			<div v-if="user && user.securityKeys" class="twofa-group tap-group">
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index 87b199163..5d56cbdff 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -1,11 +1,11 @@
 <template>
-<form class="qlvuhzng" @submit.prevent="onSubmit" :autocomplete="Math.random()">
+<form class="qlvuhzng _formRoot" @submit.prevent="onSubmit" :autocomplete="Math.random()">
 	<template v-if="meta">
-		<MkInput class="_inputNoTopMargin" v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
+		<MkInput class="_formBlock" v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
 			<template #label>{{ $ts.invitationCode }}</template>
 			<template #prefix><i class="fas fa-key"></i></template>
 		</MkInput>
-		<MkInput class="_inputNoTopMargin" v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username>
+		<MkInput class="_formBlock" v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username>
 			<template #label>{{ $ts.username }} <div class="_button _help" v-tooltip:dialog="$ts.usernameInfo"><i class="far fa-question-circle"></i></div></template>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
@@ -19,7 +19,7 @@
 				<span v-if="usernameState == 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
 			</template>
 		</MkInput>
-		<MkInput v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword" data-cy-signup-password>
+		<MkInput class="_formBlock" v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword" data-cy-signup-password>
 			<template #label>{{ $ts.password }}</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #caption>
@@ -28,7 +28,7 @@
 				<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span>
 			</template>
 		</MkInput>
-		<MkInput v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype" data-cy-signup-password-retype>
+		<MkInput class="_formBlock" v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype" data-cy-signup-password-retype>
 			<template #label>{{ $ts.password }} ({{ $ts.retype }})</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #caption>
@@ -36,7 +36,7 @@
 				<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
 			</template>
 		</MkInput>
-		<label v-if="meta.tosUrl" class="tou">
+		<label v-if="meta.tosUrl" class="_formBlock tou">
 			<input type="checkbox" v-model="ToSAgreement">
 			<I18n :src="$ts.agreeTo">
 				<template #0>
@@ -44,9 +44,9 @@
 				</template>
 			</I18n>
 		</label>
-		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
-		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="recaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
-		<MkButton type="submit" :disabled="shouldDisableSubmitting" primary data-cy-signup-submit>{{ $ts.start }}</MkButton>
+		<captcha v-if="meta.enableHcaptcha" class="_formBlock captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
+		<captcha v-if="meta.enableRecaptcha" class="_formBlock captcha" provider="recaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
+		<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" primary data-cy-signup-submit>{{ $ts.start }}</MkButton>
 	</template>
 </form>
 </template>
diff --git a/src/client/components/user-select-dialog.vue b/src/client/components/user-select-dialog.vue
index 64cf0fc8b..0f3ee2a12 100644
--- a/src/client/components/user-select-dialog.vue
+++ b/src/client/components/user-select-dialog.vue
@@ -10,7 +10,7 @@
 	<template #header>{{ $ts.selectUser }}</template>
 	<div class="tbhwbxda _monolithic_">
 		<div class="_section">
-			<div class="_inputSplit _inputNoTopMargin _inputNoBottomMargin">
+			<div class="_inputSplit">
 				<MkInput v-model="username" class="input" @update:modelValue="search" ref="username">
 					<template #label>{{ $ts.username }}</template>
 					<template #prefix>@</template>
diff --git a/src/client/pages/api-console.vue b/src/client/pages/api-console.vue
index 8e017f919..9aa7d4ea4 100644
--- a/src/client/pages/api-console.vue
+++ b/src/client/pages/api-console.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="_root">
 	<div class="_block" style="padding: 24px;">
-		<MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()" class="_inputNoTopMargin">
+		<MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()" class="">
 			<template #label>Endpoint</template>
 		</MkInput>
 		<MkTextarea v-model="body" code>
diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
index e46954f7e..629dc2be5 100644
--- a/src/client/pages/docs.vue
+++ b/src/client/pages/docs.vue
@@ -2,7 +2,7 @@
 <div class="vtaihdtm">
 	<div class="body">
 		<div class="search">
-			<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
+			<MkInput v-model="query" :debounce="true" type="search" class="" :placeholder="$ts.search">
 				<template #prefix><i class="fas fa-search"></i></template>
 			</MkInput>
 		</div>
diff --git a/src/client/pages/emojis.category.vue b/src/client/pages/emojis.category.vue
index 7be2f9dc3..4258fc2ea 100644
--- a/src/client/pages/emojis.category.vue
+++ b/src/client/pages/emojis.category.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="driuhtrh">
 	<div class="query">
-		<MkInput v-model="q" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
+		<MkInput v-model="q" class="" :placeholder="$ts.search">
 			<template #prefix><i class="fas fa-search"></i></template>
 		</MkInput>
 
diff --git a/src/client/pages/federation.vue b/src/client/pages/federation.vue
index c9eb49fdf..aac94e00a 100644
--- a/src/client/pages/federation.vue
+++ b/src/client/pages/federation.vue
@@ -1,11 +1,11 @@
 <template>
 <div class="taeiyria">
 	<div class="query">
-		<MkInput v-model="host" :debounce="true" class="_inputNoTopMargin">
+		<MkInput v-model="host" :debounce="true" class="">
 			<template #prefix><i class="fas fa-search"></i></template>
 			<template #label>{{ $ts.host }}</template>
 		</MkInput>
-		<div class="_inputSplit _inputNoBottomMargin">
+		<div class="_inputSplit">
 			<MkSelect v-model="state">
 				<template #label>{{ $ts.state }}</template>
 				<option value="all">{{ $ts.all }}</option>
diff --git a/src/client/pages/my-antennas/editor.vue b/src/client/pages/my-antennas/editor.vue
index 13a9d5d75..972a4e024 100644
--- a/src/client/pages/my-antennas/editor.vue
+++ b/src/client/pages/my-antennas/editor.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="shaynizk">
 	<div class="form">
-		<MkInput v-model="name" class="_inputNoTopMargin">
+		<MkInput v-model="name" class="">
 			<template #label>{{ $ts.name }}</template>
 		</MkInput>
 		<MkSelect v-model="src">
diff --git a/src/client/style.scss b/src/client/style.scss
index 0318013f6..5b55ab8ca 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -425,12 +425,18 @@ hr {
 	}
 }
 
-._inputNoTopMargin {
-	margin-top: 0 !important;
+._formBlock {
+	margin: 20px 0;
 }
 
-._inputNoBottomMargin {
-	margin-bottom: 0 !important;
+._formRoot {
+	> ._formBlock:first-child {
+		margin-top: 0;
+	}
+
+	> ._formBlock:last-child {
+		margin-bottom: 0;
+	}
 }
 
 ._table {