From 7e98692635470be92e03f97f356c7368634f8d8d Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Mon, 13 Apr 2020 18:13:50 -0400
Subject: [PATCH] Users nav (#405)

* Fix users-nav + add divider

* Fix project chooser name

* Don't use list item title in nav

* Add divider in users nav

* Fix default size of text
---
 .../collections/components/navigation/navigation.vue |  4 +---
 .../users/components/navigation/navigation.vue       | 12 ++++++++++--
 src/styles/_base.scss                                |  3 ++-
 .../components/project-chooser/project-chooser.vue   |  4 ++--
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/modules/collections/components/navigation/navigation.vue b/src/modules/collections/components/navigation/navigation.vue
index 3cdd2aa8f2..1670d41952 100644
--- a/src/modules/collections/components/navigation/navigation.vue
+++ b/src/modules/collections/components/navigation/navigation.vue
@@ -2,9 +2,7 @@
 	<v-list nav>
 		<v-list-item v-for="navItem in navItems" :key="navItem.to" :to="navItem.to">
 			<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
-			<v-list-item-content>
-				<v-list-item-title>{{ navItem.name }}</v-list-item-title>
-			</v-list-item-content>
+			<v-list-item-content>{{ navItem.name }}</v-list-item-content>
 		</v-list-item>
 	</v-list>
 </template>
diff --git a/src/modules/users/components/navigation/navigation.vue b/src/modules/users/components/navigation/navigation.vue
index 3f1b47f08e..d63d35719f 100644
--- a/src/modules/users/components/navigation/navigation.vue
+++ b/src/modules/users/components/navigation/navigation.vue
@@ -5,7 +5,9 @@
 			<v-list-item-content>{{ $t('all_users') }}</v-list-item-content>
 		</v-list-item>
 
-		<v-list-item v-for="{ name, id } in roles" :key="id" :to="`/my-project/users/${id}`">
+		<v-divider />
+
+		<v-list-item v-for="{ name, id } in roles" :key="id" :to="`/${project}/users/${id}`">
 			<v-list-item-icon><v-icon name="people" /></v-list-item-icon>
 			<v-list-item-content>{{ name }}</v-list-item-content>
 		</v-list-item>
@@ -15,12 +17,14 @@
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api';
 import useRolesStore from '@/stores/roles';
+import useProjectsStore from '@/stores/projects';
 
 export default defineComponent({
 	setup() {
 		const rolesStore = useRolesStore();
+		const projectsStore = useProjectsStore();
 
-		return { roles: rolesStore.state.roles };
+		return { roles: rolesStore.state.roles, project: projectsStore.state.currentProjectKey };
 	},
 });
 </script>
@@ -29,4 +33,8 @@ export default defineComponent({
 ::v-deep .v-skeleton-loader {
 	--v-skeleton-loader-background-color: var(--background-normal-alt);
 }
+
+.v-divider {
+	--v-divider-color: var(--background-normal-alt);
+}
 </style>
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 9ae029c809..ea2a06c107 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -10,7 +10,8 @@
 }
 
 html {
-	font-size: 15px;
+	font-size: 14px;
+	letter-spacing: -0.15px;
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
diff --git a/src/views/private/components/project-chooser/project-chooser.vue b/src/views/private/components/project-chooser/project-chooser.vue
index 4a3d92c840..32c13b0aa7 100644
--- a/src/views/private/components/project-chooser/project-chooser.vue
+++ b/src/views/private/components/project-chooser/project-chooser.vue
@@ -38,13 +38,13 @@ export default defineComponent({
 	components: { LatencyIndicator },
 	setup() {
 		const projectsStore = useProjectsStore();
-		const { projects, currentProjectKey } = toRefs(projectsStore.state);
+		const { currentProjectKey } = toRefs(projectsStore.state);
 		const active = ref(false);
 
 		const currentProject = projectsStore.currentProject;
 
 		return {
-			projects,
+			projects: projectsStore.formatted,
 			currentProjectKey,
 			navigateToProject,
 			projectsStore,