From 66369b4b1d6d24f639057bef68a0ada4d2e70ce0 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 3 Oct 2021 23:51:54 +0900
Subject: [PATCH] :art:

---
 src/client/pages/announcements.vue          |  3 +-
 src/client/pages/settings/import-export.vue | 55 +++++++++++----------
 webpack.config.ts                           | 27 +++++++---
 3 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue
index a7ccb0358..327fa9b1f 100644
--- a/src/client/pages/announcements.vue
+++ b/src/client/pages/announcements.vue
@@ -32,7 +32,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.announcements,
-				icon: 'fas fa-broadcast-tower'
+				icon: 'fas fa-broadcast-tower',
+				bg: 'var(--bg)',
 			},
 			pagination: {
 				endpoint: 'announcements',
diff --git a/src/client/pages/settings/import-export.vue b/src/client/pages/settings/import-export.vue
index 5f1ed4334..64def6fdf 100644
--- a/src/client/pages/settings/import-export.vue
+++ b/src/client/pages/settings/import-export.vue
@@ -1,45 +1,42 @@
 <template>
-<FormBase>
-	<FormGroup>
+<div>
+	<FormSection>
 		<template #label>{{ $ts._exportOrImport.allNotes }}</template>
-		<FormButton @click="doExport('notes')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton>
-	</FormGroup>
-	<FormGroup>
+		<MkButton :class="$style.button" inline @click="doExport('notes')"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+	</FormSection>
+	<FormSection>
 		<template #label>{{ $ts._exportOrImport.followingList }}</template>
-		<FormButton @click="doExport('following')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton>
-		<FormButton @click="doImport('following', $event)"><i class="fas fa-upload"></i> {{ $ts.import }}</FormButton>
-	</FormGroup>
-	<FormGroup>
+		<MkButton :class="$style.button" inline @click="doExport('following')"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+		<MkButton :class="$style.button" inline @click="doImport('following', $event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+	</FormSection>
+	<FormSection>
 		<template #label>{{ $ts._exportOrImport.userLists }}</template>
-		<FormButton @click="doExport('user-lists')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton>
-		<FormButton @click="doImport('user-lists', $event)"><i class="fas fa-upload"></i> {{ $ts.import }}</FormButton>
-	</FormGroup>
-	<FormGroup>
+		<MkButton :class="$style.button" inline @click="doExport('user-lists')"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+		<MkButton :class="$style.button" inline @click="doImport('user-lists', $event)"><i class="fas fa-upload"></i> {{ $ts.import }}</MkButton>
+	</FormSection>
+	<FormSection>
 		<template #label>{{ $ts._exportOrImport.muteList }}</template>
-		<FormButton @click="doExport('mute')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton>
-	</FormGroup>
-	<FormGroup>
+		<MkButton :class="$style.button" inline @click="doExport('mute')"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+	</FormSection>
+	<FormSection>
 		<template #label>{{ $ts._exportOrImport.blockingList }}</template>
-		<FormButton @click="doExport('blocking')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton>
-	</FormGroup>
-</FormBase>
+		<MkButton :class="$style.button" inline @click="doExport('blocking')"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>
+	</FormSection>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSelect from '@client/components/form/select.vue';
-import FormButton from '@client/components/debobigego/button.vue';
-import FormBase from '@client/components/debobigego/base.vue';
-import FormGroup from '@client/components/debobigego/group.vue';
+import MkButton from '@client/components/ui/button.vue';
+import FormSection from '@client/components/form/section.vue';
 import * as os from '@client/os';
 import { selectFile } from '@client/scripts/select-file';
 import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
-		FormBase,
-		FormGroup,
-		FormButton,
+		FormSection,
+		MkButton,
 	},
 
 	emits: ['info'],
@@ -103,3 +100,9 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style module>
+.button {
+	margin-right: 16px;
+}
+</style>
diff --git a/webpack.config.ts b/webpack.config.ts
index e9f3aa6e4..74426df2e 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -95,14 +95,27 @@ module.exports = {
 			}]
 		}, {
 			test: /\.css$/,
-			use: [{
-				loader: 'vue-style-loader'
+			oneOf: [{
+				resourceQuery: /module/,
+				use: [{
+					loader: 'vue-style-loader'
+				}, {
+					loader: 'css-loader',
+					options: {
+						modules: true,
+						esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
+					}
+				}, postcss]
 			}, {
-				loader: 'css-loader',
-				options: {
-					esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
-				}
-			}, postcss]
+				use: [{
+					loader: 'vue-style-loader'
+				}, {
+					loader: 'css-loader',
+					options: {
+						esModule: false, // TODO: trueにすると壊れる。Vue3移行の折にはtrueにできるかもしれない
+					}
+				}, postcss]
+			}]
 		}, {
 			test: /\.svg$/,
 			use: [