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

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>

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>

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);
 }
 

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,