🎨

packages/client/src/components/MkSignin.vue

@@ -41,9 +41,9 @@
 		</div>
 	</div>
 	<div class="social _section">
-		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="fab fa-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
-		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="fab fa-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
-		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="fab fa-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
+		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="ti ti-brand-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
+		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="ti ti-brand-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
+		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="ti ti-brand-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
 	</div>
 </form>
 </template>
@@ -51,6 +51,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
 import { toUnicode } from 'punycode/';
+import { showSuspendedDialog } from '../scripts/show-suspended-dialog';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
 import MkInfo from '@/components/MkInfo.vue';
@@ -58,7 +59,6 @@ import { apiUrl, host as configHost } from '@/config';
 import { byteify, hexify } from '@/scripts/2fa';
 import * as os from '@/os';
 import { login } from '@/account';
-import { showSuspendedDialog } from '../scripts/show-suspended-dialog';
 import { instance } from '@/instance';
 import { i18n } from '@/i18n';
 
@@ -85,7 +85,7 @@ const props = defineProps({
 	withAvatar: {
 		type: Boolean,
 		required: false,
-		default: true
+		default: true,
 	},
 	autoSet: {
 		type: Boolean,
@@ -95,13 +95,13 @@ const props = defineProps({
 	message: {
 		type: String,
 		required: false,
-		default: ''
-	}
+		default: '',
+	},
 });
 
 function onUsernameChange() {
 	os.api('users/show', {
-		username: username
+		username: username,
 	}).then(userResponse => {
 		user = userResponse;
 	}, () => {
@@ -123,10 +123,10 @@ function queryKey() {
 			allowCredentials: challengeData.securityKeys.map(key => ({
 				id: byteify(key.id, 'hex'),
 				type: 'public-key',
-				transports: ['usb', 'nfc', 'ble', 'internal']
+				transports: ['usb', 'nfc', 'ble', 'internal'],
 			})),
-			timeout: 60 * 1000
-		}
+			timeout: 60 * 1000,
+		},
 	}).catch(() => {
 		queryingKey = false;
 		return Promise.reject(null);
@@ -141,7 +141,7 @@ function queryKey() {
 			clientDataJSON: hexify(credential.response.clientDataJSON),
 			credentialId: credential.id,
 			challengeId: challengeData.challengeId,
-      'hcaptcha-response': hCaptchaResponse,
+			'hcaptcha-response': hCaptchaResponse,
 			'g-recaptcha-response': reCaptchaResponse,
 		});
 	}).then(res => {
@@ -151,7 +151,7 @@ function queryKey() {
 		if (err === null) return;
 		os.alert({
 			type: 'error',
-			text: i18n.ts.signinFailed
+			text: i18n.ts.signinFailed,
 		});
 		signing = false;
 	});
@@ -165,8 +165,8 @@ function onSubmit() {
 			os.api('signin', {
 				username,
 				password,
-        'hcaptcha-response': hCaptchaResponse,
-        'g-recaptcha-response': reCaptchaResponse,
+				'hcaptcha-response': hCaptchaResponse,
+				'g-recaptcha-response': reCaptchaResponse,
 			}).then(res => {
 				totpLogin = true;
 				signing = false;
@@ -181,9 +181,9 @@ function onSubmit() {
 		os.api('signin', {
 			username,
 			password,
-      'hcaptcha-response': hCaptchaResponse,
+			'hcaptcha-response': hCaptchaResponse,
 			'g-recaptcha-response': reCaptchaResponse,
-			token: user && user.twoFactorEnabled ? token : undefined
+			token: user && user.twoFactorEnabled ? token : undefined,
 		}).then(res => {
 			emit('login', res);
 			onLogin(res);
@@ -197,7 +197,7 @@ function loginFailed(err) {
 			os.alert({
 				type: 'error',
 				title: i18n.ts.loginFailed,
-				text: i18n.ts.noSuchUser
+				text: i18n.ts.noSuchUser,
 			});
 			break;
 		}
@@ -226,7 +226,7 @@ function loginFailed(err) {
 			os.alert({
 				type: 'error',
 				title: i18n.ts.loginFailed,
-				text: JSON.stringify(err)
+				text: JSON.stringify(err),
 			});
 		}
 	}

packages/client/src/components/MkUrlPreview.vue

@@ -26,7 +26,7 @@
 	</transition>
 	<div v-if="tweetId" class="expandTweet">
 		<a @click="tweetExpanded = true">
-			<i class="fab fa-twitter"></i> {{ i18n.ts.expandTweet }}
+			<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
 		</a>
 	</div>
 </div>

packages/client/src/pages/admin/index.vue

@@ -107,7 +107,7 @@ const menuDef = $computed(() => [{
 		to: '/about#federation',
 		active: currentPage?.route.name === 'federation',
 	}, {
-		icon: 'fas fa-clipboard-list',
+		icon: 'ti ti-clock-play',
 		text: i18n.ts.jobQueue,
 		to: '/admin/queue',
 		active: currentPage?.route.name === 'queue',

packages/client/src/pages/admin/integrations.vue

@@ -3,19 +3,19 @@
 		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
 		<FormFolder class="_formBlock">
-			<template #icon><i class="fab fa-twitter"></i></template>
+			<template #icon><i class="ti ti-brand-twitter"></i></template>
 			<template #label>Twitter</template>
 			<template #suffix>{{ enableTwitterIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
 			<XTwitter/>
 		</FormFolder>
 		<FormFolder class="_formBlock">
-			<template #icon><i class="fab fa-github"></i></template>
+			<template #icon><i class="ti ti-brand-github"></i></template>
 			<template #label>GitHub</template>
 			<template #suffix>{{ enableGithubIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
 			<XGithub/>
 		</FormFolder>
 		<FormFolder class="_formBlock">
-			<template #icon><i class="fab fa-discord"></i></template>
+			<template #icon><i class="ti ti-brand-discord"></i></template>
 			<template #label>Discord</template>
 			<template #suffix>{{ enableDiscordIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
 			<XDiscord/>

packages/client/src/pages/admin/queue.vue

@@ -51,6 +51,6 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata({
 	title: i18n.ts.jobQueue,
-	icon: 'fas fa-clipboard-list',
+	icon: 'ti ti-clock-play',
 });
 </script>

packages/client/src/pages/settings/integration.vue

 <template>
 <div class="_formRoot">
 	<FormSection v-if="instance.enableTwitterIntegration">
-		<template #label><i class="fab fa-twitter"></i> Twitter</template>
+		<template #label><i class="ti ti-brand-twitter"></i> Twitter</template>
 		<p v-if="integrations.twitter">{{ i18n.ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p>
 		<MkButton v-if="integrations.twitter" danger @click="disconnectTwitter">{{ i18n.ts.disconnectService }}</MkButton>
 		<MkButton v-else primary @click="connectTwitter">{{ i18n.ts.connectService }}</MkButton>
 	</FormSection>
 
 	<FormSection v-if="instance.enableDiscordIntegration">
-		<template #label><i class="fab fa-discord"></i> Discord</template>
+		<template #label><i class="ti ti-brand-discord"></i> Discord</template>
 		<p v-if="integrations.discord">{{ i18n.ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p>
 		<MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ i18n.ts.disconnectService }}</MkButton>
 		<MkButton v-else primary @click="connectDiscord">{{ i18n.ts.connectService }}</MkButton>
 	</FormSection>
 
 	<FormSection v-if="instance.enableGithubIntegration">
-		<template #label><i class="fab fa-github"></i> GitHub</template>
+		<template #label><i class="ti ti-brand-github"></i> GitHub</template>
 		<p v-if="integrations.github">{{ i18n.ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p>
 		<MkButton v-if="integrations.github" danger @click="disconnectGithub">{{ i18n.ts.disconnectService }}</MkButton>
 		<MkButton v-else primary @click="connectGithub">{{ i18n.ts.connectService }}</MkButton>