From 4b7f751a861dac32cfafff95dba1969fd0594cbe Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Fri, 2 Oct 2020 14:56:34 +0200
Subject: [PATCH 1/9] added subdued prop

---
 app/src/components/v-list/v-list-item.vue     | 39 +++++++++++++++++--
 .../docs/components/navigation-item.vue       |  8 +++-
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
index 5d442c023d..94113c1ef0 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list/v-list-item.vue
@@ -14,6 +14,7 @@
 			'one-line': lines === 1,
 			disabled,
 			dashed,
+			subdued,
 		}"
 		:href="href"
 		:download="download"
@@ -34,6 +35,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		subdued: {
+			type: Boolean,
+			default: false,
+		},
 		lines: {
 			type: Number as PropType<1 | 2 | 3>,
 			default: null,
@@ -147,18 +152,18 @@ body {
 		transition-property: background-color, color;
 		user-select: none;
 
-		&:not(.disabled):hover {
+		&:not(.disabled):not(.subdued):hover {
 			color: var(--v-list-item-color-hover);
 			background-color: var(--v-list-item-background-color-hover);
 		}
 
-		&:not(.disabled):active {
+		&:not(.disabled):not(.subdued):active {
 			color: var(--v-list-item-color-active);
 			background-color: var(--v-list-item-background-color-active);
 		}
 	}
 
-	&.active {
+	&:not(.subdued).active {
 		color: var(--v-list-item-color-active);
 		background-color: var(--v-list-item-background-color-active);
 	}
@@ -169,6 +174,19 @@ body {
 		cursor: not-allowed;
 	}
 
+	&.subdued {
+		::v-deep .v-list-item-title {
+			color: var(--foreground-subdued);
+		}
+
+		&:hover,
+		&.active {
+			::v-deep .v-list-item-title {
+				color: var(--primary);
+			}
+		}
+	}
+
 	@at-root {
 		.v-list,
 		#{$this},
@@ -204,7 +222,7 @@ body {
 		}
 
 		.v-list.nav {
-			& #{$this} {
+			#{$this} {
 				--v-list-item-padding: 0 8px;
 				--v-list-item-border-radius: 4px;
 				&:not(:last-child):not(:only-child) {
@@ -213,9 +231,22 @@ body {
 			}
 			&.dense #{$this},
 			#{$this}.dense {
+				--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
+
+				margin: var(--v-list-item-margin-dense);
+				padding: var(--v-list-item-padding-dense);
 				&:not(:last-child):not(:only-child) {
 					--v-list-item-margin-bottom: 4px;
 				}
+				&.one-line {
+					--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
+				}
+				&.two-line {
+					--v-list-item-min-height: var(--v-list-item-two-line-min-height-dense);
+				}
+				&.three-line {
+					--v-list-item-min-height: var(--v-list-item-three-line-min-height-dense);
+				}
 			}
 		}
 	}
diff --git a/app/src/modules/docs/components/navigation-item.vue b/app/src/modules/docs/components/navigation-item.vue
index 4a2fc16be6..b56d22919e 100644
--- a/app/src/modules/docs/components/navigation-item.vue
+++ b/app/src/modules/docs/components/navigation-item.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense">
+	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense" :subdued="subdued">
 		<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 		<v-list-item-content>
 			<v-list-item-title>{{ section.name }}</v-list-item-title>
@@ -12,6 +12,7 @@
 			:key="index"
 			:section="childSection"
 			dense
+			subdued
 		/>
 	</div>
 	<v-list-group v-else>
@@ -26,6 +27,7 @@
 			:key="index"
 			:section="childSection"
 			dense
+			subdued
 		/>
 	</v-list-group>
 </template>
@@ -45,6 +47,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		subdued: {
+			type: Boolean,
+			default: false,
+		},
 	},
 });
 </script>

From de55e1a18e2311e132e48fe98592a4dc0d773de6 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Mon, 5 Oct 2020 18:13:56 +0200
Subject: [PATCH 2/9] Update props of v-list

---
 .../v-field-select/v-field-select.vue         |  2 +-
 .../v-field-template/v-field-template.vue     |  2 +-
 app/src/components/v-form/form-field-menu.vue |  2 +-
 .../components/v-list/v-list-item-content.vue |  4 +-
 .../components/v-list/v-list-item-hint.vue    | 34 ++++----
 .../components/v-list/v-list-item-icon.vue    | 34 ++++----
 app/src/components/v-list/v-list-item.vue     | 81 +++++++------------
 app/src/components/v-list/v-list.vue          | 11 +--
 app/src/components/v-select/v-select.vue      |  2 +-
 app/src/components/v-tabs/v-tabs.vue          |  2 +-
 .../related-values/related-values.vue         |  2 +-
 app/src/interfaces/file/file.vue              |  2 +-
 .../interfaces/many-to-one/many-to-one.vue    |  2 +-
 app/src/interfaces/user/user.vue              |  2 +-
 app/src/layouts/cards/components/header.vue   |  2 +-
 .../activity/components/navigation.vue        |  2 +-
 .../components/navigation-bookmark.vue        |  2 +-
 .../collections/components/navigation.vue     |  2 +-
 .../modules/docs/components/navigation.vue    |  2 +-
 .../files/components/folder-picker.vue        |  2 +-
 .../files/components/navigation-folder.vue    |  2 +-
 .../modules/files/components/navigation.vue   |  2 +-
 .../settings/components/navigation.vue        |  2 +-
 .../components/collection-options.vue         |  2 +-
 .../field-detail/components/languages.vue     |  2 +-
 .../components/relationship-m2m.vue           |  8 +-
 .../components/relationship-m2o.vue           |  2 +-
 .../components/relationship-o2m.vue           |  4 +-
 .../field-detail/components/translations.vue  |  8 +-
 .../fields/components/field-select.vue        |  4 +-
 .../fields/components/fields-management.vue   |  2 +-
 .../permissions-overview-toggle.vue           |  2 +-
 .../modules/users/components/navigation.vue   |  2 +-
 .../comment-item-header.vue                   |  2 +-
 .../filter-drawer-detail/field-filter.vue     |  2 +-
 .../filter-drawer-detail.vue                  |  2 +-
 .../components/image-editor/image-editor.vue  |  2 +-
 .../revisions-modal-picker.vue                |  2 +-
 .../components/save-options/save-options.vue  |  2 +-
 39 files changed, 111 insertions(+), 137 deletions(-)

diff --git a/app/src/components/v-field-select/v-field-select.vue b/app/src/components/v-field-select/v-field-select.vue
index 9fba4853dc..2f5ffc57f2 100644
--- a/app/src/components/v-field-select/v-field-select.vue
+++ b/app/src/components/v-field-select/v-field-select.vue
@@ -22,7 +22,7 @@
 					</v-button>
 				</template>
 
-				<v-list dense>
+				<v-list>
 					<field-list-item
 						v-for="field in availableFields"
 						:key="field.field"
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index 6e0efa0605..bb16483191 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -21,7 +21,7 @@
 			</v-input>
 		</template>
 
-		<v-list dense>
+		<v-list>
 			<field-list-item @add="addField" v-for="field in tree" :key="field.field" :field="field" :depth="depth" />
 		</v-list>
 	</v-menu>
diff --git a/app/src/components/v-form/form-field-menu.vue b/app/src/components/v-form/form-field-menu.vue
index b48830a569..125393e8ed 100644
--- a/app/src/components/v-form/form-field-menu.vue
+++ b/app/src/components/v-form/form-field-menu.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-list dense>
+	<v-list>
 		<v-list-item :disabled="value === null" @click="$emit('input', null)">
 			<v-list-item-icon><v-icon name="delete_outline" /></v-list-item-icon>
 			<v-list-item-content>{{ $t('clear_value') }}</v-list-item-content>
diff --git a/app/src/components/v-list/v-list-item-content.vue b/app/src/components/v-list/v-list-item-content.vue
index 0ef58f843d..52fc161797 100644
--- a/app/src/components/v-list/v-list-item-content.vue
+++ b/app/src/components/v-list/v-list-item-content.vue
@@ -42,8 +42,8 @@ body {
 		}
 	}
 
-	.v-list.dense &,
-	.v-list-item.dense & {
+	.v-list:not(.large) &,
+	.v-list-item:not(.large) & {
 		--v-list-item-content-padding: 4px 0;
 	}
 }
diff --git a/app/src/components/v-list/v-list-item-hint.vue b/app/src/components/v-list/v-list-item-hint.vue
index 375fd17c6d..b625222546 100644
--- a/app/src/components/v-list/v-list-item-hint.vue
+++ b/app/src/components/v-list/v-list-item-hint.vue
@@ -38,28 +38,28 @@ export default defineComponent({
 	@at-root {
 		.v-list,
 		.v-list-item {
-			&.three-line,
-			&.two-line {
-				#{$this} {
-					align-self: flex-start;
-					&.center {
-						align-self: center;
+			#{$this} {
+				margin-top: 4px;
+				margin-bottom: 4px;
+				&:not(:only-child) {
+					&:first-child {
+						margin-right: 16px;
+					}
+					&:last-child {
+						margin-left: 16px;
 					}
 				}
 			}
-			&.dense {
-				#{$this} {
-					margin-top: 4px;
-					margin-bottom: 4px;
-					&:not(:only-child) {
-						&:first-child {
-							margin-right: 16px;
-						}
-						&:last-child {
-							margin-left: 16px;
+			&.large {
+				&.three-line,
+				&.two-line {
+					#{$this} {
+						align-self: flex-start;
+						&.center {
+							align-self: center;
 						}
 					}
-				}
+				}	
 			}
 		}
 	}
diff --git a/app/src/components/v-list/v-list-item-icon.vue b/app/src/components/v-list/v-list-item-icon.vue
index 82ce10de58..49e0b2c0c8 100644
--- a/app/src/components/v-list/v-list-item-icon.vue
+++ b/app/src/components/v-list/v-list-item-icon.vue
@@ -43,32 +43,32 @@ body {
 	@at-root {
 		.v-list,
 		.v-list-item {
-			&.three-line,
-			&.two-line {
-				#{$this} {
-					align-self: flex-start;
-					&.center {
-						align-self: center;
+			#{$this} {
+				margin-top: 4px;
+				margin-bottom: 4px;
+				&:not(:only-child) {
+					&:first-child {
+						margin-right: 8px;
+					}
+					&:last-child {
+						margin-left: 8px;
 					}
 				}
 			}
 
-			&.dense {
-				#{$this} {
-					margin-top: 4px;
-					margin-bottom: 4px;
-					&:not(:only-child) {
-						&:first-child {
-							margin-right: 8px;
-						}
-						&:last-child {
-							margin-left: 8px;
+			&.large {
+				&.three-line,
+				&.two-line {
+					#{$this} {
+						align-self: flex-start;
+						&.center {
+							align-self: center;
 						}
 					}
 				}
 			}
 
-			&.dense:not(.nav) #{$this} .v-icon {
+			&:not(.large) #{$this} .v-icon {
 				--v-icon-color: var(--v-list-item-icon-color);
 			}
 
diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
index 94113c1ef0..c144ebf42b 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list/v-list-item.vue
@@ -7,6 +7,7 @@
 		:to="to"
 		:class="{
 			active,
+			large,
 			dense,
 			link: isClickable,
 			'three-line': lines === 3,
@@ -14,7 +15,6 @@
 			'one-line': lines === 1,
 			disabled,
 			dashed,
-			subdued,
 		}"
 		:href="href"
 		:download="download"
@@ -31,11 +31,11 @@ import { defineComponent, PropType, computed } from '@vue/composition-api';
 
 export default defineComponent({
 	props: {
-		dense: {
+		large: {
 			type: Boolean,
 			default: false,
 		},
-		subdued: {
+		dense: {
 			type: Boolean,
 			default: false,
 		},
@@ -88,15 +88,15 @@ export default defineComponent({
 
 <style>
 body {
-	--v-list-item-one-line-min-height: 40px;
-	--v-list-item-two-line-min-height: 52px;
-	--v-list-item-three-line-min-height: 64px;
-	--v-list-item-one-line-min-height-dense: 32px;
-	--v-list-item-two-line-min-height-dense: 36px;
-	--v-list-item-three-line-min-height-dense: 52px;
-	--v-list-item-padding: 0 16px 0 calc(16px + var(--v-list-item-indent, 0px));
-	--v-list-item-padding-dense: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
-	--v-list-item-margin-dense: 2px 0;
+	--v-list-item-one-line-min-height-large: 40px;
+	--v-list-item-two-line-min-height-large: 52px;
+	--v-list-item-three-line-min-height-large: 64px;
+	--v-list-item-one-line-min-height: 32px;
+	--v-list-item-two-line-min-height: 36px;
+	--v-list-item-three-line-min-height: 52px;
+	--v-list-item-padding-large: 0 16px 0 calc(16px + var(--v-list-item-indent, 0px));
+	--v-list-item-padding: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
+	--v-list-item-margin-large: 2px 0;
 	--v-list-item-min-width: none;
 	--v-list-item-max-width: none;
 	--v-list-item-min-height: var(--v-list-item-one-line-min-height);
@@ -130,7 +130,6 @@ body {
 	overflow: hidden;
 	color: var(--v-list-item-color);
 	text-decoration: none;
-	border-radius: var(--v-list-item-border-radius);
 
 	&.dashed {
 		&::after {
@@ -152,18 +151,18 @@ body {
 		transition-property: background-color, color;
 		user-select: none;
 
-		&:not(.disabled):not(.subdued):hover {
+		&:not(.disabled):not(.dense):hover {
 			color: var(--v-list-item-color-hover);
 			background-color: var(--v-list-item-background-color-hover);
 		}
 
-		&:not(.disabled):not(.subdued):active {
+		&:not(.disabled):not(.dense):active {
 			color: var(--v-list-item-color-active);
 			background-color: var(--v-list-item-background-color-active);
 		}
 	}
 
-	&:not(.subdued).active {
+	&:not(.dense).active {
 		color: var(--v-list-item-color-active);
 		background-color: var(--v-list-item-background-color-active);
 	}
@@ -174,7 +173,7 @@ body {
 		cursor: not-allowed;
 	}
 
-	&.subdued {
+	&.dense {
 		::v-deep .v-list-item-title {
 			color: var(--foreground-subdued);
 		}
@@ -203,49 +202,29 @@ body {
 			}
 		}
 
-		.v-list.dense {
-			& #{$this} {
-				--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
-
-				margin: var(--v-list-item-margin-dense);
-				padding: var(--v-list-item-padding-dense);
-				&.one-line {
-					--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
-				}
-				&.two-line {
-					--v-list-item-min-height: var(--v-list-item-two-line-min-height-dense);
-				}
-				&.three-line {
-					--v-list-item-min-height: var(--v-list-item-three-line-min-height-dense);
-				}
-			}
-		}
-
-		.v-list.nav {
+		.v-list.large {
 			#{$this} {
-				--v-list-item-padding: 0 8px;
-				--v-list-item-border-radius: 4px;
-				&:not(:last-child):not(:only-child) {
-					--v-list-item-margin-bottom: 4px;
-				}
-			}
-			&.dense #{$this},
-			#{$this}.dense {
-				--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
+				--v-list-item-min-height: var(--v-list-item-one-line-min-height-large);
+
+				--v-list-item-padding-large: 0 8px;
+				--v-list-item-border-radius: 4px;
+
+				margin: var(--v-list-item-margin-large);
+				padding: var(--v-list-item-padding-large);
+				border-radius: var(--v-list-item-border-radius);
 
-				margin: var(--v-list-item-margin-dense);
-				padding: var(--v-list-item-padding-dense);
 				&:not(:last-child):not(:only-child) {
-					--v-list-item-margin-bottom: 4px;
+					margin-bottom: 4px;
 				}
+
 				&.one-line {
-					--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
+					--v-list-item-min-height: var(--v-list-item-one-line-min-height-large);
 				}
 				&.two-line {
-					--v-list-item-min-height: var(--v-list-item-two-line-min-height-dense);
+					--v-list-item-min-height: var(--v-list-item-two-line-min-height-large);
 				}
 				&.three-line {
-					--v-list-item-min-height: var(--v-list-item-three-line-min-height-dense);
+					--v-list-item-min-height: var(--v-list-item-three-line-min-height-large);
 				}
 			}
 		}
diff --git a/app/src/components/v-list/v-list.vue b/app/src/components/v-list/v-list.vue
index a1a4521b41..890e52015e 100644
--- a/app/src/components/v-list/v-list.vue
+++ b/app/src/components/v-list/v-list.vue
@@ -2,8 +2,7 @@
 	<ul
 		class="v-list"
 		:class="{
-			dense,
-			nav,
+			large,
 			'three-line': lines === 3,
 			'two-line': lines === 2,
 			'one-line': lines === 1,
@@ -19,11 +18,7 @@ import { useGroupableParent } from '@/composables/groupable';
 
 export default defineComponent({
 	props: {
-		dense: {
-			type: Boolean,
-			default: false,
-		},
-		nav: {
+		large: {
 			type: Boolean,
 			default: false,
 		},
@@ -79,7 +74,7 @@ body {
 	line-height: 22px;
 	border-radius: var(--border-radius);
 
-	&.nav {
+	&.large {
 		--v-list-padding: 12px;
 	}
 
diff --git a/app/src/components/v-select/v-select.vue b/app/src/components/v-select/v-select.vue
index 57eae9c9c4..1bb25f0481 100644
--- a/app/src/components/v-select/v-select.vue
+++ b/app/src/components/v-select/v-select.vue
@@ -26,7 +26,7 @@
 			</v-input>
 		</template>
 
-		<v-list dense class="list">
+		<v-list class="list">
 			<template v-if="showDeselect">
 				<v-list-item @click="$emit('input', null)" :disabled="value === null">
 					<v-list-item-icon v-if="multiple === true">
diff --git a/app/src/components/v-tabs/v-tabs.vue b/app/src/components/v-tabs/v-tabs.vue
index 2a2182cce3..e85afdf3e4 100644
--- a/app/src/components/v-tabs/v-tabs.vue
+++ b/app/src/components/v-tabs/v-tabs.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-list class="v-tabs vertical alt-colors" v-if="vertical" nav>
+	<v-list class="v-tabs vertical alt-colors" v-if="vertical" large>
 		<slot />
 	</v-list>
 	<div v-else class="v-tabs horizontal">
diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index 5df221505e..2b262bcfaa 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -7,7 +7,7 @@
 			</span>
 		</template>
 
-		<v-list dense>
+		<v-list>
 			<v-list-item v-for="item in value" :key="item[primaryKeyField]" :to="getLinkForItem(item)">
 				<v-list-item-content>
 					<render-template :template="template" :item="item" :collection="relatedCollection" />
diff --git a/app/src/interfaces/file/file.vue b/app/src/interfaces/file/file.vue
index 3d6bf7824e..649af6e682 100644
--- a/app/src/interfaces/file/file.vue
+++ b/app/src/interfaces/file/file.vue
@@ -35,7 +35,7 @@
 				</div>
 			</template>
 
-			<v-list dense>
+			<v-list>
 				<template v-if="file">
 					<v-list-item :download="file.filename_download" :href="assetURL">
 						<v-list-item-icon><v-icon name="get_app" /></v-list-item-icon>
diff --git a/app/src/interfaces/many-to-one/many-to-one.vue b/app/src/interfaces/many-to-one/many-to-one.vue
index 29920b3ffe..0ec502020a 100644
--- a/app/src/interfaces/many-to-one/many-to-one.vue
+++ b/app/src/interfaces/many-to-one/many-to-one.vue
@@ -54,7 +54,7 @@
 				</v-input>
 			</template>
 
-			<v-list dense>
+			<v-list>
 				<template v-if="itemsLoading">
 					<v-list-item v-for="n in 10" :key="`loader-${n}`">
 						<v-list-item-content>
diff --git a/app/src/interfaces/user/user.vue b/app/src/interfaces/user/user.vue
index 7cc8784426..abfc875a01 100644
--- a/app/src/interfaces/user/user.vue
+++ b/app/src/interfaces/user/user.vue
@@ -48,7 +48,7 @@
 				</v-input>
 			</template>
 
-			<v-list dense>
+			<v-list>
 				<template v-if="usersLoading">
 					<v-list-item v-for="n in 10" :key="`loader-${n}`">
 						<v-list-item-content>
diff --git a/app/src/layouts/cards/components/header.vue b/app/src/layouts/cards/components/header.vue
index d9174768f8..51843f3ce5 100644
--- a/app/src/layouts/cards/components/header.vue
+++ b/app/src/layouts/cards/components/header.vue
@@ -25,7 +25,7 @@
 					</div>
 				</template>
 
-				<v-list dense>
+				<v-list>
 					<v-list-item
 						v-for="field in fieldsWithoutFake"
 						:key="field.field"
diff --git a/app/src/modules/activity/components/navigation.vue b/app/src/modules/activity/components/navigation.vue
index a5098deff5..3b4eeb62e7 100644
--- a/app/src/modules/activity/components/navigation.vue
+++ b/app/src/modules/activity/components/navigation.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-list nav>
+	<v-list large>
 		<v-list-item to="/activity" exact>
 			<v-list-item-icon>
 				<v-icon name="access_time" />
diff --git a/app/src/modules/collections/components/navigation-bookmark.vue b/app/src/modules/collections/components/navigation-bookmark.vue
index a336e7eca0..a3f6b1ccf5 100644
--- a/app/src/modules/collections/components/navigation-bookmark.vue
+++ b/app/src/modules/collections/components/navigation-bookmark.vue
@@ -7,7 +7,7 @@
 		</v-list-item-icon>
 
 		<v-menu ref="contextMenu" show-arrow placement="bottom-start">
-			<v-list dense>
+			<v-list>
 				<v-list-item @click="renameActive = true" :disabled="isMine === false">
 					<v-list-item-icon>
 						<v-icon name="edit" outline />
diff --git a/app/src/modules/collections/components/navigation.vue b/app/src/modules/collections/components/navigation.vue
index 03c8418ead..85492ec7e0 100644
--- a/app/src/modules/collections/components/navigation.vue
+++ b/app/src/modules/collections/components/navigation.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-list nav>
+	<v-list large>
 		<template v-if="customNavItems && customNavItems.length > 0">
 			<v-detail
 				:active="group.accordion === 'always_open' || undefined"
diff --git a/app/src/modules/docs/components/navigation.vue b/app/src/modules/docs/components/navigation.vue
index e6d10ba37e..10c686da40 100644
--- a/app/src/modules/docs/components/navigation.vue
+++ b/app/src/modules/docs/components/navigation.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-list nav>
+	<v-list large>
 		<navigation-item v-for="item in sections" :key="item.to" :section="item"></navigation-item>
 	</v-list>
 </template>
diff --git a/app/src/modules/files/components/folder-picker.vue b/app/src/modules/files/components/folder-picker.vue
index c3a4048774..633ef0926e 100644
--- a/app/src/modules/files/components/folder-picker.vue
+++ b/app/src/modules/files/components/folder-picker.vue
@@ -1,7 +1,7 @@
 <template>
 	<v-skeleton-loader v-if="loading" />
 	<div class="folder-picker" v-else>
-		<v-list dense>
+		<v-list>
 			<v-item-group scope="folder-picker" multiple v-model="openFolders">
 				<v-list-group
 					disable-groupable-parent
diff --git a/app/src/modules/files/components/navigation-folder.vue b/app/src/modules/files/components/navigation-folder.vue
index 20a321fe78..650b4c5cd7 100644
--- a/app/src/modules/files/components/navigation-folder.vue
+++ b/app/src/modules/files/components/navigation-folder.vue
@@ -38,7 +38,7 @@
 		</v-list-group>
 
 		<v-menu ref="contextMenu" show-arrow placement="bottom-start">
-			<v-list dense>
+			<v-list>
 				<v-list-item @click="renameActive = true">
 					<v-list-item-icon>
 						<v-icon name="edit" outline />
diff --git a/app/src/modules/files/components/navigation.vue b/app/src/modules/files/components/navigation.vue
index 7296107130..a83a327841 100644
--- a/app/src/modules/files/components/navigation.vue
+++ b/app/src/modules/files/components/navigation.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-list nav>
+	<v-list large>
 		<template v-if="loading && (nestedFolders === null || nestedFolders.length === 0)">
 			<v-list-item v-for="n in 4" :key="n">
 				<v-skeleton-loader type="list-item-icon" />
diff --git a/app/src/modules/settings/components/navigation.vue b/app/src/modules/settings/components/navigation.vue
index a633d3d623..ec7286396d 100644
--- a/app/src/modules/settings/components/navigation.vue
+++ b/app/src/modules/settings/components/navigation.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-list nav>
+	<v-list large>
 		<v-list-item v-for="item in navItems" :to="item.to" :key="item.to">
 			<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
 			<v-list-item-content>
diff --git a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
index e926ed01dc..1ec5e8df4a 100644
--- a/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
+++ b/app/src/modules/settings/routes/data-model/collections/components/collection-options.vue
@@ -4,7 +4,7 @@
 			<template #activator="{ toggle }">
 				<v-icon name="more_vert" @click="toggle" class="ctx-toggle" />
 			</template>
-			<v-list dense>
+			<v-list>
 				<v-list-item @click="deleteActive = true" class="danger">
 					<v-list-item-icon>
 						<v-icon name="delete" outline />
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue b/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
index 8868aef564..8ce52a6edd 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
@@ -15,7 +15,7 @@
 								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
 							</template>
 
-							<v-list dense class="monospace">
+							<v-list class="monospace">
 								<v-list-item
 									v-for="item in items"
 									:key="item.value"
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index 542a270140..34b7c18f5a 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -26,7 +26,7 @@
 								/>
 							</template>
 
-							<v-list dense class="monospace">
+							<v-list class="monospace">
 								<v-list-item
 									v-for="collection in availableCollections"
 									:key="collection.collection"
@@ -79,7 +79,7 @@
 								/>
 							</template>
 
-							<v-list dense class="monospace">
+							<v-list class="monospace">
 								<v-list-item
 									v-for="collection in availableCollections"
 									:key="collection.collection"
@@ -130,7 +130,7 @@
 							/>
 						</template>
 
-						<v-list dense class="monospace">
+						<v-list class="monospace">
 							<v-list-item
 								v-for="item in junctionFields"
 								:key="item.value"
@@ -166,7 +166,7 @@
 							/>
 						</template>
 
-						<v-list dense class="monospace">
+						<v-list class="monospace">
 							<v-list-item
 								v-for="item in junctionFields"
 								:key="item.value"
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
index 73644ae599..ded9368e03 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
@@ -27,7 +27,7 @@
 								/>
 							</template>
 
-							<v-list dense class="monospace">
+							<v-list class="monospace">
 								<v-list-item
 									v-for="collection in availableCollections"
 									:key="collection.collection"
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
index 5b44bc2668..336545a623 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -26,7 +26,7 @@
 								/>
 							</template>
 
-							<v-list dense class="monospace">
+							<v-list class="monospace">
 								<v-list-item
 									v-for="collection in availableCollections"
 									:key="collection.collection"
@@ -72,7 +72,7 @@
 							<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" />
 						</template>
 
-						<v-list dense class="monospace">
+						<v-list class="monospace">
 							<v-list-item
 								v-for="field in fields"
 								:key="field.value"
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
index 44c03504a8..84255e1cd5 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
@@ -26,7 +26,7 @@
 								/>
 							</template>
 
-							<v-list dense class="monospace">
+							<v-list class="monospace">
 								<v-list-item
 									v-for="collection in availableCollections"
 									:key="collection.collection"
@@ -79,7 +79,7 @@
 								/>
 							</template>
 
-							<v-list dense class="monospace">
+							<v-list class="monospace">
 								<v-list-item
 									v-for="collection in availableCollections"
 									:key="collection.collection"
@@ -130,7 +130,7 @@
 							/>
 						</template>
 
-						<v-list dense class="monospace">
+						<v-list class="monospace">
 							<v-list-item
 								v-for="item in junctionFields"
 								:key="item.value"
@@ -166,7 +166,7 @@
 							/>
 						</template>
 
-						<v-list dense class="monospace">
+						<v-list class="monospace">
 							<v-list-item
 								v-for="item in junctionFields"
 								:key="item.value"
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 955d270226..317d750fc2 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -13,7 +13,7 @@
 						</span>
 					</template>
 
-					<v-list dense>
+					<v-list>
 						<v-list-item :to="`/settings/data-model/${field.collection}/${field.field}`">
 							<v-list-item-icon><v-icon name="edit" outline /></v-list-item-icon>
 							<v-list-item-content>
@@ -82,7 +82,7 @@
 							<v-icon @click.stop="toggle" name="more_vert" />
 						</template>
 
-						<v-list dense>
+						<v-list>
 							<v-list-item :to="`/settings/data-model/${field.collection}/${field.field}`">
 								<v-list-item-icon><v-icon name="edit" outline /></v-list-item-icon>
 								<v-list-item-content>
diff --git a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
index cbcf82c19c..1023fcd3f9 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/fields-management.vue
@@ -28,7 +28,7 @@
 				</v-button>
 			</template>
 
-			<v-list dense>
+			<v-list>
 				<template v-for="(option, index) in addOptions">
 					<v-divider v-if="option.divider === true" :key="index" />
 					<v-list-item
diff --git a/app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue b/app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue
index 2f24fda240..adb532c496 100644
--- a/app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue
+++ b/app/src/modules/settings/routes/roles/detail/components/permissions-overview-toggle.vue
@@ -10,7 +10,7 @@
 				</div>
 			</template>
 
-			<v-list dense>
+			<v-list>
 				<v-list-item @click="setFullAccess">
 					<v-list-item-icon>
 						<v-icon name="check" />
diff --git a/app/src/modules/users/components/navigation.vue b/app/src/modules/users/components/navigation.vue
index cab510bdb5..24f08ee434 100644
--- a/app/src/modules/users/components/navigation.vue
+++ b/app/src/modules/users/components/navigation.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-list nav>
+	<v-list large>
 		<v-list-item to="/users" exact :active="currentRole === null">
 			<v-list-item-icon><v-icon name="folder_shared" outline /></v-list-item-icon>
 			<v-list-item-content>{{ $t('all_users') }}</v-list-item-content>
diff --git a/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue b/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
index db2f4f9da9..cdfaef8526 100644
--- a/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
+++ b/app/src/views/private/components/comments-drawer-detail/comment-item-header.vue
@@ -33,7 +33,7 @@
 					</div>
 				</template>
 
-				<v-list dense>
+				<v-list>
 					<v-list-item @click="$emit('edit')">
 						<v-list-item-icon><v-icon name="edit" outline /></v-list-item-icon>
 						<v-list-item-content>{{ $t('edit') }}</v-list-item-content>
diff --git a/app/src/views/private/components/filter-drawer-detail/field-filter.vue b/app/src/views/private/components/filter-drawer-detail/field-filter.vue
index 73966e20e1..e9cfe24683 100644
--- a/app/src/views/private/components/filter-drawer-detail/field-filter.vue
+++ b/app/src/views/private/components/filter-drawer-detail/field-filter.vue
@@ -13,7 +13,7 @@
 					</div>
 				</template>
 
-				<v-list dense>
+				<v-list>
 					<v-list-item
 						:active="operator === activeOperator"
 						v-for="operator in parsedField.operators"
diff --git a/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue b/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
index b537481c6c..56f41cff68 100644
--- a/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
+++ b/app/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
@@ -24,7 +24,7 @@
 				</v-input>
 			</template>
 
-			<v-list dense>
+			<v-list>
 				<field-list-item
 					@add="addFilterForField"
 					v-for="field in fieldTree"
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index 4767e19ff6..94c014129d 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -54,7 +54,7 @@
 						/>
 					</template>
 
-					<v-list dense>
+					<v-list>
 						<v-list-item @click="aspectRatio = 16 / 9" :active="aspectRatio === 16 / 9">
 							<v-list-item-icon><v-icon name="crop_16_9" /></v-list-item-icon>
 							<v-list-item-content>16:9</v-list-item-content>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
index b8ce32acb0..a1ce250643 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
@@ -7,7 +7,7 @@
 			</span>
 		</template>
 
-		<v-list class="menu" dense>
+		<v-list class="menu">
 			<v-list-item
 				v-for="option in options"
 				:key="option.value"
diff --git a/app/src/views/private/components/save-options/save-options.vue b/app/src/views/private/components/save-options/save-options.vue
index bccdb7b18d..98a74a185d 100644
--- a/app/src/views/private/components/save-options/save-options.vue
+++ b/app/src/views/private/components/save-options/save-options.vue
@@ -4,7 +4,7 @@
 			<v-icon :class="{ disabled }" name="more_vert" @click="toggle" />
 		</template>
 
-		<v-list dense>
+		<v-list>
 			<v-list-item :disabled="disabled" @click="$emit('save-and-stay')">
 				<v-list-item-icon><v-icon name="check" /></v-list-item-icon>
 				<v-list-item-content>{{ $t('save_and_stay') }}</v-list-item-content>

From a8d89472086caaf51a83349953990239b5ab9e24 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Mon, 5 Oct 2020 18:23:44 +0200
Subject: [PATCH 3/9] Add border-radius

---
 app/src/components/v-list/v-list-item.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
index c144ebf42b..663ea2715c 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list/v-list-item.vue
@@ -130,6 +130,7 @@ body {
 	overflow: hidden;
 	color: var(--v-list-item-color);
 	text-decoration: none;
+	border-radius: var(--v-list-item-border-radius);
 
 	&.dashed {
 		&::after {
@@ -211,7 +212,6 @@ body {
 
 				margin: var(--v-list-item-margin-large);
 				padding: var(--v-list-item-padding-large);
-				border-radius: var(--v-list-item-border-radius);
 
 				&:not(:last-child):not(:only-child) {
 					margin-bottom: 4px;

From 15e8c1cc39799109d9ceab2a521c1f26e9ba0246 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Mon, 5 Oct 2020 18:29:26 +0200
Subject: [PATCH 4/9] finish updating styles

---
 app/src/components/v-list/v-list-item.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
index 663ea2715c..dc4ab6af97 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list/v-list-item.vue
@@ -96,7 +96,7 @@ body {
 	--v-list-item-three-line-min-height: 52px;
 	--v-list-item-padding-large: 0 16px 0 calc(16px + var(--v-list-item-indent, 0px));
 	--v-list-item-padding: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
-	--v-list-item-margin-large: 2px 0;
+	--v-list-item-margin: 2px 0;
 	--v-list-item-min-width: none;
 	--v-list-item-max-width: none;
 	--v-list-item-min-height: var(--v-list-item-one-line-min-height);
@@ -125,6 +125,7 @@ body {
 	max-width: var(--v-list-item-max-width);
 	min-height: var(--v-list-item-min-height);
 	max-height: var(--v-list-item-max-height);
+	margin: var(--v-list-item-margin);
 	margin-bottom: var(--v-list-item-margin-bottom);
 	padding: var(--v-list-item-padding);
 	overflow: hidden;
@@ -204,7 +205,7 @@ body {
 		}
 
 		.v-list.large {
-			#{$this} {
+			#{$this}:not(.dense) {
 				--v-list-item-min-height: var(--v-list-item-one-line-min-height-large);
 
 				--v-list-item-padding-large: 0 8px;

From 33814b11318c238861baa716bb6ac8098c9ecb10 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Mon, 5 Oct 2020 18:37:57 +0200
Subject: [PATCH 5/9] fix icon color

---
 app/src/components/v-list/v-list-item-icon.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/src/components/v-list/v-list-item-icon.vue b/app/src/components/v-list/v-list-item-icon.vue
index 49e0b2c0c8..033fb30c39 100644
--- a/app/src/components/v-list/v-list-item-icon.vue
+++ b/app/src/components/v-list/v-list-item-icon.vue
@@ -46,6 +46,7 @@ body {
 			#{$this} {
 				margin-top: 4px;
 				margin-bottom: 4px;
+				--v-icon-color: var(--v-list-item-icon-color);
 				&:not(:only-child) {
 					&:first-child {
 						margin-right: 8px;
@@ -68,8 +69,8 @@ body {
 				}
 			}
 
-			&:not(.large) #{$this} .v-icon {
-				--v-icon-color: var(--v-list-item-icon-color);
+			&.large #{$this} .v-icon {
+				--v-icon-color: none;
 			}
 
 			&.disabled #{$this} .v-icon {

From 495a804939339de948794bc059c1543afe1c2c5f Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Mon, 5 Oct 2020 18:46:23 +0200
Subject: [PATCH 6/9] remove unused props

---
 app/src/modules/docs/components/navigation-item.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/src/modules/docs/components/navigation-item.vue b/app/src/modules/docs/components/navigation-item.vue
index b56d22919e..1fd77130b4 100644
--- a/app/src/modules/docs/components/navigation-item.vue
+++ b/app/src/modules/docs/components/navigation-item.vue
@@ -12,7 +12,6 @@
 			:key="index"
 			:section="childSection"
 			dense
-			subdued
 		/>
 	</div>
 	<v-list-group v-else>
@@ -27,7 +26,6 @@
 			:key="index"
 			:section="childSection"
 			dense
-			subdued
 		/>
 	</v-list-group>
 </template>

From ce84977714b7f7992dcc8dfe32c2b93daf67a112 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 6 Oct 2020 17:04:47 -0400
Subject: [PATCH 7/9] Remove unused lines prop, remove unused subtitle comp

---
 app/src/components/register.ts                |   5 +-
 .../components/v-divider/v-divider.story.ts   |  10 +-
 app/src/components/v-list/index.ts            |  15 +-
 app/src/components/v-list/readme.md           | 293 ------------
 .../components/v-list/v-list-item-icon.vue    |  18 +-
 .../v-list/v-list-item-subtitle.vue           |  39 --
 ...st-item-title.vue => v-list-item-text.vue} |   6 +-
 app/src/components/v-list/v-list-item.vue     |  47 +-
 app/src/components/v-list/v-list.story.ts     | 442 ------------------
 app/src/components/v-list/v-list.test.ts      | 223 ---------
 app/src/components/v-list/v-list.vue          |  16 +-
 app/src/components/v-select/v-select.test.ts  |   4 +-
 .../docs/components/navigation-item.vue       |   4 +-
 .../settings/components/navigation.vue        |   6 +-
 14 files changed, 35 insertions(+), 1093 deletions(-)
 delete mode 100644 app/src/components/v-list/readme.md
 delete mode 100644 app/src/components/v-list/v-list-item-subtitle.vue
 rename app/src/components/v-list/{v-list-item-title.vue => v-list-item-text.vue} (73%)
 delete mode 100644 app/src/components/v-list/v-list.story.ts
 delete mode 100644 app/src/components/v-list/v-list.test.ts

diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index 791834dcaa..37167caa28 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -27,7 +27,7 @@ import VList, {
 	VListItemHint,
 	VListItemIcon,
 	VListItemSubtitle,
-	VListItemTitle,
+	VListItemText,
 } from './v-list/';
 import VMenu from './v-menu/';
 import VModal from './v-modal/';
@@ -77,8 +77,7 @@ Vue.component('v-list-group', VListGroup);
 Vue.component('v-list-item-content', VListItemContent);
 Vue.component('v-list-item-hint', VListItemHint);
 Vue.component('v-list-item-icon', VListItemIcon);
-Vue.component('v-list-item-subtitle', VListItemSubtitle);
-Vue.component('v-list-item-title', VListItemTitle);
+Vue.component('v-list-item-text', VListItemText);
 Vue.component('v-list-item', VListItem);
 Vue.component('v-list', VList);
 Vue.component('v-menu', VMenu);
diff --git a/app/src/components/v-divider/v-divider.story.ts b/app/src/components/v-divider/v-divider.story.ts
index 1ebd5467c0..2e53db5426 100644
--- a/app/src/components/v-divider/v-divider.story.ts
+++ b/app/src/components/v-divider/v-divider.story.ts
@@ -3,7 +3,7 @@ import readme from './readme.md';
 import withPadding from '../../../.storybook/decorators/with-padding';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { defineComponent } from '@vue/composition-api';
-import VList, { VListItem, VListItemContent, VListItemTitle, VListItemIcon } from '@/components/v-list';
+import VList, { VListItem, VListItemContent, VListItemText, VListItemIcon } from '@/components/v-list';
 import VIcon from '@/components/v-icon/';
 
 export default {
@@ -72,7 +72,7 @@ export const inList = () =>
 			VListItem,
 			VListItemContent,
 			VListItemIcon,
-			VListItemTitle,
+			VListItemText,
 			VIcon,
 		},
 		props: {},
@@ -82,7 +82,7 @@ export const inList = () =>
 					<v-list-item v-for="n in 3" @click="() => {}">
 						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
 						<v-list-item-content>
-							<v-list-item-title>Item {{ n }}</v-list-item-title>
+							<v-list-item-text>Item {{ n }}</v-list-item-text>
 						</v-list-item-content>
 					</v-list-item>
 
@@ -91,7 +91,7 @@ export const inList = () =>
 					<v-list-item v-for="n in 1" @click="() => {}">
 						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
 						<v-list-item-content>
-							<v-list-item-title>Item {{ n + 3 }}</v-list-item-title>
+							<v-list-item-text>Item {{ n + 3 }}</v-list-item-text>
 						</v-list-item-content>
 					</v-list-item>
 
@@ -100,7 +100,7 @@ export const inList = () =>
 					<v-list-item v-for="n in 3" @click="() => {}">
 						<v-list-item-icon><v-icon name="box" /></v-list-item-icon />
 						<v-list-item-content>
-							<v-list-item-title>Item {{ n + 4 }}</v-list-item-title>
+							<v-list-item-text>Item {{ n + 4 }}</v-list-item-text>
 						</v-list-item-content>
 					</v-list-item>
 				</v-list>
diff --git a/app/src/components/v-list/index.ts b/app/src/components/v-list/index.ts
index 9f91d5c3a4..e6ac55a2ae 100644
--- a/app/src/components/v-list/index.ts
+++ b/app/src/components/v-list/index.ts
@@ -1,20 +1,11 @@
 import VList from './v-list.vue';
 import VListItem from './v-list-item.vue';
 import VListItemContent from './v-list-item-content.vue';
-import VListItemTitle from './v-list-item-title.vue';
-import VListItemSubtitle from './v-list-item-subtitle.vue';
+import VListItemText from './v-list-item-text.vue';
 import VListItemIcon from './v-list-item-icon.vue';
 import VListItemHint from './v-list-item-hint.vue';
 import VListGroup from './v-list-group.vue';
 
-export {
-	VList,
-	VListItem,
-	VListItemContent,
-	VListItemTitle,
-	VListItemSubtitle,
-	VListItemIcon,
-	VListItemHint,
-	VListGroup,
-};
+export { VList, VListItem, VListItemContent, VListItemText, VListItemIcon, VListItemHint, VListGroup };
+
 export default VList;
diff --git a/app/src/components/v-list/readme.md b/app/src/components/v-list/readme.md
deleted file mode 100644
index 756cb7bf22..0000000000
--- a/app/src/components/v-list/readme.md
+++ /dev/null
@@ -1,293 +0,0 @@
-# List
-
-```html
-<v-list>
-	<v-list-item v-for="item in items">
-		<v-list-item-content>
-			{{ item.text }}
-		</v-list-item-content>
-	</v-list-item>
-</v-list>
-```
-
-## Props
-
-| Prop        | Description                                                                                                 | Default |
-| ----------- | ----------------------------------------------------------------------------------------------------------- | ------- |
-| `dense`     | Removes some padding to make the list items closer together                                                 | `false` |
-| `threeLine` | Limits list items to three lines of text (1 of title, 2 of subtitle). Only works in webkit enabled browsers | `false` |
-| `nav`       | Adds a small margin and border-radius for nav menu styling                                                  | `false` |
-| `multiple`  | Allows multiple child groups to be open at once                                                             | `true`  |
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description  | Data |
-| --------- | ------------ | ---- |
-| _default_ | List content |      |
-
-## CSS Variables
-
-| Variable                           | Default                          |
-| ---------------------------------- | -------------------------------- |
-| `--v-list-padding`                 | `8px 0`                          |
-| `--v-list-max-height`              | `none`                           |
-| `--v-list-max-width`               | `none`                           |
-| `--v-list-min-width`               | `none`                           |
-| `--v-list-min-height`              | `none`                           |
-| `--v-list-color`                   | `var(--foreground-normal)`        |
-| `--v-list-color-hover`             | `var(--foreground-normal)`        |
-| `--v-list-color-active`            | `var(--foreground-normal)`        |
-| `--v-list-background-color-hover`  | `var(--background-normal-alt)`  |
-| `--v-list-background-color-active` | `var(--background-normal-alt)` |
-
----
-
-# List Item
-
-A wrapper for list items that formats children nicely. Can be used on its own or inside a list component. Best used with subcomponents (see below).
-
-## Usage
-
-```html
-<v-list-item>
-	<v-list-item-title>Hello, world!</v-list-item-title>
-</v-list-item>
-```
-
-## Props
-
-| Prop       | Description                                                          | Default |
-|------------|----------------------------------------------------------------------|---------|
-| `dense`    | Removes some padding to make the individual list item shorter        | `false` |
-| `lines`    | Sets if the list item will support `1`, `2`, or `3` lines of content | `null`  |
-| `to`       | Render as vue router-link with to link                               | `null`  |
-| `disabled` | Disable the list item                                                | `false` |
-| `active`   | Enable the list item's active state                                  | `false` |
-| `exact`    | Set the `exact` prop on router-link. Used with `to`                  | `false` |
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description       | Data |
-| --------- | ----------------- | ---- |
-| _default_ | List item content |      |
-
-## CSS Variables
-
-| Variable                                    | Default                                                                 |
-| ------------------------------------------- | ----------------------------------------------------------------------- |
-| `--v-list-item-one-line-min-height`         | `48px`                                                                  |
-| `--v-list-item-two-line-min-height`         | `60px`                                                                  |
-| `--v-list-item-three-line-min-height`       | `76px`                                                                  |
-| `--v-list-item-one-line-min-height-dense`   | `40px`                                                                  |
-| `--v-list-item-two-line-min-height-dense`   | `48px`                                                                  |
-| `--v-list-item-three-line-min-height-dense` | `64px`                                                                  |
-| `--v-list-item-padding`                     | `0 16px 0 calc(16px + var(--v-list-item-indent, 0px))`                  |
-| `--v-list-item-min-width`                   | `none`                                                                  |
-| `--v-list-item-max-width`                   | `none`                                                                  |
-| `--v-list-item-min-height`                  | `var(--v-list-item-one-line-min-height)`                                |
-| `--v-list-item-max-height`                  | `auto`                                                                  |
-| `--v-list-item-border-radius`               | `0`                                                                     |
-| `--v-list-item-margin-bottom`               | `0`                                                                     |
-| `--v-list-item-color`                       | `var(--v-list-color, var(--foreground-normal))`                          |
-| `--v-list-item-color-hover`                 | `var(--v-list-color-hover, var(--foreground-normal))`                    |
-| `--v-list-item-color-active`                | `var(--v-list-color-active, var(--foreground-normal))`                   |
-| `--v-list-item-background-color-hover`      | `var(--v-list-background-color-hover, var(--background-normal-alt))`   |
-| `--v-list-item-background-color-active`     | `var(--v-list-background-color-active, var(--background-normal-alt))` |
-
----
-
-# List Item Content
-
-A wrapper for the main text content of a list item. It adds some padding and helps control overflow. The parent of `v-list-title` and `v-list-subtitle` components, it's also the main controller of the `dense` option on lists.
-
-## Usage
-
-```html
-<v-list-item-content>Hello, world!</v-list-item-content>
-```
-
-## Props
-
-n/a
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description               | Data |
-| --------- | ------------------------- | ---- |
-| _default_ | List item content content |      |
-
-## CSS Variables
-
-| Variable                        | Default  |
-| ------------------------------- | -------- |
-| `--v-list-item-content-padding` | `12px 0` |
-
----
-
-# List Item Title
-
-Wrapper that adds typographic styling and margin for the subtitle/description of the list item. Responsive to `dense` and `threeLine` props.
-
-## Usage
-
-```html
-<v-list-item-title>Hello, world</v-list-item-title>
-```
-
-## Props
-
-n/a
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description             | Data |
-| --------- | ----------------------- | ---- |
-| _default_ | List item title content |      |
-
-## CSS Variables
-
-n/a
-
----
-
-# List Item Subtitle
-
-Wrapper that adds typographic styling and margin for the subtitle/description of the list item. Responsive to `dense` and `threeLine` props.
-
-## Usage
-
-```html
-<v-list-item-subtitle>This is the subtitle</v-list-item-subtitle>
-```
-
-## Props
-
-n/a
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description                | Data |
-| --------- | -------------------------- | ---- |
-| _default_ | List item subtitle content |      |
-
-## CSS Variables
-
-n/a
-
----
-
-# List Item Icon
-
-Wrapper for icon, action, or avatar type elements in a list item. Can be used on the left or right of an item.
-
-## Usage
-
-```html
-<v-list-item-icon>
-	<v-icon name="person" />
-</v-list-item-icon>
-```
-
-## Props
-
-| Prop     | Description                                                         | Default |
-| -------- | ------------------------------------------------------------------- | ------- |
-| `center` | Whether to center the element (good for action elements or avatars) | `false` |
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description            | Data |
-| --------- | ---------------------- | ---- |
-| _default_ | List item icon content |      |
-
-## CSS Variables
-
-n/a
-
----
-
-# List Group
-
-Provides the ability to make a collapsable (sub)group of list items, within a list or independently. List groups can be nested to an arbitrary depth.
-
-```html
-<v-list>
-	<!-- Root level items -->
-	<v-list-item />
-	<v-list-item />
-
-	<v-list-group>
-		<template v-slot:activator>
-			... Click me to expand! ...
-		</template>
-
-		<v-list-item v-for="item in dropDownItems">
-			...item content etc.
-		</v-list-item>
-
-		<v-list-group>
-			<template v-slot:activator>
-				... Click me to expand this subgroup! ...
-			</template>
-
-			<v-list-item />
-			<v-list-item />
-
-			<v-list-group>
-				<template v-slot:activator>
-					... Click me to expand next subgroup! ...
-				</template>
-
-				<v-list-item v-for="item in subGroupDropdownItems">
-				</v-list-item>
-			</v-list-group>
-		</v-list-group>
-	</v-list-group>
-</v-list>
-```
-
-## Props
-
-| Prop       | Description                                                                     | Default |
-|------------|---------------------------------------------------------------------------------|---------|
-| `multiple` | Allow multiple subgroups to be open at the same time                            | `true`  |
-| `to`       | Where to link to. This will only make the chevron toggle the group active state |         |
-| `active`   | Render the activitor item in the active state                                   | `false` |
-
-## Events
-
-n/a
-
-## Slots
-
-| Slot      | Description   | Data |
-| --------- | ------------- | ---- |
-| _default_ | Group content |      |
-
-## CSS Variables
-
-n/a
diff --git a/app/src/components/v-list/v-list-item-icon.vue b/app/src/components/v-list/v-list-item-icon.vue
index 033fb30c39..52a9184299 100644
--- a/app/src/components/v-list/v-list-item-icon.vue
+++ b/app/src/components/v-list/v-list-item-icon.vue
@@ -35,6 +35,7 @@ body {
 		&:first-child {
 			margin-right: 12px;
 		}
+
 		&:last-child {
 			margin-left: 12px;
 		}
@@ -44,31 +45,22 @@ body {
 		.v-list,
 		.v-list-item {
 			#{$this} {
+				--v-icon-color: var(--v-list-item-icon-color);
+
 				margin-top: 4px;
 				margin-bottom: 4px;
-				--v-icon-color: var(--v-list-item-icon-color);
+
 				&:not(:only-child) {
 					&:first-child {
 						margin-right: 8px;
 					}
+
 					&:last-child {
 						margin-left: 8px;
 					}
 				}
 			}
 
-			&.large {
-				&.three-line,
-				&.two-line {
-					#{$this} {
-						align-self: flex-start;
-						&.center {
-							align-self: center;
-						}
-					}
-				}
-			}
-
 			&.large #{$this} .v-icon {
 				--v-icon-color: none;
 			}
diff --git a/app/src/components/v-list/v-list-item-subtitle.vue b/app/src/components/v-list/v-list-item-subtitle.vue
deleted file mode 100644
index e28675f90c..0000000000
--- a/app/src/components/v-list/v-list-item-subtitle.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template functional>
-	<div class="v-list-item-subtitle">
-		<slot></slot>
-	</div>
-</template>
-
-<style lang="scss" scoped>
-.v-list-item-subtitle {
-	$this: &;
-
-	flex-basis: 100%;
-	flex-grow: 1;
-	flex-shrink: 1;
-	align-self: center;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-
-	@at-root {
-		.v-list,
-		.v-list-item,
-		.v-list .v-list-item {
-			&.one-line #{$this},
-			&.two-line #{$this} {
-				display: block;
-				white-space: nowrap;
-				-webkit-line-clamp: none;
-				-webkit-box-orient: none;
-			}
-			&.three-line #{$this} {
-				display: -webkit-box;
-				white-space: initial;
-				-webkit-line-clamp: 2;
-				-webkit-box-orient: vertical;
-			}
-		}
-	}
-}
-</style>
diff --git a/app/src/components/v-list/v-list-item-title.vue b/app/src/components/v-list/v-list-item-text.vue
similarity index 73%
rename from app/src/components/v-list/v-list-item-title.vue
rename to app/src/components/v-list/v-list-item-text.vue
index 39c7c7ba00..3fc14f3f10 100644
--- a/app/src/components/v-list/v-list-item-title.vue
+++ b/app/src/components/v-list/v-list-item-text.vue
@@ -1,11 +1,11 @@
 <template functional>
-	<div class="v-list-item-title type-text">
-		<slot></slot>
+	<div class="v-list-item-text type-text">
+		<slot />
 	</div>
 </template>
 
 <style lang="scss" scoped>
-.v-list-item-title {
+.v-list-item-text {
 	flex-basis: 100%;
 	flex-grow: 1;
 	flex-shrink: 1;
diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
index dc4ab6af97..0d7102f265 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list/v-list-item.vue
@@ -10,9 +10,6 @@
 			large,
 			dense,
 			link: isClickable,
-			'three-line': lines === 3,
-			'two-line': lines === 2,
-			'one-line': lines === 1,
 			disabled,
 			dashed,
 		}"
@@ -21,7 +18,7 @@
 		:target="component === 'a' ? '_blank' : null"
 		v-on="disabled === false && $listeners"
 	>
-		<slot></slot>
+		<slot />
 	</component>
 </template>
 
@@ -39,10 +36,6 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		lines: {
-			type: Number as PropType<1 | 2 | 3>,
-			default: null,
-		},
 		to: {
 			type: [String, Object] as PropType<string | Location>,
 			default: null,
@@ -88,18 +81,14 @@ export default defineComponent({
 
 <style>
 body {
-	--v-list-item-one-line-min-height-large: 40px;
-	--v-list-item-two-line-min-height-large: 52px;
-	--v-list-item-three-line-min-height-large: 64px;
-	--v-list-item-one-line-min-height: 32px;
-	--v-list-item-two-line-min-height: 36px;
-	--v-list-item-three-line-min-height: 52px;
+	--v-list-item-min-height-large: 40px;
+	--v-list-item-min-height: 32px;
 	--v-list-item-padding-large: 0 16px 0 calc(16px + var(--v-list-item-indent, 0px));
 	--v-list-item-padding: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
 	--v-list-item-margin: 2px 0;
 	--v-list-item-min-width: none;
 	--v-list-item-max-width: none;
-	--v-list-item-min-height: var(--v-list-item-one-line-min-height);
+	--v-list-item-min-height: var(--v-list-item-min-height);
 	--v-list-item-max-height: auto;
 	--v-list-item-border-radius: var(--border-radius);
 	--v-list-item-margin-bottom: 0;
@@ -176,13 +165,13 @@ body {
 	}
 
 	&.dense {
-		::v-deep .v-list-item-title {
+		::v-deep .v-list-item-text {
 			color: var(--foreground-subdued);
 		}
 
 		&:hover,
 		&.active {
-			::v-deep .v-list-item-title {
+			::v-deep .v-list-item-text {
 				color: var(--primary);
 			}
 		}
@@ -192,22 +181,12 @@ body {
 		.v-list,
 		#{$this},
 		.v-list #{$this} {
-			--v-list-item-min-height: var(--v-list-item-one-line-min-height);
-			&.one-line {
-				--v-list-item-min-height: var(--v-list-item-one-line-min-height);
-			}
-			&.two-line {
-				--v-list-item-min-height: var(--v-list-item-two-line-min-height);
-			}
-			&.three-line {
-				--v-list-item-min-height: var(--v-list-item-three-line-min-height);
-			}
+			--v-list-item-min-height: var(--v-list-item-min-height);
 		}
 
 		.v-list.large {
 			#{$this}:not(.dense) {
-				--v-list-item-min-height: var(--v-list-item-one-line-min-height-large);
-
+				--v-list-item-min-height: var(--v-list-item-min-height-large);
 				--v-list-item-padding-large: 0 8px;
 				--v-list-item-border-radius: 4px;
 
@@ -217,16 +196,6 @@ body {
 				&:not(:last-child):not(:only-child) {
 					margin-bottom: 4px;
 				}
-
-				&.one-line {
-					--v-list-item-min-height: var(--v-list-item-one-line-min-height-large);
-				}
-				&.two-line {
-					--v-list-item-min-height: var(--v-list-item-two-line-min-height-large);
-				}
-				&.three-line {
-					--v-list-item-min-height: var(--v-list-item-three-line-min-height-large);
-				}
 			}
 		}
 	}
diff --git a/app/src/components/v-list/v-list.story.ts b/app/src/components/v-list/v-list.story.ts
deleted file mode 100644
index a3bad36cfe..0000000000
--- a/app/src/components/v-list/v-list.story.ts
+++ /dev/null
@@ -1,442 +0,0 @@
-import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-import Vue from 'vue';
-import VList from './v-list.vue';
-import VListItem from './v-list-item.vue';
-import withPadding from '../../../.storybook/decorators/with-padding';
-import VListItemContent from './v-list-item-content.vue';
-import VListItemTitle from './v-list-item-title.vue';
-import VListItemSubTitle from './v-list-item-subtitle.vue';
-import VListItemIcon from './v-list-item-icon.vue';
-import VListGroup from './v-list-group.vue';
-import VSheet from '../v-sheet';
-import VCheckbox from '../v-checkbox';
-import VueRouter from 'vue-router';
-import markdown from './readme.md';
-import { defineComponent, reactive } from '@vue/composition-api';
-import withBackground from '../../../.storybook/decorators/with-background';
-
-Vue.component('v-list', VList);
-Vue.component('v-list-item', VListItem);
-Vue.component('v-list-item-content', VListItemContent);
-Vue.component('v-list-item-title', VListItemTitle);
-Vue.component('v-list-item-subtitle', VListItemSubTitle);
-Vue.component('v-list-item-icon', VListItemIcon);
-Vue.component('v-checkbox', VCheckbox);
-Vue.component('v-list-group', VListGroup);
-
-Vue.component('v-sheet', VSheet);
-
-Vue.use(VueRouter);
-const router = new VueRouter();
-
-export default {
-	title: 'Components / List',
-	component: VList,
-	decorators: [withKnobs, withPadding, withBackground],
-	parameters: {
-		notes: markdown,
-	},
-};
-
-export const basic = () =>
-	defineComponent({
-		props: {
-			dense: {
-				default: boolean('Dense', false, 'Full List'),
-			},
-			dense0: {
-				default: boolean('Dense', false, 'List Item 0'),
-			},
-			dense1: {
-				default: boolean('Dense', false, 'List Item 1'),
-			},
-			dense2: {
-				default: boolean('Dense', false, 'List Item 2'),
-			},
-			dense3: {
-				default: boolean('Dense', false, 'List Item 3'),
-			},
-			nav: {
-				default: boolean('Nav', false, 'Full List'),
-			},
-		},
-		setup() {
-			return {
-				items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 200px; ">
-		<v-list :dense="dense" :nav="nav">
-			<v-list-item v-for="(item, i) in items" :dense="$props['dense' + i]" :key="i">
-				<v-list-item-content>
-					{{ item }}
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-sheet>`,
-	});
-
-export const listGroups = () =>
-	defineComponent({
-		router: router,
-		props: {
-			multiple: {
-				default: boolean('Multiple', true),
-			},
-			multipleGroup: {
-				default: boolean('Multiple (in the nested groups)', true),
-			},
-		},
-		setup() {
-			return {
-				items: [0, 1, 2, 3],
-			};
-		},
-		template: `
-			<v-sheet style="--v-sheet-max-width: 600px;">
-				<v-list :multiple="multiple">
-					<v-list-item>
-						<v-list-item-icon>
-							<v-icon name="home" />
-						</v-list-item-icon>
-						<v-list-item-title>Home</v-list-item-title>
-					</v-list-item>
-					<v-list-group :multiple="multipleGroup">
-						<template v-slot:activator>
-							<v-list-item-icon>
-								<v-icon name="box" />
-							</v-list-item-icon>
-							<v-list-item-title>Collections</v-list-item-title>
-						</template>
-
-						<v-list-item>
-							<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-							<v-list-item-title>Users</v-list-item-title>
-						</v-list-item>
-					</v-list-group>
-					<v-list-group :multiple="multipleGroup">
-						<template v-slot:activator>
-							<v-list-item-icon>
-								<v-icon name="folder" />
-							</v-list-item-icon>
-							<v-list-item-title>Files</v-list-item-title>
-						</template>
-
-						<v-list-group :multiple="multipleGroup">
-							<template v-slot:activator>
-								<v-list-item-icon>
-									<v-icon name="cloud_download" />
-								</v-list-item-icon>
-								<v-list-item-title>Download</v-list-item-title>
-							</template>
-
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 1</v-list-item-title>
-							</v-list-item>
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 2</v-list-item-title>
-							</v-list-item>
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 3</v-list-item-title>
-							</v-list-item>
-						</v-list-group>
-
-						<v-list-group :multiple="multipleGroup">
-							<template v-slot:activator>
-								<v-list-item-icon>
-									<v-icon name="cloud_upload" />
-								</v-list-item-icon>
-								<v-list-item-title>Upload</v-list-item-title>
-							</template>
-
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 1</v-list-item-title>
-							</v-list-item>
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 2</v-list-item-title>
-							</v-list-item>
-							<v-list-item>
-								<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-								<v-list-item-title>Section 3</v-list-item-title>
-							</v-list-item>
-
-							<v-list-group :multiple="multipleGroup">
-								<template v-slot:activator>
-									<v-list-item-icon>
-										<v-icon name="attach_file" />
-									</v-list-item-icon>
-									<v-list-item-title>Sub-sub-sub section</v-list-item-title>
-								</template>
-
-								<v-list-item>
-									<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-									<v-list-item-title>Section 1</v-list-item-title>
-								</v-list-item>
-								<v-list-item>
-									<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-									<v-list-item-title>Section 2</v-list-item-title>
-								</v-list-item>
-								<v-list-item>
-									<v-list-item-icon><v-icon name="person" /></v-list-item-icon>
-									<v-list-item-title>Section 3</v-list-item-title>
-								</v-list-item>
-							</v-list-group>
-						</v-list-group>
-					</v-list-group>
-				</v-list>
-			</v-sheet>
-		`,
-	});
-
-export const withSubtitle = () =>
-	defineComponent({
-		router: router,
-		props: {
-			dense: {
-				default: boolean('Dense', false, 'Full List'),
-			},
-			dense0: {
-				default: boolean('Dense', false, 'List Item 0'),
-			},
-			dense1: {
-				default: boolean('Dense', false, 'List Item 1'),
-			},
-			dense2: {
-				default: boolean('Dense', false, 'List Item 2'),
-			},
-			dense3: {
-				default: boolean('Dense', false, 'List Item 3'),
-			},
-			lines0: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 0'),
-			},
-			lines1: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 1'),
-			},
-			lines2: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 2'),
-			},
-			lines3: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'List Item 3'),
-			},
-			nav: {
-				default: boolean('Nav', false, 'Full List'),
-			},
-			dynamicSubtitle: {
-				default: text('Subtitle 3', '', 'Full List'),
-			},
-			lines: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'Full List'),
-			},
-		},
-		setup() {
-			return {
-				items: {
-					0: { title: 'List Item 0', subtitle: 'This is a list item subtitle.' },
-					1: {
-						title: 'List Item 1',
-						subtitle:
-							"This is another example of a list item subtitle. But this time, it's pretty long so you can see who two-line and three-line wrapping work",
-					},
-					2: {
-						title: 'List Item 2',
-						subtitle: "This is yet another example of a list subtitle. It's of medium length.",
-					},
-				},
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 400px; ">
-		<v-list :dense="dense" :nav="nav" :lines="lines">
-			<v-list-item v-for="(item, i) in items" :lines="$props['lines' + i]" :dense="$props['dense' + i]" :key="i" :to="'/' + i">
-				<v-list-item-content>
-					<v-list-item-title>{{ item.title }}</v-list-item-title>
-					<v-list-item-subtitle>{{ item.subtitle }}</v-list-item-subtitle>
-				</v-list-item-content>
-			</v-list-item>
-			<v-list-item :dense="dense3" :lines="lines3" :key=3 :to="'/' + 3">
-				<v-list-item-content>
-					<v-list-item-title>List Item 3</v-list-item-title>
-					<v-list-item-subtitle>{{ dynamicSubtitle }}</v-list-item-subtitle>
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-sheet>`,
-	});
-
-export const withIconsToo = () =>
-	defineComponent({
-		router: router,
-		props: {
-			dense: {
-				default: boolean('Dense', false, 'Full List'),
-			},
-			nav: {
-				default: boolean('Nav', false, 'Full List'),
-			},
-			subtitle: {
-				default: boolean('Subtitle', false, 'Full List'),
-			},
-			lines: {
-				default: select('Lines', { One: 1, Two: 2, Three: 3, Off: null }, null, 'Full List'),
-			},
-			leftIconCenter: {
-				default: boolean('Left Icon Centered', false, 'Full List'),
-			},
-			rightIconCenter: {
-				default: boolean('Right Icon Centered', true, 'Full List'),
-			},
-			leftIcon: {
-				default: boolean('Left Icon', true, 'Full List'),
-			},
-			rightIcon: {
-				default: boolean('Right Icon', false, 'Full List'),
-			},
-		},
-		setup() {
-			const onChange = action('change');
-			return {
-				onChange,
-				items: reactive({
-					0: {
-						title: 'List Item 0',
-						subtitle: 'This is a list item subtitle.',
-						checked: false,
-					},
-					1: {
-						title: 'List Item 1',
-						subtitle:
-							"This is another example of a list item subtitle. But this time, it's pretty long so you can see who two-line and three-line wrapping work",
-						checked: false,
-					},
-					2: {
-						title: 'List Item 2',
-						subtitle: "This is yet another example of a list subtitle. It's of medium length.",
-						checked: false,
-					},
-					3: {
-						title: 'List Item 3',
-						subtitle: '',
-						checked: false,
-					},
-				}),
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 400px; ">
-		<v-list :dense="dense" :nav="nav" :lines="lines">
-			<v-list-item v-for="(item, i) in items" :key="i" :to="'/' + i">
-				<v-list-item-icon v-if="leftIcon" :center="leftIconCenter">
-					<v-icon name="info" />
-				</v-list-item-icon>
-				<v-list-item-content>
-					<v-list-item-title>{{ item.title }}</v-list-item-title>
-					<v-list-item-subtitle v-if="subtitle">{{ item.subtitle }}</v-list-item-subtitle>
-				</v-list-item-content>
-				<v-list-item-icon v-if="rightIcon" :center="rightIconCenter">
-					<v-checkbox v-model="item.checked" @change="onChange"/>
-				</v-list-item-icon>
-			</v-list-item>
-		</v-list>
-	</v-sheet>`,
-	});
-
-export const withLinks = () =>
-	defineComponent({
-		router: router,
-		props: {
-			dense: {
-				default: boolean('Dense', false, 'Full List'),
-			},
-			dense0: {
-				default: boolean('Dense', false, 'List Item 0'),
-			},
-			dense1: {
-				default: boolean('Dense', false, 'List Item 1'),
-			},
-			dense2: {
-				default: boolean('Dense', false, 'List Item 2'),
-			},
-			dense3: {
-				default: boolean('Dense', false, 'List Item 3'),
-			},
-			nav: {
-				default: boolean('Nav', false, 'Full List'),
-			},
-		},
-		setup() {
-			return {
-				items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 200px; ">
-		<v-list :dense="dense" :nav="nav">
-			<v-list-item v-for="(item, i) in items" :dense="$props['dense' + i]" :key="i" :to="'/' + i">
-				<v-list-item-content>
-					{{ item }}
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-sheet>`,
-	});
-
-export const withClicks = () =>
-	defineComponent({
-		props: {},
-		setup() {
-			return {
-				items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
-				clickHandler: action('onClick'),
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 200px; ">
-		<v-list>
-			<v-list-item v-for="(item, i) in items" :key="i" @click="clickHandler">
-				<v-list-item-content>
-					{{ item }}
-				</v-list-item-content>
-			</v-list-item>
-		</v-list>
-	</v-sheet>`,
-	});
-
-export const orphanListItems = () =>
-	defineComponent({
-		router: router,
-		props: {
-			dense0: {
-				default: boolean('Dense', false, 'List Item 0'),
-			},
-			dense1: {
-				default: boolean('Dense', false, 'List Item 1'),
-			},
-			dense2: {
-				default: boolean('Dense', false, 'List Item 2'),
-			},
-			dense3: {
-				default: boolean('Dense', false, 'List Item 3'),
-			},
-		},
-		setup() {
-			return {
-				items: ['Item 0', 'Item 1', 'Item 2', 'Item 3'],
-			};
-		},
-		template: `
-	<v-sheet style="--v-sheet-max-width: 200px; ">
-		<v-list-item v-for="(item, i) in items" :dense="$props['dense' + i]" :key="i" :to="'/' + i">
-			<v-list-item-content>
-				{{item}}
-			</v-list-item-content>
-		</v-list-item>
-	</v-sheet>`,
-	});
diff --git a/app/src/components/v-list/v-list.test.ts b/app/src/components/v-list/v-list.test.ts
deleted file mode 100644
index 2f2d0fd0fa..0000000000
--- a/app/src/components/v-list/v-list.test.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-import { mount, createLocalVue } from '@vue/test-utils';
-import VueCompositionAPI from '@vue/composition-api';
-import VueRouter from 'vue-router';
-import router from '@/router';
-import VList from './v-list.vue';
-import VListItem from './v-list-item.vue';
-import VListItemIcon from './v-list-item-icon.vue';
-import VListGroup from './v-list-group.vue';
-import VIcon from '@/components/v-icon';
-import TransitionExpand from '@/components/transition/expand';
-
-const localVue = createLocalVue();
-localVue.use(VueCompositionAPI);
-localVue.use(VueRouter);
-localVue.component('v-list-item', VListItem);
-localVue.component('v-list', VList);
-localVue.component('v-list-item-icon', VListItemIcon);
-localVue.component('v-list-group', VListGroup);
-localVue.component('v-icon', VIcon);
-localVue.component('transition-expand', TransitionExpand);
-
-describe('List', () => {
-	it('Renders the provided markup in the default slot', () => {
-		const component = mount(VList, {
-			localVue,
-			slots: {
-				default: `<v-list-item>Item Text</v-list-item>`,
-			},
-		});
-
-		expect(component.text()).toContain('Item Text');
-	});
-
-	it('Adds the dense class for dense lists', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				dense: true,
-			},
-		});
-
-		expect(component.classes()).toContain('dense');
-	});
-
-	it('Adds the three-line class for lines = 3', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				lines: 3,
-			},
-			slots: {
-				default: `<v-list-item/>
-						<v-list-item/>
-						<v-list-item/>`,
-			},
-		});
-
-		expect(component.classes()).toContain('three-line');
-	});
-
-	it('Adds the two-line class for lines = 2', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				lines: 2,
-			},
-			slots: {
-				default: `<v-list-item/>
-						<v-list-item/>
-						<v-list-item/>`,
-			},
-		});
-
-		expect(component.classes()).toContain('two-line');
-	});
-
-	it('Adds the two-line class to only one element, rest is 3', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				lines: 3,
-			},
-			slots: {
-				default: `<v-list-item :lines="2"/>
-						<v-list-item/>
-						<v-list-item/>`,
-			},
-		});
-
-		expect(component.find('.v-list-item:first-of-type').classes()).toContain('two-line');
-		expect(component.classes()).toContain('three-line');
-	});
-
-	it('Adds the nav class for nav lists', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				nav: true,
-			},
-		});
-
-		expect(component.classes()).toContain('nav');
-	});
-
-	it('Adds the centered class for cenetered icons in items', () => {
-		const component = mount(VListItem, {
-			localVue,
-			slots: {
-				default: `<v-list-item-icon center/>`,
-			},
-			propsData: {
-				nav: true,
-			},
-		});
-
-		expect(component.find('.v-list-item-icon').classes()).toContain('center');
-	});
-
-	it('Has the right number of list items', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				dense: false,
-			},
-			slots: {
-				default: `<v-list-item/>
-						<v-list-item/>
-						<v-list-item/>`,
-			},
-		});
-
-		expect(component.findAll('.v-list-item').length).toEqual(3);
-	});
-
-	it('Adds the dense class to one list-item, but not the other', () => {
-		const component = mount(VList, {
-			localVue,
-			propsData: {
-				dense: false,
-			},
-			slots: {
-				default: `<v-list-item dense/>
-						<v-list-item/>`,
-			},
-		});
-
-		expect(component.find('.v-list-item:first-of-type').classes()).toContain('dense');
-		expect(component.find('.v-list-item:nth-of-type(2)').classes()).not.toContain('dense');
-	});
-
-	it('Item has the link class when to prop is set', () => {
-		const component = mount(VListItem, {
-			localVue,
-			router: router,
-			propsData: {
-				to: '/',
-			},
-		});
-
-		expect(component.classes()).toContain('link');
-	});
-
-	it('Renders as a router-link if the to prop is set', () => {
-		const component = mount(VListItem, {
-			localVue,
-			router: router,
-			propsData: {
-				to: '/',
-			},
-		});
-
-		expect((component.vm as any).component).toBe('router-link');
-	});
-
-	it('Has link class when onClick is set', () => {
-		const onClick = jest.fn();
-
-		const component = mount(VListItem, {
-			localVue,
-			listeners: {
-				click: onClick,
-			},
-		});
-
-		expect(component.classes()).toContain('link');
-	});
-
-	it('Click event fires correctly', () => {
-		const onClick = jest.fn();
-		const component = mount(VListItem, {
-			localVue,
-			listeners: {
-				click: onClick,
-			},
-		});
-
-		component.find('.v-list-item').trigger('click');
-		expect(onClick).toHaveBeenCalled();
-	});
-
-	it('Opens a list group when activator item is clicked', async () => {
-		const component = mount(VList, {
-			localVue,
-			slots: {
-				default: `
-						<v-list-group>
-							<template v-slot:activator>
-								Click me!
-							</template>
-							<v-list-item class="test"/>
-							<v-list-item/>
-						</v-list-group>
-						<v-list-item/>
-						<v-list-item/>
-						`,
-			},
-		});
-		expect(component.find('.test').isVisible()).toBe(false);
-		component.find('.activator').trigger('click');
-		await component.vm.$nextTick();
-		expect(component.find('.test').isVisible()).toBe(true);
-	});
-});
diff --git a/app/src/components/v-list/v-list.vue b/app/src/components/v-list/v-list.vue
index 890e52015e..9a6391a092 100644
--- a/app/src/components/v-list/v-list.vue
+++ b/app/src/components/v-list/v-list.vue
@@ -1,14 +1,6 @@
 <template>
-	<ul
-		class="v-list"
-		:class="{
-			large,
-			'three-line': lines === 3,
-			'two-line': lines === 2,
-			'one-line': lines === 1,
-		}"
-	>
-		<slot></slot>
+	<ul class="v-list" :class="{ large }">
+		<slot />
 	</ul>
 </template>
 
@@ -22,10 +14,6 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		lines: {
-			type: Number as PropType<1 | 2 | 3>,
-			default: null,
-		},
 		multiple: {
 			type: Boolean,
 			default: true,
diff --git a/app/src/components/v-select/v-select.test.ts b/app/src/components/v-select/v-select.test.ts
index a92e91dba4..dc4ec814f1 100644
--- a/app/src/components/v-select/v-select.test.ts
+++ b/app/src/components/v-select/v-select.test.ts
@@ -3,7 +3,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
 
 import VMenu from '@/components/v-menu/';
-import VList, { VListItem, VListItemContent, VListItemTitle } from '@/components/v-list/';
+import VList, { VListItem, VListItemContent, VListItemText } from '@/components/v-list/';
 import VCheckbox from '@/components/v-checkbox/';
 
 const localVue = createLocalVue();
@@ -12,7 +12,7 @@ localVue.component('v-menu', VMenu);
 localVue.component('v-list', VList);
 localVue.component('v-list-item', VListItem);
 localVue.component('v-list-item-content', VListItemContent);
-localVue.component('v-list-item-title', VListItemTitle);
+localVue.component('v-list-item-text', VListItemText);
 localVue.component('v-checkbox', VCheckbox);
 
 describe('Components / Select', () => {
diff --git a/app/src/modules/docs/components/navigation-item.vue b/app/src/modules/docs/components/navigation-item.vue
index 1fd77130b4..4b42491eac 100644
--- a/app/src/modules/docs/components/navigation-item.vue
+++ b/app/src/modules/docs/components/navigation-item.vue
@@ -2,7 +2,7 @@
 	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense" :subdued="subdued">
 		<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 		<v-list-item-content>
-			<v-list-item-title>{{ section.name }}</v-list-item-title>
+			<v-list-item-text>{{ section.name }}</v-list-item-text>
 		</v-list-item-content>
 	</v-list-item>
 	<div v-else-if="section.flat === true">
@@ -18,7 +18,7 @@
 		<template #activator>
 			<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-title>{{ section.name }}</v-list-item-title>
+				<v-list-item-text>{{ section.name }}</v-list-item-text>
 			</v-list-item-content>
 		</template>
 		<navigation-list-item
diff --git a/app/src/modules/settings/components/navigation.vue b/app/src/modules/settings/components/navigation.vue
index ec7286396d..80283e553b 100644
--- a/app/src/modules/settings/components/navigation.vue
+++ b/app/src/modules/settings/components/navigation.vue
@@ -3,7 +3,7 @@
 		<v-list-item v-for="item in navItems" :to="item.to" :key="item.to">
 			<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-title>{{ item.name }}</v-list-item-title>
+				<v-list-item-text>{{ item.name }}</v-list-item-text>
 			</v-list-item-content>
 		</v-list-item>
 
@@ -12,14 +12,14 @@
 		<v-list-item v-for="item in externalItems" :href="item.href" :key="item.href">
 			<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-title>{{ item.name }}</v-list-item-title>
+				<v-list-item-text>{{ item.name }}</v-list-item-text>
 			</v-list-item-content>
 		</v-list-item>
 
 		<v-list-item href="https://github.com/directus/directus/releases" class="version">
 			<v-list-item-icon><v-icon name="directus" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-title class="version">Directus {{ version }}</v-list-item-title>
+				<v-list-item-text class="version">Directus {{ version }}</v-list-item-text>
 			</v-list-item-content>
 		</v-list-item>
 	</v-list>

From 486598c496fe64eae7e8699cc1e1827b80aacefe Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 6 Oct 2020 17:08:34 -0400
Subject: [PATCH 8/9] Tweak spacing of list

---
 app/src/components/v-list/v-list-item.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
index 0d7102f265..f088a31625 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list/v-list-item.vue
@@ -83,8 +83,9 @@ export default defineComponent({
 body {
 	--v-list-item-min-height-large: 40px;
 	--v-list-item-min-height: 32px;
-	--v-list-item-padding-large: 0 16px 0 calc(16px + var(--v-list-item-indent, 0px));
+	--v-list-item-padding-large: 0 8px;
 	--v-list-item-padding: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
+	--v-list-item-margin-large: 4px 0;
 	--v-list-item-margin: 2px 0;
 	--v-list-item-min-width: none;
 	--v-list-item-max-width: none;
@@ -187,14 +188,22 @@ body {
 		.v-list.large {
 			#{$this}:not(.dense) {
 				--v-list-item-min-height: var(--v-list-item-min-height-large);
-				--v-list-item-padding-large: 0 8px;
 				--v-list-item-border-radius: 4px;
 
 				margin: var(--v-list-item-margin-large);
 				padding: var(--v-list-item-padding-large);
 
-				&:not(:last-child):not(:only-child) {
-					margin-bottom: 4px;
+				&:first-child {
+					margin-top: 0;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+
+				&:only-child {
+					margin-top: 0;
+					margin-bottom: 0;
 				}
 			}
 		}

From b15539b5d3fd5e9840e1170c3b1e76ef35c2dbf5 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 6 Oct 2020 17:12:42 -0400
Subject: [PATCH 9/9] Remove wrong import

---
 app/src/components/register.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index 37167caa28..f7a3d66826 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -20,15 +20,7 @@ import VIcon from './v-icon/';
 import VInfo from './v-info/';
 import VInput from './v-input/';
 import VItemGroup, { VItem } from './v-item-group';
-import VList, {
-	VListGroup,
-	VListItem,
-	VListItemContent,
-	VListItemHint,
-	VListItemIcon,
-	VListItemSubtitle,
-	VListItemText,
-} from './v-list/';
+import VList, { VListGroup, VListItem, VListItemContent, VListItemHint, VListItemIcon, VListItemText } from './v-list/';
 import VMenu from './v-menu/';
 import VModal from './v-modal/';
 import VModalHeading from './v-modal/v-modal-heading.vue';