:art:

1 files changed, 42 insertions, 37 deletions

diff --git a/packages/frontend/src/pages/settings/other.vue b/packages/frontend/src/pages/settings/other.vue
index dd80dd737b..776305d723 100644
--- a/packages/frontend/src/pages/settings/other.vue
+++ b/packages/frontend/src/pages/settings/other.vue
@@ -10,51 +10,55 @@
 	<MkSwitch v-model="reportError">{{ i18n.ts.sendErrorReports }}<template #caption>{{ i18n.ts.sendErrorReportsDescription }}</template></MkSwitch>
 	-->
 
-	<div class="_gaps_s">
-		<MkFolder>
-			<template #icon><i class="ti ti-info-circle"></i></template>
-			<template #label>{{ i18n.ts.accountInfo }}</template>
+	<FormSection first>
+		<div class="_gaps_s">
+			<MkFolder>
+				<template #icon><i class="ti ti-info-circle"></i></template>
+				<template #label>{{ i18n.ts.accountInfo }}</template>
 
-			<div class="_gaps_m">
-				<MkKeyValue>
-					<template #key>ID</template>
-					<template #value><span class="_monospace">{{ $i.id }}</span></template>
-				</MkKeyValue>
+				<div class="_gaps_m">
+					<MkKeyValue>
+						<template #key>ID</template>
+						<template #value><span class="_monospace">{{ $i.id }}</span></template>
+					</MkKeyValue>
 
-				<MkKeyValue>
-					<template #key>{{ i18n.ts.registeredDate }}</template>
-					<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
-				</MkKeyValue>
+					<MkKeyValue>
+						<template #key>{{ i18n.ts.registeredDate }}</template>
+						<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
+					</MkKeyValue>
 
-				<FormLink to="/settings/account-stats"><template #icon><i class="ti ti-info-circle"></i></template>{{ i18n.ts.statistics }}</FormLink>
-			</div>
-		</MkFolder>
+					<FormLink to="/settings/account-stats"><template #icon><i class="ti ti-info-circle"></i></template>{{ i18n.ts.statistics }}</FormLink>
+				</div>
+			</MkFolder>
 
-		<FormLink to="/registry"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
+			<MkFolder>
+				<template #icon><i class="ti ti-alert-triangle"></i></template>
+				<template #label>{{ i18n.ts.closeAccount }}</template>
 
-		<MkFolder>
-			<template #icon><i class="ti ti-alert-triangle"></i></template>
-			<template #label>{{ i18n.ts.closeAccount }}</template>
+				<div class="_gaps_m">
+					<FormInfo warn>{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
+					<FormInfo>{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
+					<MkButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</MkButton>
+					<MkButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</MkButton>
+				</div>
+			</MkFolder>
 
-			<div class="_gaps_m">
-				<FormInfo warn>{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
-				<FormInfo>{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
-				<MkButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</MkButton>
-				<MkButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</MkButton>
-			</div>
-		</MkFolder>
+			<MkFolder>
+				<template #icon><i class="ti ti-flask"></i></template>
+				<template #label>{{ i18n.ts.experimentalFeatures }}</template>
 
-		<MkFolder>
-			<template #icon><i class="ti ti-flask"></i></template>
-			<template #label>{{ i18n.ts.experimentalFeatures }}</template>
+				<div class="_gaps_m">
+					<MkSwitch v-model="enableCondensedLineForAcct">
+						<template #label>Enable condensed line for acct</template>
+					</MkSwitch>
+				</div>
+			</MkFolder>
+		</div>
+	</FormSection>
 
-			<div class="_gaps_m">
-				<MkSwitch v-model="enableCondensedLineForAcct">
-					<template #label>Enable condensed line for acct</template>
-				</MkSwitch>
-			</div>
-		</MkFolder>
-	</div>
+	<FormSection>
+		<FormLink to="/registry"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
+	</FormSection>
 </div>
 </template>
 
@@ -72,6 +76,7 @@ import { signout, $i } from '@/account';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { unisonReload } from '@/scripts/unison-reload';
+import FormSection from '@/components/form/section.vue';
 
 const reportError = computed(defaultStore.makeGetterSetter('reportError'));
 const enableCondensedLineForAcct = computed(defaultStore.makeGetterSetter('enableCondensedLineForAcct'));