🎨

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,

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);
 						}

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;

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;
 			}
 		}
 	}