From 9cab659392a6ff9bacdc95742d4ff423c843b73f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 3 Oct 2021 02:46:58 +0900
Subject: [PATCH] :art:

---
 .../components/channel-follow-button.vue      |  2 +-
 src/client/components/emoji-picker-window.vue |  2 +-
 src/client/components/emoji-picker.vue        |  2 +-
 src/client/components/follow-button.vue       |  2 +-
 src/client/components/media-caption.vue       |  2 +-
 src/client/components/note.vue                |  2 +-
 src/client/components/post-form.vue           |  2 +-
 src/client/components/ui/button.vue           | 17 ++++++++++----
 src/client/components/ui/menu.vue             |  2 +-
 src/client/pages/messaging/index.vue          |  3 ++-
 src/client/pages/reversi/game.setting.vue     |  2 +-
 src/client/pages/settings/index.link.vue      | 22 +++++++++++++------
 src/client/pages/settings/index.vue           | 16 +++++---------
 src/client/style.scss                         |  4 ++--
 src/client/ui/chat/note.vue                   |  2 +-
 src/client/ui/chat/post-form.vue              |  2 +-
 src/client/widgets/aiscript.vue               |  2 +-
 src/client/widgets/memo.vue                   |  2 +-
 18 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/src/client/components/channel-follow-button.vue b/src/client/components/channel-follow-button.vue
index 6f9405b97f..bd8627f6e8 100644
--- a/src/client/components/channel-follow-button.vue
+++ b/src/client/components/channel-follow-button.vue
@@ -91,7 +91,7 @@ export default defineComponent({
 		width: 31px;
 	}
 
-	&:focus {
+	&:focus-visible {
 		&:after {
 			content: "";
 			pointer-events: none;
diff --git a/src/client/components/emoji-picker-window.vue b/src/client/components/emoji-picker-window.vue
index 53b6ae6b32..b7b884565b 100644
--- a/src/client/components/emoji-picker-window.vue
+++ b/src/client/components/emoji-picker-window.vue
@@ -153,7 +153,7 @@ export default defineComponent({
 					height: var(--eachSize);
 					border-radius: 4px;
 
-					&:focus {
+					&:focus-visible {
 						outline: solid 2px var(--focus);
 						z-index: 1;
 					}
diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index d8703202c7..85a12a08e6 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -465,7 +465,7 @@ export default defineComponent({
 					height: var(--eachSize);
 					border-radius: 4px;
 
-					&:focus {
+					&:focus-visible {
 						outline: solid 2px var(--focus);
 						z-index: 1;
 					}
diff --git a/src/client/components/follow-button.vue b/src/client/components/follow-button.vue
index 5685b86a51..5eba9b1f6b 100644
--- a/src/client/components/follow-button.vue
+++ b/src/client/components/follow-button.vue
@@ -161,7 +161,7 @@ export default defineComponent({
 		width: 31px;
 	}
 
-	&:focus {
+	&:focus-visible {
 		&:after {
 			content: "";
 			pointer-events: none;
diff --git a/src/client/components/media-caption.vue b/src/client/components/media-caption.vue
index 73eba23025..b35b101d06 100644
--- a/src/client/components/media-caption.vue
+++ b/src/client/components/media-caption.vue
@@ -206,7 +206,7 @@ export default defineComponent({
 		min-width: 100%;
 		min-height: 90px;
 
-		&:focus {
+		&:focus-visible {
 			outline: none;
 		}
 
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 9fa986836d..3b07884cee 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -888,7 +888,7 @@ export default defineComponent({
 	//content-visibility: auto;
   //contain-intrinsic-size: 0 128px;
 
-	&:focus {
+	&:focus-visible {
 		outline: none;
 
 		&:after {
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 657053cc93..4ec09e76db 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -819,7 +819,7 @@ export default defineComponent({
 			color: var(--fg);
 			font-family: inherit;
 
-			&:focus {
+			&:focus-visible {
 				outline: none;
 			}
 
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index 6e3cd485c8..53b973fe55 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -1,7 +1,7 @@
 <template>
 <component class="bghgjjyj _button"
 	:is="link ? 'MkA' : 'button'"
-	:class="{ inline, primary, danger, full }"
+	:class="{ inline, primary, danger, rounded, full }"
 	:type="type"
 	@click="$emit('click', $event)"
 	@mousedown="onMousedown"
@@ -27,6 +27,11 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		rounded: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		inline: {
 			type: Boolean,
 			required: false,
@@ -124,8 +129,8 @@ export default defineComponent({
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
-	border-radius: 999px;
-	overflow: hidden;
+	border-radius: 4px;
+	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
 
@@ -141,6 +146,10 @@ export default defineComponent({
 		width: 100%;
 	}
 
+	&.rounded {
+		border-radius: 999px;
+	}
+
 	&.primary {
 		font-weight: bold;
 		color: var(--fgOnAccent) !important;
@@ -176,7 +185,7 @@ export default defineComponent({
 		opacity: 0.7;
 	}
 
-	&:focus {
+	&:focus-visible {
 		outline: solid 2px var(--focus);
 		outline-offset: 2px;
 	}
diff --git a/src/client/components/ui/menu.vue b/src/client/components/ui/menu.vue
index 26b4b04b11..d1cf4f2db8 100644
--- a/src/client/components/ui/menu.vue
+++ b/src/client/components/ui/menu.vue
@@ -206,7 +206,7 @@ export default defineComponent({
 			background: var(--accentDarken);
 		}
 
-		&:not(:active):focus {
+		&:not(:active):focus-visible {
 			box-shadow: 0 0 0 2px var(--focus) inset;
 		}
 
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index 1e0d4dc64c..84783360bb 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -53,7 +53,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.messaging,
-				icon: 'fas fa-comments'
+				icon: 'fas fa-comments',
+				bg: 'var(--bg)',
 			},
 			fetching: true,
 			moreFetching: false,
diff --git a/src/client/pages/reversi/game.setting.vue b/src/client/pages/reversi/game.setting.vue
index 52757b0032..eb6f24e4ab 100644
--- a/src/client/pages/reversi/game.setting.vue
+++ b/src/client/pages/reversi/game.setting.vue
@@ -303,7 +303,7 @@ export default defineComponent({
 						-moz-appearance: none;
 						appearance: none;
 
-						&:focus,
+						&:focus-visible,
 						&:active {
 							border-color: var(--accent);
 						}
diff --git a/src/client/pages/settings/index.link.vue b/src/client/pages/settings/index.link.vue
index 37d06bc22e..895efffc9c 100644
--- a/src/client/pages/settings/index.link.vue
+++ b/src/client/pages/settings/index.link.vue
@@ -1,13 +1,17 @@
 <template>
 <div class="qmfkfnzj">
-	<a class="main _button" :href="to" target="_blank" v-if="external">
+	<a v-if="external" class="main _button" :href="to" target="_blank">
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot></slot></span>
 	</a>
-	<MkA class="main _button" :class="{ active }" :to="to" :behavior="behavior" v-else>
+	<MkA v-else-if="to" class="main _button" :class="{ active }" :to="to" :behavior="behavior">
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot></slot></span>
 	</MkA>
+	<button v-else class="main _button button" :class="{ danger }">
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot></slot></span>
+	</button>
 </div>
 </template>
 
@@ -18,12 +22,16 @@ export default defineComponent({
 	props: {
 		to: {
 			type: String,
-			required: true
+			required: false
 		},
 		active: {
 			type: Boolean,
 			required: false
 		},
+		danger: {
+			type: Boolean,
+			required: false
+		},
 		external: {
 			type: Boolean,
 			required: false
@@ -33,10 +41,6 @@ export default defineComponent({
 			required: false,
 		},
 	},
-	data() {
-		return {
-		};
-	}
 });
 </script>
 
@@ -61,6 +65,10 @@ export default defineComponent({
 			background: var(--accentedBg);
 		}
 
+		&.danger {
+			color: var(--error);
+		}
+
 		> .icon {
 			width: 32px;
 			margin-right: 2px;
diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue
index 399f4049b6..5748d4bf5c 100644
--- a/src/client/pages/settings/index.vue
+++ b/src/client/pages/settings/index.vue
@@ -33,12 +33,10 @@
 			<XLink :active="page === 'api'" replace to="/settings/api"><template #icon><i class="fas fa-key"></i></template>API</XLink>
 			<XLink :active="page === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</XLink>
 		</div>
-		<FormGroup>
-			<FormButton @click="clear">{{ $ts.clearCache }}</FormButton>
-		</FormGroup>
-		<FormGroup>
-			<FormButton @click="logout" danger>{{ $ts.logout }}</FormButton>
-		</FormGroup>
+		<div class="group">
+			<XLink @click="clear"><template #icon><i class="fas fa-trash"></i></template>{{ $ts.clearCache }}</XLink>
+			<XLink @click="logout" danger><template #icon><i class="fas fa-sign-in-alt fa-flip-horizontal"></i></template>{{ $ts.logout }}</XLink>
+		</div>
 	</div>
 	<div class="main">
 		<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
@@ -50,8 +48,6 @@
 import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import { i18n } from '@client/i18n';
 import XLink from './index.link.vue';
-import FormGroup from '@client/components/debobigego/group.vue';
-import FormButton from '@client/components/debobigego/button.vue';
 import MkInfo from '@client/components/ui/info.vue';
 import { scroll } from '@client/scripts/scroll';
 import { signout } from '@client/account';
@@ -63,8 +59,6 @@ import { $i } from '@client/account';
 export default defineComponent({
 	components: {
 		XLink,
-		FormGroup,
-		FormButton,
 		MkInfo,
 	},
 
@@ -220,7 +214,7 @@ export default defineComponent({
 				display: block;
 				width: 50px;
 				height: 50px;
-				margin: 0 auto 8px auto;
+				margin: 8px auto 16px auto;
 			}
 		}
 	}
diff --git a/src/client/style.scss b/src/client/style.scss
index 5b55ab8caf..8e1d74bc76 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -178,7 +178,7 @@ hr {
 		pointer-events: none;
 	}
 
-	&:focus {
+	&:focus-visible {
 		outline: none;
 	}
 
@@ -509,7 +509,7 @@ hr {
 	padding: 5px;
 }
 
-.prism-editor__textarea:focus {
+.prism-editor__textarea:focus-visible {
 	outline: none;
 }
 
diff --git a/src/client/ui/chat/note.vue b/src/client/ui/chat/note.vue
index 26d44d26aa..c376887b84 100644
--- a/src/client/ui/chat/note.vue
+++ b/src/client/ui/chat/note.vue
@@ -872,7 +872,7 @@ export default defineComponent({
 	//content-visibility: auto;
   //contain-intrinsic-size: 0 128px;
 
-	&:focus {
+	&:focus-visible {
 		outline: none;
 	}
 
diff --git a/src/client/ui/chat/post-form.vue b/src/client/ui/chat/post-form.vue
index 0f9a206fab..0cacaf77e7 100644
--- a/src/client/ui/chat/post-form.vue
+++ b/src/client/ui/chat/post-form.vue
@@ -681,7 +681,7 @@ export default defineComponent({
 			color: var(--fg);
 			font-family: inherit;
 
-			&:focus {
+			&:focus-visible {
 				outline: none;
 			}
 
diff --git a/src/client/widgets/aiscript.vue b/src/client/widgets/aiscript.vue
index 2ea6d09ff5..aaf0a0372e 100644
--- a/src/client/widgets/aiscript.vue
+++ b/src/client/widgets/aiscript.vue
@@ -125,7 +125,7 @@ export default defineComponent({
 		box-sizing: border-box;
 		font: inherit;
 
-		&:focus {
+		&:focus-visible {
 			outline: none;
 		}
 	}
diff --git a/src/client/widgets/memo.vue b/src/client/widgets/memo.vue
index 13ab628f24..3f11e6409e 100644
--- a/src/client/widgets/memo.vue
+++ b/src/client/widgets/memo.vue
@@ -81,7 +81,7 @@ export default defineComponent({
 		font: inherit;
 		font-size: 0.9em;
 
-		&:focus {
+		&:focus-visible {
 			outline: none;
 		}
 	}