fix(settings): Invert app nav icons when active

Signed-off-by: Christopher Ng <chrng8@gmail.com>

2 files changed, 28 insertions, 11 deletions

diff --git a/apps/settings/src/components/GroupListItem.vue b/apps/settings/src/components/GroupListItem.vue
index 23333583000..7cfe80a66f8 100644
--- a/apps/settings/src/components/GroupListItem.vue
+++ b/apps/settings/src/components/GroupListItem.vue
@@ -25,10 +25,12 @@
 		:exact="true"
 		:name="name"
 		:to="{ name: 'group', params: { selectedGroup: encodeURIComponent(id) } }"
-		icon="icon-group"
 		:loading="loadingRenameGroup"
 		:menu-open="openGroupMenu"
 		@update:menuOpen="handleGroupMenuOpen">
+		<template #icon>
+			<AccountGroup :size="20" />
+		</template>
 		<template #counter>
 			<NcCounterBubble v-if="count"
 				:type="active ? 'highlighted' : undefined">
@@ -54,18 +56,21 @@
 </template>
 
 <script>
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
+
+import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
 
 export default {
 	name: 'GroupListItem',
 	components: {
-		NcActionInput,
+		AccountGroup,
 		NcActionButton,
-		NcCounterBubble,
+		NcActionInput,
 		NcAppNavigationItem,
+		NcCounterBubble,
 	},
 	props: {
 		/**
diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index ba59d38bcae..8323c593006 100644
--- a/apps/settings/src/views/Users.vue
+++ b/apps/settings/src/views/Users.vue
@@ -47,8 +47,10 @@
 					<NcAppNavigationItem id="everyone"
 						:exact="true"
 						:name="t('settings', 'Active users')"
-						:to="{ name: 'users' }"
-						icon="icon-contacts-dark">
+						:to="{ name: 'users' }">
+						<template #icon>
+							<AccountGroup :size="20" />
+						</template>
 						<template #counter>
 							<NcCounterBubble :type="!selectedGroupDecoded ? 'highlighted' : undefined">
 								{{ userCount }}
@@ -59,8 +61,10 @@
 						id="admin"
 						:exact="true"
 						:name="t('settings', 'Admins')"
-						:to="{ name: 'group', params: { selectedGroup: 'admin' } }"
-						icon="icon-user-admin">
+						:to="{ name: 'group', params: { selectedGroup: 'admin' } }">
+						<template #icon>
+							<ShieldAccount :size="20" />
+						</template>
 						<template v-if="adminGroupMenu.count > 0" #counter>
 							<NcCounterBubble :type="selectedGroupDecoded === 'admin' ? 'highlighted' : undefined">
 								{{ adminGroupMenu.count }}
@@ -73,8 +77,10 @@
 						id="disabled"
 						:exact="true"
 						:name="t('settings', 'Disabled users')"
-						:to="{ name: 'group', params: { selectedGroup: 'disabled' } }"
-						icon="icon-disabled-users">
+						:to="{ name: 'group', params: { selectedGroup: 'disabled' } }">
+						<template #icon>
+							<AccountOff :size="20" />
+						</template>
 						<template v-if="disabledGroupMenu.usercount > 0" #counter>
 							<NcCounterBubble :type="selectedGroupDecoded === 'disabled' ? 'highlighted' : undefined">
 								{{ disabledGroupMenu.usercount }}
@@ -127,8 +133,11 @@ import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigati
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
+import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
+import AccountOff from 'vue-material-design-icons/AccountOff.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
+import ShieldAccount from 'vue-material-design-icons/ShieldAccount.vue'
 
 import GroupListItem from '../components/GroupListItem.vue'
 import UserList from '../components/UserList.vue'
@@ -140,6 +149,8 @@ export default {
 	name: 'Users',
 
 	components: {
+		AccountGroup,
+		AccountOff,
 		Cog,
 		Fragment,
 		GroupListItem,
@@ -152,6 +163,7 @@ export default {
 		NcContent,
 		NcCounterBubble,
 		Plus,
+		ShieldAccount,
 		UserList,
 		UserSettingsDialog,
 	},