Add updated styling for project chooser route (#375)

src/lang/en-US/index.json

@@ -147,6 +147,7 @@
 
 	"password_reset_sent": "We've sent you a secure link to reset your password",
 	"password_reset_successful": "Password successfully reset",
+	"create_project": "Create Project",
 
 
   "about_directus": "About Directus",

src/routes/login/login.vue

@@ -29,7 +29,7 @@ export default defineComponent({
 		const projectsStore = useProjectsStore();
 
 		const errorFormatted = computed(() => {
-			if (projectsStore.currentProject.value.error) {
+			if (projectsStore.currentProject.value?.error) {
 				return translateAPIError(projectsStore.currentProject.value.error.code);
 			}
 

src/routes/project-chooser/project-chooser.vue

@@ -1,10 +1,32 @@
 <template>
 	<public-view>
-		<h1 class="type-title">{{ $t('choose_project') }}</h1>
+		<router-link
+			class="project"
+			v-for="project in projects"
+			:to="project.link"
+			:key="project.key"
+		>
+			<div
+				class="logo"
+				v-if="project && project.logo"
+				:style="{ backgroundColor: project.color }"
+			>
+				<img :src="project.logo" :alt="project.name || project.key" />
+			</div>
+			<img v-else class="default-logo" src="@/assets/logo-dark.svg" alt="Directus" />
+			<div class="name type-title">
+				{{ project.name || project.key }}
+			</div>
+		</router-link>
 
-		<v-button v-for="project in projects" :to="project.link" full-width :key="project.key">
-			{{ (project.api && project.api.project_name) || project.key }}
-		</v-button>
+		<v-divider />
+
+		<router-link to="/install" class="project new">
+			<div class="logo">
+				<v-icon name="add" />
+			</div>
+			<div class="name type-title">{{ $t('create_project') }}</div>
+		</router-link>
 	</public-view>
 </template>
 
@@ -18,7 +40,7 @@ export default defineComponent({
 	setup() {
 		const projectsStore = useProjectsStore();
 
-		const projects = projectsStore.state.projects?.map((project) => ({
+		const projects = projectsStore.formatted.value?.map((project) => ({
 			...project,
 			link: `/${project.key}/login`,
 		}));
@@ -36,4 +58,48 @@ export default defineComponent({
 h1 {
 	margin-bottom: 44px;
 }
+
+.project {
+	display: flex;
+	align-items: center;
+	height: 64px;
+	margin-bottom: 12px;
+}
+
+.logo {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 64px;
+	height: 64px;
+	border-radius: var(--border-radius);
+}
+
+.default-logo {
+	width: 64px;
+}
+
+.name {
+	margin-left: 12px;
+	color: var(--foreground-subdued);
+	transition: color var(--fast) var(--transition);
+}
+
+.v-divider {
+	margin: 20px 0;
+}
+
+.project.new {
+	.logo {
+		background-color: var(--background-normal);
+	}
+
+	.v-icon {
+		color: var(--foreground-subdued);
+	}
+}
+
+.project:hover .name {
+	color: var(--foreground);
+}
 </style>

src/views/public/components/project-chooser/project-chooser.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-menu show-arrow placement="bottom" close-on-content-click>
+	<v-menu v-if="project" show-arrow placement="bottom" close-on-content-click>
 		<template #activator="{ toggle }">
 			<div class="project-chooser" @click="toggle">
 				<div class="public-view-logo" v-if="project && project.logo">
@@ -26,6 +26,8 @@
 			</v-list-item>
 		</v-list>
 	</v-menu>
+
+	<div class="spacer" v-else />
 </template>
 
 <script lang="ts">

src/views/public/public-view.vue

@@ -139,14 +139,6 @@ export default defineComponent({
 	.notice {
 		color: #b0bec5;
 	}
-
-	& ::v-deep {
-		.type-title,
-		.type-text,
-		.type-label {
-			color: #263238;
-		}
-	}
 }
 
 .scale-enter-active,