From aefc8fb7b54c47ac05d0c9d872b10b8177dc5f39 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 6 Jan 2023 09:56:33 +0900
Subject: [PATCH] :art:

---
 packages/frontend/src/init.ts                 |   1 +
 .../frontend/src/pages/settings/email.vue     |   2 +-
 .../src/pages/settings/import-export.vue      | 104 ++++++++++--------
 .../frontend/src/pages/settings/security.vue  |   2 +-
 packages/frontend/src/pages/user/home.vue     |  10 +-
 5 files changed, 65 insertions(+), 54 deletions(-)

diff --git a/packages/frontend/src/init.ts b/packages/frontend/src/init.ts
index 508d3262b3..45ade64127 100644
--- a/packages/frontend/src/init.ts
+++ b/packages/frontend/src/init.ts
@@ -172,6 +172,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 		app.config.performance = true;
 	}
 
+	// TODO: 廃止
 	app.config.globalProperties = {
 		$i,
 		$store: defaultStore,
diff --git a/packages/frontend/src/pages/settings/email.vue b/packages/frontend/src/pages/settings/email.vue
index 6b4b3a70c4..d7b03d9eac 100644
--- a/packages/frontend/src/pages/settings/email.vue
+++ b/packages/frontend/src/pages/settings/email.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_autoGap">
-	<FormSection>
+	<FormSection first>
 		<template #label>{{ i18n.ts.emailAddress }}</template>
 		<FormInput v-model="emailAddress" type="email" manual-save>
 			<template #prefix><i class="ti ti-mail"></i></template>
diff --git a/packages/frontend/src/pages/settings/import-export.vue b/packages/frontend/src/pages/settings/import-export.vue
index 13dcc627a2..9b6a59bee2 100644
--- a/packages/frontend/src/pages/settings/import-export.vue
+++ b/packages/frontend/src/pages/settings/import-export.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_autoGap">
-	<FormSection>
+	<FormSection first>
 		<template #label><i class="ti ti-pencil"></i> {{ i18n.ts._exportOrImport.allNotes }}</template>
 		<FormFolder>
 			<template #label>{{ i18n.ts.export }}</template>
@@ -18,61 +18,71 @@
 	</FormSection>
 	<FormSection>
 		<template #label><i class="ti ti-users"></i> {{ i18n.ts._exportOrImport.followingList }}</template>
-		<FormFolder>
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ti ti-download"></i></template>
-			<FormSwitch v-model="excludeMutingUsers">
-				{{ i18n.ts._exportOrImport.excludeMutingUsers }}
-			</FormSwitch>
-			<FormSwitch v-model="excludeInactiveUsers">
-				{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
-			</FormSwitch>
-			<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder>
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ti ti-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
+		<div class="_autoGap_half">
+			<FormFolder>
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon><i class="ti ti-download"></i></template>
+				<div class="_autoGap_half">
+					<FormSwitch v-model="excludeMutingUsers">
+						{{ i18n.ts._exportOrImport.excludeMutingUsers }}
+					</FormSwitch>
+					<FormSwitch v-model="excludeInactiveUsers">
+						{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
+					</FormSwitch>
+					<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+				</div>
+			</FormFolder>
+			<FormFolder>
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon><i class="ti ti-upload"></i></template>
+				<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+			</FormFolder>
+		</div>
 	</FormSection>
 	<FormSection>
 		<template #label><i class="ti ti-users"></i> {{ i18n.ts._exportOrImport.userLists }}</template>
-		<FormFolder>
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ti ti-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder>
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ti ti-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
+		<div class="_autoGap_half">
+			<FormFolder>
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon><i class="ti ti-download"></i></template>
+				<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+			</FormFolder>
+			<FormFolder>
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon><i class="ti ti-upload"></i></template>
+				<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+			</FormFolder>
+		</div>
 	</FormSection>
 	<FormSection>
 		<template #label><i class="ti ti-user-off"></i> {{ i18n.ts._exportOrImport.muteList }}</template>
-		<FormFolder>
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ti ti-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder>
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ti ti-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
+		<div class="_autoGap_half">
+			<FormFolder>
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon><i class="ti ti-download"></i></template>
+				<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+			</FormFolder>
+			<FormFolder>
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon><i class="ti ti-upload"></i></template>
+				<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+			</FormFolder>
+		</div>
 	</FormSection>
 	<FormSection>
 		<template #label><i class="ti ti-user-off"></i> {{ i18n.ts._exportOrImport.blockingList }}</template>
-		<FormFolder>
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ti ti-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder>
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ti ti-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
+		<div class="_autoGap_half">
+			<FormFolder>
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon><i class="ti ti-download"></i></template>
+				<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+			</FormFolder>
+			<FormFolder>
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon><i class="ti ti-upload"></i></template>
+				<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+			</FormFolder>
+		</div>
 	</FormSection>
 </div>
 </template>
diff --git a/packages/frontend/src/pages/settings/security.vue b/packages/frontend/src/pages/settings/security.vue
index 34d6059ace..c83612292b 100644
--- a/packages/frontend/src/pages/settings/security.vue
+++ b/packages/frontend/src/pages/settings/security.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_autoGap">
-	<FormSection>
+	<FormSection first>
 		<template #label>{{ i18n.ts.password }}</template>
 		<MkButton primary @click="change()">{{ i18n.ts.changePassword }}</MkButton>
 	</FormSection>
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index bdf43bb04a..11a7ee3b8a 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -1,15 +1,15 @@
 <template>
 <MkSpacer :content-max="narrow ? 800 : 1100">
 	<div ref="rootEl" class="ftskorzw" :class="{ wide: !narrow }" style="container-type: inline-size;">
-		<div class="main">
+		<div class="main _autoGap">
 			<!-- TODO -->
 			<!-- <div class="punished" v-if="user.isSuspended"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
 			<!-- <div class="punished" v-if="user.isSilenced"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
 
-			<div class="profile">
+			<div class="profile _autoGap">
 				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
 
-				<div :key="user.id" class="main">
+				<div :key="user.id" class="main _panel">
 					<div class="banner-container" :style="style">
 						<div ref="bannerEl" class="banner" :style="style"></div>
 						<div class="fade"></div>
@@ -86,8 +86,8 @@
 			</div>
 
 			<div class="contents">
-				<div v-if="user.pinnedNotes.length > 0" class="_margin">
-					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note" :note="note" :pinned="true"/>
+				<div v-if="user.pinnedNotes.length > 0" class="_autoGap_half">
+					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/>
 				</div>
 				<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
 				<template v-if="narrow">