🎨

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