🎨

packages/frontend/src/pages/welcome.setup.vue

@@ -1,8 +1,11 @@
 <template>
-<form class="mk-setup" @submit.prevent="submit()">
-	<h1>Welcome to Misskey!</h1>
-	<div class="_gaps_m">
-		<p>{{ i18n.ts.intro }}</p>
+<form :class="$style.root" class="_panel" @submit.prevent="submit()">
+	<div :class="$style.title">
+		<div>Welcome to Misskey!</div>
+		<div :class="$style.version">v{{ version }}</div>
+	</div>
+	<div class="_gaps_m" style="padding: 32px;">
+		<div>{{ i18n.ts.intro }}</div>
 		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username>
 			<template #label>{{ i18n.ts.username }}</template>
 			<template #prefix>@</template>
@@ -12,8 +15,8 @@
 			<template #label>{{ i18n.ts.password }}</template>
 			<template #prefix><i class="ti ti-lock"></i></template>
 		</MkInput>
-		<div class="bottom">
-			<MkButton gradate type="submit" :disabled="submitting" data-cy-admin-ok>
+		<div>
+			<MkButton gradate large rounded type="submit" :disabled="submitting" data-cy-admin-ok style="margin: 0 auto;">
 				{{ submitting ? i18n.ts.processing : i18n.ts.done }}<MkEllipsis v-if="submitting"/>
 			</MkButton>
 		</div>
@@ -25,7 +28,7 @@
 import { } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
-import { host } from '@/config';
+import { host, version } from '@/config';
 import * as os from '@/os';
 import { login } from '@/account';
 import { i18n } from '@/i18n';
@@ -54,36 +57,28 @@ function submit() {
 }
 </script>
 
-<style lang="scss" scoped>
-.mk-setup {
+<style lang="scss" module>
+.root {
 	border-radius: var(--radius);
 	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
 	overflow: hidden;
 	max-width: 500px;
 	margin: 32px auto;
+}
 
-	> h1 {
-		margin: 0;
-		font-size: 1.5em;
-		text-align: center;
-		padding: 32px;
-		background: var(--accent);
-		color: #fff;
-	}
+.title {
+	margin: 0;
+	font-size: 1.5em;
+	text-align: center;
+	padding: 32px;
+	background: var(--accentedBg);
+	color: var(--accent);
+	font-weight: bold;
+}
 
-	> div {
-		padding: 32px;
-		background: var(--panel);
-
-		> p {
-			margin-top: 0;
-		}
-
-		> .bottom {
-			> * {
-				margin: 0 auto;
-			}
-		}
-	}
+.version {
+	font-size: 70%;
+	font-weight: normal;
+	opacity: 0.7;
 }
 </style>