From 5f869e5d8735f3c058554b59e2c33f40ae7ef959 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 7 Aug 2021 17:55:16 +0900
Subject: Improve client

---
 locales/ja-JP.yml                              |   1 +
 src/client/components/ui/button.vue            |   4 +-
 src/client/pages/_error_.vue                   |  26 ++--
 src/client/pages/my-antennas/create.vue        |  51 +++++++
 src/client/pages/my-antennas/edit.vue          |  56 ++++++++
 src/client/pages/my-antennas/editor.vue        | 190 +++++++++++++++++++++++++
 src/client/pages/my-antennas/index.antenna.vue | 188 ------------------------
 src/client/pages/my-antennas/index.vue         |  59 ++++----
 src/client/style.scss                          |   1 +
 src/client/themes/_light.json5                 |   2 +-
 src/client/themes/l-vivid.json5                |   2 +-
 11 files changed, 346 insertions(+), 234 deletions(-)
 create mode 100644 src/client/pages/my-antennas/create.vue
 create mode 100644 src/client/pages/my-antennas/edit.vue
 create mode 100644 src/client/pages/my-antennas/editor.vue
 delete mode 100644 src/client/pages/my-antennas/index.antenna.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index ef6a094fd7..3a00c28ddb 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -769,6 +769,7 @@ sent: "送信"
 received: "受信"
 searchResult: "検索結果"
 hashtags: "ハッシュタグ"
+troubleshooting: "トラブルシューティング"
 
 _docs: 
   continueReading: "続きを読む"
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index c92f30db97..8a83943825 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -1,6 +1,6 @@
 <template>
 <component class="bghgjjyj _button"
-	:is="link ? 'a' : 'button'"
+	:is="link ? 'MkA' : 'button'"
 	:class="{ inline, primary, danger, full }"
 	:type="type"
 	@click="$emit('click', $event)"
@@ -115,6 +115,7 @@ export default defineComponent({
 	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
 	display: block;
 	min-width: 100px;
+	width: min-content;
 	padding: 8px 14px;
 	text-align: center;
 	font-weight: normal;
@@ -125,6 +126,7 @@ export default defineComponent({
 	background: var(--buttonBg);
 	border-radius: 999px;
 	overflow: hidden;
+	box-sizing: border-box;
 
 	&:not(:disabled):hover {
 		background: var(--buttonHoverBg);
diff --git a/src/client/pages/_error_.vue b/src/client/pages/_error_.vue
index 6caecd6eaf..1d67d9b14d 100644
--- a/src/client/pages/_error_.vue
+++ b/src/client/pages/_error_.vue
@@ -1,11 +1,11 @@
 <template>
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
-	<div class="_section">
-		<div class="mjndxjch _content">
-			<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-			<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</p>
-			<p>{{ $ts.pageLoadErrorDescription }}</p>
-		</div>
+	<div class="mjndxjch">
+		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
+		<p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p>
+		<p>{{ $ts.pageLoadErrorDescription }}</p>
+		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p>
+		<p v-if="error" class="error">ERROR: {{ error }}</p>
 	</div>
 </transition>
 </template>
@@ -19,6 +19,11 @@ export default defineComponent({
 	components: {
 		MkButton,
 	},
+	props: {
+		error: {
+			required: false,
+		}
+	},
 	data() {
 		return {
 			[symbols.PAGE_INFO]: {
@@ -32,10 +37,11 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .mjndxjch {
+	padding: 32px;
 	text-align: center;
 
 	> p {
-		margin: 0 0 8px 0;
+		margin: 0 0 12px 0;
 	}
 
 	> .button {
@@ -45,8 +51,12 @@ export default defineComponent({
 	> img {
 		vertical-align: bottom;
 		height: 128px;
-		margin-bottom: 16px;
+		margin-bottom: 24px;
 		border-radius: 16px;
 	}
+
+	> .error {
+		opacity: 0.7;
+	}
 }
 </style>
diff --git a/src/client/pages/my-antennas/create.vue b/src/client/pages/my-antennas/create.vue
new file mode 100644
index 0000000000..d4762411e7
--- /dev/null
+++ b/src/client/pages/my-antennas/create.vue
@@ -0,0 +1,51 @@
+<template>
+<div class="geegznzt">
+	<XAntenna :antenna="draft" @created="onAntennaCreated"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@client/components/ui/button.vue';
+import XAntenna from './editor.vue';
+import * as symbols from '@client/symbols';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XAntenna,
+	},
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.manageAntennas,
+				icon: 'fas fa-satellite',
+			},
+			draft: {
+				name: '',
+				src: 'all',
+				userListId: null,
+				userGroupId: null,
+				users: [],
+				keywords: [],
+				excludeKeywords: [],
+				withReplies: false,
+				caseSensitive: false,
+				withFile: false,
+				notify: false
+			},
+		};
+	},
+
+	methods: {
+		onAntennaCreated() {
+			this.$router.push('/my/antennas');
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/client/pages/my-antennas/edit.vue b/src/client/pages/my-antennas/edit.vue
new file mode 100644
index 0000000000..9deafb4235
--- /dev/null
+++ b/src/client/pages/my-antennas/edit.vue
@@ -0,0 +1,56 @@
+<template>
+<div class="">
+	<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@client/components/ui/button.vue';
+import XAntenna from './editor.vue';
+import * as symbols from '@client/symbols';
+import * as os from '@client/os';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XAntenna,
+	},
+
+	props: {
+		antennaId: {
+			type: String,
+			required: true,
+		}
+	},
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.manageAntennas,
+				icon: 'fas fa-satellite',
+			},
+			antenna: null,
+		};
+	},
+
+	watch: {
+		antennaId: {
+			async handler() {
+				this.antenna = await os.api('antennas/show', { antennaId: this.antennaId });
+			},
+			immediate: true,
+		}
+	},
+
+	methods: {
+		onAntennaUpdated() {
+			this.$router.push('/my/antennas');
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/client/pages/my-antennas/editor.vue b/src/client/pages/my-antennas/editor.vue
new file mode 100644
index 0000000000..882d48e643
--- /dev/null
+++ b/src/client/pages/my-antennas/editor.vue
@@ -0,0 +1,190 @@
+<template>
+<div class="shaynizk">
+	<div class="form">
+		<MkInput v-model="name" class="_inputNoTopMargin">
+			<template #label>{{ $ts.name }}</template>
+		</MkInput>
+		<MkSelect v-model="src">
+			<template #label>{{ $ts.antennaSource }}</template>
+			<option value="all">{{ $ts._antennaSources.all }}</option>
+			<option value="home">{{ $ts._antennaSources.homeTimeline }}</option>
+			<option value="users">{{ $ts._antennaSources.users }}</option>
+			<option value="list">{{ $ts._antennaSources.userList }}</option>
+			<option value="group">{{ $ts._antennaSources.userGroup }}</option>
+		</MkSelect>
+		<MkSelect v-model="userListId" v-if="src === 'list'">
+			<template #label>{{ $ts.userList }}</template>
+			<option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option>
+		</MkSelect>
+		<MkSelect v-model="userGroupId" v-else-if="src === 'group'">
+			<template #label>{{ $ts.userGroup }}</template>
+			<option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
+		</MkSelect>
+		<MkTextarea v-model="users" v-else-if="src === 'users'">
+			<template #label>{{ $ts.users }}</template>
+			<template #caption>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
+		</MkTextarea>
+		<MkSwitch v-model="withReplies">{{ $ts.withReplies }}</MkSwitch>
+		<MkTextarea v-model="keywords">
+			<template #label>{{ $ts.antennaKeywords }}</template>
+			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
+		</MkTextarea>
+		<MkTextarea v-model="excludeKeywords">
+			<template #label>{{ $ts.antennaExcludeKeywords }}</template>
+			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
+		</MkTextarea>
+		<MkSwitch v-model="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch>
+		<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
+		<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch>
+	</div>
+	<div class="actions">
+		<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null" danger><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@client/components/ui/button.vue';
+import MkInput from '@client/components/ui/input.vue';
+import MkTextarea from '@client/components/ui/textarea.vue';
+import MkSelect from '@client/components/ui/select.vue';
+import MkSwitch from '@client/components/ui/switch.vue';
+import { getAcct } from '@/misc/acct';
+import * as os from '@client/os';
+
+export default defineComponent({
+	components: {
+		MkButton, MkInput, MkTextarea, MkSelect, MkSwitch
+	},
+
+	props: {
+		antenna: {
+			type: Object,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			name: '',
+			src: '',
+			userListId: null,
+			userGroupId: null,
+			users: '',
+			keywords: '',
+			excludeKeywords: '',
+			caseSensitive: false,
+			withReplies: false,
+			withFile: false,
+			notify: false,
+			userLists: null,
+			userGroups: null,
+		};
+	},
+
+	watch: {
+		async src() {
+			if (this.src === 'list' && this.userLists === null) {
+				this.userLists = await os.api('users/lists/list');
+			}
+
+			if (this.src === 'group' && this.userGroups === null) {
+				const groups1 = await os.api('users/groups/owned');
+				const groups2 = await os.api('users/groups/joined');
+
+				this.userGroups = [...groups1, ...groups2];
+			}
+		}
+	},
+
+	created() {
+		this.name = this.antenna.name;
+		this.src = this.antenna.src;
+		this.userListId = this.antenna.userListId;
+		this.userGroupId = this.antenna.userGroupId;
+		this.users = this.antenna.users.join('\n');
+		this.keywords = this.antenna.keywords.map(x => x.join(' ')).join('\n');
+		this.excludeKeywords = this.antenna.excludeKeywords.map(x => x.join(' ')).join('\n');
+		this.caseSensitive = this.antenna.caseSensitive;
+		this.withReplies = this.antenna.withReplies;
+		this.withFile = this.antenna.withFile;
+		this.notify = this.antenna.notify;
+	},
+
+	methods: {
+		async saveAntenna() {
+			if (this.antenna.id == null) {
+				await os.apiWithDialog('antennas/create', {
+					name: this.name,
+					src: this.src,
+					userListId: this.userListId,
+					userGroupId: this.userGroupId,
+					withReplies: this.withReplies,
+					withFile: this.withFile,
+					notify: this.notify,
+					caseSensitive: this.caseSensitive,
+					users: this.users.trim().split('\n').map(x => x.trim()),
+					keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')),
+					excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
+				});
+				this.$emit('created');
+			} else {
+				await os.apiWithDialog('antennas/update', {
+					antennaId: this.antenna.id,
+					name: this.name,
+					src: this.src,
+					userListId: this.userListId,
+					userGroupId: this.userGroupId,
+					withReplies: this.withReplies,
+					withFile: this.withFile,
+					notify: this.notify,
+					caseSensitive: this.caseSensitive,
+					users: this.users.trim().split('\n').map(x => x.trim()),
+					keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')),
+					excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
+				});
+				this.$emit('updated');
+			}
+		},
+
+		async deleteAntenna() {
+			const { canceled } = await os.dialog({
+				type: 'warning',
+				text: this.$t('removeAreYouSure', { x: this.antenna.name }),
+				showCancelButton: true
+			});
+			if (canceled) return;
+
+			await os.api('antennas/delete', {
+				antennaId: this.antenna.id,
+			});
+
+			os.success();
+			this.$emit('deleted');
+		},
+
+		addUser() {
+			os.selectUser().then(user => {
+				this.users = this.users.trim();
+				this.users += '\n@' + getAcct(user);
+				this.users = this.users.trim();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.shaynizk {
+	> .form {
+		padding: 32px;
+	}
+
+	> .actions {
+		padding: 24px 32px;
+		border-top: solid 0.5px var(--divider);
+	}
+}
+</style>
diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/index.antenna.vue
deleted file mode 100644
index 3a74a9d7f1..0000000000
--- a/src/client/pages/my-antennas/index.antenna.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<template>
-<div class="shaynizk _card">
-	<div class="_title" v-if="antenna.name">{{ antenna.name }}</div>
-	<div class="_content body">
-		<MkInput v-model="name">
-			<template #label>{{ $ts.name }}</template>
-		</MkInput>
-		<MkSelect v-model="src">
-			<template #label>{{ $ts.antennaSource }}</template>
-			<option value="all">{{ $ts._antennaSources.all }}</option>
-			<option value="home">{{ $ts._antennaSources.homeTimeline }}</option>
-			<option value="users">{{ $ts._antennaSources.users }}</option>
-			<option value="list">{{ $ts._antennaSources.userList }}</option>
-			<option value="group">{{ $ts._antennaSources.userGroup }}</option>
-		</MkSelect>
-		<MkSelect v-model="userListId" v-if="src === 'list'">
-			<template #label>{{ $ts.userList }}</template>
-			<option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option>
-		</MkSelect>
-		<MkSelect v-model="userGroupId" v-else-if="src === 'group'">
-			<template #label>{{ $ts.userGroup }}</template>
-			<option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
-		</MkSelect>
-		<MkTextarea v-model="users" v-else-if="src === 'users'">
-			<template #label>{{ $ts.users }}</template>
-			<template #caption>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
-		</MkTextarea>
-		<MkSwitch v-model="withReplies">{{ $ts.withReplies }}</MkSwitch>
-		<MkTextarea v-model="keywords">
-			<template #label>{{ $ts.antennaKeywords }}</template>
-			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
-		</MkTextarea>
-		<MkTextarea v-model="excludeKeywords">
-			<template #label>{{ $ts.antennaExcludeKeywords }}</template>
-			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
-		</MkTextarea>
-		<MkSwitch v-model="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch>
-		<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
-		<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch>
-	</div>
-	<div class="_footer">
-		<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
-import MkSelect from '@client/components/ui/select.vue';
-import MkSwitch from '@client/components/ui/switch.vue';
-import { getAcct } from '@/misc/acct';
-import * as os from '@client/os';
-
-export default defineComponent({
-	components: {
-		MkButton, MkInput, MkTextarea, MkSelect, MkSwitch
-	},
-
-	props: {
-		antenna: {
-			type: Object,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			name: '',
-			src: '',
-			userListId: null,
-			userGroupId: null,
-			users: '',
-			keywords: '',
-			excludeKeywords: '',
-			caseSensitive: false,
-			withReplies: false,
-			withFile: false,
-			notify: false,
-			userLists: null,
-			userGroups: null,
-		};
-	},
-
-	watch: {
-		async src() {
-			if (this.src === 'list' && this.userLists === null) {
-				this.userLists = await os.api('users/lists/list');
-			}
-
-			if (this.src === 'group' && this.userGroups === null) {
-				const groups1 = await os.api('users/groups/owned');
-				const groups2 = await os.api('users/groups/joined');
-
-				this.userGroups = [...groups1, ...groups2];
-			}
-		}
-	},
-
-	created() {
-		this.name = this.antenna.name;
-		this.src = this.antenna.src;
-		this.userListId = this.antenna.userListId;
-		this.userGroupId = this.antenna.userGroupId;
-		this.users = this.antenna.users.join('\n');
-		this.keywords = this.antenna.keywords.map(x => x.join(' ')).join('\n');
-		this.excludeKeywords = this.antenna.excludeKeywords.map(x => x.join(' ')).join('\n');
-		this.caseSensitive = this.antenna.caseSensitive;
-		this.withReplies = this.antenna.withReplies;
-		this.withFile = this.antenna.withFile;
-		this.notify = this.antenna.notify;
-	},
-
-	methods: {
-		async saveAntenna() {
-			if (this.antenna.id == null) {
-				await os.api('antennas/create', {
-					name: this.name,
-					src: this.src,
-					userListId: this.userListId,
-					userGroupId: this.userGroupId,
-					withReplies: this.withReplies,
-					withFile: this.withFile,
-					notify: this.notify,
-					caseSensitive: this.caseSensitive,
-					users: this.users.trim().split('\n').map(x => x.trim()),
-					keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')),
-					excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
-				});
-				this.$emit('created');
-			} else {
-				await os.api('antennas/update', {
-					antennaId: this.antenna.id,
-					name: this.name,
-					src: this.src,
-					userListId: this.userListId,
-					userGroupId: this.userGroupId,
-					withReplies: this.withReplies,
-					withFile: this.withFile,
-					notify: this.notify,
-					caseSensitive: this.caseSensitive,
-					users: this.users.trim().split('\n').map(x => x.trim()),
-					keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')),
-					excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
-				});
-			}
-
-			os.success();
-		},
-
-		async deleteAntenna() {
-			const { canceled } = await os.dialog({
-				type: 'warning',
-				text: this.$t('removeAreYouSure', { x: this.antenna.name }),
-				showCancelButton: true
-			});
-			if (canceled) return;
-
-			await os.api('antennas/delete', {
-				antennaId: this.antenna.id,
-			});
-
-			os.success();
-			this.$emit('deleted');
-		},
-
-		addUser() {
-			os.selectUser().then(user => {
-				this.users = this.users.trim();
-				this.users += '\n@' + getAcct(user);
-				this.users = this.users.trim();
-			});
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.shaynizk {
-	> .body {
-		max-height: 250px;
-		overflow: auto;
-	}
-}
-</style>
diff --git a/src/client/pages/my-antennas/index.vue b/src/client/pages/my-antennas/index.vue
index 57c55cefdd..c27bb2c15e 100644
--- a/src/client/pages/my-antennas/index.vue
+++ b/src/client/pages/my-antennas/index.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="ieepwinx _section">
-	<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+	<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 
 	<div class="_content">
-		<XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
-
-		<MkPagination :pagination="pagination" #default="{items}" class="antennas" ref="list">
-			<XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @deleted="onAntennaDeleted"/>
+		<MkPagination :pagination="pagination" #default="{items}" ref="list">
+			<MkA class="ljoevbzj" v-for="antenna in items" :key="antenna.id" :to="`/my/antennas/${antenna.id}`">
+				<div class="name">{{ antenna.name }}</div>
+			</MkA>
 		</MkPagination>
 	</div>
 </div>
@@ -16,14 +16,12 @@
 import { defineComponent } from 'vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
-import XAntenna from './index.antenna.vue';
 import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
 		MkPagination,
 		MkButton,
-		XAntenna,
 	},
 
 	data() {
@@ -40,43 +38,34 @@ export default defineComponent({
 				endpoint: 'antennas/list',
 				limit: 10,
 			},
-			draft: null,
 		};
 	},
-
-	methods: {
-		create() {
-			this.draft = {
-				name: '',
-				src: 'all',
-				userListId: null,
-				userGroupId: null,
-				users: [],
-				keywords: [],
-				excludeKeywords: [],
-				withReplies: false,
-				caseSensitive: false,
-				withFile: false,
-				notify: false
-			};
-		},
-
-		onAntennaCreated() {
-			this.$refs.list.reload();
-			this.draft = null;
-		},
-
-		onAntennaDeleted() {
-			this.$refs.list.reload();
-		},
-	}
 });
 </script>
 
 <style lang="scss" scoped>
 .ieepwinx {
+	padding: 16px;
+
 	> .add {
 		margin: 0 auto 16px auto;
 	}
+
+	.ljoevbzj {
+		display: block;
+		padding: 16px;
+		margin-bottom: 8px;
+		border: solid 1px var(--divider);
+		border-radius: 6px;
+
+		&:hover {
+			border: solid 1px var(--accent);
+			text-decoration: none;
+		}
+
+		> .name {
+			font-weight: bold;
+		}
+	}
 }
 </style>
diff --git a/src/client/style.scss b/src/client/style.scss
index 99c1ced049..9127b6f238 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -255,6 +255,7 @@ hr {
 	margin: var(--margin) 0;
 }
 
+// TODO: 廃止
 ._card {
 	@extend ._panel;
 
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index b31e369a37..97f56c75f5 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -47,7 +47,7 @@
 		infoBg: '#e5f5ff',
 		infoFg: '#72818a',
 		infoWarnBg: '#fff0db',
-		infoWarnFg: '#573c08',
+		infoWarnFg: '#8f6e31',
 		cwBg: '#b1b9c1',
 		cwFg: '#fff',
 		cwHoverBg: '#bbc4ce',
diff --git a/src/client/themes/l-vivid.json5 b/src/client/themes/l-vivid.json5
index 32bb9dc26b..0f4abe0a45 100644
--- a/src/client/themes/l-vivid.json5
+++ b/src/client/themes/l-vivid.json5
@@ -38,7 +38,7 @@
 		messageBg: '@bg',
 		navActive: '@accent',
 		infoWarnBg: '#fff0db',
-		infoWarnFg: '#573c08',
+		infoWarnFg: '#8f6e31',
 		navHoverFg: ':darken<17<@fg',
 		dateLabelFg: '@fg',
 		inputBorder: 'rgba(0, 0, 0, 0.1)',
-- 
cgit v1.2.3-freya