From 940cdc7ce95425da44ee24c77106a029a7c8e3f6 Mon Sep 17 00:00:00 2001
From: ltlapy <lapy@lapy.link>
Date: Tue, 7 Feb 2023 14:23:48 +0900
Subject: [PATCH] fix(client): Update components of groups and translations

---
 .../frontend/src/pages/admin/settings.vue     |  7 +--
 .../frontend/src/pages/my-groups/group.vue    |  6 +--
 .../frontend/src/pages/my-groups/index.vue    | 46 +++++++++----------
 3 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/packages/frontend/src/pages/admin/settings.vue b/packages/frontend/src/pages/admin/settings.vue
index 9fae2bead5..4d9fd3fcc8 100644
--- a/packages/frontend/src/pages/admin/settings.vue
+++ b/packages/frontend/src/pages/admin/settings.vue
@@ -120,15 +120,15 @@
 					<FormSection>
 						<template #label>Translation</template>
 
-						<FormRadios v-model="translatorType" class="_formBlock">
+						<MkRadios v-model="translatorType">
 							<template #label>Translator type</template>
 							<option :value="null">{{ i18n.ts.none }}</option>
 							<option value="DeepL">DeepL</option>
 							<option value="GoogleNoAPI">Google Translate(without API)</option>
-						</FormRadios>
+						</MkRadios>
 
 						<template v-if="translatorType === 'DeepL'">
-							<FormInput v-model="deeplAuthKey" class="_formBlock">
+							<FormInput v-model="deeplAuthKey">
 								<template #prefix><i class="fas fa-key"></i></template>
 								<template #label>DeepL Auth Key</template>
 							</FormInput>
@@ -150,6 +150,7 @@ import XHeader from './_header_.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
+import MkRadios from '@/components/MkRadios.vue';
 import FormInfo from '@/components/MkInfo.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSplit from '@/components/form/split.vue';
diff --git a/packages/frontend/src/pages/my-groups/group.vue b/packages/frontend/src/pages/my-groups/group.vue
index 935ea3ac24..4fea39116a 100644
--- a/packages/frontend/src/pages/my-groups/group.vue
+++ b/packages/frontend/src/pages/my-groups/group.vue
@@ -24,9 +24,9 @@
 								<MkUserName :user="user" class="name"/>
 								<MkAcct :user="user" class="acct"/>
 							</div>
-							<div v-if="user.id === group.ownerId" :title="$ts.leader" style="color: var(--badge);"><i class="fas fa-crown"></i></div>
+							<div v-if="user.id === group.ownerId" :title="$ts.leader" style="color: var(--badge);"><i class="ti ti-crown"></i></div>
 							<div v-else-if="group && $i.id === group.ownerId" class="action">
-								<button class="_button" :title="$ts.banish" @click="removeUser(user)"><i class="fas fa-times"></i></button>
+								<button class="_button" :title="$ts.banish" @click="removeUser(user)"><i class="ti ti-close"></i></button>
 							</div>
 						</div>
 					</div>
@@ -134,7 +134,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => group ? {
 	title: group.name,
-	icon: 'fas fa-users',
+	icon: 'ti ti-briefcase',
 } : null));
 
 </script>
diff --git a/packages/frontend/src/pages/my-groups/index.vue b/packages/frontend/src/pages/my-groups/index.vue
index 02a495d51c..e52e8622bc 100644
--- a/packages/frontend/src/pages/my-groups/index.vue
+++ b/packages/frontend/src/pages/my-groups/index.vue
@@ -3,38 +3,38 @@
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div v-if="tab === 'owned'" class="_content">
-			<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton>
+			<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="ti ti-plus"></i> {{ $ts.createGroup }}</MkButton>
 
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="ownedPagination">
-				<div v-for="group in items" :key="group.id" class="_card">
-					<div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div>
-					<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
-				</div>
+				<MkA v-for="group in items" :key="group.id" class="list _panel" :to="`/my/grops/${ group.id }`">
+					<div class="name">{{ group.name }}</div>
+					<MkAvatars :user-ids="group.userIds"/>
+				</MkA>
 			</MkPagination>
 		</div>
 
 		<div v-else-if="tab === 'joined'" class="_content">
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="joinedPagination">
-				<div v-for="group in items" :key="group.id" class="_card">
-					<div class="_title">{{ group.name }}</div>
-					<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
-					<div class="_footer">
+				<MkA v-for="group in items" :key="group.id" class="list _panel" :to="`/my/grops/${ group.id }`">
+					<div class="name">{{ group.name }}</div>
+					<MkAvatars :user-ids="group.userIds"/>
+					<div class="actions">
 						<MkButton danger @click="leave(group)">{{ $ts.leaveGroup }}</MkButton>
 					</div>
-				</div>
+				</MkA>
 			</MkPagination>
 		</div>
 
 		<div v-else-if="tab === 'invites'" class="_content">
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="invitationPagination">
-				<div v-for="invitation in items" :key="invitation.id" class="_card">
-					<div class="_title">{{ invitation.group.name }}</div>
-					<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div>
-					<div class="_footer">
-						<MkButton primary inline @click="acceptInvite(invitation)"><i class="fas fa-check"></i> {{ $ts.accept }}</MkButton>
-						<MkButton primary inline @click="rejectInvite(invitation)"><i class="fas fa-ban"></i> {{ $ts.reject }}</MkButton>
+				<MkA v-for="invitation in items" :key="invitation.id" class="list _panel">
+					<div class="name">{{ invitation.group.name }}</div>
+					<MkAvatars :user-ids="invitation.group.userIds"/>
+					<div class="actions">
+						<MkButton primary inline @click="acceptInvite(invitation)"><i class="ti ti-check"></i> {{ $ts.accept }}</MkButton>
+						<MkButton primary inline @click="rejectInvite(invitation)"><i class="ti ti-na"></i> {{ $ts.reject }}</MkButton>
 					</div>
-				</div>
+				</MkA>
 			</MkPagination>
 		</div>
 	</MkSpacer>
@@ -115,22 +115,22 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => [{
 	key: 'owned',
 	title: i18n.ts.ownedGroups,
-	icon: 'fas fa-user-tie',
+	icon: 'ti ti-flag-alt',
 }, {
 	key: 'joined',
 	title: i18n.ts.joinedGroups,
-	icon: 'fas fa-id-badge',
+	icon: 'ti ti-id-badge',
 }, {
 	key: 'invites',
 	title: i18n.ts.invites,
-	icon: 'fas fa-envelope-open-text',
+	icon: 'ti ti-envelope-open-text',
 }]);
-
+`
 definePageMetadata({
 	title: i18n.ts.groups,
-	icon: 'fas fa-users',
+	icon: 'ti ti-briefcase',
 	actions: [{
-		icon: 'fas fa-plus',
+		icon: 'ti ti-plus',
 		text: i18n.ts.createGroup,
 		handler: create,
 	}],