From 0ea5b38fb1fab7a97600abb79c80a442d81b5603 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 4 Jan 2022 18:35:21 +0900
Subject: [PATCH] tweak ui

---
 .../src/pages/admin/integrations-discord.vue  | 32 +++++++++----------
 .../src/pages/admin/integrations-github.vue   | 32 +++++++++----------
 .../src/pages/admin/integrations-twitter.vue  | 32 +++++++++----------
 .../client/src/pages/admin/integrations.vue   | 28 ++++++----------
 4 files changed, 54 insertions(+), 70 deletions(-)

diff --git a/packages/client/src/pages/admin/integrations-discord.vue b/packages/client/src/pages/admin/integrations-discord.vue
index 383031f3d1..9367ef04f1 100644
--- a/packages/client/src/pages/admin/integrations-discord.vue
+++ b/packages/client/src/pages/admin/integrations-discord.vue
@@ -1,37 +1,36 @@
 <template>
-<FormBase>
+<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
-		<FormSwitch v-model="enableDiscordIntegration">
-			{{ $ts.enable }}
+		<FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
+			<template #label>{{ $ts.enable }}</template>
 		</FormSwitch>
 
 		<template v-if="enableDiscordIntegration">
-			<FormInfo>Callback URL: {{ `${uri}/api/dc/cb` }}</FormInfo>
+			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/dc/cb` }}</FormInfo>
 		
-			<FormInput v-model="discordClientId">
+			<FormInput v-model="discordClientId" class="_formBlock">
 				<template #prefix><i class="fas fa-key"></i></template>
-				Client ID
+				<template #label>Client ID</template>
 			</FormInput>
 
-			<FormInput v-model="discordClientSecret">
+			<FormInput v-model="discordClientSecret" class="_formBlock">
 				<template #prefix><i class="fas fa-key"></i></template>
-				Client Secret
+				<template #label>Client Secret</template>
 			</FormInput>
 		</template>
 
-		<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 	</FormSuspense>
-</FormBase>
+</MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@/components/debobigego/switch.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormInfo from '@/components/debobigego/info.vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
+import FormInfo from '@/components/ui/info.vue';
+import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
@@ -40,7 +39,6 @@ export default defineComponent({
 	components: {
 		FormSwitch,
 		FormInput,
-		FormBase,
 		FormInfo,
 		FormButton,
 		FormSuspense,
diff --git a/packages/client/src/pages/admin/integrations-github.vue b/packages/client/src/pages/admin/integrations-github.vue
index ecb2fd67fa..7c257b6ec8 100644
--- a/packages/client/src/pages/admin/integrations-github.vue
+++ b/packages/client/src/pages/admin/integrations-github.vue
@@ -1,37 +1,36 @@
 <template>
-<FormBase>
+<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
-		<FormSwitch v-model="enableGithubIntegration">
-			{{ $ts.enable }}
+		<FormSwitch v-model="enableGithubIntegration" class="_formBlock">
+			<template #label>{{ $ts.enable }}</template>
 		</FormSwitch>
 
 		<template v-if="enableGithubIntegration">
-			<FormInfo>Callback URL: {{ `${uri}/api/gh/cb` }}</FormInfo>
+			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/gh/cb` }}</FormInfo>
 		
-			<FormInput v-model="githubClientId">
+			<FormInput v-model="githubClientId" class="_formBlock">
 				<template #prefix><i class="fas fa-key"></i></template>
-				Client ID
+				<template #label>Client ID</template>
 			</FormInput>
 
-			<FormInput v-model="githubClientSecret">
+			<FormInput v-model="githubClientSecret" class="_formBlock">
 				<template #prefix><i class="fas fa-key"></i></template>
-				Client Secret
+				<template #label>Client Secret</template>
 			</FormInput>
 		</template>
 
-		<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 	</FormSuspense>
-</FormBase>
+</MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@/components/debobigego/switch.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormInfo from '@/components/debobigego/info.vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
+import FormInfo from '@/components/ui/info.vue';
+import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
@@ -40,7 +39,6 @@ export default defineComponent({
 	components: {
 		FormSwitch,
 		FormInput,
-		FormBase,
 		FormInfo,
 		FormButton,
 		FormSuspense,
diff --git a/packages/client/src/pages/admin/integrations-twitter.vue b/packages/client/src/pages/admin/integrations-twitter.vue
index 1404102c57..4709103ee6 100644
--- a/packages/client/src/pages/admin/integrations-twitter.vue
+++ b/packages/client/src/pages/admin/integrations-twitter.vue
@@ -1,37 +1,36 @@
 <template>
-<FormBase>
+<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
-		<FormSwitch v-model="enableTwitterIntegration">
-			{{ $ts.enable }}
+		<FormSwitch v-model="enableTwitterIntegration" class="_formBlock">
+			<template #label>{{ $ts.enable }}</template>
 		</FormSwitch>
 
 		<template v-if="enableTwitterIntegration">
-			<FormInfo>Callback URL: {{ `${uri}/api/tw/cb` }}</FormInfo>
+			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/tw/cb` }}</FormInfo>
 		
-			<FormInput v-model="twitterConsumerKey">
+			<FormInput v-model="twitterConsumerKey" class="_formBlock">
 				<template #prefix><i class="fas fa-key"></i></template>
-				Consumer Key
+				<template #label>Consumer Key</template>
 			</FormInput>
 
-			<FormInput v-model="twitterConsumerSecret">
+			<FormInput v-model="twitterConsumerSecret" class="_formBlock">
 				<template #prefix><i class="fas fa-key"></i></template>
-				Consumer Secret
+				<template #label>Consumer Secret</template>
 			</FormInput>
 		</template>
 
-		<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 	</FormSuspense>
-</FormBase>
+</MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@/components/debobigego/switch.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormInfo from '@/components/debobigego/info.vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
+import FormInfo from '@/components/ui/info.vue';
+import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
@@ -40,7 +39,6 @@ export default defineComponent({
 	components: {
 		FormSwitch,
 		FormInput,
-		FormBase,
 		FormInfo,
 		FormButton,
 		FormSuspense,
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
index c21eebc1c6..6a6432d2e1 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -1,32 +1,27 @@
 <template>
-<FormBase>
+<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
-		<FormLink to="/admin/integrations/twitter">
+		<FormLink to="/admin/integrations/twitter" class="_formBlock">
 			<i class="fab fa-twitter"></i> Twitter
 			<template #suffix>{{ enableTwitterIntegration ? $ts.enabled : $ts.disabled }}</template>
 		</FormLink>
-		<FormLink to="/admin/integrations/github">
+		<FormLink to="/admin/integrations/github" class="_formBlock">
 			<i class="fab fa-github"></i> GitHub
 			<template #suffix>{{ enableGithubIntegration ? $ts.enabled : $ts.disabled }}</template>
 		</FormLink>
-		<FormLink to="/admin/integrations/discord">
+		<FormLink to="/admin/integrations/discord" class="_formBlock">
 			<i class="fab fa-discord"></i> Discord
 			<template #suffix>{{ enableDiscordIntegration ? $ts.enabled : $ts.disabled }}</template>
 		</FormLink>
 	</FormSuspense>
-</FormBase>
+</MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormTextarea from '@/components/debobigego/textarea.vue';
-import FormInfo from '@/components/debobigego/info.vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
+import FormLink from '@/components/form/link.vue';
+import FormSecion from '@/components/form/section.vue';
+import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
@@ -34,12 +29,7 @@ import { fetchInstance } from '@/instance';
 export default defineComponent({
 	components: {
 		FormLink,
-		FormInput,
-		FormBase,
-		FormGroup,
-		FormButton,
-		FormTextarea,
-		FormInfo,
+		FormSecion,
 		FormSuspense,
 	},