diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue index a7ccb03588..327fa9b1f6 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 5f1ed43340..64def6fdf0 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 e9f3aa6e47..74426df2e6 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: [