From d793f33df5ab98e4a68529a5169845aab3574d80 Mon Sep 17 00:00:00 2001
From: limepotato <limepot@protonmail.ch>
Date: Fri, 9 Aug 2024 02:42:17 -0600
Subject: [PATCH] Change user icon from ph-user to ph-head-circuit

---
 packages/client/src/account.ts                        | 2 +-
 packages/client/src/components/MkChannelPreview.vue   | 2 +-
 packages/client/src/components/MkPostForm.vue         | 2 +-
 packages/client/src/components/MkRenoteButton.vue     | 2 +-
 packages/client/src/components/MkSearch.vue           | 4 ++--
 packages/client/src/components/MkTutorialDialog.vue   | 2 +-
 packages/client/src/components/MkVisibility.vue       | 2 +-
 packages/client/src/components/MkVisibilityPicker.vue | 2 +-
 packages/client/src/navbar.ts                         | 4 ++--
 packages/client/src/pages/admin/emojis.vue            | 2 +-
 packages/client/src/pages/admin/index.vue             | 6 +++---
 packages/client/src/pages/admin/overview.stats.vue    | 2 +-
 packages/client/src/pages/admin/users.vue             | 2 +-
 packages/client/src/pages/channel.vue                 | 2 +-
 packages/client/src/pages/explore.vue                 | 2 +-
 packages/client/src/pages/instance-info.vue           | 2 +-
 packages/client/src/pages/my-groups/group.vue         | 2 +-
 packages/client/src/pages/my-groups/index.vue         | 2 +-
 packages/client/src/pages/search.vue                  | 2 +-
 packages/client/src/pages/settings/accounts.vue       | 2 +-
 packages/client/src/pages/settings/index.vue          | 2 +-
 packages/client/src/pages/settings/profile.vue        | 2 +-
 packages/client/src/pages/signup-complete.vue         | 2 +-
 packages/client/src/pages/tag.vue                     | 2 +-
 packages/client/src/pages/timeline.vue                | 4 ++--
 packages/client/src/pages/user-info.vue               | 2 +-
 packages/client/src/pages/user/followers.vue          | 2 +-
 packages/client/src/pages/user/following.vue          | 2 +-
 packages/client/src/pages/user/index.vue              | 4 ++--
 packages/client/src/pages/verify-email.vue            | 2 +-
 packages/client/src/scripts/get-note-menu.ts          | 2 +-
 packages/client/src/scripts/get-user-menu.ts          | 2 +-
 packages/client/src/ui/universal.vue                  | 6 +++---
 packages/client/src/widgets/user-list.vue             | 2 +-
 34 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index 74c1ad15c..3c87aaf2d 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -262,7 +262,7 @@ export async function openAccountMenu(
 			},
 			{
 				type: "link",
-				icon: "ph-users ph-bold ph-lg",
+				icon: "ph-head-circuits ph-bold ph-lg",
 				text: i18n.ts.manageAccounts,
 				to: "/settings/accounts",
 			},
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
index 7ef109520..7f8a095c4 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -7,7 +7,7 @@
 			</div>
 			<div class="status">
 				<div>
-					<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i>
+					<i class="ph-head-circuits ph-bold ph-lg ph-fw ph-lg"></i>
 					<I18n
 						:src="i18n.ts._channel.usersCount"
 						tag="span"
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 7c1d52655..af5174e92 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -29,7 +29,7 @@
 					>{{ maxTextLength - textLength }}</span
 				>
 				<span v-if="localOnly" class="local-only"
-					><i class="ph-users ph-bold ph-lg"></i
+					><i class="ph-head-circuits ph-bold ph-lg"></i
 				></span>
 				<button
 					ref="visibilityButton"
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 353b45903..e6fa345c6 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -187,7 +187,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 	if (canRenote) {
 		buttonActions.push({
 			text: `${i18n.ts.renote} (${i18n.ts.local})`,
-			icon: "ph-users ph-bold ph-lg",
+			icon: "ph-head-circuits ph-bold ph-lg",
 			danger: false,
 			action: () => {
 				os.api(
diff --git a/packages/client/src/components/MkSearch.vue b/packages/client/src/components/MkSearch.vue
index fd66db720..2856ca8c8 100644
--- a/packages/client/src/components/MkSearch.vue
+++ b/packages/client/src/components/MkSearch.vue
@@ -40,7 +40,7 @@ async function openSearchFilters(ev) {
 	await os.popupMenu(
 			[
 				{
-					icon: "ph-user ph-bold ph-lg",
+					icon: "ph-head-circuit ph-bold ph-lg",
 					text: i18n.ts._filters.fromUser,
 					action: () => {
 						os.selectUser().then((user) => {
@@ -75,7 +75,7 @@ async function openSearchFilters(ev) {
 					},
 				},
 				{
-					icon: "ph-users-three ph-bold ph-lg",
+					icon: "ph-head-circuits-three ph-bold ph-lg",
 					text: i18n.ts._filters.followersOnly,
 					action: () => {
 						appendSearchFilter("filter:followers");
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
index dd5336d47..9e70df6f9 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -136,7 +136,7 @@
 										tag="div"
 									>
 										<template #icon>
-											<i class="ph-users ph-bold ph-lg" />
+											<i class="ph-head-circuits ph-bold ph-lg" />
 										</template>
 									</I18n>
 								</li>
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index 78618c2cf..a3e11682d 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -18,7 +18,7 @@
 	</span>
 	<span v-if="note.localOnly" :class="$style.localOnly"
 		><i
-			class="ph-users ph-bold ph-lg"
+			class="ph-head-circuits ph-bold ph-lg"
 			v-tooltip="i18n.ts._visibility.localOnly"
 		></i
 	></span>
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index 80c534fe6..0194fad23 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -100,7 +100,7 @@
 				@click="localOnly = !localOnly"
 			>
 				<div :class="$style.icon">
-					<i class="ph-users ph-bold ph-lg"></i>
+					<i class="ph-head-circuits ph-bold ph-lg"></i>
 				</div>
 				<div :class="$style.body">
 					<span :class="$style.itemTitle">{{
diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
index 0f2aa60a4..1a6b6e0fc 100644
--- a/packages/client/src/navbar.ts
+++ b/packages/client/src/navbar.ts
@@ -56,7 +56,7 @@ export const navbarItemDef = reactive({
 	/*
 	groups: {
 		title: 'groups',
-		icon: 'ph-users-three ph-bold ph-lg',
+		icon: 'ph-head-circuits-three ph-bold ph-lg',
 		show: computed(() => $i != null),
 		to: '/my/groups',
 	},
@@ -96,7 +96,7 @@ export const navbarItemDef = reactive({
 	},
 	groups: {
 		title: "groups",
-		icon: "ph-users-three ph-bold ph-lg",
+		icon: "ph-head-circuits-three ph-bold ph-lg",
 		to: "/my/groups",
 	},
 	ui: {
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index e646bb2f3..a747565fb 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -428,7 +428,7 @@ const headerActions = $computed(() => [
 const headerTabs = $computed(() => [
 	{
 		key: "local",
-		icon: "ph-users ph-bold ph-lg",
+		icon: "ph-head-circuits ph-bold ph-lg",
 		title: i18n.ts.local,
 	},
 	{
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 4389ae154..5e3dd8b96 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -136,7 +136,7 @@ const menuDef = $computed(() => [
 				? [
 						{
 							type: "button",
-							icon: "ph-user-plus ph-bold ph-lg",
+							icon: "ph-head-circuit-plus ph-bold ph-lg",
 							text: i18n.ts.invite,
 							action: invite,
 						},
@@ -154,7 +154,7 @@ const menuDef = $computed(() => [
 				active: currentPage?.route.name === "overview",
 			},
 			{
-				icon: "ph-users ph-bold ph-lg",
+				icon: "ph-head-circuits ph-bold ph-lg",
 				text: i18n.ts.users,
 				to: "/admin/users",
 				active: currentPage?.route.name === "users",
@@ -352,7 +352,7 @@ const lookup = (ev) => {
 		[
 			{
 				text: i18n.ts.user,
-				icon: "ph-user ph-bold ph-lg",
+				icon: "ph-head-circuit ph-bold ph-lg",
 				action: () => {
 					lookupUser();
 				},
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index 043904772..5d8c96d15 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -8,7 +8,7 @@
 			<div v-else :class="$style.root">
 				<div class="item _panel users">
 					<div class="icon">
-						<i class="ph-users ph-bold ph-xl"></i>
+						<i class="ph-head-circuits ph-bold ph-xl"></i>
 					</div>
 					<div class="body">
 						<div class="value">
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index 5ed0fb365..3192740c7 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -207,7 +207,7 @@ const headerTabs = $computed(() => []);
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.users,
-		icon: "ph-users ph-bold ph-lg",
+		icon: "ph-head-circuits ph-bold ph-lg",
 	})),
 );
 </script>
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index e35a63d9a..896619a7c 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -40,7 +40,7 @@
 						<div class="status">
 							<div>
 								<i
-									class="ph-users ph-bold ph-lg ph-fw ph-lg"
+									class="ph-head-circuits ph-bold ph-lg ph-fw ph-lg"
 								></i
 								><I18n
 									:src="i18n.ts._channel.usersCount"
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index 304f6e24d..e31d6209a 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -58,7 +58,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => [
 	{
 		key: "users",
-		icon: "ph-users ph-bold ph-lg",
+		icon: "ph-head-circuits ph-bold ph-lg",
 		title: i18n.ts.users,
 	},
 	{
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 015fd2d80..c15a39cd1 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -492,7 +492,7 @@ if (iAmAdmin) {
 		{
 			key: "users",
 			title: i18n.ts.users,
-			icon: "ph-users ph-bold ph-lg",
+			icon: "ph-head-circuits ph-bold ph-lg",
 		},
 		{
 			key: "raw",
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index d77751e8d..eb78781bb 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -135,7 +135,7 @@ async function deleteGroup() {
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.members,
-		icon: "ph-users-three ph-bold ph-lg",
+		icon: "ph-head-circuits-three ph-bold ph-lg",
 	})),
 );
 
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index d4cc6ab71..ed0e3dfa5 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -82,7 +82,7 @@ const headerActions = $computed(() => [
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.groups,
-		icon: "ph-users-three ph-bold ph-lg",
+		icon: "ph-head-circuits-three ph-bold ph-lg",
 	})),
 );
 
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index 4178f46fa..820ed80c7 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -153,7 +153,7 @@ const headerTabs = $computed(() => [
 	},
 	{
 		key: "users",
-		icon: "ph-users ph-bold ph-lg",
+		icon: "ph-head-circuits ph-bold ph-lg",
 		title: i18n.ts.users,
 	},
 ]);
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index 52a9fb15a..1df052168 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -150,7 +150,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.accounts,
-	icon: "ph-users ph-bold ph-lg",
+	icon: "ph-head-circuits ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 5b71457b9..b94010ec7 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -94,7 +94,7 @@ const menuDef = computed(() => [
 		title: i18n.ts.basicSettings,
 		items: [
 			{
-				icon: "ph-user ph-bold ph-lg",
+				icon: "ph-head-circuit ph-bold ph-lg",
 				text: i18n.ts.profile,
 				to: "/settings/profile",
 				active: currentPage?.route.name === "profile",
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index f73dc6cdc..8a05875cd 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -301,7 +301,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.profile,
-	icon: "ph-user ph-bold ph-lg",
+	icon: "ph-head-circuit ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/signup-complete.vue b/packages/client/src/pages/signup-complete.vue
index deb1f7846..93c66107a 100644
--- a/packages/client/src/pages/signup-complete.vue
+++ b/packages/client/src/pages/signup-complete.vue
@@ -32,6 +32,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.signup,
-	icon: "ph-user ph-bold ph-lg",
+	icon: "ph-head-circuit ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index e9a1792a0..0d3ff315b 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -87,7 +87,7 @@ const headerTabs = $computed(() => [
 	},
 	{
 		key: "users",
-		icon: "ph-users ph-bold ph-lg",
+		icon: "ph-head-circuits ph-bold ph-lg",
 		title: i18n.ts.users,
 	},
 ]);
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index d30049227..040dbb80e 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -235,7 +235,7 @@ const headerTabs = $computed(() => [
 				{
 					key: "local",
 					title: i18n.ts._timelines.local,
-					icon: "ph-users ph-bold ph-lg",
+					icon: "ph-head-circuits ph-bold ph-lg",
 					iconOnly: true,
 				},
 		  ]
@@ -277,7 +277,7 @@ definePageMetadata(
 		title: i18n.ts.timeline,
 		icon:
 			src === "local"
-				? "ph-users ph-bold ph-lg"
+				? "ph-head-circuits ph-bold ph-lg"
 				: src === "social"
 				? "ph-handshake ph-bold ph-lg"
 				: src === "recommended"
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 4e3f71630..c558bec5d 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -222,7 +222,7 @@
 							inline
 							danger
 							@click="deleteAccount"
-							><i class="ph-user-minus ph-bold ph-lg"></i>
+							><i class="ph-head-circuit-minus ph-bold ph-lg"></i>
 							{{ i18n.ts.deleteAccount }}</FormButton
 						>
 					</div>
diff --git a/packages/client/src/pages/user/followers.vue b/packages/client/src/pages/user/followers.vue
index 5b4294d54..e5f1f3993 100644
--- a/packages/client/src/pages/user/followers.vue
+++ b/packages/client/src/pages/user/followers.vue
@@ -65,7 +65,7 @@ definePageMetadata(
 	computed(() =>
 		user
 			? {
-					icon: "ph-user ph-bold ph-lg",
+					icon: "ph-head-circuit ph-bold ph-lg",
 					title: user.name
 						? `${user.name} (@${user.username})`
 						: `@${user.username}`,
diff --git a/packages/client/src/pages/user/following.vue b/packages/client/src/pages/user/following.vue
index 7612bb722..0e081b1ba 100644
--- a/packages/client/src/pages/user/following.vue
+++ b/packages/client/src/pages/user/following.vue
@@ -65,7 +65,7 @@ definePageMetadata(
 	computed(() =>
 		user
 			? {
-					icon: "ph-user ph-bold ph-lg",
+					icon: "ph-head-circuit ph-bold ph-lg",
 					title: user.name
 						? `${user.name} (@${user.username})`
 						: `@${user.username}`,
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index a5cdc21fb..4eaf2e1f9 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -88,7 +88,7 @@ const headerTabs = $computed(() =>
 				{
 					key: "home",
 					title: i18n.ts.overview,
-					icon: "ph-user ph-bold ph-lg",
+					icon: "ph-head-circuit ph-bold ph-lg",
 				},
 				...(($i && $i.id === user.id) || user.publicReactions
 					? [
@@ -126,7 +126,7 @@ definePageMetadata(
 	computed(() =>
 		user
 			? {
-					icon: "ph-user ph-bold ph-lg",
+					icon: "ph-head-circuit ph-bold ph-lg",
 					title: user.name
 						? `${user.name} (@${user.username})`
 						: `@${user.username}`,
diff --git a/packages/client/src/pages/verify-email.vue b/packages/client/src/pages/verify-email.vue
index b5830aec4..8931e3098 100644
--- a/packages/client/src/pages/verify-email.vue
+++ b/packages/client/src/pages/verify-email.vue
@@ -34,6 +34,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: "Verify email",
-	icon: "ph-user ph-bold ph-lg",
+	icon: "ph-head-circuit ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index b56761814..f676b8042 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -436,7 +436,7 @@ export function getNoteMenu(props: {
 			!isAppearAuthor
 				? {
 						type: "parent",
-						icon: "ph-user ph-bold ph-lg",
+						icon: "ph-head-circuit ph-bold ph-lg",
 						text: i18n.ts.user,
 						children: getUserMenu(appearNote.user),
 				  }
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index 8e578bcc7..0298a798f 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -312,7 +312,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		},
 		meId !== user.id
 			? {
-					icon: "ph-users-three ph-bold ph-lg",
+					icon: "ph-head-circuits-three ph-bold ph-lg",
 					text: i18n.ts.inviteToGroup,
 					action: inviteGroup,
 			  }
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 651f7e968..247e74cd3 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -238,21 +238,21 @@ function messagingStart(ev) {
 		[
 			{
 				text: i18n.ts.messagingWithUser,
-				icon: "ph-user ph-bold ph-lg",
+				icon: "ph-head-circuit ph-bold ph-lg",
 				action: () => {
 					startUser();
 				},
 			},
 			{
 				text: i18n.ts.messagingWithGroup,
-				icon: "ph-users-three ph-bold ph-lg",
+				icon: "ph-head-circuits-three ph-bold ph-lg",
 				action: () => {
 					startGroup();
 				},
 			},
 			{
 				text: i18n.ts.manageGroups,
-				icon: "ph-user-circle-gear ph-bold ph-lg",
+				icon: "ph-head-circuit-circle-gear ph-bold ph-lg",
 				action: () => {
 					mainRouter.push("/my/groups");
 				},
diff --git a/packages/client/src/widgets/user-list.vue b/packages/client/src/widgets/user-list.vue
index 45cdad00e..33566c2e3 100644
--- a/packages/client/src/widgets/user-list.vue
+++ b/packages/client/src/widgets/user-list.vue
@@ -1,7 +1,7 @@
 <template>
 	<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
 		<template #header
-			><i class="ph-user-list ph-bold ph-lg"></i>
+			><i class="ph-head-circuit-list ph-bold ph-lg"></i>
 			{{ list ? list.name : i18n.ts._widgets.userList }}</template
 		>
 		<template #func="{ buttonStyleClass }"